mirror of
https://github.com/jgthms/bulma
synced 2026-03-15 10:14:29 -07:00
Create snippet component
This commit is contained in:
Jeremy Thomas
@@ -425,14 +425,7 @@ variables:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{button_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% include snippet.html content=button_example %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -454,59 +447,23 @@ variables:
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_tags_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{button_tags_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% include snippet.html content=button_tags_example %}
|
||||
|
||||
{% include anchor.html name="Colors" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_colors_a_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{button_colors_a_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% include snippet.html content=button_colors_a_example %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_colors_b_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{button_colors_b_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% include snippet.html content=button_colors_b_example %}
|
||||
|
||||
{% include anchor.html name="Sizes" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_sizes_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{button_sizes_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% include snippet.html content=button_sizes_example %}
|
||||
|
||||
<hr>
|
||||
{% include anchor.html name="Styles" %}
|
||||
|
||||
<h3 class="title">Styles</h3>
|
||||
<h4 class="subtitle">Outlined</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_outlined_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{button_outlined_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% include snippet.html content=button_outlined_example %}
|
||||
|
||||
<h4 class="subtitle">Inverted (the text color becomes the background color, and vice-versa)</h4>
|
||||
|
||||
@@ -517,7 +474,7 @@ variables:
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{button_inverted_example}}{% endhighlight %}
|
||||
{% highlight html %}{{button_inverted_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -534,52 +491,23 @@ variables:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
{% include anchor.html name="States" %}
|
||||
|
||||
<h3 class="title">States</h3>
|
||||
<h4 class="subtitle">Normal</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_normal_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{button_normal_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% include snippet.html content=button_normal_example %}
|
||||
|
||||
<h4 class="subtitle">Hover</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_hover_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{button_hover_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% include snippet.html content=button_hover_example %}
|
||||
|
||||
<h4 class="subtitle">Focus</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_focus_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{button_focus_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% include snippet.html content=button_focus_example %}
|
||||
|
||||
<h4 class="subtitle">Active</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_active_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{button_active_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% include snippet.html content=button_active_example %}
|
||||
|
||||
<h4 class="subtitle">Loading</h4>
|
||||
|
||||
@@ -643,14 +571,7 @@ variables:
|
||||
|
||||
<h4 class="subtitle">With Font Awesome icons</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
{{button_fa_example}}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{button_fa_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% include snippet.html content=button_fa_example %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
@@ -669,40 +590,29 @@ variables:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
{% include anchor.html name="Button group" %}
|
||||
|
||||
<h3 class="title">Button group</h3>
|
||||
<div class="content">
|
||||
<p>If you want to <strong>group</strong> buttons together, use the <code>is-grouped</code> modifier on the <code>field</code> container:</p>
|
||||
<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>
|
||||
<div class="bd-example">
|
||||
{{button_group_example}}
|
||||
</div>
|
||||
{% highlight html %}{{button_group_example}}{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
{% include snippet.html content=button_group_example %}
|
||||
|
||||
{% include anchor.html name="Button addons" %}
|
||||
|
||||
<h3 class="title">Button addons</h3>
|
||||
<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>
|
||||
|
||||
<div class="bd-example">
|
||||
{{button_addons_example}}
|
||||
</div>
|
||||
{% highlight html %}{{button_addons_example}}{% endhighlight %}
|
||||
{% include snippet.html content=button_addons_example %}
|
||||
|
||||
<hr>
|
||||
{% include anchor.html name="Button group with addons" %}
|
||||
|
||||
<h3 class="title">Button group with addons</h3>
|
||||
<div class="content">
|
||||
<p>You can group together addons as well:</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
{{button_group_addons_example}}
|
||||
</div>
|
||||
{% highlight html %}{{button_group_addons_example}}{% endhighlight %}
|
||||
{% include snippet.html content=button_group_addons_example %}
|
||||
|
||||
{% include variables.html %}
|
||||
|
||||
|
||||
@@ -399,9 +399,7 @@ variables:
|
||||
|
||||
{% highlight html %}{{table_example}}{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Modifiers</h3>
|
||||
{% include anchor.html name="Modifiers" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
|
||||
@@ -81,7 +81,7 @@ doc-subtab: container
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h3 class="title">Fluid container</h3>
|
||||
<h3 class="title is-4">Fluid container</h3>
|
||||
<div class="content">
|
||||
<p>If you don't want to have a maximum width but want to keep the 24px margin on the left and right sides, add the <code>is-fluid</code> modifier:</p>
|
||||
</div>
|
||||
@@ -96,7 +96,7 @@ doc-subtab: container
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h3 class="title">Breakpoint containers</h3>
|
||||
<h3 class="title is-4">Breakpoint containers</h3>
|
||||
<div class="content">
|
||||
<p>
|
||||
<span class="tag is-success">New!</span>
|
||||
|
||||
@@ -219,9 +219,8 @@ doc-subtab: media-object
|
||||
|
||||
{% highlight html %}{{media_bis_example}}{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
{% include anchor.html name="Nesting" %}
|
||||
|
||||
<h3 class="title">Nesting</h3>
|
||||
<div class="content">
|
||||
<p>You can nest media objects up to <strong>3 levels</strong> deep.</p>
|
||||
</div>
|
||||
|
||||
@@ -24,9 +24,8 @@ doc-subtab: tiles
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
{% include anchor.html name="Example" %}
|
||||
|
||||
<h3 class="title">Example</h3>
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-vertical is-8">
|
||||
<div class="tile">
|
||||
@@ -123,9 +122,8 @@ doc-subtab: tiles
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
{% include anchor.html name="Modifiers" %}
|
||||
|
||||
<h3 class="title">Modifiers</h3>
|
||||
|
||||
<div class="content">
|
||||
<p>The <code>tile</code> element has <strong>16 modifiers</strong>:</p>
|
||||
@@ -154,9 +152,8 @@ doc-subtab: tiles
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
{% include anchor.html name="How it works: Nesting" %}
|
||||
|
||||
<h3 class="title">How it works: Nesting</h3>
|
||||
<div class="content">
|
||||
<p>Everything is a tile! To create a grid of tiles, you only need to <strong>nest</strong> <code>tile</code> elements.</p>
|
||||
</div>
|
||||
@@ -313,9 +310,8 @@ doc-subtab: tiles
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
{% include anchor.html name="Nesting requirements" %}
|
||||
|
||||
<h3 class="title">Nesting requirements</h3>
|
||||
|
||||
<article class="message is-danger">
|
||||
<div class="message-header">
|
||||
@@ -446,9 +442,8 @@ tile is-ancestor
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
{% include anchor.html name="3 columns" %}
|
||||
|
||||
<h3 class="title">3 columns</h3>
|
||||
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-parent">
|
||||
@@ -636,9 +631,8 @@ tile is-ancestor
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
{% include anchor.html name="4 columns" %}
|
||||
|
||||
<h3 class="title">4 columns</h3>
|
||||
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-parent">
|
||||
|
||||
@@ -66,9 +66,7 @@ doc-subtab: responsive-helpers
|
||||
<h1 class="title">Responsive helpers</h1>
|
||||
<h2 class="subtitle"><strong>Show/hide content</strong> depending on the width of the viewport</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Show</h3>
|
||||
{% include anchor.html name="Show" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -186,11 +184,12 @@ doc-subtab: responsive-helpers
|
||||
</table>
|
||||
|
||||
<div class="content">
|
||||
<p>For the other display options, just replace <code>is-flex</code> with <code>is-block</code> <code>is-inline</code> <code>is-inline-block</code> or <code>is-inline-flex</code>
|
||||
<p>
|
||||
For the other display options, just replace <code>is-flex</code> with <code>is-block</code> <code>is-inline</code> <code>is-inline-block</code> or <code>is-inline-flex</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Hide</h3>
|
||||
{% include anchor.html name="Hide" %}
|
||||
|
||||
<table class="table is-bordered">
|
||||
{{ thead }}
|
||||
|
||||
@@ -62,9 +62,7 @@ doc-subtab: typography-helpers
|
||||
Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width
|
||||
</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Size</h3>
|
||||
{% include anchor.html name="Size" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -115,11 +113,7 @@ doc-subtab: typography-helpers
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">
|
||||
Responsive size
|
||||
</h3>
|
||||
{% include anchor.html name="Responsive size" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -190,11 +184,7 @@ doc-subtab: typography-helpers
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">
|
||||
Colors
|
||||
</h3>
|
||||
{% include anchor.html name="Colors" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -235,9 +225,7 @@ doc-subtab: typography-helpers
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Alignment</h3>
|
||||
{% include anchor.html name="Alignment" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -272,15 +260,13 @@ doc-subtab: typography-helpers
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Responsive Alignment</h3>
|
||||
{% include anchor.html name="Responsive Alignment" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can now <strong>align text</strong> for <em>each</em> viewport width. You simply need to append the <strong>viewport width</strong> to the alignment modifier.
|
||||
</p>
|
||||
|
||||
|
||||
<p>
|
||||
For example, here are the modifiers for <code>.has-text-left</code>:
|
||||
</p>
|
||||
@@ -364,9 +350,7 @@ doc-subtab: typography-helpers
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Text transformation</h3>
|
||||
{% include anchor.html name="Text transformation" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
|
||||
@@ -23,9 +23,7 @@ doc-subtab: functions
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h2 id="findColorInvert" class="title">The <code>findColorInvert()</code> function</h2>
|
||||
{% include anchor.html name="The <code>findColorInvert()</code> function" %}
|
||||
|
||||
<div class="content">
|
||||
<p>The <code>findColorInvert($color)</code> function takes a <strong>color</strong> as an input, and outputs either transparent <strong>black</strong> <code>rgba(#000, 0.7)</code> or <strong>white</strong> <code>#fff</code>:</p>
|
||||
|
||||
@@ -12,9 +12,8 @@ doc-subtab: responsiveness
|
||||
<h1 class="title">Responsiveness</h1>
|
||||
<h2 class="subtitle">Bulma is a <strong>mobile-first</strong> framework</h2>
|
||||
|
||||
<hr>
|
||||
{% include anchor.html name="Vertical by default" %}
|
||||
|
||||
<h3 class="title">Vertical by default</h3>
|
||||
<div class="content">
|
||||
<p>
|
||||
Every element in Bulma is <strong>mobile-first</strong> and optimizes for <strong>vertical reading</strong>, so by default on mobile:
|
||||
@@ -27,9 +26,8 @@ doc-subtab: responsiveness
|
||||
<p>For example, you can enforce the <strong>horizontal</strong> layout for both <code>columns</code> or <code>nav</code> by appending the <code>is-mobile</code> modifer.</p>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
{% include anchor.html name="Breakpoints" %}
|
||||
|
||||
<h3 class="title">Breakpoints</h3>
|
||||
<div class="content">
|
||||
<p>Bulma has 5 breakpoints:</p>
|
||||
<ul>
|
||||
|
||||
Reference in New Issue
Block a user