Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-16 18:44:28 -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

4
docs/documentation/elements/box.html
View File

@@ -62,6 +62,6 @@ meta:
</p>
</div>
{% include snippet.html content=box_example more=true %}
{% include elements/snippet.html content=box_example more=true %}
{% include variables.html type='element' %}
{% include elements/variables.html type='element' %}

46
docs/documentation/elements/button.html
View File

@@ -463,7 +463,7 @@ meta:
</p>
</div>
{% include snippet.html content=button_example %}
{% include elements/snippet.html content=button_example %}
<div class="content">
<p>
@@ -485,23 +485,23 @@ meta:
</ul>
</div>
{% include snippet.html content=button_tags_example %}
{% include elements/snippet.html content=button_tags_example %}
{% include anchor.html name="Colors" %}
{% include elements/anchor.html name="Colors" %}
{% include snippet.html content=button_colors_a_example %}
{% include elements/snippet.html content=button_colors_a_example %}
{% include snippet.html content=button_colors_b_example %}
{% include elements/snippet.html content=button_colors_b_example %}
{% include anchor.html name="Sizes" %}
{% include elements/anchor.html name="Sizes" %}
{% include snippet.html content=button_sizes_example %}
{% include elements/snippet.html content=button_sizes_example %}
{% include anchor.html name="Styles" %}
{% include elements/anchor.html name="Styles" %}
<h4 class="subtitle">Outlined</h4>
{% include snippet.html content=button_outlined_example %}
{% include elements/snippet.html content=button_outlined_example %}
<h4 class="subtitle">Inverted (the text color becomes the background color, and vice-versa)</h4>
@@ -541,23 +541,23 @@ meta:
</div>
</div>
{% include anchor.html name="States" %}
{% include elements/anchor.html name="States" %}
<h4 class="subtitle">Normal</h4>
{% include snippet.html content=button_normal_example %}
{% include elements/snippet.html content=button_normal_example %}
<h4 class="subtitle">Hover</h4>
{% include snippet.html content=button_hover_example %}
{% include elements/snippet.html content=button_hover_example %}
<h4 class="subtitle">Focus</h4>
{% include snippet.html content=button_focus_example %}
{% include elements/snippet.html content=button_focus_example %}
<h4 class="subtitle">Active</h4>
{% include snippet.html content=button_active_example %}
{% include elements/snippet.html content=button_active_example %}
<h4 class="subtitle">Loading</h4>
@@ -617,7 +617,7 @@ meta:
<h4 class="subtitle">With Font Awesome icons</h4>
{% include snippet.html content=button_fa_example clipped=true %}
{% include elements/snippet.html content=button_fa_example clipped=true %}
<div class="columns">
<div class="column">
@@ -633,31 +633,31 @@ meta:
</div>
</div>
{% include anchor.html name="Button group" %}
{% include elements/anchor.html name="Button group" %}
<div class="content">
<p>If you want to <strong>group</strong> buttons together on a <strong>single line</strong>, use the <code>is-grouped</code> modifier on the <code>field</code> container:</p>
</div>
{% include snippet.html content=button_group_example %}
{% include elements/snippet.html content=button_group_example %}
{% include anchor.html name="Button addons" %}
{% include elements/anchor.html name="Button addons" %}
<div class="content">
<p>If you want to use buttons as <strong>addons</strong>, use the <code>has-addons</code> modifier on the <code>field</code> container:</p>
</div>
{% include snippet.html content=button_addons_example %}
{% include elements/snippet.html content=button_addons_example %}
{% include anchor.html name="Button group with addons" %}
{% include elements/anchor.html name="Button group with addons" %}
<div class="content">
<p>You can group together addons as well:</p>
</div>
{% include snippet.html content=button_group_addons_example %}
{% include elements/snippet.html content=button_group_addons_example %}
{% include anchor.html name="List of buttons" %}
{% include elements/anchor.html name="List of buttons" %}
{% include elements/new-tag.html version="0.6.1" %}
@@ -775,4 +775,4 @@ meta:
</div>
</div>
{% include variables.html type='element' %}
{% include elements/variables.html type='element' %}

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

