From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Sun, 24 Jan 2021 11:51:55 +0000 (+0000)
Subject: Add block blog post
X-Git-Tag: 0.9.2~5
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=a72acece7683294ec439ba35f08548a654c01cee;p=thirdparty%2Fbulma.git

Add block blog post
---

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 000000000..51bc1c87f
--- /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**:
+
+<div class="block is-size-6" style="margin-left: auto; margin-right: auto; max-width: 80%; padding: 1.5rem;">
+  <p class="title">Newsletter</p>
+
+  <div class="notification is-success">
+    451 new subscribers this month.
+  </div>
+
+  <table class="table is-bordered is-striped is-hoverable is-fullwidth">
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Email</th>
+        <th>Actions</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Alex</td>
+        <td>alex.smith@example.com</td>
+        <td><a>Edit</a> · <a>Delete</a></td>
+      </tr>
+      <tr>
+        <td>Sam</td>
+        <td>sam.rogers@example.com</td>
+        <td><a>Edit</a> · <a>Delete</a></td>
+      </tr>
+      <tr>
+        <td>Luke</td>
+        <td>hello.luke@example.com</td>
+        <td><a>Edit</a> · <a>Delete</a></td>
+      </tr>
+      <tr>
+        <td>Eli</td>
+        <td>eli.larry@example.com</td>
+        <td><a>Edit</a> · <a>Delete</a></td>
+      </tr>
+      <tr>
+        <td>Dan</td>
+        <td>dan.danny@example.com</td>
+        <td><a>Edit</a> · <a>Delete</a></td>
+      </tr>
+    </tbody>
+  </table>
+
+  <nav class="pagination" role="navigation" aria-label="pagination">
+    <a class="pagination-previous">Previous</a>
+    <a class="pagination-next">Next page</a>
+    <ul class="pagination-list ml-0 mt-0">
+      <li class="mt-0">
+        <a class="pagination-link" aria-label="Goto page 1">1</a>
+      </li>
+      <li class="mt-0">
+        <span class="pagination-ellipsis">&hellip;</span>
+      </li>
+      <li class="mt-0">
+        <a class="pagination-link" aria-label="Goto page 45">45</a>
+      </li>
+      <li class="mt-0">
+        <a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a>
+      </li>
+      <li class="mt-0">
+        <a class="pagination-link" aria-label="Goto page 47">47</a>
+      </li>
+      <li class="mt-0">
+        <span class="pagination-ellipsis">&hellip;</span>
+      </li>
+      <li class="mt-0">
+        <a class="pagination-link" aria-label="Goto page 86">86</a>
+      </li>
+    </ul>
+  </nav>
+</div>
+
+For comparison, if there was no spacing, here's what they would look like:
+
+<div class="block is-size-6" style="margin-left: auto; margin-right: auto; max-width: 80%; padding: 1.5rem;">
+  <p class="title mb-0">Newsletter</p>
+
+  <div class="notification is-success mb-0">
+    451 new subscribers this month.
+  </div>
+
+  <table class="table is-bordered is-striped is-hoverable is-fullwidth mb-0">
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Email</th>
+        <th>Actions</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Alex</td>
+        <td>alex.smith@example.com</td>
+        <td><a>Edit</a> · <a>Delete</a></td>
+      </tr>
+      <tr>
+        <td>Sam</td>
+        <td>sam.rogers@example.com</td>
+        <td><a>Edit</a> · <a>Delete</a></td>
+      </tr>
+      <tr>
+        <td>Luke</td>
+        <td>hello.luke@example.com</td>
+        <td><a>Edit</a> · <a>Delete</a></td>
+      </tr>
+      <tr>
+        <td>Eli</td>
+        <td>eli.larry@example.com</td>
+        <td><a>Edit</a> · <a>Delete</a></td>
+      </tr>
+      <tr>
+        <td>Dan</td>
+        <td>dan.danny@example.com</td>
+        <td><a>Edit</a> · <a>Delete</a></td>
+      </tr>
+    </tbody>
+  </table>
+
+  <nav class="pagination mb-0" role="navigation" aria-label="pagination">
+    <a class="pagination-previous">Previous</a>
+    <a class="pagination-next">Next page</a>
+    <ul class="pagination-list ml-0 mt-0">
+      <li class="mt-0">
+        <a class="pagination-link" aria-label="Goto page 1">1</a>
+      </li>
+      <li class="mt-0">
+        <span class="pagination-ellipsis">&hellip;</span>
+      </li>
+      <li class="mt-0">
+        <a class="pagination-link" aria-label="Goto page 45">45</a>
+      </li>
+      <li class="mt-0">
+        <a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a>
+      </li>
+      <li class="mt-0">
+        <a class="pagination-link" aria-label="Goto page 47">47</a>
+      </li>
+      <li class="mt-0">
+        <span class="pagination-ellipsis">&hellip;</span>
+      </li>
+      <li class="mt-0">
+        <a class="pagination-link" aria-label="Goto page 86">86</a>
+      </li>
+    </ul>
+  </nav>
+</div>
+
+This `block` element has always existed; only recently has there been a <a href="/documentation/elements/block/">dedicated documentation page</a>.