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

Bulma v9 website (#3249)

Browse Source 
* Add Bulma v9

* Add vendor dependencies

* Fix native

* Fix sponsors

* Add style attribute
This commit is contained in:
Jeremy Thomas
2021-01-27 23:30:42 +00:00
committed by GitHub
parent c5edaea84f
commit 08ef4df2c0
1963 changed files with 157468 additions and 9452 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
docs/documentation/elements/content.html
View File

@@ -178,6 +178,16 @@ meta:
<p>This <code>content</code> class can be used in <em>any</em> context where you just want to (or can only) write some <strong>text</strong>. For example, it's used for the paragraph you're currently reading.</p>
</div>
{% include elements/anchor.html name="Full example" %}
<div class="content">
Here is an example of the <code>content</code> Bulma element with all the supported HTML tags:
</div>
{% include elements/snippet.html content=content_example %}
{% include elements/anchor.html name="Ordered lists alternatives" %}
<div class="content">
<p>
<strong>Ordered lists</strong> <code>&lt;ol&gt;</code> support different <strong>types</strong> of items markers. To modify them, use either:
@@ -201,7 +211,9 @@ meta:
<div class="content">
<p>You can use the <code>is-small</code>, <code>is-medium</code> and <code>is-large</code> modifiers to change the font size.</p>
</div>
<div class="bd-example">
{% capture small_example %}
<div class="content is-small">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.</p>
@@ -214,8 +226,24 @@ meta:
<li>Ut non enim metus.</li>
</ul>
</div>
</div>
<div class="bd-example">
{% endcapture %}
{% capture normal_example %}
<div class="content is-normal">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.</p>
<h2>Second level</h2>
<p>Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
<ul>
<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
<li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
<li>Ut non enim metus.</li>
</ul>
</div>
{% endcapture %}
{% capture medium_example %}
<div class="content is-medium">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.</p>
@@ -228,8 +256,9 @@ meta:
<li>Ut non enim metus.</li>
</ul>
</div>
</div>
<div class="bd-example">
{% endcapture %}
{% capture large_example %}
<div class="content is-large">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.</p>
@@ -242,6 +271,30 @@ meta:
<li>Ut non enim metus.</li>
</ul>
</div>
{% endcapture %}
<div class="content">
<h4>Small size <code>content</code></h4>
</div>
{% include elements/variables.html type='element' %}
{% include elements/snippet.html content=small_example %}
<div class="content">
<h4>Normal size <code>content</code> <em>(default)</em></h4>
</div>
{% include elements/snippet.html content=normal_example %}
<div class="content">
<h4>Medium size <code>content</code></h4>
</div>
{% include elements/snippet.html content=medium_example %}
<div class="content">
<h4>Large size <code>content</code></h4>
</div>
{% include elements/snippet.html content=large_example %}
{% include components/variables.html type='element' %}