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

Organize partials

Browse Source
This commit is contained in:
Jeremy Thomas
2018-04-09 22:25:26 +01:00
parent a1c1909001
commit e8d4efb274
97 changed files with 691 additions and 835 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
docs/documentation/components/breadcrumb.html
View File

@@ -170,50 +170,50 @@ meta:
</div>
<hr>
{% include snippet.html content=breadcrumb_example horizontal=true clipped=true %}
{% include elements/snippet.html content=breadcrumb_example horizontal=true clipped=true %}
{% include anchor.html name="Alignment" %}
{% include elements/anchor.html name="Alignment" %}
<div class="content">
<p>For alternative alignments, use the <code>is-centered</code> and <code>is-right</code> modifiers on the <code>.breadcrumb</code> container.</p>
</div>
{% include snippet.html content=breadcrumb_centered_example horizontal=true clipped=true %}
{% include elements/snippet.html content=breadcrumb_centered_example horizontal=true clipped=true %}
{% include snippet.html content=breadcrumb_right_example horizontal=true clipped=true %}
{% include elements/snippet.html content=breadcrumb_right_example horizontal=true clipped=true %}
{% include anchor.html name="Icons" %}
{% include elements/anchor.html name="Icons" %}
<div class="content">
<p>You can use any of the <a href="https://fontawesome.com/" target="_blank">Font Awesome</a> <strong>icons</strong>.</p>
</div>
{% include snippet.html content=breadcrumb_icons_example horizontal=true clipped=true %}
{% include elements/snippet.html content=breadcrumb_icons_example horizontal=true clipped=true %}
{% include anchor.html name="Alternative separators" %}
{% include elements/anchor.html name="Alternative separators" %}
<div class="content">
<p>You can choose between <strong>4 additional separators</strong>: <code>has-arrow-separator</code> <code>has-bullet-separator</code> <code>has-dot-separator</code> and <code>has-succeeds-separator</code>.</p>
</div>
{% include snippet.html content=breadcrumb_arrow_example horizontal=true clipped=true %}
{% include elements/snippet.html content=breadcrumb_arrow_example horizontal=true clipped=true %}
{% include snippet.html content=breadcrumb_bullet_example horizontal=true clipped=true %}
{% include elements/snippet.html content=breadcrumb_bullet_example horizontal=true clipped=true %}
{% include snippet.html content=breadcrumb_dot_example horizontal=true clipped=true %}
{% include elements/snippet.html content=breadcrumb_dot_example horizontal=true clipped=true %}
{% include snippet.html content=breadcrumb_succeeds_example horizontal=true clipped=true %}
{% include elements/snippet.html content=breadcrumb_succeeds_example horizontal=true clipped=true %}
{% include anchor.html name="Sizes" %}
{% include elements/anchor.html name="Sizes" %}
<div class="content">
<p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
</div>
{% include snippet.html content=breadcrumb_small_example horizontal=true clipped=true %}
{% include elements/snippet.html content=breadcrumb_small_example horizontal=true clipped=true %}
{% include snippet.html content=breadcrumb_medium_example horizontal=true clipped=true %}
{% include elements/snippet.html content=breadcrumb_medium_example horizontal=true clipped=true %}
{% include snippet.html content=breadcrumb_large_example horizontal=true clipped=true %}
{% include elements/snippet.html content=breadcrumb_large_example horizontal=true clipped=true %}
{% include variables.html type='component' %}
{% include elements/variables.html type='component' %}

2
docs/documentation/components/card.html
View File

@@ -178,4 +178,4 @@ meta:
</div>
</div>
{% include variables.html type='component' %}
{% include elements/variables.html type='component' %}

10
docs/documentation/components/dropdown.html
View File