@@ -123,9 +123,9 @@ 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 snippet.html content=content_example %}
{% include elements/snippet.html content=content_example %}
{% include anchor.html name="Sizes" %}
{% include elements/anchor.html name="Sizes" %}
<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>
@@ -173,4 +173,4 @@ meta:
</div>
</div>
{% include variables.html type='element' %}
{% include elements/variables.html type='element' %}

10
docs/documentation/elements/delete.html
View File

@@ -58,9 +58,9 @@ meta:
</p>
</div>
{% include snippet.html content=cross_example %}
{% include elements/snippet.html content=cross_example %}
{% include anchor.html name="Sizes" %}
{% include elements/anchor.html name="Sizes" %}
<div class="content">
<p>
@@ -68,9 +68,9 @@ meta:
</p>
</div>
{% include snippet.html content=cross_sizes_example %}
{% include elements/snippet.html content=cross_sizes_example %}
{% include anchor.html name="Combinations" %}
{% include elements/anchor.html name="Combinations" %}
<div class="content">
<p>
@@ -78,4 +78,4 @@ meta:
</p>
</div>
{% include snippet.html content=cross_elements_example %}
{% include elements/snippet.html content=cross_elements_example %}

18
docs/documentation/elements/icon.html
View File

@@ -82,7 +82,7 @@ meta:
</div>
<div class="block bd-icon-size">
{% include snippet.html content=icon_example %}
{% include elements/snippet.html content=icon_example %}
</div>
<div class="message is-info">
@@ -97,7 +97,7 @@ meta:
By default, the <code>icon</code> container will take up <em>exactly</em> <code>1.5rem x 1.5rem</code>. The icon itself is sized accordingly to the icon library you're using. For example, Font Awesome 5 icons will <strong>inherit</strong> the font size.</p>
</div>
{% include anchor.html name="Colors" %}
{% include elements/anchor.html name="Colors" %}
<div class="content">
<p>
@@ -105,9 +105,9 @@ meta:
</p>
</div>
{% include snippet.html content=icon_color_example %}
{% include elements/snippet.html content=icon_color_example %}
{% include anchor.html name="Sizes" %}
{% include elements/anchor.html name="Sizes" %}
<div class="content">
<p>
@@ -283,7 +283,7 @@ meta:
</tbody>
</table>
{% include anchor.html name="Font Awesome variations" %}
{% include elements/anchor.html name="Font Awesome variations" %}
<div class="content">
<p>
@@ -426,7 +426,7 @@ meta:
</tbody>
</table>
{% include anchor.html name="Material Design Icons" %}
{% include elements/anchor.html name="Material Design Icons" %}
<div class="content">
<p>
@@ -750,7 +750,7 @@ meta:
</tbody>
</table>
{% include anchor.html name="Open Iconic" %}
{% include elements/anchor.html name="Open Iconic" %}
<div class="content">
<p>
@@ -848,7 +848,7 @@ meta:
</tbody>
</table>
{% include anchor.html name="Ionicons" %}
{% include elements/anchor.html name="Ionicons" %}
<div class="content">
<p>
@@ -946,4 +946,4 @@ meta:
</tbody>
</table>
{% include variables.html type='element' %}
{% include elements/variables.html type='element' %}

12
docs/documentation/elements/image.html
View File

@@ -38,9 +38,9 @@ meta:
<p>Because images can take a few seconds to load (or not at all), use the <code>.image</code> container to specify a <strong>precisely sized</strong> container so that your layout isn't broken because of image loading or image errors.</p>
</div>
{% include snippet.html content=image %}
{% include elements/snippet.html content=image %}
{% include anchor.html name="Fixed square images" %}
{% include elements/anchor.html name="Fixed square images" %}
<div class="content">
<p>There are <strong>7</strong> dimensions to choose from, useful for <strong>avatars</strong>:</p>
@@ -58,15 +58,15 @@ meta:
</tbody>
</table>
{% include anchor.html name="Retina images" %}
{% include elements/anchor.html name="Retina images" %}
<div class="content">
<p>Because the image is fixed in size, you can use an image that is <strong>twice as big</strong>. So for example, in a <code>128x128</code> container, you can use a <code>256x256</code> image, but resized to <strong>128x128</strong> pixels.</p>
</div>
{% include snippet.html content=retina_image %}
{% include elements/snippet.html content=retina_image %}
{% include anchor.html name="Responsive images with ratios" %}
{% include elements/anchor.html name="Responsive images with ratios" %}
<div class="content">
<p>If you don't know the exact dimensions but know the <strong>ratio</strong> instead, you can use one of the <strong>16 ratio modifiers</strong>, which include [common aspect ratios in still photography](https://en.wikipedia.org/wiki/Aspect_ratio_(image)#Still_photography):</p>
@@ -161,4 +161,4 @@ meta:
<p>The <code>.image</code> container will take up the <strong>whole width</strong> while maintaining the perfect ratio.</p>
</div>
{% include variables.html type='element' %}
{% include elements/variables.html type='element' %}

