library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add block blog post

Browse Source
This commit is contained in:
Jeremy Thomas 2021-01-24 11:51:55 +00:00
parent 157b64a566
commit a72acece76
1 changed files with 164 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

164
docs/_posts/2021-01-23-the-block-probably-bulmas-most-important-feature.md Normal file
View File

@ -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>.