@@ -238,7 +238,7 @@ meta:
</div>
</div>
{% include anchor.html name="Dropdown content" %}
{% include elements/anchor.html name="Dropdown content" %}
<div class="content">
<p>
@@ -255,7 +255,7 @@ meta:
</div>
</div>
{% include anchor.html name="Hoverable or Toggable" %}
{% include elements/anchor.html name="Hoverable or Toggable" %}
<div class="content">
<p>
@@ -286,7 +286,7 @@ meta:
</div>
</div>
{% include anchor.html name="Right aligned" %}
{% include elements/anchor.html name="Right aligned" %}
<div class="content">
<p>
@@ -314,7 +314,7 @@ meta:
</div>
</div>
{% include anchor.html name="Dropup" %}
{% include elements/anchor.html name="Dropup" %}
<div class="content">
<p>
@@ -331,4 +331,4 @@ meta:
</div>
</div>
{% include variables.html type='component' %}
{% include elements/variables.html type='component' %}

4
docs/documentation/components/menu.html
View File

@@ -51,6 +51,6 @@ meta:
</aside>
{% endcapture %}
{% include snippet.html content=menu_example size="one-third" %}
{% include elements/snippet.html content=menu_example size="one-third" %}
{% include variables.html type='component' %}
{% include elements/variables.html type='component' %}

22
docs/documentation/components/message.html
View File

@@ -117,28 +117,28 @@ meta:
{% endfor %}
{% endcapture %}
{% include snippet.html content=message_example %}
{% include elements/snippet.html content=message_example %}
{% include anchor.html name="Colors" %}
{% include elements/anchor.html name="Colors" %}
{% include snippet.html content=message_colors_example %}
{% include elements/snippet.html content=message_colors_example %}
{% include anchor.html name="Message body only" %}
{% include elements/anchor.html name="Message body only" %}
<div class="content">
<p>You can <strong>omit</strong> the message header:</p>
</div>
{% include snippet.html content=message_body_example %}
{% include elements/snippet.html content=message_body_example %}
{% include anchor.html name="Sizes" %}
{% include elements/anchor.html name="Sizes" %}
{% include snippet.html content=message_small %}
{% include elements/snippet.html content=message_small %}
{% include snippet.html content=message_normal %}
{% include elements/snippet.html content=message_normal %}
{% include snippet.html content=message_medium %}
{% include elements/snippet.html content=message_medium %}
{% include snippet.html content=message_large %}
{% include elements/snippet.html content=message_large %}
{% include variables.html type='component' %}
{% include elements/variables.html type='component' %}

2
docs/documentation/components/modal.html
View File

@@ -121,7 +121,7 @@ meta:
{% highlight html %}{{ modal_card }}{% endhighlight %}
</div>
{% include variables.html type='component' %}
{% include elements/variables.html type='component' %}
<div id="modal" class="modal">
<div class="modal-background"></div>

22
docs/documentation/components/navbar.html
View File