8
docs/documentation/elements/notification.html
View File

@@ -34,10 +34,10 @@ meta:
{% endfor %}
{% endcapture %}
{% include snippet.html content=notification %}
{% include elements/snippet.html content=notification %}
{% include anchor.html name="Colors" %}
{% include elements/anchor.html name="Colors" %}
{% include snippet.html content=notification_colors %}
{% include elements/snippet.html content=notification_colors %}
{% include variables.html type='element' %}
{% include elements/variables.html type='element' %}

12
docs/documentation/elements/progress.html
View File

@@ -34,14 +34,14 @@ meta:
<progress class="progress is-large" value="60" max="100">60%</progress>
{% endcapture %}
{% include snippet.html content=progress %}
{% include elements/snippet.html content=progress %}
{% include anchor.html name="Colors" %}
{% include elements/anchor.html name="Colors" %}
{% include snippet.html content=progress_colors %}
{% include elements/snippet.html content=progress_colors %}
{% include anchor.html name="Sizes" %}
{% include elements/anchor.html name="Sizes" %}
{% include snippet.html content=progress_sizes %}
{% include elements/snippet.html content=progress_sizes %}
{% include variables.html type='element' %}
{% include elements/variables.html type='element' %}

6
docs/documentation/elements/table.html
View File

@@ -350,9 +350,9 @@ meta:
</p>
</div>
{% include snippet.html content=table_example horizontal=true more=true %}
{% include elements/snippet.html content=table_example horizontal=true more=true %}
{% include anchor.html name="Modifiers" %}
{% include elements/anchor.html name="Modifiers" %}
<div class="columns">
<div class="column">
@@ -584,4 +584,4 @@ meta:
</div>
</div>
{% include variables.html type='element' %}
{% include elements/variables.html type='element' %}

12
docs/documentation/elements/tag.html
View File

@@ -202,7 +202,7 @@ meta:
</div>
</div>
{% include anchor.html name="Colors" %}
{% include elements/anchor.html name="Colors" %}
<div class="columns">
<div class="column is-4">
@@ -263,7 +263,7 @@ meta:
</div>
</div>
{% include anchor.html name="Sizes" %}
{% include elements/anchor.html name="Sizes" %}
<div class="columns">
<div class="column is-4">
@@ -286,7 +286,7 @@ meta:
</div>
</div>
{% include anchor.html name="Modifiers" %}
{% include elements/anchor.html name="Modifiers" %}
<div class="columns">
<div class="column is-4">
@@ -312,7 +312,7 @@ meta:
</div>
</div>
{% include anchor.html name="Combinations" %}
{% include elements/anchor.html name="Combinations" %}
<div class="columns">
<div class="column is-4">
@@ -343,7 +343,7 @@ meta:
</div>
</div>
{% include anchor.html name="List of tags" %}
{% include elements/anchor.html name="List of tags" %}
<div class="columns">
<div class="column">
@@ -441,4 +441,4 @@ meta:
</div>
</div>
{% include variables.html type='element' %}
{% include elements/variables.html type='element' %}

4
docs/documentation/elements/title.html
View File

@@ -82,7 +82,7 @@ meta:
</div>
</div>
{% include anchor.html name="Sizes" %}
{% include elements/anchor.html name="Sizes" %}
<div class="columns">
<div class="column">
@@ -174,4 +174,4 @@ meta:
</div>
</div>
{% include variables.html type='element' %}
{% include elements/variables.html type='element' %}