Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-17 10:54:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Init v1

Browse Source
This commit is contained in:
Jeremy Thomas
2024-03-21 16:11:54 +00:00
parent 16f1b76881
commit 69877a652c
3261 changed files with 255369 additions and 108913 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
docs/documentation/elements/block.html
View File

@@ -1,19 +1,19 @@
---
title: Block
layout: documentation
layout: docs
theme: library
doc-tab: elements
doc-subtab: block
breadcrumb:
- home
- documentation
- elements
- elements-block
- home
- documentation
- elements
- elements-block
meta:
colors: false
sizes: false
variables: true
---
{% capture block_example %}
<div class="block">
This text is within a <strong>block</strong>.
@@ -134,31 +134,33 @@ meta:
<div class="content">
<p>
The <code>block</code> element is a simple <strong>spacer tool</strong>. It allows <strong>sibling</strong> HTML elements to have a consistent margin between them:
The <code>block</code> element is a simple <strong>spacer tool</strong>. It allows <strong>sibling</strong> HTML
elements to have a consistent margin between them:
</p>
</div>
{% include elements/snippet.html content=block_example %}
{% include docs/elements/snippet.html content=block_example %}
<div class="content">
<p>
As you can see, the first two blocks have a <code>margin-bottom</code> applied, but <strong>not the third one.</strong>. That is because Bulma applies a space on all blocks, <strong>except the last one</strong>. This means you can use as many blocks as you want, the spacing will only appear <strong>between them</strong>.
</p>
<p>
Without using <code>block</code>, the HTML elements would have no space between them:
As you can see, the first two blocks have a <code>margin-bottom</code> applied, but
<strong>not the third .</strong>. That is because Bulma applies a space on all blocks,
<strong>except the last one</strong>. This means you can use as many blocks as you want, the spacing will only
appear <strong>between them</strong>.
</p>
<p>Without using <code>block</code>, the HTML elements would have no space between them:</p>
</div>
{% include elements/snippet.html content=no_block_example %}
{% include docs/elements/snippet.html content=no_block_example %}
<!-- -->
{% include elements/anchor.html name="You're already using it" %}
{% include docs/elements/anchor.html name="You're already using it" %}
<div class="content">
<p>
As a matter of fact, you're <strong>already using</strong> the <code>block</code> without knowing it. Its CSS properties are <strong>shared</strong> across several Bulma elements and components:
As a matter of fact, you're <strong>already using</strong> the <code>block</code> without knowing it. Its CSS
properties are <strong>shared</strong> across several Bulma elements and components:
</p>
<ul>
@@ -176,13 +178,9 @@ meta:
<li><code>title</code></li>
</ul>
<p>
This is thanks to the <code>@extend %block</code> Sass placeholder feature.
</p>
<p>This is thanks to the <code>@extend %block</code> Sass placeholder feature.</p>
<p>
Here's how it would look like in comparison:
</p>
<p>Here's how it would look like in comparison:</p>
</div>
<div class="columns is-size-6">
@@ -196,26 +194,28 @@ meta:
<div class="content">
<p>
No matter which Bulma elements and components you are using, and no matter their order, they will have a <strong>consistent space</strong> between them.
No matter which Bulma elements and components you are using, and no matter their order, they will have a
<strong>consistent space</strong> between them.
</p>
</div>
<!-- -->
{% include elements/anchor.html name="One line of CSS" %}
{% include docs/elements/anchor.html name="One line of CSS" %}
<div class="content">
<p>
As you can see, the CSS of the <code>block</code> is very simple: it applies a <code>margin-bottom</code> on all siblings, <strong>except the last one</strong>.
As you can see, the CSS of the <code>block</code> is very simple: it applies a <code>margin-bottom</code> on all
siblings, <strong>except the last one</strong>.
</p>
</div>
{% highlight css %}{{ block_css }}{% endhighlight %}
{% highlight css %}
{{ block_css }}
{% endhighlight %}
<div class="content">
<p>
This prevents the last sibling from adding unnecessary space at the bottom.
</p>
<p>This prevents the last sibling from adding unnecessary space at the bottom.</p>
</div>
{% include components/variables.html type='element' %}