@@ -586,7 +586,7 @@ document.addEventListener('DOMContentLoaded', function () {
</ul>
</div>
{% include anchor.html name="Navbar brand" %}
{% include elements/anchor.html name="Navbar brand" %}
<div class="content">
<p>
@@ -622,7 +622,7 @@ document.addEventListener('DOMContentLoaded', function () {
</p>
</div>
{% include anchor.html name="Navbar burger" %}
{% include elements/anchor.html name="Navbar burger" %}
<div class="content">
<p>
@@ -654,7 +654,7 @@ document.addEventListener('DOMContentLoaded', function () {
</a>
</div>
{% include anchor.html name="Navbar menu" %}
{% include elements/anchor.html name="Navbar menu" %}
<div class="content">
<p>
@@ -705,7 +705,7 @@ document.addEventListener('DOMContentLoaded', function () {
</div>
</div>
{% include anchor.html name="Navbar start and navbar end" %}
{% include elements/anchor.html name="Navbar start and navbar end" %}
<div class="content">
<p>
@@ -729,7 +729,7 @@ document.addEventListener('DOMContentLoaded', function () {
{% highlight html %}{{navbar_start_end_example}}{% endhighlight %}
{% include anchor.html name="Navbar item" %}
{% include elements/anchor.html name="Navbar item" %}
<div class="content">
<p>
@@ -784,7 +784,7 @@ document.addEventListener('DOMContentLoaded', function () {
</p>
</div>
{% include anchor.html name="Transparent navbar" %}
{% include elements/anchor.html name="Transparent navbar" %}
<div class="content">
<p>
@@ -792,9 +792,9 @@ document.addEventListener('DOMContentLoaded', function () {
</p>
</div>
{% include snippet.html content=navbar_transparent_example paddingless=true horizontal=true more=true %}
{% include elements/snippet.html content=navbar_transparent_example paddingless=true horizontal=true more=true %}
{% include anchor.html name="Fixed navbar" %}
{% include elements/anchor.html name="Fixed navbar" %}
{% include elements/new-tag.html version="0.6.1" %}
@@ -822,7 +822,7 @@ document.addEventListener('DOMContentLoaded', function () {
</a>
</div>
{% include anchor.html name="Dropdown menu" %}
{% include elements/anchor.html name="Dropdown menu" %}
<div class="content">
<p>
@@ -1048,7 +1048,7 @@ document.addEventListener('DOMContentLoaded', function () {
{% highlight html %}{{ navbar_divider_example }}{% endhighlight %}
{% include anchor.html name="Colors" %}
{% include elements/anchor.html name="Colors" %}
<div class="tags has-addons">
<span class="tag">New!</span>
@@ -1115,5 +1115,5 @@ document.addEventListener('DOMContentLoaded', function () {
{% include examples/navbar-color.html color="white" light=true %}
</div>
{% include variables.html type='component' %}
{% include elements/variables.html type='component' %}

22
docs/documentation/components/pagination.html
View File

@@ -183,7 +183,7 @@ meta:
</p>
</div>
{% include snippet.html content=pagination_example horizontal=true more=true %}
{% include elements/snippet.html content=pagination_example horizontal=true more=true %}
<div class="content">
<p>
@@ -191,7 +191,7 @@ meta:
</p>
</div>
{% include snippet.html content=pagination_options_example horizontal=true more=true %}
{% include elements/snippet.html content=pagination_options_example horizontal=true more=true %}
<div class="content">
<p>
@@ -199,11 +199,11 @@ meta:
</p>
</div>
{% include snippet.html content=pagination_centered_example horizontal=true more=true %}
{% include elements/snippet.html content=pagination_centered_example horizontal=true more=true %}
{% include snippet.html content=pagination_right_example horizontal=true more=true %}
{% include elements/snippet.html content=pagination_right_example horizontal=true more=true %}
{% include anchor.html name="Styles" %}
{% include elements/anchor.html name="Styles" %}
{% include elements/new-tag.html version="0.6.2" %}
@@ -211,19 +211,19 @@ meta:
Add the <code>is-rounded</code> modifier to have rounded pagination items.
</p>
{% include snippet.html content=pagination_rounded_example horizontal=true more=true %}
{% include elements/snippet.html content=pagination_rounded_example horizontal=true more=true %}
{% include anchor.html name="Sizes" %}
{% include elements/anchor.html name="Sizes" %}
<p class="content">
The pagination comes in <strong>3 additional sizes</strong>.<br>
You only need to append the <strong>modifier</strong> <code>is-small</code>, <code>is-medium</code>, or <code>is-large</code> to the <code>pagination</code> component.
</p>
{% include snippet.html content=pagination_small_example horizontal=true more=true %}
{% include elements/snippet.html content=pagination_small_example horizontal=true more=true %}
{% include snippet.html content=pagination_medium_example horizontal=true more=true %}
{% include elements/snippet.html content=pagination_medium_example horizontal=true more=true %}
{% include snippet.html content=pagination_large_example horizontal=true more=true %}
{% include elements/snippet.html content=pagination_large_example horizontal=true more=true %}
{% include variables.html type='component' %}
{% include elements/variables.html type='component' %}

4
docs/documentation/components/panel.html
View File

@@ -108,6 +108,6 @@ meta:
</p>
</div>
{% include snippet.html content=panel_example size="one-third" %}
{% include elements/snippet.html content=panel_example size="one-third" %}
{% include variables.html type='component' %}
{% include elements/variables.html type='component' %}

46
docs/documentation/components/tabs.html
View File

@@ -358,11 +358,11 @@ meta:
The <strong>default</strong> tabs style has a single border at the bottom.</p>
</div>
{% include snippet.html content=tabs_example horizontal=true %}
{% include elements/snippet.html content=tabs_example horizontal=true %}
{% include snippet.html content=tabs_example horizontal=true more=true %}
{% include elements/snippet.html content=tabs_example horizontal=true more=true %}
{% include anchor.html name="Alignment" %}
{% include elements/anchor.html name="Alignment" %}
<div class="content">
<p>
@@ -370,44 +370,44 @@ meta:
</p>
</div>
{% include snippet.html content=tabs_centered_example horizontal=true more=true %}
{% include elements/snippet.html content=tabs_centered_example horizontal=true more=true %}
{% include snippet.html content=tabs_right_example horizontal=true more=true %}
{% include elements/snippet.html content=tabs_right_example horizontal=true more=true %}
{% include anchor.html name="Icons" %}
{% include elements/anchor.html name="Icons" %}
<div class="content">
<p>You can use any of the <a href="http://fontawesome.io/">Font Awesome</a> <strong>icons</strong>.</p>
</div>
{% include snippet.html content=tabs_icons_example horizontal=true more=true %}
{% include elements/snippet.html content=tabs_icons_example horizontal=true more=true %}
{% include snippet.html content=tabs_icons_example horizontal=true more=true %}
{% include elements/snippet.html content=tabs_icons_example horizontal=true more=true %}
{% include anchor.html name="Sizes" %}
{% include elements/anchor.html name="Sizes" %}
<div class="content">
<p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
</div>
{% include snippet.html content=tabs_small_example horizontal=true more=true %}
{% include elements/snippet.html content=tabs_small_example horizontal=true more=true %}
{% include snippet.html content=tabs_medium_example horizontal=true more=true %}
{% include elements/snippet.html content=tabs_medium_example horizontal=true more=true %}
{% include snippet.html content=tabs_large_example horizontal=true more=true %}
{% include elements/snippet.html content=tabs_large_example horizontal=true more=true %}
{% include anchor.html name="Styles" %}
{% include elements/anchor.html name="Styles" %}
<div class="content">
If you want a more classic style with <strong>borders</strong>, just append the <code>is-boxed</code> modifier.
</div>
{% include snippet.html content=tabs_boxed_example horizontal=true more=true %}
{% include elements/snippet.html content=tabs_boxed_example horizontal=true more=true %}
<p class="content">
If you want <strong>mutually exclusive</strong> tabs (like radio buttons where clicking one deselects all other ones), use the <code>is-toggle</code> modifier.
</p>
{% include snippet.html content=tabs_toggle_example horizontal=true more=true %}
{% include elements/snippet.html content=tabs_toggle_example horizontal=true more=true %}
{% include elements/new-tag.html version="0.6.2" %}
@@ -415,26 +415,26 @@ meta:
If you use both <code>is-toggle</code> and <code>is-toggle-rounded</code>, the first and last items will be <strong>rounded</strong>.
</p>
{% include snippet.html content=tabs_toggle_rounded_example horizontal=true more=true %}
{% include elements/snippet.html content=tabs_toggle_rounded_example horizontal=true more=true %}
<p class="content">
If you want the tabs to take up the <strong>whole width</strong> available, use <code>is-fullwidth</code>.
</p>
{% include snippet.html content=tabs_fullwidth_example horizontal=true more=true %}
{% include elements/snippet.html content=tabs_fullwidth_example horizontal=true more=true %}
{% include anchor.html name="Combining" %}
{% include elements/anchor.html name="Combining" %}
<div class="content">
<p>You can <strong>combine</strong> different modifiers. For example, you can have <strong>centered boxed</strong> tabs, or <strong>fullwidth toggle</strong> ones.</p>
</div>
{% include snippet.html content=tabs_centered_boxed_example horizontal=true more=true %}
{% include elements/snippet.html content=tabs_centered_boxed_example horizontal=true more=true %}
{% include snippet.html content=tabs_toggle_fullwidth_example horizontal=true more=true %}
{% include elements/snippet.html content=tabs_toggle_fullwidth_example horizontal=true more=true %}
{% include snippet.html content=tabs_centered_boxed_medium_example horizontal=true more=true %}
{% include elements/snippet.html content=tabs_centered_boxed_medium_example horizontal=true more=true %}
{% include snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %}
{% include elements/snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %}
{% include variables.html type='component' %}
{% include elements/variables.html type='component' %}