diff --git a/docs/_posts/2021-01-23-the-block-probably-bulmas-most-important-feature.md b/docs/_posts/2021-01-23-the-block-probably-bulmas-most-important-feature.md new file mode 100644 index 00000000..51bc1c87 --- /dev/null +++ b/docs/_posts/2021-01-23-the-block-probably-bulmas-most-important-feature.md @@ -0,0 +1,164 @@ +--- +title: 'The `.block`, probably Bulma’s most important feature' +layout: post +introduction: 'Automatic spacing for everything in Bulma' +color: 'danger' +name: 'The Bulma block' +icon: 'cube' +--- + +The Bulma `block` is a simple element but with a very powerful feature: it provides `1.5rem` margin at the bottom, if it's not the last child. + +It exists as its own `.block` CSS class, but its properties are also used on **many other Bulma components**. + +For example, if you were to combine a `notification`, and a `pagination`, they would be **automatically spaced evenly**: + +
+

Newsletter

+ +
+ 451 new subscribers this month. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameEmailActions
Alexalex.smith@example.comEdit · Delete
Samsam.rogers@example.comEdit · Delete
Lukehello.luke@example.comEdit · Delete
Elieli.larry@example.comEdit · Delete
Dandan.danny@example.comEdit · Delete
+ + +
+ +For comparison, if there was no spacing, here's what they would look like: + +
+

Newsletter

+ +
+ 451 new subscribers this month. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameEmailActions
Alexalex.smith@example.comEdit · Delete
Samsam.rogers@example.comEdit · Delete
Lukehello.luke@example.comEdit · Delete
Elieli.larry@example.comEdit · Delete
Dandan.danny@example.comEdit · Delete
+ + +
+ +This `block` element has always existed; only recently has there been a dedicated documentation page.