mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-28 12:24:23 +00:00
Create snippet component
This commit is contained in:
Jeremy Thomas
parent
1776d601da
commit
9b06974cd1
@ -1,6 +1,6 @@
|
||||
<hr style="margin-bottom: 0;">
|
||||
|
||||
<h3 id="{{ include.name | slugify }}" class="title is-4 bd-anchor-title">
|
||||
<h3 id="{{ include.name | slugify }}" class="title is-4 is-spaced bd-anchor-title">
|
||||
{{ include.name }}
|
||||
<a class="bd-anchor-link" href="#{{ include.name | slugify }}">
|
||||
#
|
||||
|
||||
8
docs/_includes/snippet.html
Normal file
8
docs/_includes/snippet.html
Normal file
@ -0,0 +1,8 @@
|
||||
<div class="bd-snippet">
|
||||
<div class="bd-snippet-preview">
|
||||
{{ include.content }}
|
||||
</div>
|
||||
<div class="bd-snippet-code">
|
||||
{% highlight html %}{{ include.content }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
@ -1,18 +1,13 @@
|
||||
.bd-example,
|
||||
.bd-structure
|
||||
border: 1px solid $warning
|
||||
border-top-right-radius: $radius
|
||||
color: $warning-invert
|
||||
padding: 1.5rem
|
||||
.bd-structure,
|
||||
.bd-snippet
|
||||
border: 1px solid $yellow
|
||||
position: relative
|
||||
&:not(:first-child)
|
||||
margin-top: 2rem
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1.5rem
|
||||
&:before
|
||||
background: $warning
|
||||
background: $yellow
|
||||
border-radius: $radius $radius 0 0
|
||||
bottom: 100%
|
||||
color: $yellow-invert
|
||||
content: "Example"
|
||||
display: inline-block
|
||||
font-size: 7px
|
||||
@ -29,18 +24,56 @@
|
||||
border-right: none
|
||||
padding: 0
|
||||
|
||||
.bd-example,
|
||||
.bd-structure
|
||||
padding: 1.5rem
|
||||
&:not(:first-child)
|
||||
margin-top: 2rem
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1.5rem
|
||||
|
||||
.bd-example
|
||||
& + .highlight
|
||||
border: 1px solid $warning
|
||||
border: 1px solid $yellow
|
||||
border-radius: 0 0 $radius $radius
|
||||
border-top: none
|
||||
margin-top: -1.5rem
|
||||
&:not(:last-child)
|
||||
margin-bottom: 1.5rem
|
||||
|
||||
// Snippet
|
||||
.bd-snippet
|
||||
+block
|
||||
border: 1px solid $yellow
|
||||
margin-top: 2rem
|
||||
position: relative
|
||||
&::before
|
||||
content: "Snippet"
|
||||
+tablet
|
||||
align-items: stretch
|
||||
display: flex
|
||||
|
||||
.bd-snippet-preview,
|
||||
.bd-snippet-code
|
||||
+tablet
|
||||
width: 50%
|
||||
|
||||
.bd-snippet-preview
|
||||
padding: 1.5rem
|
||||
|
||||
.bd-snippet-code
|
||||
background-color: $pre-background
|
||||
+tablet
|
||||
align-items: stretch
|
||||
display: flex
|
||||
flex-direction: column
|
||||
.highlight
|
||||
flex-grow: 1
|
||||
|
||||
// Highlight
|
||||
.highlight.bd-is-hovering
|
||||
border-radius: 2px
|
||||
box-shadow: 0 0 0 3px $border
|
||||
box-shadow: 0 0 0 2px $yellow
|
||||
|
||||
.highlight pre
|
||||
max-height: 480px
|
||||
@ -111,8 +144,8 @@ $structure-invert: $danger-invert
|
||||
right: 0.25rem
|
||||
top: 0.25rem
|
||||
&:hover
|
||||
background-color: $text
|
||||
color: $white
|
||||
background-color: $yellow
|
||||
color: $yellow-invert
|
||||
.bd-expand
|
||||
right: 45px
|
||||
+tablet
|
||||
|
||||
@ -21,6 +21,3 @@ $twitter: #55acee
|
||||
@import "./_sass/love"
|
||||
@import "./_sass/bootstrap"
|
||||
@import "./_sass/klmn"
|
||||
|
||||
// .columns
|
||||
// background-color: coral
|
||||
|
||||
@ -9549,29 +9549,19 @@ html.route-index #carbon {
|
||||
}
|
||||
|
||||
.bd-example,
|
||||
.bd-structure {
|
||||
.bd-structure,
|
||||
.bd-snippet {
|
||||
border: 1px solid #ffdd57;
|
||||
border-top-right-radius: 3px;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
padding: 1.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bd-example:not(:first-child),
|
||||
.bd-structure:not(:first-child) {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.bd-example:not(:last-child),
|
||||
.bd-structure:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.bd-example:before,
|
||||
.bd-structure:before {
|
||||
.bd-structure:before,
|
||||
.bd-snippet:before {
|
||||
background: #ffdd57;
|
||||
border-radius: 3px 3px 0 0;
|
||||
bottom: 100%;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
content: "Example";
|
||||
display: inline-block;
|
||||
font-size: 7px;
|
||||
@ -9586,13 +9576,29 @@ html.route-index #carbon {
|
||||
|
||||
@media screen and (min-width: 769px), print {
|
||||
.bd-example.is-fullwidth,
|
||||
.bd-structure.is-fullwidth {
|
||||
.bd-structure.is-fullwidth,
|
||||
.bd-snippet.is-fullwidth {
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-example,
|
||||
.bd-structure {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.bd-example:not(:first-child),
|
||||
.bd-structure:not(:first-child) {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.bd-example:not(:last-child),
|
||||
.bd-structure:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.bd-example + .highlight {
|
||||
border: 1px solid #ffdd57;
|
||||
border-radius: 0 0 3px 3px;
|
||||
@ -9604,9 +9610,56 @@ html.route-index #carbon {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.bd-snippet {
|
||||
border: 1px solid #ffdd57;
|
||||
margin-top: 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bd-snippet:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.bd-snippet::before {
|
||||
content: "Snippet";
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px), print {
|
||||
.bd-snippet {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px), print {
|
||||
.bd-snippet-preview,
|
||||
.bd-snippet-code {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-snippet-preview {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.bd-snippet-code {
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px), print {
|
||||
.bd-snippet-code {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.bd-snippet-code .highlight {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight.bd-is-hovering {
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 0 3px #dbdbdb;
|
||||
box-shadow: 0 0 0 2px #ffdd57;
|
||||
}
|
||||
|
||||
.highlight pre {
|
||||
@ -9706,8 +9759,8 @@ html.route-index #carbon {
|
||||
|
||||
.highlight .bd-copy:hover,
|
||||
.highlight .bd-expand:hover {
|
||||
background-color: #4a4a4a;
|
||||
color: white;
|
||||
background-color: #ffdd57;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.highlight .bd-expand {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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,9 +260,7 @@ doc-subtab: typography-helpers
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Responsive Alignment</h3>
|
||||
{% include anchor.html name="Responsive Alignment" %}
|
||||
|
||||
<div class="content">
|
||||
<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>
|
||||
|
||||
@ -45,9 +45,8 @@ route: 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>
|
||||
@ -204,9 +203,7 @@ route: tiles
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Nesting requirements</h3>
|
||||
{% include anchor.html name="Nesting requirements" %}
|
||||
|
||||
<article class="message is-danger">
|
||||
<div class="message-header">
|
||||
@ -337,9 +334,7 @@ tile is-ancestor
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">3 columns</h3>
|
||||
{% include anchor.html name="3 columns" %}
|
||||
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-parent">
|
||||
@ -527,9 +522,7 @@ tile is-ancestor
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">4 columns</h3>
|
||||
{% include anchor.html name="4 columns" %}
|
||||
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-parent">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user