mirror of
https://github.com/jgthms/bulma
synced 2026-03-19 20:04:30 -07:00
Init v1
This commit is contained in:
Jeremy Thomas
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Columns
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: columns
|
||||
hide_tabs: true
|
||||
hide_pagination: true
|
||||
@@ -9,5 +10,4 @@ breadcrumb:
|
||||
- documentation
|
||||
- columns
|
||||
---
|
||||
|
||||
{% include components/links.html category_id='columns' %}
|
||||
{% include docs/components/links.html category_id='columns' %}
|
||||
|
||||
@@ -1,29 +1,23 @@
|
||||
---
|
||||
title: Columns powered by Flexbox
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-library: true
|
||||
doc-tab: columns
|
||||
doc-subtab: basics
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- columns
|
||||
- columns-basics
|
||||
- home
|
||||
- documentation
|
||||
- columns
|
||||
- columns-basics
|
||||
---
|
||||
|
||||
{% capture columns %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
First column
|
||||
</div>
|
||||
<div class="column">
|
||||
Second column
|
||||
</div>
|
||||
<div class="column">
|
||||
Third column
|
||||
</div>
|
||||
<div class="column">
|
||||
Fourth column
|
||||
</div>
|
||||
<div class="column">First column</div>
|
||||
<div class="column">Second column</div>
|
||||
<div class="column">Third column</div>
|
||||
<div class="column">Fourth column</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
@@ -33,7 +27,10 @@ breadcrumb:
|
||||
<li>Add a <code>columns</code> container</li>
|
||||
<li>Add as many <code>column</code> elements as you want</li>
|
||||
</ol>
|
||||
<p>Each column will have an <strong>equal width</strong>, no matter the number of columns.</p>
|
||||
<p>
|
||||
Each column will have an <strong>equal width</strong>, no matter the number
|
||||
of columns.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
@@ -52,5 +49,5 @@ breadcrumb:
|
||||
</div>
|
||||
|
||||
<div class="bd-highlight-full">
|
||||
{% highlight html %}{{ columns }}{% endhighlight %}
|
||||
{% highlight html -%} {{- columns -}} {%- endhighlight %}
|
||||
</div>
|
||||
|
||||
@@ -1,129 +1,84 @@
|
||||
---
|
||||
title: Columns gap
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-library: true
|
||||
doc-tab: columns
|
||||
doc-subtab: gap
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- columns
|
||||
- columns-gap
|
||||
- home
|
||||
- documentation
|
||||
- columns
|
||||
- columns-gap
|
||||
---
|
||||
|
||||
{% capture columns_default_gap %}
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p class="bd-notification is-primary">
|
||||
Default gap
|
||||
</p>
|
||||
<p class="bd-notification is-primary">Default gap</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-primary">
|
||||
Default gap
|
||||
</p>
|
||||
<p class="bd-notification is-primary">Default gap</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-primary">
|
||||
Default gap
|
||||
</p>
|
||||
<p class="bd-notification is-primary">Default gap</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-primary">
|
||||
Default gap
|
||||
</p>
|
||||
<p class="bd-notification is-primary">Default gap</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture columns_gapless %}
|
||||
<div class="columns is-gapless">
|
||||
<div class="column">
|
||||
No gap
|
||||
</div>
|
||||
<div class="column">
|
||||
No gap
|
||||
</div>
|
||||
<div class="column">
|
||||
No gap
|
||||
</div>
|
||||
<div class="column">
|
||||
No gap
|
||||
</div>
|
||||
<div class="column">No gap</div>
|
||||
<div class="column">No gap</div>
|
||||
<div class="column">No gap</div>
|
||||
<div class="column">No gap</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture columns_gapless_multiline %}
|
||||
<div class="columns is-gapless is-multiline is-mobile">
|
||||
<div class="column is-one-quarter">
|
||||
is-one-quarter
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
is-one-quarter
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
is-one-quarter
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
is-one-quarter
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
is-half
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
is-one-quarter
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
is-one-quarter
|
||||
</div>
|
||||
<div class="column is-one-quarter">
|
||||
is-one-quarter
|
||||
</div>
|
||||
<div class="column">
|
||||
Auto
|
||||
</div>
|
||||
<div class="column is-one-quarter">is-one-quarter</div>
|
||||
<div class="column is-one-quarter">is-one-quarter</div>
|
||||
<div class="column is-one-quarter">is-one-quarter</div>
|
||||
<div class="column is-one-quarter">is-one-quarter</div>
|
||||
<div class="column is-half">is-half</div>
|
||||
<div class="column is-one-quarter">is-one-quarter</div>
|
||||
<div class="column is-one-quarter">is-one-quarter</div>
|
||||
<div class="column is-one-quarter">is-one-quarter</div>
|
||||
<div class="column">Auto</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture columns_variable_responsive_gaps %}
|
||||
<div class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd">
|
||||
<div class="column">
|
||||
Column
|
||||
</div>
|
||||
<div class="column">
|
||||
Column
|
||||
</div>
|
||||
<div class="column">
|
||||
Column
|
||||
</div>
|
||||
<div class="column">
|
||||
Column
|
||||
</div>
|
||||
<div class="column">
|
||||
Column
|
||||
</div>
|
||||
<div class="column">
|
||||
Column
|
||||
</div>
|
||||
<div
|
||||
class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd"
|
||||
>
|
||||
<div class="column">Column</div>
|
||||
<div class="column">Column</div>
|
||||
<div class="column">Column</div>
|
||||
<div class="column">Column</div>
|
||||
<div class="column">Column</div>
|
||||
<div class="column">Column</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/anchor.html name="Default gap" %}
|
||||
{% include docs/elements/anchor.html name="Default gap" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Each column has a <strong>gap</strong> equal to the <strong>variable</strong> <code>$column-gap</code>, which has a default value of <code>0.75rem</code>.
|
||||
Each column has a <strong>gap</strong> equal to the <strong>variable</strong> <code>$column-gap</code>, which has a
|
||||
default value of <code>0.75rem</code>.
|
||||
<br>
|
||||
Since the gap is on <em>each side</em> of a column, the gap between two adjacent columns will be twice the value of <code>$column-gap</code>, or <code>1.5rem</code> by default.
|
||||
Since the gap is on <em>each side</em> of a column, the gap between two adjacent columns will be twice the value of
|
||||
<code>$column-gap</code>, or <code>1.5rem</code> by default.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{{ columns_default_gap }}
|
||||
|
||||
{% include elements/anchor.html name="Gapless" %}
|
||||
{% include docs/elements/anchor.html name="Gapless" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
If you want to remove the <strong>space</strong> between the columns, add the <code>is-gapless</code> modifier on the <code>columns</code> container:
|
||||
If you want to remove the <strong>space</strong> between the columns, add the <code>is-gapless</code> modifier on
|
||||
the <code>columns</code> container:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -143,7 +98,9 @@ breadcrumb:
|
||||
</div>
|
||||
|
||||
<div class="bd-highlight-full">
|
||||
{% highlight html %}{{ columns_gapless }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- columns_gapless -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
@@ -181,45 +138,36 @@ breadcrumb:
|
||||
</div>
|
||||
|
||||
<div class="bd-highlight-full">
|
||||
{% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- columns_gapless_multiline -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Variable gap" %}
|
||||
|
||||
<div class="field is-grouped is-grouped-multiline">
|
||||
<div class="control">
|
||||
<div class="tags">
|
||||
<span class="tag is-warning">Experimental</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include docs/elements/anchor.html name="Variable gap" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can specify a <strong>custom column gap</strong> by appending one of <strong>9 modifiers</strong> on the <code>.columns</code> container.
|
||||
You can specify a <strong>custom column gap</strong> by appending one of <strong>9 modifiers</strong> on the
|
||||
<code>.columns</code> container.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>is-0</code> will remove any gap (similar to <code>is-gapless</code>)
|
||||
</li>
|
||||
<li>
|
||||
<code>is-3</code> is the <strong>default value</strong>, equivalent to the <code>0.75rem</code> value
|
||||
</li>
|
||||
<li>
|
||||
<code>is-8</code> is the maximum gap of <code>2rem</code>
|
||||
</li>
|
||||
<li><code>is-0</code> will remove any gap (similar to <code>is-gapless</code>)</li>
|
||||
<li><code>is-3</code> is the <strong>default value</strong>, equivalent to the <code>0.75rem</code> value</li>
|
||||
<li><code>is-8</code> is the maximum gap of <code>2rem</code></li>
|
||||
</ul>
|
||||
<p>
|
||||
Additionally, <code>.is-variable</code> should be added on the <code>.columns</code> container.
|
||||
</p>
|
||||
<p>Additionally, <code>.is-variable</code> should be added on the <code>.columns</code> container.</p>
|
||||
</div>
|
||||
|
||||
{% include content/klmn.html %}
|
||||
{% include docs/content/klmn.html %}
|
||||
|
||||
<div class="message is-warning">
|
||||
<div class="message-body">
|
||||
<p>
|
||||
This feature is only available in browsers that support <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables">CSS Variables</a>.
|
||||
This feature is only available in browsers that support
|
||||
<a
|
||||
href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables"
|
||||
>CSS Variables</a
|
||||
>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -227,55 +175,61 @@ breadcrumb:
|
||||
<div class="message is-info">
|
||||
<div class="message-body">
|
||||
<p>
|
||||
If your Sass setup doesn't support CSS Variables, you can <strong>disable this feature</strong> by setting <code>$variable-columns</code> to <code>false</code>.
|
||||
If your Sass setup doesn't support CSS Variables, you can
|
||||
<strong>disable this feature</strong> by setting <code>$variable-columns</code> to <code>false</code>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% assign vernum = site.data.meta.version | downcase | remove: "." | plus: 0 %}
|
||||
|
||||
{% assign vernum = site.data.meta.version | downcase | remove: '.' | plus: 0 %}
|
||||
{% if vernum >= 72 %}
|
||||
{%
|
||||
include docs/elements/anchor.html name="Breakpoint
|
||||
based column gaps"
|
||||
%}
|
||||
|
||||
{% include elements/anchor.html name="Breakpoint based column gaps" %}
|
||||
<div class="content">
|
||||
<p>You can define a column gap for each viewport size:</p>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can define a column gap for each viewport size:
|
||||
</p>
|
||||
|
||||
<p>For example, here's how it looks with the following modifiers: <code>is-variable is-2-mobile is-0-tablet is-3-desktop is-8-widescreen is-1-fullhd</code></p>
|
||||
</div>
|
||||
|
||||
<div class="bd-highlight-full">
|
||||
{% highlight html %}{{ columns_variable_responsive_gaps }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
|
||||
<div class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd">
|
||||
<div class="column">
|
||||
<p class="bd-notification is-primary">Column</p>
|
||||
<p>
|
||||
For example, here's how it looks with the following modifiers:
|
||||
<code>is-variable is-2-mobile is-0-tablet is-3-desktop is-8-widescreen is-1-fullhd</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-primary">Column</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-primary">Column</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-primary">Column</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-primary">Column</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-primary">Column</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message is-info">
|
||||
<p class="message-body">
|
||||
If you want to see the difference, resize your browser and see how the <strong>columns gap</strong> varies.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bd-highlight-full">
|
||||
{% highlight html -%}
|
||||
{{- columns_variable_responsive_gaps -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd"
|
||||
>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-primary">Column</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-primary">Column</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-primary">Column</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-primary">Column</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-primary">Column</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-primary">Column</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message is-info">
|
||||
<p class="message-body">
|
||||
If you want to see the difference, resize your browser and see how the
|
||||
<strong>columns gap</strong> varies.
|
||||
</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
@@ -1,18 +1,21 @@
|
||||
---
|
||||
title: Nesting columns
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-library: true
|
||||
doc-tab: columns
|
||||
doc-subtab: nesting
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- columns
|
||||
- columns-nesting
|
||||
- home
|
||||
- documentation
|
||||
- columns
|
||||
- columns-nesting
|
||||
---
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can <strong>nest</strong> columns to have more flexibility in your design. You only need to follow this structure:
|
||||
You can <strong>nest</strong> columns to have more flexibility in your
|
||||
design. You only need to follow this structure:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
@@ -24,9 +27,7 @@ breadcrumb:
|
||||
<li>
|
||||
<code>columns</code>: nested columns
|
||||
<ul>
|
||||
<li>
|
||||
<code>column</code> and so on…
|
||||
</li>
|
||||
<li><code>column</code> and so on…</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -35,7 +36,14 @@ breadcrumb:
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
The difference with <a href="{{ site.url }}/documentation/columns/options/#multiline">multiline columns</a> is the <strong>order</strong> in the HTML code: all the <strong class="has-text-info">blue</strong> columns appear <em>before</em> the <strong class="has-text-danger">red</strong> ones. Resize to a narrower viewport to see the result.
|
||||
The difference with
|
||||
<a href="{{ site.url }}/documentation/columns/options/#multiline"
|
||||
>multiline columns</a
|
||||
>
|
||||
is the <strong>order</strong> in the HTML code: all the
|
||||
<strong class="has-text-info">blue</strong> columns appear
|
||||
<em>before</em> the <strong class="has-text-danger">red</strong> ones.
|
||||
Resize to a narrower viewport to see the result.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -67,16 +75,15 @@ breadcrumb:
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{{ columns_nested_example }}
|
||||
{% endcapture %} {{ columns_nested_example }}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Multiline columns will also have a <strong>gap</strong> between each <strong>line</strong>.
|
||||
Multiline columns will also have a <strong>gap</strong> between each
|
||||
<strong>line</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-highlight-full">
|
||||
{% highlight html %}{{ columns_nested_example }}{% endhighlight %}
|
||||
{% highlight html -%} {{- columns_nested_example -}} {%- endhighlight %}
|
||||
</div>
|
||||
|
||||
@@ -1,13 +1,15 @@
|
||||
---
|
||||
title: Column options
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-library: true
|
||||
doc-tab: columns
|
||||
doc-subtab: options
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- columns
|
||||
- columns-options
|
||||
- home
|
||||
- documentation
|
||||
- columns
|
||||
- columns-options
|
||||
---
|
||||
|
||||
{% capture columns_vcentered %}
|
||||
@@ -16,12 +18,13 @@ breadcrumb:
|
||||
<p class="bd-notification is-primary">First column</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-primary">Second column with more content. This is so you can see the vertical alignment.</p>
|
||||
<p class="bd-notification is-primary">
|
||||
Second column with more content. This is so you can see the vertical
|
||||
alignment.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture columns_multiline %}
|
||||
{% endcapture %} {% capture columns_multiline %}
|
||||
<div class="columns is-multiline is-mobile">
|
||||
<div class="column is-one-quarter">
|
||||
<code>is-one-quarter</code>
|
||||
@@ -47,61 +50,57 @@ breadcrumb:
|
||||
<div class="column is-one-quarter">
|
||||
<code>is-one-quarter</code>
|
||||
</div>
|
||||
<div class="column">
|
||||
Auto
|
||||
</div>
|
||||
<div class="column">Auto</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture columns_mobile_centered %}
|
||||
{% endcapture %} {% capture columns_mobile_centered %}
|
||||
<div class="columns is-mobile is-centered">
|
||||
<div class="column is-half">
|
||||
<p class="bd-notification is-primary">
|
||||
<code class="html">is-half</code><br>
|
||||
<code class="html">is-half</code><br />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture columns_mobile_multiline_centered %}
|
||||
{% endcapture %} {% capture columns_mobile_multiline_centered %}
|
||||
<div class="columns is-mobile is-multiline is-centered">
|
||||
<div class="column is-narrow">
|
||||
<p class="bd-notification is-primary">
|
||||
<code class="html">is-narrow</code><br>
|
||||
<code class="html">is-narrow</code><br />
|
||||
First Column
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<p class="bd-notification is-primary">
|
||||
<code class="html">is-narrow</code><br>
|
||||
<code class="html">is-narrow</code><br />
|
||||
Our Second Column
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<p class="bd-notification is-primary">
|
||||
<code class="html">is-narrow</code><br>
|
||||
<code class="html">is-narrow</code><br />
|
||||
Third Column
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<p class="bd-notification is-primary">
|
||||
<code class="html">is-narrow</code><br>
|
||||
<code class="html">is-narrow</code><br />
|
||||
The Fourth Column
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<p class="bd-notification is-primary">
|
||||
<code class="html">is-narrow</code><br>
|
||||
<code class="html">is-narrow</code><br />
|
||||
Fifth Column
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/anchor.html name="Vertical alignment" %}
|
||||
{% endcapture %} {% include docs/elements/anchor.html name="Vertical alignment"
|
||||
%}
|
||||
|
||||
<div class="content">
|
||||
<p>To align your columns vertically, add the <code>is-vcentered</code> modifier to the <code>columns</code> container.</p>
|
||||
<p>
|
||||
To align your columns vertically, add the <code>is-vcentered</code> modifier
|
||||
to the <code>columns</code> container.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns is-vcentered">
|
||||
@@ -109,16 +108,23 @@ breadcrumb:
|
||||
<p class="bd-notification is-primary">First column</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-primary">Second column with more content. This is so you can see the vertical alignment.</p>
|
||||
<p class="bd-notification is-primary">
|
||||
Second column with more content. This is so you can see the vertical
|
||||
alignment.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ columns_vcentered }}{% endhighlight %}
|
||||
|
||||
{% include elements/anchor.html name="Multiline" %}
|
||||
{% highlight html -%} {{- columns_vcentered -}} {%- endhighlight %} {% include
|
||||
docs/elements/anchor.html name="Multiline" %}
|
||||
|
||||
<div class="content">
|
||||
<p>Whenever you want to start a new line, you can close a <code>columns</code> container and start a new one. But you can also add the <code>is-multiline</code> modifier and add <strong>more</strong> column elements than would fit in a single row.</p>
|
||||
<p>
|
||||
Whenever you want to start a new line, you can close a
|
||||
<code>columns</code> container and start a new one. But you can also add the
|
||||
<code>is-multiline</code> modifier and add <strong>more</strong> column
|
||||
elements than would fit in a single row.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns is-multiline is-mobile">
|
||||
@@ -151,63 +157,67 @@ breadcrumb:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ columns_multiline }}{% endhighlight %}
|
||||
|
||||
{% include elements/anchor.html name="Centering columns" %}
|
||||
{% highlight html -%} {{- columns_multiline -}} {%- endhighlight %} {% include
|
||||
docs/elements/anchor.html name="Centering columns" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
While you can use <em>empty columns</em> (like <code><div class="column"></div></code>) to create horizontal space around <code>.column</code> elements, you can also use <code>.is-centered</code> on the parent <code>.columns</code> element:
|
||||
While you can use <em>empty columns</em> (like
|
||||
<code><div class="column"></div></code>) to create horizontal
|
||||
space around <code>.column</code> elements, you can also use
|
||||
<code>.is-centered</code> on the parent <code>.columns</code> element:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns is-mobile is-centered">
|
||||
<div class="column is-half">
|
||||
<p class="bd-notification is-primary">
|
||||
<code class="html">is-half</code><br>
|
||||
<code class="html">is-half</code><br />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ columns_mobile_centered }}{% endhighlight %}
|
||||
{% highlight html -%} {{- columns_mobile_centered -}} {%- endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Use with <code>.is-multiline</code> to create a flexible, centered list (try resizing to see centering in different viewport sizes):
|
||||
Use with <code>.is-multiline</code> to create a flexible, centered list (try
|
||||
resizing to see centering in different viewport sizes):
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns is-mobile is-multiline is-centered">
|
||||
<div class="column is-narrow">
|
||||
<p class="bd-notification is-primary" style="padding: 1.25rem 1.5rem;">
|
||||
<code class="html">is-narrow</code><br>
|
||||
<p class="bd-notification is-primary" style="padding: 1.25rem 1.5rem">
|
||||
<code class="html">is-narrow</code><br />
|
||||
First Column
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<p class="bd-notification is-primary" style="padding: 1.25rem 1.5rem;">
|
||||
<code class="html">is-narrow</code><br>
|
||||
<p class="bd-notification is-primary" style="padding: 1.25rem 1.5rem">
|
||||
<code class="html">is-narrow</code><br />
|
||||
Our Second Column
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<p class="bd-notification is-primary" style="padding: 1.25rem 1.5rem;">
|
||||
<code class="html">is-narrow</code><br>
|
||||
<p class="bd-notification is-primary" style="padding: 1.25rem 1.5rem">
|
||||
<code class="html">is-narrow</code><br />
|
||||
Third Column
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<p class="bd-notification is-primary" style="padding: 1.25rem 1.5rem;">
|
||||
<code class="html">is-narrow</code><br>
|
||||
<p class="bd-notification is-primary" style="padding: 1.25rem 1.5rem">
|
||||
<code class="html">is-narrow</code><br />
|
||||
The Fourth Column
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<p class="bd-notification is-primary" style="padding: 1.25rem 1.5rem;">
|
||||
<code class="html">is-narrow</code><br>
|
||||
<p class="bd-notification is-primary" style="padding: 1.25rem 1.5rem">
|
||||
<code class="html">is-narrow</code><br />
|
||||
Fifth Column
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ columns_mobile_multiline_centered }}{% endhighlight %}
|
||||
{% highlight html -%} {{- columns_mobile_multiline_centered -}} {%- endhighlight
|
||||
%}
|
||||
|
||||
@@ -1,15 +1,16 @@
|
||||
---
|
||||
title: Columns responsiveness
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-library: true
|
||||
doc-tab: columns
|
||||
doc-subtab: responsiveness
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- columns
|
||||
- columns-responsiveness
|
||||
- home
|
||||
- documentation
|
||||
- columns
|
||||
- columns-responsiveness
|
||||
---
|
||||
|
||||
{% capture columns_mobile %}
|
||||
<div class="columns is-mobile">
|
||||
<div class="column">1</div>
|
||||
@@ -18,7 +19,6 @@ breadcrumb:
|
||||
<div class="column">4</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture columns_desktop %}
|
||||
<div class="columns is-desktop">
|
||||
<div class="column">1</div>
|
||||
@@ -27,14 +27,22 @@ breadcrumb:
|
||||
<div class="column">4</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture columns_multiple_breakpoints %}
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-three-quarters-mobile is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
|
||||
<code>is-three-quarters-mobile</code><br>
|
||||
<code>is-two-thirds-tablet</code><br>
|
||||
<code>is-half-desktop</code><br>
|
||||
<code>is-one-third-widescreen</code><br>
|
||||
<div
|
||||
class="
|
||||
column
|
||||
is-three-quarters-mobile
|
||||
is-two-thirds-tablet
|
||||
is-half-desktop
|
||||
is-one-third-widescreen
|
||||
is-one-quarter-fullhd
|
||||
"
|
||||
>
|
||||
<code>is-three-quarters-mobile</code><br />
|
||||
<code>is-two-thirds-tablet</code><br />
|
||||
<code>is-half-desktop</code><br />
|
||||
<code>is-one-third-widescreen</code><br />
|
||||
<code>is-one-quarter-fullhd</code>
|
||||
</div>
|
||||
<div class="column">2</div>
|
||||
@@ -43,14 +51,15 @@ breadcrumb:
|
||||
<div class="column">5</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/anchor.html name="Mobile columns" %}
|
||||
{% include docs/elements/anchor.html name="Mobile columns" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
By default, columns are only activated from <strong>tablet</strong> onwards. This means columns are stacked on top of each other on <strong>mobile</strong>.
|
||||
By default, columns are only activated from <strong>tablet</strong> onwards. This means columns are stacked on top
|
||||
of each other on <strong>mobile</strong>.
|
||||
<br>
|
||||
If you want columns to work on <strong>mobile too</strong>, just add the <code>is-mobile</code> modifier on the <code>columns</code> container:
|
||||
If you want columns to work on <strong>mobile too</strong>, just add the <code>is-mobile</code> modifier on the
|
||||
<code>columns</code> container:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -69,20 +78,22 @@ breadcrumb:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ columns_mobile }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- columns_mobile -}}
|
||||
{%- endhighlight %}
|
||||
|
||||
<div class="message is-info">
|
||||
<p class="message-header">
|
||||
Resize
|
||||
</p>
|
||||
<p class="message-header">Resize</p>
|
||||
<p class="message-body">
|
||||
If you want to see the difference, resize your browser and see <em>when</em> the columns are stacked and when they are horizontally distributed.
|
||||
If you want to see the difference, resize your browser and see
|
||||
<em>when</em> the columns are stacked and when they are horizontally distributed.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
If you <em>only</em> want columns on <strong>desktop</strong> upwards, just use the <code>is-desktop</code> modifier on the <code>columns</code> container:
|
||||
If you <em>only</em> want columns on <strong>desktop</strong> upwards, just use the <code>is-desktop</code> modifier
|
||||
on the <code>columns</code> container:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -101,16 +112,26 @@ breadcrumb:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ columns_desktop }}{% endhighlight %}
|
||||
|
||||
{% include elements/anchor.html name="Different column sizes per breakpoint" %}
|
||||
{% highlight html -%}
|
||||
{{- columns_desktop -}}
|
||||
{%- endhighlight %}
|
||||
{% include docs/elements/anchor.html name="Different column sizes per breakpoint" %}
|
||||
|
||||
<div class="content">
|
||||
<p>You can define a <strong>column size</strong> for <em>each</em> viewport size: mobile, tablet, and desktop.</p>
|
||||
</div>
|
||||
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-three-quarters-mobile is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
|
||||
<div
|
||||
class="
|
||||
column
|
||||
is-three-quarters-mobile
|
||||
is-two-thirds-tablet
|
||||
is-half-desktop
|
||||
is-one-third-widescreen
|
||||
is-one-quarter-fullhd
|
||||
"
|
||||
>
|
||||
<p class="bd-notification is-primary">
|
||||
<code>is-three-quarters-mobile</code><br>
|
||||
<code>is-two-thirds-tablet</code><br>
|
||||
@@ -135,7 +156,14 @@ breadcrumb:
|
||||
|
||||
<div class="message is-info">
|
||||
<p class="message-header">Resize</p>
|
||||
<p class="message-body">If you want to see these classes in action, resize your browser window and see how the same column varies in width at each breakpoint.</p>
|
||||
<p class="message-body">
|
||||
If you want to see these classes in action, resize your browser window and see how the same column varies in width
|
||||
at each breakpoint.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ columns_multiple_breakpoints }}{% endhighlight %}
|
||||
<div class="bd-highlight-full">
|
||||
{% highlight html -%}
|
||||
{{- columns_multiple_breakpoints -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
|
||||
@@ -1,15 +1,16 @@
|
||||
---
|
||||
title: Column sizes
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-library: true
|
||||
doc-tab: columns
|
||||
doc-subtab: sizes
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- columns
|
||||
- columns-sizes
|
||||
- home
|
||||
- documentation
|
||||
- columns
|
||||
- columns-sizes
|
||||
---
|
||||
|
||||
{% capture columns_sizes %}
|
||||
<div class="columns">
|
||||
<div class="column is-four-fifths">is-four-fifths</div>
|
||||
@@ -65,7 +66,6 @@ breadcrumb:
|
||||
<div class="column">Auto</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture columns_offset %}
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-half is-offset-one-quarter"></div>
|
||||
@@ -83,11 +83,10 @@ breadcrumb:
|
||||
<div class="column is-11 is-offset-1"></div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture columns_narrow %}
|
||||
<div class="columns">
|
||||
<div class="column is-narrow">
|
||||
<div class="box" style="width: 200px;">
|
||||
<div class="box" style="width: 200px">
|
||||
<p class="title is-5">Narrow column</p>
|
||||
<p class="subtitle">This column is only 200px wide.</p>
|
||||
</div>
|
||||
@@ -95,7 +94,9 @@ breadcrumb:
|
||||
<div class="column">
|
||||
<div class="box">
|
||||
<p class="title is-5">Flexible column</p>
|
||||
<p class="subtitle">This column will take up the remaining space available.</p>
|
||||
<p class="subtitle">
|
||||
This column will take up the remaining space available.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -159,10 +160,10 @@ breadcrumb:
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-fojeisj">Auto</p>
|
||||
<p class="bd-notification">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-wajofij">Auto</p>
|
||||
<p class="bd-notification">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -173,10 +174,10 @@ breadcrumb:
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-fojeisj">Auto</p>
|
||||
<p class="bd-notification">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-wajofij">Auto</p>
|
||||
<p class="bd-notification">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -187,10 +188,10 @@ breadcrumb:
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-fojeisj">Auto</p>
|
||||
<p class="bd-notification">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-wajofij">Auto</p>
|
||||
<p class="bd-notification">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -201,10 +202,10 @@ breadcrumb:
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-fojeisj">Auto</p>
|
||||
<p class="bd-notification">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-wajofij">Auto</p>
|
||||
<p class="bd-notification">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -215,10 +216,10 @@ breadcrumb:
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-fojeisj">Auto</p>
|
||||
<p class="bd-notification">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-wajofij">Auto</p>
|
||||
<p class="bd-notification">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -229,10 +230,10 @@ breadcrumb:
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-fojeisj">Auto</p>
|
||||
<p class="bd-notification">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-wajofij">Auto</p>
|
||||
<p class="bd-notification">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -243,10 +244,10 @@ breadcrumb:
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-fojeisj">Auto</p>
|
||||
<p class="bd-notification">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-wajofij">Auto</p>
|
||||
<p class="bd-notification">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -257,10 +258,10 @@ breadcrumb:
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-fojeisj">Auto</p>
|
||||
<p class="bd-notification">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-wajofij">Auto</p>
|
||||
<p class="bd-notification">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -271,18 +272,20 @@ breadcrumb:
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-fojeisj">Auto</p>
|
||||
<p class="bd-notification">Auto</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-wajofij">Auto</p>
|
||||
<p class="bd-notification">Auto</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-highlight-full">
|
||||
{% highlight html %}{{ columns_sizes }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- columns_sizes -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="12 columns system" %}
|
||||
{% include docs/elements/anchor.html name="12 columns system" %}
|
||||
|
||||
<div class="content">
|
||||
<p>As the grid can be divided into <strong>12</strong> columns, there are size classes for each division:</p>
|
||||
@@ -304,7 +307,10 @@ breadcrumb:
|
||||
|
||||
<div class="message is-info">
|
||||
<p class="message-header">Naming convention</p>
|
||||
<p class="message-body">Each modifier class is named after <strong>how many columns you want out of 12</strong>. So if you want 7 columns out of 12, use <code>is-7</code>.</p>
|
||||
<p class="message-body">
|
||||
Each modifier class is named after
|
||||
<strong>how many columns you want out of 12</strong>. So if you want 7 columns out of 12, use <code>is-7</code>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-1">
|
||||
@@ -349,34 +355,34 @@ breadcrumb:
|
||||
<p class="bd-notification is-primary"><code>is-2</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
@@ -384,31 +390,31 @@ breadcrumb:
|
||||
<p class="bd-notification is-primary"><code>is-3</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
@@ -416,28 +422,28 @@ breadcrumb:
|
||||
<p class="bd-notification is-primary"><code>is-4</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
@@ -445,25 +451,25 @@ breadcrumb:
|
||||
<p class="bd-notification is-primary"><code>is-5</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
@@ -471,22 +477,22 @@ breadcrumb:
|
||||
<p class="bd-notification is-primary"><code>is-6</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
@@ -494,19 +500,19 @@ breadcrumb:
|
||||
<p class="bd-notification is-primary"><code>is-7</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
@@ -514,16 +520,16 @@ breadcrumb:
|
||||
<p class="bd-notification is-primary"><code>is-8</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
@@ -531,13 +537,13 @@ breadcrumb:
|
||||
<p class="bd-notification is-primary"><code>is-9</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
@@ -545,10 +551,10 @@ breadcrumb:
|
||||
<p class="bd-notification is-primary"><code>is-10</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-wajofij has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
@@ -556,7 +562,7 @@ breadcrumb:
|
||||
<p class="bd-notification is-primary"><code>is-11</code></p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-fojeisj has-text-centered">1</p>
|
||||
<p class="bd-notification has-text-centered">1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
@@ -565,11 +571,13 @@ breadcrumb:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Offset" %}
|
||||
{% include docs/elements/anchor.html name="Offset" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
While you can use <em>empty columns</em> (like <code><div class="column"></div></code>) to create horizontal space around <code>.column</code> elements, you can also use <strong>offset</strong> modifiers like <code>.is-offset-x</code>:
|
||||
While you can use <em>empty columns</em> (like <code><div class="column"></div></code>) to create
|
||||
horizontal space around <code>.column</code> elements, you can also use <strong>offset</strong> modifiers like
|
||||
<code>.is-offset-x</code>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -610,18 +618,23 @@ breadcrumb:
|
||||
</div>
|
||||
|
||||
<div class="bd-highlight-full">
|
||||
{% highlight html %}{{ columns_offset }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- columns_offset -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Narrow column" %}
|
||||
{% include docs/elements/anchor.html name="Narrow column" %}
|
||||
|
||||
<div class="content">
|
||||
<p>If you want a column to only take the <strong>space it needs</strong>, use the <code>is-narrow</code> modifier. The other column(s) will fill up the remaining space.</p>
|
||||
<p>
|
||||
If you want a column to only take the <strong>space it needs</strong>, use the <code>is-narrow</code> modifier. The
|
||||
other column(s) will fill up the remaining space.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-narrow">
|
||||
<div class="box" style="width: 200px;">
|
||||
<div class="box" style="width: 200px">
|
||||
<p class="title is-5">Narrow column</p>
|
||||
<p class="subtitle">This column is only 200px wide.</p>
|
||||
</div>
|
||||
@@ -635,11 +648,16 @@ breadcrumb:
|
||||
</div>
|
||||
|
||||
<div class="bd-highlight-full">
|
||||
{% highlight html %}{{ columns_narrow }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- columns_narrow -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>As for the size modifiers, you can have narrow columns for different <strong>breakpoints</strong>:</p>
|
||||
<p>
|
||||
As for the size modifiers, you can have narrow columns for different
|
||||
<strong>breakpoints</strong>:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>.is-narrow-mobile</code>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Components
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: components
|
||||
hide_tabs: true
|
||||
hide_pagination: true
|
||||
@@ -9,5 +10,4 @@ breadcrumb:
|
||||
- documentation
|
||||
- components
|
||||
---
|
||||
|
||||
{% include components/links.html category_id='components' %}
|
||||
{% include docs/components/links.html category_id='components' %}
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
---
|
||||
title: Breadcrumb
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: components
|
||||
doc-subtab: breadcrumb
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-breadcrumb
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-breadcrumb
|
||||
meta:
|
||||
variables: true
|
||||
colors: false
|
||||
@@ -23,9 +24,7 @@ meta:
|
||||
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture breadcrumb_centered_example %}
|
||||
{% endcapture %} {% capture breadcrumb_centered_example %}
|
||||
<nav class="breadcrumb is-centered" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="#">Bulma</a></li>
|
||||
@@ -34,9 +33,7 @@ meta:
|
||||
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture breadcrumb_right_example %}
|
||||
{% endcapture %} {% capture breadcrumb_right_example %}
|
||||
<nav class="breadcrumb is-right" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="#">Bulma</a></li>
|
||||
@@ -45,9 +42,7 @@ meta:
|
||||
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture breadcrumb_icons_example %}
|
||||
{% endcapture %} {% capture breadcrumb_icons_example %}
|
||||
<nav class="breadcrumb" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li>
|
||||
@@ -84,9 +79,7 @@ meta:
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture breadcrumb_small_example %}
|
||||
{% endcapture %} {% capture breadcrumb_small_example %}
|
||||
<nav class="breadcrumb is-small" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="#">Bulma</a></li>
|
||||
@@ -95,9 +88,7 @@ meta:
|
||||
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture breadcrumb_medium_example %}
|
||||
{% endcapture %} {% capture breadcrumb_medium_example %}
|
||||
<nav class="breadcrumb is-medium" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="#">Bulma</a></li>
|
||||
@@ -106,9 +97,7 @@ meta:
|
||||
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture breadcrumb_large_example %}
|
||||
{% endcapture %} {% capture breadcrumb_large_example %}
|
||||
<nav class="breadcrumb is-large" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="#">Bulma</a></li>
|
||||
@@ -117,9 +106,7 @@ meta:
|
||||
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture breadcrumb_arrow_example %}
|
||||
{% endcapture %} {% capture breadcrumb_arrow_example %}
|
||||
<nav class="breadcrumb has-arrow-separator" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="#">Bulma</a></li>
|
||||
@@ -128,9 +115,7 @@ meta:
|
||||
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture breadcrumb_bullet_example %}
|
||||
{% endcapture %} {% capture breadcrumb_bullet_example %}
|
||||
<nav class="breadcrumb has-bullet-separator" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="#">Bulma</a></li>
|
||||
@@ -139,9 +124,7 @@ meta:
|
||||
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture breadcrumb_dot_example %}
|
||||
{% endcapture %} {% capture breadcrumb_dot_example %}
|
||||
<nav class="breadcrumb has-dot-separator" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="#">Bulma</a></li>
|
||||
@@ -150,9 +133,7 @@ meta:
|
||||
<li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture breadcrumb_succeeds_example %}
|
||||
{% endcapture %} {% capture breadcrumb_succeeds_example %}
|
||||
<nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs">
|
||||
<ul>
|
||||
<li><a href="#">Bulma</a></li>
|
||||
@@ -165,56 +146,73 @@ meta:
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The Bulma <strong>breadcrumb</strong> is a simple navigation component that only requires a <code>breadcrumb</code> container and a <code>ul</code> list. The dividers are automatically created in the content of the <code>::before</code> pseudo-element of <code>li</code> tags.
|
||||
The Bulma <strong>breadcrumb</strong> is a simple navigation component that
|
||||
only requires a <code>breadcrumb</code> container and a
|
||||
<code>ul</code> list. The dividers are automatically created in the content
|
||||
of the <code>::before</code> pseudo-element of <code>li</code> tags.
|
||||
</p>
|
||||
<p>
|
||||
You can inform the current page using the <code>is-active</code> modifier in
|
||||
a <code>li</code> tag. It will disable the navigation of inner links.
|
||||
</p>
|
||||
<p>You can inform the current page using the <code>is-active</code> modifier in a <code>li</code> tag. It will disable the navigation of inner links.</p>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
{% include elements/snippet.html content=breadcrumb_example horizontal=true clipped=true %}
|
||||
<hr />
|
||||
|
||||
{% include elements/anchor.html name="Alignment" %}
|
||||
{% include docs/elements/snippet.html content=breadcrumb_example horizontal=true
|
||||
clipped=true %}
|
||||
|
||||
{% include docs/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>
|
||||
<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 elements/snippet.html content=breadcrumb_centered_example horizontal=true clipped=true %}
|
||||
|
||||
{% include elements/snippet.html content=breadcrumb_right_example horizontal=true clipped=true %}
|
||||
|
||||
{% include elements/anchor.html name="Icons" %}
|
||||
{% include docs/elements/snippet.html content=breadcrumb_centered_example
|
||||
horizontal=true clipped=true %} {% include docs/elements/snippet.html
|
||||
content=breadcrumb_right_example horizontal=true clipped=true %} {% include
|
||||
docs/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>
|
||||
<p>
|
||||
You can use any of the
|
||||
<a href="https://fontawesome.com/" target="_blank">Font Awesome</a>
|
||||
<strong>icons</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=breadcrumb_icons_example horizontal=true clipped=true %}
|
||||
|
||||
{% include elements/anchor.html name="Alternative separators" %}
|
||||
{% include docs/elements/snippet.html content=breadcrumb_icons_example
|
||||
horizontal=true clipped=true %} {% include docs/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>
|
||||
<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 elements/snippet.html content=breadcrumb_arrow_example horizontal=true clipped=true %}
|
||||
|
||||
{% include elements/snippet.html content=breadcrumb_bullet_example horizontal=true clipped=true %}
|
||||
|
||||
{% include elements/snippet.html content=breadcrumb_dot_example horizontal=true clipped=true %}
|
||||
|
||||
{% include elements/snippet.html content=breadcrumb_succeeds_example horizontal=true clipped=true %}
|
||||
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
{% include docs/elements/snippet.html content=breadcrumb_arrow_example
|
||||
horizontal=true clipped=true %} {% include docs/elements/snippet.html
|
||||
content=breadcrumb_bullet_example horizontal=true clipped=true %} {% include
|
||||
docs/elements/snippet.html content=breadcrumb_dot_example horizontal=true
|
||||
clipped=true %} {% include docs/elements/snippet.html
|
||||
content=breadcrumb_succeeds_example horizontal=true clipped=true %} {% include
|
||||
docs/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>
|
||||
<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 elements/snippet.html content=breadcrumb_small_example horizontal=true clipped=true %}
|
||||
|
||||
{% include elements/snippet.html content=breadcrumb_medium_example horizontal=true clipped=true %}
|
||||
|
||||
{% include elements/snippet.html content=breadcrumb_large_example horizontal=true clipped=true %}
|
||||
|
||||
{% include components/variables.html type='component' %}
|
||||
{% include docs/elements/snippet.html content=breadcrumb_small_example
|
||||
horizontal=true clipped=true %} {% include docs/elements/snippet.html
|
||||
content=breadcrumb_medium_example horizontal=true clipped=true %} {% include
|
||||
docs/elements/snippet.html content=breadcrumb_large_example horizontal=true
|
||||
clipped=true %}
|
||||
|
||||
@@ -1,31 +1,37 @@
|
||||
---
|
||||
title: Card
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: components
|
||||
doc-subtab: card
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-card
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-card
|
||||
meta:
|
||||
variables: true
|
||||
colors: false
|
||||
sizes: false
|
||||
---
|
||||
|
||||
{% capture card_example %}
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<figure class="image is-4by3">
|
||||
<img src="{{site.url}}/images/placeholders/1280x960.png" alt="Placeholder image">
|
||||
<img
|
||||
src="{{site.url}}/assets/images/placeholders/1280x960.png"
|
||||
alt="Placeholder image"
|
||||
/>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="media">
|
||||
<div class="media-left">
|
||||
<figure class="image is-48x48">
|
||||
<img src="{{site.url}}/images/placeholders/96x96.png" alt="Placeholder image">
|
||||
<img
|
||||
src="{{site.url}}/assets/images/placeholders/96x96.png"
|
||||
alt="Placeholder image"
|
||||
/>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
@@ -35,22 +41,19 @@ meta:
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Phasellus nec iaculis mauris. <a>@bulmaio</a>.
|
||||
<a href="#">#css</a> <a href="#">#responsive</a>
|
||||
<br>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec
|
||||
iaculis mauris. <a>@bulmaio</a>. <a href="#">#css</a>
|
||||
<a href="#">#responsive</a>
|
||||
<br />
|
||||
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture card_header_example %}
|
||||
<div class="card">
|
||||
<header class="card-header">
|
||||
<p class="card-header-title">
|
||||
Component
|
||||
</p>
|
||||
<p class="card-header-title">Component</p>
|
||||
<button class="card-header-icon" aria-label="more options">
|
||||
<span class="icon">
|
||||
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
||||
@@ -59,9 +62,10 @@ meta:
|
||||
</header>
|
||||
<div class="card-content">
|
||||
<div class="content">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec
|
||||
iaculis mauris.
|
||||
<a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
|
||||
<br>
|
||||
<br />
|
||||
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
|
||||
</div>
|
||||
</div>
|
||||
@@ -72,27 +76,26 @@ meta:
|
||||
</footer>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture card_title_example %}
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<p class="title">
|
||||
“There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.”
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Jeff Atwood
|
||||
“There are two hard things in computer science: cache invalidation, naming
|
||||
things, and off-by-one errors.”
|
||||
</p>
|
||||
<p class="subtitle">Jeff Atwood</p>
|
||||
</div>
|
||||
<footer class="card-footer">
|
||||
<p class="card-footer-item">
|
||||
<span>
|
||||
View on <a href="https://twitter.com/codinghorror/status/506010907021828096">Twitter</a>
|
||||
View on
|
||||
<a href="https://twitter.com/codinghorror/status/506010907021828096"
|
||||
>Twitter</a
|
||||
>
|
||||
</span>
|
||||
</p>
|
||||
<p class="card-footer-item">
|
||||
<span>
|
||||
Share on <a href="#">Facebook</a>
|
||||
</span>
|
||||
<span> Share on <a href="#">Facebook</a> </span>
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -107,26 +110,16 @@ meta:
|
||||
<li>
|
||||
<code>card-header</code>: a horizontal bar with a shadow
|
||||
<ul>
|
||||
<li>
|
||||
<code>card-header-title</code>: a left-aligned bold text
|
||||
</li>
|
||||
<li>
|
||||
<code>card-header-icon</code>: a placeholder for an icon
|
||||
</li>
|
||||
<li><code>card-header-title</code>: a left-aligned bold text</li>
|
||||
<li><code>card-header-icon</code>: a placeholder for an icon</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<code>card-image</code>: a fullwidth container for a responsive image
|
||||
</li>
|
||||
<li>
|
||||
<code>card-content</code>: a multi-purpose container for <em>any</em> other element
|
||||
</li>
|
||||
<li><code>card-image</code>: a fullwidth container for a responsive image</li>
|
||||
<li><code>card-content</code>: a multi-purpose container for <em>any</em> other element</li>
|
||||
<li>
|
||||
<code>card-footer</code>: a horizontal list of controls
|
||||
<ul>
|
||||
<li>
|
||||
<code>card-footer-item</code>: a repeatable list item
|
||||
</li>
|
||||
<li><code>card-footer-item</code>: a repeatable list item</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -135,15 +128,13 @@ meta:
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can center the <code>card-header-title</code> by appending the <code>is-centered</code> modifier.
|
||||
</p>
|
||||
<p>You can center the <code>card-header-title</code> by appending the <code>is-centered</code> modifier.</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=card_example size="1-2" %}
|
||||
{% include docs/elements/snippet.html content=card_example size="1-2" %}
|
||||
|
||||
<!-- -->
|
||||
{% include elements/anchor.html name="Card parts" %}
|
||||
{% include docs/elements/anchor.html name="Card parts" %}
|
||||
|
||||
<div class="content">
|
||||
<p>The <code>card-header</code> can have a <strong>title</strong> and a Bulma <code>icon</code>:</p>
|
||||
@@ -152,9 +143,7 @@ meta:
|
||||
{% capture card_image %}
|
||||
<div class="card">
|
||||
<header class="card-header">
|
||||
<p class="card-header-title">
|
||||
Card header
|
||||
</p>
|
||||
<p class="card-header-title">Card header</p>
|
||||
<button class="card-header-icon" aria-label="more options">
|
||||
<span class="icon">
|
||||
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
||||
@@ -163,8 +152,10 @@ meta:
|
||||
</header>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=card_image size="1-2" %}
|
||||
{%
|
||||
include docs/elements/snippet.html content=card_image
|
||||
size="1-2"
|
||||
%}
|
||||
|
||||
<div class="content">
|
||||
<p>The <code>card-image</code> is a container for a Bulma <code>image</code> element:</p>
|
||||
@@ -174,13 +165,18 @@ meta:
|
||||
<div class="card">
|
||||
<div class="card-image">
|
||||
<figure class="image is-4by3">
|
||||
<img src="{{site.url}}/images/placeholders/1280x960.png" alt="Placeholder image">
|
||||
<img
|
||||
src="{{site.url}}/assets/images/placeholders/1280x960.png"
|
||||
alt="Placeholder image"
|
||||
/>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=card_image size="1-2" %}
|
||||
{%
|
||||
include docs/elements/snippet.html content=card_image
|
||||
size="1-2"
|
||||
%}
|
||||
|
||||
<div class="content">
|
||||
<p>The <code>card-content</code> is the main part, ideal for <strong>text content</strong>, thanks to its padding:</p>
|
||||
@@ -190,13 +186,18 @@ meta:
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="content">
|
||||
Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum.
|
||||
Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec
|
||||
id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus
|
||||
et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis
|
||||
consectetur purus sit amet fermentum.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=card_image size="1-2" %}
|
||||
{%
|
||||
include docs/elements/snippet.html content=card_image
|
||||
size="1-2"
|
||||
%}
|
||||
|
||||
<div class="content">
|
||||
<p>The <code>card-footer</code> acts as a list of for several <code>card-footer-item</code> elements:</p>
|
||||
@@ -211,12 +212,11 @@ meta:
|
||||
</footer>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
{%
|
||||
include docs/elements/snippet.html content=card_footer
|
||||
size="1-2"
|
||||
%}
|
||||
{% include docs/elements/anchor.html name="Examples" %}
|
||||
{% include docs/elements/snippet.html content=card_header_example size="1-2" %}
|
||||
{% include docs/elements/snippet.html content=card_title_example size="1-2" %}
|
||||
|
||||
{% include elements/snippet.html content=card_footer size="1-2" %}
|
||||
|
||||
{% include elements/anchor.html name="Examples" %}
|
||||
|
||||
{% include elements/snippet.html content=card_header_example size="1-2" %}
|
||||
{% include elements/snippet.html content=card_title_example size="1-2" %}
|
||||
|
||||
{% include components/variables.html type='component' %}
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
---
|
||||
title: Dropdown
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: components
|
||||
doc-subtab: dropdown
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-dropdown
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-dropdown
|
||||
meta:
|
||||
colors: false
|
||||
sizes: false
|
||||
@@ -26,28 +27,16 @@ meta:
|
||||
</div>
|
||||
<div class="dropdown-menu" id="dropdown-menu" role="menu">
|
||||
<div class="dropdown-content">
|
||||
<a href="#" class="dropdown-item">
|
||||
Dropdown item
|
||||
</a>
|
||||
<a class="dropdown-item">
|
||||
Other dropdown item
|
||||
</a>
|
||||
<a href="#" class="dropdown-item is-active">
|
||||
Active dropdown item
|
||||
</a>
|
||||
<a href="#" class="dropdown-item">
|
||||
Other dropdown item
|
||||
</a>
|
||||
<hr class="dropdown-divider">
|
||||
<a href="#" class="dropdown-item">
|
||||
With a divider
|
||||
</a>
|
||||
<a href="#" class="dropdown-item"> Dropdown item </a>
|
||||
<a class="dropdown-item"> Other dropdown item </a>
|
||||
<a href="#" class="dropdown-item is-active"> Active dropdown item </a>
|
||||
<a href="#" class="dropdown-item"> Other dropdown item </a>
|
||||
<hr class="dropdown-divider" />
|
||||
<a href="#" class="dropdown-item"> With a divider </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture dropdown_content_example %}
|
||||
{% endcapture %} {% capture dropdown_content_example %}
|
||||
<div class="dropdown is-active">
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu2">
|
||||
@@ -60,22 +49,21 @@ meta:
|
||||
<div class="dropdown-menu" id="dropdown-menu2" role="menu">
|
||||
<div class="dropdown-content">
|
||||
<div class="dropdown-item">
|
||||
<p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
|
||||
<p>
|
||||
You can insert <strong>any type of content</strong> within the
|
||||
dropdown menu.
|
||||
</p>
|
||||
</div>
|
||||
<hr class="dropdown-divider">
|
||||
<hr class="dropdown-divider" />
|
||||
<div class="dropdown-item">
|
||||
<p>You simply need to use a <code><div></code> instead.</p>
|
||||
</div>
|
||||
<hr class="dropdown-divider">
|
||||
<a href="#" class="dropdown-item">
|
||||
This is a link
|
||||
</a>
|
||||
<hr class="dropdown-divider" />
|
||||
<a href="#" class="dropdown-item"> This is a link </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture dropdown_click_example %}
|
||||
{% endcapture %} {% capture dropdown_click_example %}
|
||||
<div class="dropdown">
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu3">
|
||||
@@ -87,37 +75,19 @@ meta:
|
||||
</div>
|
||||
<div class="dropdown-menu" id="dropdown-menu3" role="menu">
|
||||
<div class="dropdown-content">
|
||||
<a href="#" class="dropdown-item">
|
||||
Overview
|
||||
</a>
|
||||
<a href="#" class="dropdown-item">
|
||||
Modifiers
|
||||
</a>
|
||||
<a href="#" class="dropdown-item">
|
||||
Grid
|
||||
</a>
|
||||
<a href="#" class="dropdown-item">
|
||||
Form
|
||||
</a>
|
||||
<a href="#" class="dropdown-item">
|
||||
Elements
|
||||
</a>
|
||||
<a href="#" class="dropdown-item">
|
||||
Components
|
||||
</a>
|
||||
<a href="#" class="dropdown-item">
|
||||
Layout
|
||||
</a>
|
||||
<hr class="dropdown-divider">
|
||||
<a href="#" class="dropdown-item">
|
||||
More
|
||||
</a>
|
||||
<a href="#" class="dropdown-item"> Overview </a>
|
||||
<a href="#" class="dropdown-item"> Modifiers </a>
|
||||
<a href="#" class="dropdown-item"> Grid </a>
|
||||
<a href="#" class="dropdown-item"> Form </a>
|
||||
<a href="#" class="dropdown-item"> Elements </a>
|
||||
<a href="#" class="dropdown-item"> Components </a>
|
||||
<a href="#" class="dropdown-item"> Layout </a>
|
||||
<hr class="dropdown-divider" />
|
||||
<a href="#" class="dropdown-item"> More </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture dropdown_info_example %}
|
||||
{% endcapture %} {% capture dropdown_info_example %}
|
||||
<div class="dropdown is-hoverable">
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
|
||||
@@ -130,14 +100,15 @@ meta:
|
||||
<div class="dropdown-menu" id="dropdown-menu4" role="menu">
|
||||
<div class="dropdown-content">
|
||||
<div class="dropdown-item">
|
||||
<p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
|
||||
<p>
|
||||
You can insert <strong>any type of content</strong> within the
|
||||
dropdown menu.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture dropdown_left_example %}
|
||||
{% endcapture %} {% capture dropdown_left_example %}
|
||||
<div class="dropdown is-active">
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu5">
|
||||
@@ -155,9 +126,7 @@ meta:
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture dropdown_right_example %}
|
||||
{% endcapture %} {% capture dropdown_right_example %}
|
||||
<div class="dropdown is-right is-active">
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu6">
|
||||
@@ -170,14 +139,15 @@ meta:
|
||||
<div class="dropdown-menu" id="dropdown-menu6" role="menu">
|
||||
<div class="dropdown-content">
|
||||
<div class="dropdown-item">
|
||||
<p>Add the <code>is-right</code> modifier for a <strong>right-aligned</strong> dropdown.</p>
|
||||
<p>
|
||||
Add the <code>is-right</code> modifier for a
|
||||
<strong>right-aligned</strong> dropdown.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture dropdown_up_example %}
|
||||
{% endcapture %} {% capture dropdown_up_example %}
|
||||
<div class="dropdown is-up">
|
||||
<div class="dropdown-trigger">
|
||||
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu7">
|
||||
@@ -190,7 +160,10 @@ meta:
|
||||
<div class="dropdown-menu" id="dropdown-menu7" role="menu">
|
||||
<div class="dropdown-content">
|
||||
<div class="dropdown-item">
|
||||
<p>You can add the <code>is-up</code> modifier to have a dropdown menu that appears above the dropdown button.</p>
|
||||
<p>
|
||||
You can add the <code>is-up</code> modifier to have a dropdown menu
|
||||
that appears above the dropdown button.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -199,7 +172,8 @@ meta:
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>dropdown</code> component is a container for a dropdown button and a dropdown menu.
|
||||
The <code>dropdown</code> component is a container for a dropdown button and
|
||||
a dropdown menu.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
@@ -209,16 +183,21 @@ meta:
|
||||
<code>dropdown-trigger</code> the container for a <code>button</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>dropdown-menu</code> the toggable menu, <strong>hidden</strong> by default
|
||||
<code>dropdown-menu</code> the toggable menu,
|
||||
<strong>hidden</strong> by default
|
||||
<ul>
|
||||
<li>
|
||||
<code>dropdown-content</code> the dropdown <strong>box</strong>, with a white background and a shadow
|
||||
<code>dropdown-content</code> the dropdown <strong>box</strong>,
|
||||
with a white background and a shadow
|
||||
<ul>
|
||||
<li>
|
||||
<code>dropdown-item</code> each <strong>single item</strong> of the dropdown, which can either be a <code>a</code> or a <code>div</code>
|
||||
<code>dropdown-item</code> each
|
||||
<strong>single item</strong> of the dropdown, which can either
|
||||
be a <code>a</code> or a <code>div</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>dropdown-divider</code> a <strong>horizontal line</strong> to separate dropdown items
|
||||
<code>dropdown-divider</code> a
|
||||
<strong>horizontal line</strong> to separate dropdown items
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
@@ -229,64 +208,66 @@ meta:
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=dropdown_example %}
|
||||
|
||||
{% include elements/anchor.html name="Dropdown content" %}
|
||||
{% include docs/elements/snippet.html content=dropdown_example %} {% include
|
||||
docs/elements/anchor.html name="Dropdown content" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
While the <code>dropdown-item</code> can be used as an anchor link <code><a></code>, you can also use a <code><div></code> and insert almost <strong>any type of content</strong>.
|
||||
While the <code>dropdown-item</code> can be used as an anchor link
|
||||
<code><a></code>, you can also use a <code><div></code> and
|
||||
insert almost <strong>any type of content</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=dropdown_content_example %}
|
||||
|
||||
{% include elements/anchor.html name="Hoverable or Toggable" %}
|
||||
{% include docs/elements/snippet.html content=dropdown_content_example %} {%
|
||||
include docs/elements/anchor.html name="Hoverable or Toggable" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>dropdown</code> component has <strong>2 additional modifiers</strong>
|
||||
The <code>dropdown</code> component has
|
||||
<strong>2 additional modifiers</strong>
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>is-hoverable</code>: the dropdown will show up when <strong>hovering</strong> the <code>dropdown-trigger</code>
|
||||
<code>is-hoverable</code>: the dropdown will show up when
|
||||
<strong>hovering</strong> the <code>dropdown-trigger</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>is-active</code>: the dropdown will show up <strong>all the time</strong>
|
||||
<code>is-active</code>: the dropdown will show up
|
||||
<strong>all the time</strong>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="message is-success">
|
||||
<p class="message-body">
|
||||
While the CSS <code>:hover</code> implementation works perfectly, the <code>is-active</code> class is available for users who want to control the display of the dropdown with <strong>JavaScript</strong>.
|
||||
While the CSS <code>:hover</code> implementation works perfectly, the
|
||||
<code>is-active</code> class is available for users who want to control the
|
||||
display of the dropdown with <strong>JavaScript</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=dropdown_click_example more=true %}
|
||||
|
||||
{% include elements/snippet.html content=dropdown_info_example more=true %}
|
||||
|
||||
{% include elements/anchor.html name="Right aligned" %}
|
||||
{% include docs/elements/snippet.html content=dropdown_click_example more=true
|
||||
%} {% include docs/elements/snippet.html content=dropdown_info_example more=true
|
||||
%} {% include docs/elements/anchor.html name="Right aligned" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can add the <code>is-right</code> modifier to have a <strong>right-aligned</strong> dropdown.
|
||||
You can add the <code>is-right</code> modifier to have a
|
||||
<strong>right-aligned</strong> dropdown.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=dropdown_left_example more=true %}
|
||||
|
||||
{% include elements/snippet.html content=dropdown_right_example more=true %}
|
||||
|
||||
{% include elements/anchor.html name="Dropup" %}
|
||||
{% include docs/elements/snippet.html content=dropdown_left_example more=true %}
|
||||
{% include docs/elements/snippet.html content=dropdown_right_example more=true
|
||||
%} {% include docs/elements/anchor.html name="Dropup" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can add the <code>is-up</code> modifier to have a dropdown menu that appears above the dropdown button.
|
||||
You can add the <code>is-up</code> modifier to have a dropdown menu that
|
||||
appears above the dropdown button.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=dropdown_up_example more=true %}
|
||||
{% include docs/elements/snippet.html content=dropdown_up_example more=true %}
|
||||
|
||||
{% include components/variables.html type='component' %}
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
---
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: components
|
||||
doc-subtab: level
|
||||
---
|
||||
|
||||
<meta http-equiv="refresh" content="0; url={{ site.url }}/documentation/layout/level/">
|
||||
<meta
|
||||
http-equiv="refresh"
|
||||
content="0; url={{ site.url }}/documentation/layout/level/"
|
||||
/>
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
---
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: components
|
||||
doc-subtab: media-object
|
||||
---
|
||||
|
||||
<meta http-equiv="refresh" content="0; url={{ site.url }}/documentation/layout/media-object/">
|
||||
<meta
|
||||
http-equiv="refresh"
|
||||
content="0; url={{ site.url }}/documentation/layout/media-object/"
|
||||
/>
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
---
|
||||
title: Menu
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: components
|
||||
doc-subtab: menu
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-menu
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-menu
|
||||
meta:
|
||||
colors: false
|
||||
sizes: false
|
||||
@@ -16,16 +17,12 @@ meta:
|
||||
|
||||
{% capture menu_example %}
|
||||
<aside class="menu">
|
||||
<p class="menu-label">
|
||||
General
|
||||
</p>
|
||||
<p class="menu-label">General</p>
|
||||
<ul class="menu-list">
|
||||
<li><a>Dashboard</a></li>
|
||||
<li><a>Customers</a></li>
|
||||
</ul>
|
||||
<p class="menu-label">
|
||||
Administration
|
||||
</p>
|
||||
<p class="menu-label">Administration</p>
|
||||
<ul class="menu-list">
|
||||
<li><a>Team Settings</a></li>
|
||||
<li>
|
||||
@@ -40,9 +37,7 @@ meta:
|
||||
<li><a>Cloud Storage Environment Settings</a></li>
|
||||
<li><a>Authentication</a></li>
|
||||
</ul>
|
||||
<p class="menu-label">
|
||||
Transactions
|
||||
</p>
|
||||
<p class="menu-label">Transactions</p>
|
||||
<ul class="menu-list">
|
||||
<li><a>Payments</a></li>
|
||||
<li><a>Transfers</a></li>
|
||||
@@ -53,21 +48,17 @@ meta:
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The Bulma <code>menu</code> is a vertical navigation component that comprises:
|
||||
The Bulma <code>menu</code> is a vertical navigation component that
|
||||
comprises:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
the <code>menu</code> container
|
||||
</li>
|
||||
<li>
|
||||
informative <code>menu-label</code> labels
|
||||
</li>
|
||||
<li>the <code>menu</code> container</li>
|
||||
<li>informative <code>menu-label</code> labels</li>
|
||||
<li>
|
||||
interactive <code>menu-list</code> lists that can be nested up to 2 levels
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=menu_example size="one-third" %}
|
||||
{% include docs/elements/snippet.html content=menu_example size="one-third" %}
|
||||
|
||||
{% include components/variables.html type='component' %}
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
---
|
||||
title: Message
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: components
|
||||
doc-subtab: message
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-message
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-message
|
||||
meta:
|
||||
colors: true
|
||||
sizes: true
|
||||
@@ -21,168 +22,187 @@ meta:
|
||||
<button class="delete" aria-label="delete"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
|
||||
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
|
||||
diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac
|
||||
<em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
|
||||
sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a
|
||||
neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture message_dark_example %}
|
||||
{% endcapture %} {% capture message_dark_example %}
|
||||
<article class="message is-dark">
|
||||
<div class="message-header">
|
||||
<p>Dark</p>
|
||||
<button class="delete" aria-label="delete"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
|
||||
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
|
||||
diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac
|
||||
<em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
|
||||
sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a
|
||||
neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture message_small %}
|
||||
{% endcapture %} {% capture message_small %}
|
||||
<article class="message is-small">
|
||||
<div class="message-header">
|
||||
<p>Small message</p>
|
||||
<button class="delete is-small" aria-label="delete"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla.Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
|
||||
nulla.Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur.
|
||||
Aenean ac <em>eleifend lacus</em>, in mollis lectus.
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture message_normal %}
|
||||
{% endcapture %} {% capture message_normal %}
|
||||
<article class="message">
|
||||
<div class="message-header">
|
||||
<p>Normal message</p>
|
||||
<button class="delete" aria-label="delete"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla.Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
|
||||
nulla.Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur.
|
||||
Aenean ac <em>eleifend lacus</em>, in mollis lectus.
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture message_medium %}
|
||||
{% endcapture %} {% capture message_medium %}
|
||||
<article class="message is-medium">
|
||||
<div class="message-header">
|
||||
<p>Medium message</p>
|
||||
<button class="delete is-medium" aria-label="delete"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla.Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
|
||||
nulla.Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur.
|
||||
Aenean ac <em>eleifend lacus</em>, in mollis lectus.
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture message_large %}
|
||||
{% endcapture %} {% capture message_large %}
|
||||
<article class="message is-large">
|
||||
<div class="message-header">
|
||||
<p>Large message</p>
|
||||
<button class="delete is-large" aria-label="delete"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla.Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
|
||||
nulla.Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur.
|
||||
Aenean ac <em>eleifend lacus</em>, in mollis lectus.
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture message_body_example %}
|
||||
{% endcapture %} {% capture message_body_example %}
|
||||
<article class="message">
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
|
||||
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
|
||||
diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac
|
||||
<em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
|
||||
sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a
|
||||
neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture message_body_dark_example %}
|
||||
{% endcapture %} {% capture message_body_dark_example %}
|
||||
<article class="message is-dark">
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
|
||||
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
|
||||
diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac
|
||||
<em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
|
||||
sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a
|
||||
neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The Bulma <code>message</code> is a multi-part component:
|
||||
</p>
|
||||
<p>The Bulma <code>message</code> is a multi-part component:</p>
|
||||
<ul>
|
||||
<li>the <code>message</code> container</li>
|
||||
<li>
|
||||
the <code>message</code> container
|
||||
</li>
|
||||
<li>
|
||||
the optional <code>message-header</code> that can hold a title and a <code>delete</code> element
|
||||
</li>
|
||||
<li>
|
||||
the <code>message-body</code> for the longer body of the message
|
||||
the optional <code>message-header</code> that can hold a title and a
|
||||
<code>delete</code> element
|
||||
</li>
|
||||
<li>the <code>message-body</code> for the longer body of the message</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=message_example %}
|
||||
|
||||
{% include elements/anchor.html name="Colors" %}
|
||||
{% include docs/elements/snippet.html content=message_example %} {% include
|
||||
docs/elements/anchor.html name="Colors" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The message component is available in all the <strong>different colors</strong> defined by the <a href="{{ site.data.links.by_id.customize-variables.path }}"><code>$colors</code> Sass map</a>.
|
||||
The message component is available in all the
|
||||
<strong>different colors</strong> defined by the
|
||||
<a href="{{ site.data.links.by_id.customize-variables.path }}"
|
||||
><code>$colors</code> Sass map</a
|
||||
>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=message_dark_example more=true %}
|
||||
|
||||
{% for color in site.data.colors.justColors %}
|
||||
{% capture foobar %}
|
||||
{% include docs/elements/snippet.html content=message_dark_example more=true %}
|
||||
{% for color in site.data.colors.justColors %} {% capture foobar %}
|
||||
<article class="message is-{{ color }}">
|
||||
<div class="message-header">
|
||||
<p>{{ color | capitalize }}</p>
|
||||
<button class="delete" aria-label="delete"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
|
||||
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
|
||||
diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac
|
||||
<em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
|
||||
sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a
|
||||
neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar more=true %}
|
||||
{% endfor %}
|
||||
|
||||
{% include elements/anchor.html name="Message body only" %}
|
||||
{% endcapture %} {% include docs/elements/snippet.html content=foobar more=true
|
||||
%} {% endfor %} {% include docs/elements/anchor.html name="Message body only" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can remove the <code>message-header</code> if you don't need it, which will add a left border to the <code>message-body</code>:
|
||||
You can remove the <code>message-header</code> if you don't need it, which
|
||||
will add a left border to the <code>message-body</code>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=message_body_example %}
|
||||
|
||||
{% include elements/snippet.html content=message_body_dark_example %}
|
||||
|
||||
{% for color in site.data.colors.justColors %}
|
||||
{% capture foobar %}
|
||||
{% include docs/elements/snippet.html content=message_body_example %} {% include
|
||||
docs/elements/snippet.html content=message_body_dark_example %} {% for color in
|
||||
site.data.colors.justColors %} {% capture foobar %}
|
||||
<article class="message is-{{ color }}">
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
|
||||
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
|
||||
diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac
|
||||
<em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
|
||||
sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a
|
||||
neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
{% endcapture %} {% include docs/elements/snippet.html content=foobar %} {%
|
||||
endfor %} {% include docs/elements/anchor.html name="Sizes" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can add one of <strong>3 size modifiers</strong> to the <code>message</code> component:
|
||||
You can add one of <strong>3 size modifiers</strong> to the
|
||||
<code>message</code> component:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=message_small %}
|
||||
|
||||
{% include elements/snippet.html content=message_normal %}
|
||||
|
||||
{% include elements/snippet.html content=message_medium %}
|
||||
|
||||
{% include elements/snippet.html content=message_large %}
|
||||
|
||||
{% include components/variables.html type='component' %}
|
||||
{% include docs/elements/snippet.html content=message_small %} {% include
|
||||
docs/elements/snippet.html content=message_normal %} {% include
|
||||
docs/elements/snippet.html content=message_medium %} {% include
|
||||
docs/elements/snippet.html content=message_large %} {% include
|
||||
docs/components/variables.html type='component' %}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Modal
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: components
|
||||
doc-subtab: modal
|
||||
breadcrumb:
|
||||
@@ -12,8 +13,12 @@ meta:
|
||||
colors: false
|
||||
sizes: false
|
||||
variables: true
|
||||
modals:
|
||||
- docs/modals/example-modal.html
|
||||
- docs/modals/example-modal-bis.html
|
||||
- docs/modals/example-modal-ter.html
|
||||
- docs/modals/example-js-modal.html
|
||||
---
|
||||
|
||||
{% capture modal %}
|
||||
<div class="modal">
|
||||
<div class="modal-background"></div>
|
||||
@@ -29,7 +34,7 @@ meta:
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-content">
|
||||
<p class="image is-4by3">
|
||||
<img src="{{site.url}}/images/placeholders/1280x960.png" alt="">
|
||||
<img src="{{site.url}}/assets/images/placeholders/1280x960.png" alt="">
|
||||
</p>
|
||||
</div>
|
||||
<button class="modal-close is-large" aria-label="close"></button>
|
||||
@@ -48,8 +53,10 @@ meta:
|
||||
<!-- Content ... -->
|
||||
</section>
|
||||
<footer class="modal-card-foot">
|
||||
<button class="button is-success">Save changes</button>
|
||||
<button class="button">Cancel</button>
|
||||
<div class="buttons">
|
||||
<button class="button is-success">Save changes</button>
|
||||
<button class="button">Cancel</button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
@@ -135,85 +142,100 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
<li>
|
||||
<code>modal</code>: the main container
|
||||
<ul>
|
||||
<li><code>modal-background</code>: a transparent overlay that can act as a click target to close the modal</li>
|
||||
<li>
|
||||
<code>modal-background</code>: a transparent overlay that can act as a click target to close the modal
|
||||
</li>
|
||||
<li>
|
||||
<code>modal-content</code>: a horizontally and vertically centered container, with a maximum width of 640px, in which you can include <em>any</em> content
|
||||
</li>
|
||||
<li>
|
||||
<code>modal-close</code>: a simple cross located in the top right corner
|
||||
<code>modal-content</code>: a horizontally and vertically centered container, with a maximum width of 640px,
|
||||
in which you can include <em>any</em> content
|
||||
</li>
|
||||
<li><code>modal-close</code>: a simple cross located in the top right corner</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
<button class="button is-primary is-large modal-button" data-target="modal" aria-haspopup="true">Launch example modal</button>
|
||||
<button class="button is-primary is-large modal-button js-modal-trigger" data-target="modal" aria-haspopup="true">
|
||||
Launch example modal
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ modal }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- modal -}}
|
||||
{%- endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
To <strong>activate</strong> the modal, just add the <code>is-active</code> modifier on the <code>.modal</code> container.
|
||||
You may also want to add <code>is-clipped</code> modifier to a containing element (usually <code>html</code>) to stop scroll overflow.
|
||||
To <strong>activate</strong> the modal, just add the <code>is-active</code> modifier on the
|
||||
<code>.modal</code> container. You may also want to add <code>is-clipped</code> modifier to a containing element
|
||||
(usually <code>html</code>) to stop scroll overflow.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="message is-info">
|
||||
<div class="message-header">
|
||||
JavaScript implementation example
|
||||
</div>
|
||||
<div class="message-header">JavaScript implementation example</div>
|
||||
<div class="message-body">
|
||||
Bulma does not include any JavaScript. However, this documentation provides a <a href="#javascript-implementation-example">JS implementation example</a> that you are free to use.
|
||||
Bulma does not include any JavaScript. However, this documentation provides a
|
||||
<a href="#javascript-implementation-example">JS implementation example</a> that you are free to use.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Image modal" %}
|
||||
{% include docs/elements/anchor.html name="Image modal" %}
|
||||
|
||||
<div class="content">
|
||||
<p>Because a modal can contain <strong>anything you want</strong>, you can very simply use it to build an image gallery for example:</p>
|
||||
<p>
|
||||
<a class="button is-primary is-large modal-button" data-target="modal-bis">Launch image modal</a>
|
||||
Because a modal can contain <strong>anything you want</strong>, you can very simply use it to build an image gallery
|
||||
for example:
|
||||
</p>
|
||||
<p>
|
||||
<a class="button is-primary is-large modal-button js-modal-trigger" data-target="modal-bis">Launch image modal</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ image_modal }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- image_modal -}}
|
||||
{%- endhighlight %}
|
||||
|
||||
{% include elements/anchor.html name="Modal card" %}
|
||||
{% include docs/elements/anchor.html name="Modal card" %}
|
||||
|
||||
<div class="content">
|
||||
<p>If you want a more classic modal, with a <strong>head</strong>, a <strong>body</strong> and a <strong>foot</strong>, use the <code>modal-card</code>.</p>
|
||||
<p>
|
||||
<button class="button is-primary is-large modal-button" data-target="modal-ter" aria-haspopup="true">Launch card modal</button>
|
||||
If you want a more classic modal, with a <strong>head</strong>, a <strong>body</strong> and a <strong>foot</strong>,
|
||||
use the <code>modal-card</code>.
|
||||
</p>
|
||||
<p>
|
||||
<button
|
||||
class="button is-primary is-large modal-button js-modal-trigger"
|
||||
data-target="modal-ter"
|
||||
aria-haspopup="true"
|
||||
>
|
||||
Launch card modal
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-highlight-full">
|
||||
{% highlight html %}{{ modal_card }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- modal_card -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="JavaScript implementation example" %}
|
||||
{% include docs/elements/anchor.html name="JavaScript implementation example" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The Bulma package <strong>does not come with any JavaScript</strong>. Here is however an implementation example, which sets the <code>click</code> handlers for custom elements, in vanilla JavaScript.
|
||||
The Bulma package <strong>does not come with any JavaScript</strong>. Here is however an implementation example,
|
||||
which sets the <code>click</code> handlers for custom elements, in vanilla JavaScript.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
There are 3 parts to this implementation:
|
||||
</p>
|
||||
<p>There are 3 parts to this implementation:</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
add the HTML for the <strong>modal</strong> (this modal is hidden by default)
|
||||
</li>
|
||||
<li>add the HTML for the <strong>modal</strong> (this modal is hidden by default)</li>
|
||||
<li>
|
||||
add the HTML for a button to <strong>trigger</strong> the modal (you can style this button however you want)
|
||||
</li>
|
||||
<li>
|
||||
add the JS code to add the <code>click</code> event on the <strong>trigger</strong> to open the <strong>modal</strong>
|
||||
add the JS code to add the <code>click</code> event on the <strong>trigger</strong> to open the
|
||||
<strong>modal</strong>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -221,36 +243,35 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
<div class="content">
|
||||
<h4>1. Add the HTML for the modal</h4>
|
||||
|
||||
<p>
|
||||
At the end of your page, before the closing <code></body></code> tag, add the following HTML snippet:
|
||||
</p>
|
||||
<p>At the end of your page, before the closing <code></body></code> tag, at the following HTML snippet:</p>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ modal_js_html }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- modal_js_html -}}
|
||||
{%- endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>id</code> attribute's value must be <strong>unique</strong>.
|
||||
</p>
|
||||
<p>The <code>id</code> attribute's value must be <strong>unique</strong>.</p>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<h4>2. Add the HTML for the trigger</h4>
|
||||
|
||||
<p>
|
||||
Somewhere on your page, add the following HTML button:
|
||||
</p>
|
||||
<p>Somewhere on your page, add the following HTML button:</p>
|
||||
</div>
|
||||
|
||||
<div class="block">
|
||||
{{ modal_js_trigger }}
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ modal_js_trigger }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- modal_js_trigger -}}
|
||||
{%- endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can style it however you want, as long as it has the <code>js-modal-trigger</code> CSS class and the appropriate <code>data-target</code> value. For example, you can add the <code>button is-primary</code> Bulma classes:
|
||||
You can style it however you want, as long as it has the <code>js-modal-trigger</code> CSS class and the appropriate
|
||||
<code>data-target</code> value. For example, you can add the <code>button is-primary</code> Bulma classes:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -261,124 +282,26 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
<div class="content">
|
||||
<h4>3. Add the JS for the trigger</h4>
|
||||
|
||||
<p>
|
||||
In a <code>script</code> element (or in a seperate <code>.js</code> file), add the following JS code:
|
||||
</p>
|
||||
<p>In a <code>script</code> element (or in a seperate <code>.js</code> file), add the following JS code:</p>
|
||||
</div>
|
||||
|
||||
{% highlight javascript %}{{ modal_js_code }}{% endhighlight %}
|
||||
{% highlight javascript -%}
|
||||
{{- modal_js_code -}}
|
||||
{%- endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
As long as you can toggle the <code>is-active</code> modifier class on the <code>modal</code> element, you can choose how you want to implement it.
|
||||
As long as you can toggle the <code>is-active</code> modifier class on the <code>modal</code> element, you can
|
||||
choose how you want to implement it.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include components/variables.html type='component' %}
|
||||
|
||||
<div id="modal" class="modal">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-content">
|
||||
<div class="box">
|
||||
<article class="media">
|
||||
<div class="media-left">
|
||||
<figure class="image is-64x64">
|
||||
<img src="{{site.url}}/images/placeholders/128x128.png" alt="Image">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
|
||||
<br>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
|
||||
</p>
|
||||
</div>
|
||||
<nav class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<a class="level-item" aria-label="retweet">
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-retweet" aria-hidden="true"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="level-item" aria-label="like">
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-heart" aria-hidden="true"></i>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<button class="modal-close is-large" aria-label="close"></button>
|
||||
</div>
|
||||
|
||||
<div id="modal-bis" class="modal">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-content">
|
||||
<p class="image is-4by3">
|
||||
<img src="{{site.url}}/images/placeholders/1280x960.png" alt="">
|
||||
</p>
|
||||
</div>
|
||||
<button class="modal-close is-large" aria-label="close"></button>
|
||||
</div>
|
||||
|
||||
<div id="modal-ter" class="modal">
|
||||
<div class="modal-background"></div>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">Modal title</p>
|
||||
<button class="delete" aria-label="close"></button>
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
<div class="content">
|
||||
<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>
|
||||
<h3>Third level</h3>
|
||||
<p>Quisque ante lacus, malesuada ac auctor vitae, congue <a href="#">non ante</a>. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.</p>
|
||||
<ol>
|
||||
<li>Donec blandit a lorem id convallis.</li>
|
||||
<li>Cras gravida arcu at diam gravida gravida.</li>
|
||||
<li>Integer in volutpat libero.</li>
|
||||
<li>Donec a diam tellus.</li>
|
||||
<li>Aenean nec tortor orci.</li>
|
||||
<li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
|
||||
<li>Vivamus maximus ultricies pulvinar.</li>
|
||||
</ol>
|
||||
<blockquote>Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis.</blockquote>
|
||||
<p>Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et <em>justo sodales</em> elementum. Maecenas ultrices lacus quis neque consectetur, et lobortis nisi molestie.</p>
|
||||
<p>Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis vulputate risus in luctus. Maecenas vestibulum interdum commodo.</p>
|
||||
<p>Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis malesuada nulla. Nulla facilisi. Nullam ac erat ante.</p>
|
||||
<h4>Fourth level</h4>
|
||||
<p>Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris euismod metus a tellus laoreet, at elementum ex efficitur.</p>
|
||||
<p>Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut vehicula. Mauris eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.</p>
|
||||
<p>Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit sed dapibus at, vestibulum in felis. Etiam iaculis lorem ac nibh bibendum rhoncus. Nam interdum efficitur ligula sit amet ullamcorper. Etiam tristique, leo vitae porta faucibus, mi lacus laoreet metus, at cursus leo est vel tellus. Sed ac posuere est. Nunc ultricies nunc neque, vitae ultricies ex sodales quis. Aliquam eu nibh in libero accumsan pulvinar. Nullam nec nisl placerat, pretium metus vel, euismod ipsum. Proin tempor cursus nisl vel condimentum. Nam pharetra varius metus non pellentesque.</p>
|
||||
<h5>Fifth level</h5>
|
||||
<p>Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit. Praesent aliquet ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue laoreet. Sed nec eleifend justo. Nam et sollicitudin odio.</p>
|
||||
<h6>Sixth level</h6>
|
||||
<p>Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum commodo, ipsum tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus.</p>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="modal-card-foot">
|
||||
<button class="button is-success">Save changes</button>
|
||||
<button class="button">Cancel</button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ modal_js_html }}
|
||||
|
||||
<script type="text/javascript">
|
||||
{{ modal_js_code }}
|
||||
{
|
||||
{
|
||||
modal_js_code;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,14 +1,13 @@
|
||||
---
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: components
|
||||
doc-subtab: nav
|
||||
---
|
||||
|
||||
{% include subnav/subnav-components.html %}
|
||||
{% include docs/subnav/subnav-components.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
<div class="message is-danger">
|
||||
<div class="message-body">
|
||||
<p>This component has been <strong>deprecated</strong>.</p>
|
||||
@@ -17,7 +16,12 @@ doc-subtab: nav
|
||||
|
||||
<div class="message is-info">
|
||||
<div class="message-body">
|
||||
<p>While both <code>.nav</code> and <code>.navbar</code> currently co-exist to ensure backwards compatibility, the <code>.nav</code> will probably be deleted in an upcoming update, so you should start using <a href="{{ site.url }}/documentation/components/navbar/">the new navbar</a> instead.</p>
|
||||
<p>
|
||||
While both <code>.nav</code> and <code>.navbar</code> currently co-exist to ensure backwards compatibility,
|
||||
the <code>.nav</code> will probably be deleted in an upcoming update, so you should start using
|
||||
<a href="{{ site.url }}/documentation/components/navbar/">the new navbar</a>
|
||||
instead.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -29,100 +33,92 @@ doc-subtab: nav
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>nav</code> container can have <strong>3 parts</strong>:
|
||||
</p>
|
||||
<p>The <code>nav</code> container can have <strong>3 parts</strong>:</p>
|
||||
<ul>
|
||||
<li><code>nav-left</code></li>
|
||||
<li><code>nav-center</code></li>
|
||||
<li><code>nav-right</code></li>
|
||||
</ul>
|
||||
<p>
|
||||
Each nav item needs to be wrapped in a <code>nav-item</code> element.
|
||||
</p>
|
||||
<p>
|
||||
For responsiveness, <strong>2 additional</strong> classes are available:
|
||||
</p>
|
||||
<p>Each nav item needs to be wrapped in a <code>nav-item</code> element.</p>
|
||||
<p>For responsiveness, <strong>2 additional</strong> classes are available:</p>
|
||||
<ul>
|
||||
<li><code>nav-toggle</code> for the hamburger menu on mobile</li>
|
||||
<li><code>nav-menu</code> for menu that is collapsable on mobile (you can combine it with <code>nav-right</code>)</li>
|
||||
<li>toggle <code>is-active</code> on <code>nav-toggle</code> and <code>nav-menu</code> when <code>nav-toggle</code> was clicked</li>
|
||||
<li>
|
||||
<code>nav-menu</code> for menu that is collapsable on mobile (you can combine it with <code>nav-right</code>)
|
||||
</li>
|
||||
<li>
|
||||
toggle <code>is-active</code> on <code>nav-toggle</code> and <code>nav-menu</code> when
|
||||
<code>nav-toggle</code> was clicked
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% capture nav_example %}
|
||||
<nav class="nav">
|
||||
<div class="nav-left">
|
||||
<a class="nav-item">
|
||||
<img src="{{ site.url }}/images/bulma-logo.png" alt="Bulma logo">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="nav-center">
|
||||
<a class="nav-item">
|
||||
<span class="icon">
|
||||
<i class="fab fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="nav-item">
|
||||
<span class="icon">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- This "nav-toggle" hamburger menu is only visible on mobile -->
|
||||
<!-- You need JavaScript to toggle the "is-active" class on "nav-menu" -->
|
||||
<span class="nav-toggle">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
|
||||
<!-- This "nav-menu" is hidden on mobile -->
|
||||
<!-- Add the modifier "is-active" to display it on mobile -->
|
||||
<div class="nav-right nav-menu">
|
||||
<a class="nav-item">
|
||||
Home
|
||||
</a>
|
||||
<a class="nav-item">
|
||||
Documentation
|
||||
</a>
|
||||
<a class="nav-item">
|
||||
Blog
|
||||
</a>
|
||||
|
||||
<div class="nav-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a class="button" >
|
||||
<span class="icon">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</span>
|
||||
<span>Tweet</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary">
|
||||
<span class="icon">
|
||||
<i class="fas fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
{% capture nav_example %}
|
||||
<nav class="nav">
|
||||
<div class="nav-left">
|
||||
<a class="nav-item">
|
||||
<img src="{{ site.url }}/assets/images/bulma-logo.png" alt="Bulma logo" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
{{nav_example}}
|
||||
</div>
|
||||
<div class="nav-center">
|
||||
<a class="nav-item">
|
||||
<span class="icon">
|
||||
<i class="fab fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="nav-item">
|
||||
<span class="icon">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
{{nav_example}}
|
||||
{% endhighlight %}
|
||||
<!-- This "nav-toggle" hamburger menu is only visible on mobile -->
|
||||
<!-- You need JavaScript to toggle the "is-active" class on "nav-menu" -->
|
||||
<span class="nav-toggle">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
|
||||
<!-- This "nav-menu" is hidden on mobile -->
|
||||
<!-- Add the modifier "is-active" to display it on mobile -->
|
||||
<div class="nav-right nav-menu">
|
||||
<a class="nav-item"> Home </a>
|
||||
<a class="nav-item"> Documentation </a>
|
||||
<a class="nav-item"> Blog </a>
|
||||
|
||||
<div class="nav-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a class="button">
|
||||
<span class="icon">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</span>
|
||||
<span>Tweet</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary">
|
||||
<span class="icon">
|
||||
<i class="fas fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="bd-example is-paddingless">{{ nav_example }}</div>
|
||||
|
||||
{% highlight html %}
|
||||
{{ nav_example }}
|
||||
{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
|
||||
@@ -130,56 +126,61 @@ doc-subtab: nav
|
||||
|
||||
<div class="content">
|
||||
<ul>
|
||||
<li>the <code>nav</code> container can have a <strong>shadow</strong> by adding the <code>has-shadow</code> modifier</li>
|
||||
<li>the <code>nav-item</code> can become <strong>active</strong> by adding the <code>is-active</code> modifier</li>
|
||||
<li>
|
||||
the <code>nav</code> container can have a <strong>shadow</strong> by adding the
|
||||
<code>has-shadow</code> modifier
|
||||
</li>
|
||||
<li>
|
||||
the <code>nav-item</code> can become <strong>active</strong> by adding the <code>is-active</code> modifier
|
||||
</li>
|
||||
<li>the <code>nav-item</code> can become a <strong>tab</strong> by adding the <code>is-tab</code> modifier</li>
|
||||
</ul>
|
||||
<p>
|
||||
To optimise the space on desktop, but also allow the mobile view to be usable, you can <strong>duplicate</strong> nav items in both <code>nav-left</code> and <code>nav-right</code>, and show/hide them with <a href="{{site.url}}/documentation/modifiers/responsive-helpers/">responsive helpers</a>.
|
||||
To optimise the space on desktop, but also allow the mobile view to be usable, you can
|
||||
<strong>duplicate</strong> nav items in both <code>nav-left</code> and <code>nav-right</code>, and show/hide
|
||||
them with <a href="{{site.url}}/documentation/modifiers/responsive-helpers/">responsive helpers</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% capture nav_tabs_example %}
|
||||
<nav class="nav has-shadow">
|
||||
<div class="container">
|
||||
<div class="nav-left">
|
||||
<a class="nav-item">
|
||||
<img src="{{ site.url }}/images/bulma-logo.png" alt="Bulma logo">
|
||||
</a>
|
||||
<a class="nav-item is-tab is-hidden-mobile is-active">Home</a>
|
||||
<a class="nav-item is-tab is-hidden-mobile">Features</a>
|
||||
<a class="nav-item is-tab is-hidden-mobile">Pricing</a>
|
||||
<a class="nav-item is-tab is-hidden-mobile">About</a>
|
||||
{% capture nav_tabs_example %}
|
||||
<nav class="nav has-shadow">
|
||||
<div class="container">
|
||||
<div class="nav-left">
|
||||
<a class="nav-item">
|
||||
<img src="{{ site.url }}/assets/images/bulma-logo.png" alt="Bulma logo" />
|
||||
</a>
|
||||
<a class="nav-item is-tab is-hidden-mobile is-active">Home</a>
|
||||
<a class="nav-item is-tab is-hidden-mobile">Features</a>
|
||||
<a class="nav-item is-tab is-hidden-mobile">Pricing</a>
|
||||
<a class="nav-item is-tab is-hidden-mobile">About</a>
|
||||
</div>
|
||||
<span class="nav-toggle">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
<div class="nav-right nav-menu">
|
||||
<a class="nav-item is-tab is-hidden-tablet is-active">Home</a>
|
||||
<a class="nav-item is-tab is-hidden-tablet">Features</a>
|
||||
<a class="nav-item is-tab is-hidden-tablet">Pricing</a>
|
||||
<a class="nav-item is-tab is-hidden-tablet">About</a>
|
||||
<a class="nav-item is-tab">
|
||||
<figure class="image is-16x16" style="margin-right: 8px">
|
||||
<img src="{{site.url}}/assets/images/jgthms.png" />
|
||||
</figure>
|
||||
Profile
|
||||
</a>
|
||||
<a class="nav-item is-tab">Log out</a>
|
||||
</div>
|
||||
</div>
|
||||
<span class="nav-toggle">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
<div class="nav-right nav-menu">
|
||||
<a class="nav-item is-tab is-hidden-tablet is-active">Home</a>
|
||||
<a class="nav-item is-tab is-hidden-tablet">Features</a>
|
||||
<a class="nav-item is-tab is-hidden-tablet">Pricing</a>
|
||||
<a class="nav-item is-tab is-hidden-tablet">About</a>
|
||||
<a class="nav-item is-tab">
|
||||
<figure class="image is-16x16" style="margin-right: 8px;">
|
||||
<img src="{{site.url}}/images/jgthms.png">
|
||||
</figure>
|
||||
Profile
|
||||
</a>
|
||||
<a class="nav-item is-tab">Log out</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
{{nav_tabs_example}}
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
{{nav_tabs_example}}
|
||||
{% endhighlight %}
|
||||
<div class="bd-example is-paddingless">{{ nav_tabs_example }}</div>
|
||||
|
||||
{% highlight html %}
|
||||
{{ nav_tabs_example }}
|
||||
{% endhighlight %}
|
||||
</section>
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
---
|
||||
title: Navbar
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
fullwidth: true
|
||||
doc-tab: components
|
||||
doc-subtab: navbar
|
||||
breadcrumb:
|
||||
@@ -12,19 +14,22 @@ meta:
|
||||
colors: true
|
||||
sizes: false
|
||||
variables: true
|
||||
modals:
|
||||
- docs/examples/navbar-bottom.html
|
||||
---
|
||||
|
||||
{% capture navbar_basic_example %}
|
||||
<nav class="navbar" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="{{ site.url }}">
|
||||
<img src="{{ site.url }}/images/bulma-logo.png" width="112" height="28">
|
||||
{% include svg/bulma-logo.html %}
|
||||
</a>
|
||||
|
||||
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -47,7 +52,7 @@ meta:
|
||||
<a class="navbar-item">
|
||||
About
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
<a class="navbar-item is-selected">
|
||||
Jobs
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
@@ -78,7 +83,7 @@ meta:
|
||||
{% endcapture %}
|
||||
|
||||
{% capture navbar_example %}
|
||||
{% include examples/navbar.html id="Default" %}
|
||||
{% include docs/examples/navbar.html id="Default" %}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture navbar_brand_example %}
|
||||
@@ -90,7 +95,17 @@ meta:
|
||||
{% endcapture %}
|
||||
|
||||
{% capture navbar_burger_example %}
|
||||
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
|
||||
<a class="navbar-burger" role="button" aria-label="menu" aria-expanded="false">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture navbar_burger_active_example %}
|
||||
<a class="navbar-burger is-active" role="button" aria-label="menu" aria-expanded="false">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
@@ -101,13 +116,14 @@ meta:
|
||||
<nav class="navbar" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="{{ site.url }}">
|
||||
<img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
|
||||
{% include svg/bulma-logo.html %}
|
||||
</a>
|
||||
|
||||
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
@@ -154,7 +170,7 @@ meta:
|
||||
|
||||
{% capture navbar_item_brand_example %}
|
||||
<a class="navbar-item">
|
||||
<img src="{{ site.url }}/images/bulma-logo.png" width="112" height="28" alt="Bulma">
|
||||
{% include svg/bulma-logo.html %}
|
||||
</a>
|
||||
{% endcapture %}
|
||||
|
||||
@@ -202,7 +218,7 @@ meta:
|
||||
{% endcapture %}
|
||||
|
||||
{% capture navbar_transparent_example %}
|
||||
{% include examples/navbar.html transparent=true boxed=true id="TransparentExample" %}
|
||||
{% include docs/examples/navbar.html transparent=true boxed=true id="TransparentExample" %}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture navbar_dropdown_example %}
|
||||
@@ -423,9 +439,7 @@ meta:
|
||||
{% capture navbar_dropdown_default_example %}
|
||||
<nav class="navbar" role="navigation" aria-label="dropdown navigation">
|
||||
<a class="navbar-item">
|
||||
<img src="{{ site.url }}/images/bulma-logo.png"
|
||||
alt="{{ site.data.meta.title }}"
|
||||
width="112" height="28">
|
||||
{% include svg/bulma-logo.html %}
|
||||
</a>
|
||||
|
||||
<div class="navbar-item has-dropdown is-active">
|
||||
@@ -466,9 +480,7 @@ meta:
|
||||
{% capture navbar_dropdown_boxed_example %}
|
||||
<nav class="navbar is-transparent" role="navigation" aria-label="dropdown navigation">
|
||||
<a class="navbar-item">
|
||||
<img src="{{ site.url }}/images/bulma-logo.png"
|
||||
alt="{{ site.data.meta.title }}"
|
||||
width="112" height="28">
|
||||
{% include svg/bulma-logo.html %}
|
||||
</a>
|
||||
|
||||
<div class="navbar-item has-dropdown is-active">
|
||||
@@ -509,9 +521,7 @@ meta:
|
||||
{% capture navbar_dropdown_item_active_example %}
|
||||
<nav class="navbar" role="navigation" aria-label="dropdown navigation">
|
||||
<a class="navbar-item">
|
||||
<img src="{{ site.url }}/images/bulma-logo.png"
|
||||
alt="{{ site.data.meta.title }}"
|
||||
width="112" height="28">
|
||||
{% include svg/bulma-logo.html %}
|
||||
</a>
|
||||
|
||||
<div class="navbar-item has-dropdown is-active">
|
||||
@@ -523,7 +533,7 @@ meta:
|
||||
<a class="navbar-item">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item is-active">
|
||||
<a class="navbar-item is-selected">
|
||||
Elements
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
@@ -558,6 +568,7 @@ meta:
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
|
||||
<div class="navbar-menu" id="navMenu">
|
||||
@@ -659,7 +670,7 @@ $(document).ready(function() {
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Basic Navbar" %}
|
||||
{% include docs/elements/anchor.html name="Basic Navbar" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -673,7 +684,7 @@ $(document).ready(function() {
|
||||
|
||||
{% highlight html %}{{ navbar_basic_example }}{% endhighlight %}
|
||||
|
||||
{% include elements/anchor.html name="Navbar brand" %}
|
||||
{% include docs/elements/anchor.html name="Navbar brand" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -693,7 +704,7 @@ $(document).ready(function() {
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The navbar brand is <strong>always visible</strong>: on both touch devices {% include bp/touch.html %} and desktop {% include bp/desktop.html %}. As a result, it is recommended to only use a few navbar items to avoid <strong>overflowing</strong> horizontally on small devices.
|
||||
The navbar brand is <strong>always visible</strong>: on both touch devices {% include docs/bp/touch.html %} and desktop {% include docs/bp/desktop.html %}. As a result, it is recommended to only use a few navbar items to avoid <strong>overflowing</strong> horizontally on small devices.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -705,11 +716,11 @@ $(document).ready(function() {
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
On desktop {% include bp/desktop.html %}, the navbar brand will only take up the space it needs.
|
||||
On desktop {% include docs/bp/desktop.html %}, the navbar brand will only take up the space it needs.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Navbar burger" %}
|
||||
{% include docs/elements/anchor.html name="Navbar burger" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -717,15 +728,22 @@ $(document).ready(function() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="example is-paddingless">
|
||||
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" style="display: flex;">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-one-quarter">
|
||||
<div class="example is-paddingless" style="margin-bottom: 1.5rem; width: 2.5rem;">
|
||||
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" style="display: flex;">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ navbar_burger_example }}{% endhighlight %}
|
||||
<div class="column">
|
||||
{% highlight html %}{{ navbar_burger_example }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -733,15 +751,24 @@ $(document).ready(function() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="example is-paddingless">
|
||||
<a role="button" class="navbar-burger is-active" aria-label="menu" aria-expanded="false" style="display: flex;">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
<div class="columns">
|
||||
<div class="column is-one-quarter">
|
||||
<div class="example is-paddingless" style="width: 2.5rem;">
|
||||
<a role="button" class="navbar-burger is-active" aria-label="menu" aria-expanded="false" style="display: flex;">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
{% highlight html %}{{ navbar_burger_active_example }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Navbar menu" %}
|
||||
{% include docs/elements/anchor.html name="Navbar menu" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -753,7 +780,7 @@ $(document).ready(function() {
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>navbar-menu</code> is <strong>hidden on touch devices</strong> {% include bp/touch.html %}. You need to add the modifier class <code>is-active</code> to display it.
|
||||
The <code>navbar-menu</code> is <strong>hidden on touch devices</strong> {% include docs/bp/touch.html %}. You need to add the modifier class <code>is-active</code> to display it.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -761,7 +788,7 @@ $(document).ready(function() {
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
On desktop {% include bp/desktop.html %}, the <code>navbar-menu</code> will <strong>fill up the space</strong> available in the navbar, leaving the navbar brand just the space it needs. It needs, however, two elements as direct children:
|
||||
On desktop {% include docs/bp/desktop.html %}, the <code>navbar-menu</code> will <strong>fill up the space</strong> available in the navbar, leaving the navbar brand just the space it needs. It needs, however, two elements as direct children:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
@@ -802,14 +829,14 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Navbar start and navbar end" %}
|
||||
{% include docs/elements/anchor.html name="Navbar start and navbar end" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>navbar-start</code> and <code>navbar-end</code> are the two direct and only children of the <code>navbar-menu</code>.
|
||||
</p>
|
||||
<p>
|
||||
On desktop {% include bp/desktop.html %}:
|
||||
On desktop {% include docs/bp/desktop.html %}:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
@@ -826,7 +853,7 @@ $(document).ready(function() {
|
||||
|
||||
{% highlight html %}{{navbar_start_end_example}}{% endhighlight %}
|
||||
|
||||
{% include elements/anchor.html name="Navbar item" %}
|
||||
{% include docs/elements/anchor.html name="Navbar item" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -889,7 +916,7 @@ $(document).ready(function() {
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Transparent navbar" %}
|
||||
{% include docs/elements/anchor.html name="Transparent navbar" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -897,9 +924,9 @@ $(document).ready(function() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=navbar_transparent_example paddingless=true horizontal=true more=true %}
|
||||
{% include docs/elements/snippet.html content=navbar_transparent_example paddingless=true horizontal=true more=true %}
|
||||
|
||||
{% include elements/anchor.html name="Fixed navbar" %}
|
||||
{% include docs/elements/anchor.html name="Fixed navbar" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -925,7 +952,35 @@ $(document).ready(function() {
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Dropdown menu" %}
|
||||
<script type="text/javascript">
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
const rootEl = document.documentElement;
|
||||
const navbarBottomEl = document.getElementById('navbarBottom');
|
||||
const fixBottomEl = document.getElementById('navbarFixBottom');
|
||||
const fixBottomElText = document.getElementById('navbarFixBottomText');
|
||||
let fixedBottom = false;
|
||||
|
||||
fixBottomEl.addEventListener('click', event => {
|
||||
fixedBottom = !fixedBottom;
|
||||
|
||||
if (fixedBottom) {
|
||||
fixBottomEl.className = 'button is-success';
|
||||
fixBottomElText.innerHTML = 'Hide';
|
||||
rootEl.classList.add('has-navbar-fixed-bottom');
|
||||
navbarBottomEl.classList.remove('is-hidden');
|
||||
} else {
|
||||
fixBottomEl.className = 'button is-link';
|
||||
fixBottomElText.innerHTML = 'Show';
|
||||
rootEl.classList.remove('has-navbar-fixed-bottom');
|
||||
navbarBottomEl.classList.add('is-hidden');
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
{% include docs/elements/anchor.html name="Dropdown menu" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -962,7 +1017,7 @@ $(document).ready(function() {
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>navbar-dropdown</code> is visible on touch devices {% include bp/touch.html %} but hidden on desktop {% include bp/desktop.html %}. <em>How</em> the dropdown is displayed on desktop depends on the parent's class.
|
||||
The <code>navbar-dropdown</code> is visible on touch devices {% include docs/bp/touch.html %} but hidden on desktop {% include docs/bp/desktop.html %}. <em>How</em> the dropdown is displayed on desktop depends on the parent's class.
|
||||
</p>
|
||||
<p>
|
||||
The <code>navbar-item</code> with the <code>has-dropdown</code> modifier, has <strong>2 additional modifiers</strong>
|
||||
@@ -1211,12 +1266,7 @@ $(document).ready(function() {
|
||||
|
||||
{% highlight html %}{{ navbar_divider_example }}{% endhighlight %}
|
||||
|
||||
{% include elements/anchor.html name="Colors" %}
|
||||
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">New!</span>
|
||||
<span class="tag is-info">0.5.2</span>
|
||||
</div>
|
||||
{% include docs/elements/anchor.html name="Colors" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -1238,47 +1288,51 @@ $(document).ready(function() {
|
||||
|
||||
{% highlight html %}{{ navbar_color_markup }}{% endhighlight %}
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
{% include examples/navbar-color.html color="primary" %}
|
||||
<div class="bd-example is-paddingless" style="height: 30rem;">
|
||||
{% include docs/examples/navbar.html %}
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
{% include examples/navbar-color.html color="link" %}
|
||||
<div class="bd-example is-paddingless" style="height: 30rem;">
|
||||
{% include docs/examples/navbar-color.html color="primary" %}
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
{% include examples/navbar-color.html color="info" %}
|
||||
<div class="bd-example is-paddingless" style="height: 30rem;">
|
||||
{% include docs/examples/navbar-color.html color="link" %}
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
{% include examples/navbar-color.html color="success" %}
|
||||
<div class="bd-example is-paddingless" style="height: 30rem;">
|
||||
{% include docs/examples/navbar-color.html color="info" %}
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
{% include examples/navbar-color.html color="warning" light=true %}
|
||||
<div class="bd-example is-paddingless" style="height: 30rem;">
|
||||
{% include docs/examples/navbar-color.html color="success" %}
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
{% include examples/navbar-color.html color="danger" %}
|
||||
<div class="bd-example is-paddingless" style="height: 30rem;">
|
||||
{% include docs/examples/navbar-color.html color="warning" light=true %}
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
{% include examples/navbar-color.html color="black" %}
|
||||
<div class="bd-example is-paddingless" style="height: 30rem;">
|
||||
{% include docs/examples/navbar-color.html color="danger" %}
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
{% include examples/navbar-color.html color="dark" %}
|
||||
<div class="bd-example is-paddingless" style="height: 30rem;">
|
||||
{% include docs/examples/navbar-color.html color="black" %}
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
{% include examples/navbar-color.html color="light" light=true %}
|
||||
<div class="bd-example is-paddingless" style="height: 30rem;">
|
||||
{% include docs/examples/navbar-color.html color="dark" %}
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
{% include examples/navbar-color.html color="white" light=true %}
|
||||
<div class="bd-example is-paddingless" style="height: 30rem;">
|
||||
{% include docs/examples/navbar-color.html color="light" light=true %}
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Navbar Helper Classes" %}
|
||||
<div class="bd-example is-paddingless" style="height: 30rem;">
|
||||
{% include docs/examples/navbar-color.html color="white" light=true %}
|
||||
</div>
|
||||
|
||||
{% include docs/elements/anchor.html name="Navbar Helper Classes" %}
|
||||
|
||||
<table class="table is-bordered">
|
||||
<tbody>
|
||||
@@ -1303,4 +1357,4 @@ $(document).ready(function() {
|
||||
</table>
|
||||
|
||||
|
||||
{% include components/variables.html type='component' %}
|
||||
|
||||
|
||||
@@ -1,227 +1,281 @@
|
||||
---
|
||||
title: Pagination
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: components
|
||||
doc-subtab: pagination
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-pagination
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-pagination
|
||||
meta:
|
||||
colors: false
|
||||
sizes: true
|
||||
variables: true
|
||||
---
|
||||
|
||||
{% capture pagination_example %}
|
||||
<nav class="pagination" role="navigation" aria-label="pagination">
|
||||
<a class="pagination-previous">Previous</a>
|
||||
<a class="pagination-next">Next page</a>
|
||||
<a href="#" class="pagination-previous">Previous</a>
|
||||
<a href="#" class="pagination-next">Next page</a>
|
||||
<ul class="pagination-list">
|
||||
<li>
|
||||
<a class="pagination-link" aria-label="Goto page 1">1</a>
|
||||
<a href="#" class="pagination-link" aria-label="Goto page 1">1</a>
|
||||
</li>
|
||||
<li>
|
||||
<span class="pagination-ellipsis">…</span>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link" aria-label="Goto page 45">45</a>
|
||||
<a href="#" class="pagination-link" aria-label="Goto page 45">45</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a>
|
||||
<a
|
||||
class="pagination-link is-current"
|
||||
aria-label="Page 46"
|
||||
aria-current="page"
|
||||
>46</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link" aria-label="Goto page 47">47</a>
|
||||
<a href="#" class="pagination-link" aria-label="Goto page 47">47</a>
|
||||
</li>
|
||||
<li>
|
||||
<span class="pagination-ellipsis">…</span>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link" aria-label="Goto page 86">86</a>
|
||||
<a href="#" class="pagination-link" aria-label="Goto page 86">86</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture pagination_options_example %}
|
||||
<nav class="pagination" role="navigation" aria-label="pagination">
|
||||
<a class="pagination-previous is-disabled" title="This is the first page">Previous</a>
|
||||
<a class="pagination-next">Next page</a>
|
||||
<a class="pagination-previous is-disabled" title="This is the first page"
|
||||
>Previous</a
|
||||
>
|
||||
<a href="#" class="pagination-next">Next page</a>
|
||||
<ul class="pagination-list">
|
||||
<li>
|
||||
<a class="pagination-link is-current" aria-label="Page 1" aria-current="page">1</a>
|
||||
<a
|
||||
class="pagination-link is-current"
|
||||
aria-label="Page 1"
|
||||
aria-current="page"
|
||||
>1</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link" aria-label="Goto page 2">2</a>
|
||||
<a href="#" class="pagination-link" aria-label="Goto page 2">2</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link" aria-label="Goto page 3">3</a>
|
||||
<a href="#" class="pagination-link" aria-label="Goto page 3">3</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture pagination_centered_example %}
|
||||
<nav class="pagination is-centered" role="navigation" aria-label="pagination">
|
||||
<a class="pagination-previous">Previous</a>
|
||||
<a class="pagination-next">Next page</a>
|
||||
<a href="#" class="pagination-previous">Previous</a>
|
||||
<a href="#" class="pagination-next">Next page</a>
|
||||
<ul class="pagination-list">
|
||||
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 1">1</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
|
||||
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 45">45</a></li>
|
||||
<li>
|
||||
<a
|
||||
class="pagination-link is-current"
|
||||
aria-label="Page 46"
|
||||
aria-current="page"
|
||||
>46</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 47">47</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 86">86</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture pagination_right_example %}
|
||||
<nav class="pagination is-right" role="navigation" aria-label="pagination">
|
||||
<a class="pagination-previous">Previous</a>
|
||||
<a class="pagination-next">Next page</a>
|
||||
<a href="#" class="pagination-previous">Previous</a>
|
||||
<a href="#" class="pagination-next">Next page</a>
|
||||
<ul class="pagination-list">
|
||||
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 1">1</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
|
||||
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 45">45</a></li>
|
||||
<li>
|
||||
<a
|
||||
class="pagination-link is-current"
|
||||
aria-label="Page 46"
|
||||
aria-current="page"
|
||||
>46</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 47">47</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 86">86</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture pagination_rounded_example %}
|
||||
<nav class="pagination is-rounded" role="navigation" aria-label="pagination">
|
||||
<a class="pagination-previous">Previous</a>
|
||||
<a class="pagination-next">Next page</a>
|
||||
<a href="#" class="pagination-previous">Previous</a>
|
||||
<a href="#" class="pagination-next">Next page</a>
|
||||
<ul class="pagination-list">
|
||||
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 1">1</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
|
||||
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 45">45</a></li>
|
||||
<li>
|
||||
<a
|
||||
class="pagination-link is-current"
|
||||
aria-label="Page 46"
|
||||
aria-current="page"
|
||||
>46</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 47">47</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 86">86</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture pagination_small_example %}
|
||||
<nav class="pagination is-small" role="navigation" aria-label="pagination">
|
||||
<a class="pagination-previous">Previous</a>
|
||||
<a class="pagination-next">Next page</a>
|
||||
<a href="#" class="pagination-previous">Previous</a>
|
||||
<a href="#" class="pagination-next">Next page</a>
|
||||
<ul class="pagination-list">
|
||||
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 1">1</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
|
||||
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 45">45</a></li>
|
||||
<li>
|
||||
<a
|
||||
class="pagination-link is-current"
|
||||
aria-label="Page 46"
|
||||
aria-current="page"
|
||||
>46</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 47">47</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 86">86</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture pagination_medium_example %}
|
||||
<nav class="pagination is-medium" role="navigation" aria-label="pagination">
|
||||
<a class="pagination-previous">Previous</a>
|
||||
<a class="pagination-next">Next page</a>
|
||||
<a href="#" class="pagination-previous">Previous</a>
|
||||
<a href="#" class="pagination-next">Next page</a>
|
||||
<ul class="pagination-list">
|
||||
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 1">1</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
|
||||
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 45">45</a></li>
|
||||
<li>
|
||||
<a
|
||||
class="pagination-link is-current"
|
||||
aria-label="Page 46"
|
||||
aria-current="page"
|
||||
>46</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 47">47</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 86">86</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture pagination_large_example %}
|
||||
<nav class="pagination is-large" role="navigation" aria-label="pagination">
|
||||
<a class="pagination-previous">Previous</a>
|
||||
<a class="pagination-next">Next page</a>
|
||||
<a href="#" class="pagination-previous">Previous</a>
|
||||
<a href="#" class="pagination-next">Next page</a>
|
||||
<ul class="pagination-list">
|
||||
<li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 1">1</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
|
||||
<li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 45">45</a></li>
|
||||
<li>
|
||||
<a
|
||||
class="pagination-link is-current"
|
||||
aria-label="Page 46"
|
||||
aria-current="page"
|
||||
>46</a
|
||||
>
|
||||
</li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 47">47</a></li>
|
||||
<li><span class="pagination-ellipsis">…</span></li>
|
||||
<li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
|
||||
<li><a href="#" class="pagination-link" aria-label="Goto page 86">86</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The pagination component consists of several elements:
|
||||
</p>
|
||||
<p>The pagination component consists of several elements:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>pagination-previous</code> and <code>pagination-next</code> for incremental navigation
|
||||
</li>
|
||||
<li><code>pagination-previous</code> and <code>pagination-next</code> for incremental navigation</li>
|
||||
<li>
|
||||
<code>pagination-list</code> which displays page items:
|
||||
<ul>
|
||||
<li>
|
||||
<code>pagination-link</code> for the page numbers
|
||||
</li>
|
||||
<li>
|
||||
<code>pagination-ellipsis</code> for range separators
|
||||
</li>
|
||||
<li><code>pagination-link</code> for the page numbers</li>
|
||||
<li><code>pagination-ellipsis</code> for range separators</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
All elements are optional so you can compose your pagination as you wish.
|
||||
</p>
|
||||
<p>All elements are optional so you can compose your pagination as you wish.</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=pagination_example horizontal=true more=true %}
|
||||
{%
|
||||
include docs/elements/snippet.html content=pagination_example horizontal=true
|
||||
more=true
|
||||
%}
|
||||
|
||||
<div class="content">
|
||||
<p>You can disable some links if they are not active, or change the amount of page numbers available.</p>
|
||||
</div>
|
||||
|
||||
{%
|
||||
include docs/elements/snippet.html content=pagination_options_example
|
||||
horizontal=true more=true
|
||||
%}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can disable some links if they are not active, or change the amount of page numbers available.
|
||||
By default on <strong>tablet</strong>, the list is located on the left, and the previous/next buttons on the right.
|
||||
But you can change the <strong>order</strong> of these elements by using the <code>is-centered</code> and
|
||||
<code>is-right</code> modifiers.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=pagination_options_example horizontal=true more=true %}
|
||||
{%
|
||||
include docs/elements/snippet.html content=pagination_centered_example
|
||||
horizontal=true more=true
|
||||
%}
|
||||
{%
|
||||
include docs/elements/snippet.html
|
||||
content=pagination_right_example horizontal=true more=true
|
||||
%}
|
||||
{% include docs/elements/anchor.html name="Styles" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
By default on <strong>tablet</strong>, the list is located on the left, and the previous/next buttons on the right. But you can change the <strong>order</strong> of these elements by using the <code>is-centered</code> and <code>is-right</code> modifiers.
|
||||
</p>
|
||||
</div>
|
||||
<p class="content">Add the <code>is-rounded</code> modifier to have rounded pagination items.</p>
|
||||
|
||||
{% include elements/snippet.html content=pagination_centered_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/snippet.html content=pagination_right_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/anchor.html name="Styles" %}
|
||||
|
||||
<p class="content">
|
||||
Add the <code>is-rounded</code> modifier to have rounded pagination items.
|
||||
</p>
|
||||
|
||||
{% include elements/snippet.html content=pagination_rounded_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
{%
|
||||
include docs/elements/snippet.html content=pagination_rounded_example
|
||||
horizontal=true more=true
|
||||
%}
|
||||
{% include docs/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.
|
||||
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 elements/snippet.html content=pagination_small_example horizontal=true more=true %}
|
||||
{%
|
||||
include docs/elements/snippet.html content=pagination_small_example
|
||||
horizontal=true more=true
|
||||
%}
|
||||
{%
|
||||
include docs/elements/snippet.html
|
||||
content=pagination_medium_example horizontal=true more=true
|
||||
%}
|
||||
{%
|
||||
include docs/elements/snippet.html content=pagination_large_example horizontal=true
|
||||
more=true
|
||||
%}
|
||||
|
||||
{% include elements/snippet.html content=pagination_medium_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/snippet.html content=pagination_large_example horizontal=true more=true %}
|
||||
|
||||
{% include components/variables.html type='component' %}
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
---
|
||||
title: Panel
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: components
|
||||
doc-subtab: panel
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-panel
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-panel
|
||||
meta:
|
||||
colors: true
|
||||
sizes: false
|
||||
@@ -16,12 +17,10 @@ meta:
|
||||
|
||||
{% capture panel_example %}
|
||||
<nav class="panel">
|
||||
<p class="panel-heading">
|
||||
Repositories
|
||||
</p>
|
||||
<p class="panel-heading">Repositories</p>
|
||||
<div class="panel-block">
|
||||
<p class="control has-icons-left">
|
||||
<input class="input" type="text" placeholder="Search">
|
||||
<input class="input" type="text" placeholder="Search" />
|
||||
<span class="icon is-left">
|
||||
<i class="fas fa-search" aria-hidden="true"></i>
|
||||
</span>
|
||||
@@ -71,7 +70,7 @@ meta:
|
||||
mojs
|
||||
</a>
|
||||
<label class="panel-block">
|
||||
<input type="checkbox">
|
||||
<input type="checkbox" />
|
||||
remember me
|
||||
</label>
|
||||
<div class="panel-block">
|
||||
@@ -83,16 +82,10 @@ meta:
|
||||
{% endcapture %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>panel</code> is a container for several types:
|
||||
</p>
|
||||
<p>The <code>panel</code> is a container for several types:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>panel-heading</code> as the first child
|
||||
</li>
|
||||
<li>
|
||||
<code>panel-tabs</code> for navigation
|
||||
</li>
|
||||
<li><code>panel-heading</code> as the first child</li>
|
||||
<li><code>panel-tabs</code> for navigation</li>
|
||||
<li>
|
||||
<code>panel-block</code> which can contain other elements, like:
|
||||
<ul>
|
||||
@@ -104,29 +97,31 @@ meta:
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
The <code>panel-block</code> can be an anchor tag <code><a></code> or a label <code><label></code> with a checkbox inside.
|
||||
The <code>panel-block</code> can be an anchor tag <code><a></code> or
|
||||
a label <code><label></code> with a checkbox inside.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=panel_example more=true %}
|
||||
|
||||
{% include elements/anchor.html name="Colors" %}
|
||||
{% include docs/elements/snippet.html content=panel_example more=true %} {%
|
||||
include docs/elements/anchor.html name="Colors" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The panel component is available in all the <strong>different colors</strong> defined by the <a href="{{ site.data.links.by_id.customize-variables.path }}"><code>$colors</code> Sass map</a>. Simply append one of the color modifiers.
|
||||
The panel component is available in all the
|
||||
<strong>different colors</strong> defined by the
|
||||
<a href="{{ site.data.links.by_id.customize-variables.path }}"
|
||||
><code>$colors</code> Sass map</a
|
||||
>. Simply append one of the color modifiers.
|
||||
</p>
|
||||
<p>
|
||||
For example, to use your primary color, use <code>"panel is-primary"</code> as a class.
|
||||
For example, to use your primary color, use
|
||||
<code>"panel is-primary"</code> as a class.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% for color in site.data.colors.justColors %}
|
||||
{% capture foobar %}
|
||||
{% for color in site.data.colors.justColors %} {% capture foobar %}
|
||||
<article class="panel is-{{ color }}">
|
||||
<p class="panel-heading">
|
||||
{{ color | capitalize }}
|
||||
</p>
|
||||
<p class="panel-heading">{{ color | capitalize }}</p>
|
||||
<p class="panel-tabs">
|
||||
<a class="is-active">All</a>
|
||||
<a>Public</a>
|
||||
@@ -136,7 +131,7 @@ meta:
|
||||
</p>
|
||||
<div class="panel-block">
|
||||
<p class="control has-icons-left">
|
||||
<input class="input is-{{ color }}" type="text" placeholder="Search">
|
||||
<input class="input is-{{ color }}" type="text" placeholder="Search" />
|
||||
<span class="icon is-left">
|
||||
<i class="fas fa-search" aria-hidden="true"></i>
|
||||
</span>
|
||||
@@ -167,8 +162,5 @@ meta:
|
||||
jgthms.github.io
|
||||
</a>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar more=true %}
|
||||
{% endfor %}
|
||||
|
||||
{% include components/variables.html type='component' %}
|
||||
{% endcapture %} {% include docs/elements/snippet.html content=foobar more=true
|
||||
%} {% endfor %}
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
---
|
||||
title: Tabs
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: components
|
||||
doc-subtab: tabs
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-tabs
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
- components-tabs
|
||||
meta:
|
||||
colors: false
|
||||
sizes: true
|
||||
@@ -23,9 +24,7 @@ meta:
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tabs_centered_example %}
|
||||
{% endcapture %} {% capture tabs_centered_example %}
|
||||
<div class="tabs is-centered">
|
||||
<ul>
|
||||
<li class="is-active"><a>Pictures</a></li>
|
||||
@@ -34,9 +33,7 @@ meta:
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tabs_right_example %}
|
||||
{% endcapture %} {% capture tabs_right_example %}
|
||||
<div class="tabs is-right">
|
||||
<ul>
|
||||
<li class="is-active"><a>Pictures</a></li>
|
||||
@@ -45,40 +42,44 @@ meta:
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tabs_icons_example %}
|
||||
{% endcapture %} {% capture tabs_icons_example %}
|
||||
<div class="tabs is-centered">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-image" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Pictures</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-music" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Music</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-film" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Videos</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="far fa-file-alt" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Documents</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tabs_small_example %}
|
||||
{% endcapture %} {% capture tabs_small_example %}
|
||||
<div class="tabs is-small">
|
||||
<ul>
|
||||
<li class="is-active"><a>Pictures</a></li>
|
||||
@@ -87,9 +88,7 @@ meta:
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tabs_medium_example %}
|
||||
{% endcapture %} {% capture tabs_medium_example %}
|
||||
<div class="tabs is-medium">
|
||||
<ul>
|
||||
<li class="is-active"><a>Pictures</a></li>
|
||||
@@ -98,9 +97,7 @@ meta:
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tabs_large_example %}
|
||||
{% endcapture %} {% capture tabs_large_example %}
|
||||
<div class="tabs is-large">
|
||||
<ul>
|
||||
<li class="is-active"><a>Pictures</a></li>
|
||||
@@ -109,71 +106,81 @@ meta:
|
||||
<li><a>Documents</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tabs_boxed_example %}
|
||||
{% endcapture %} {% capture tabs_boxed_example %}
|
||||
<div class="tabs is-boxed">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-image" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Pictures</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-music" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Music</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-film" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Videos</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="far fa-file-alt" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Documents</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tabs_toggle_example %}
|
||||
{% endcapture %} {% capture tabs_toggle_example %}
|
||||
<div class="tabs is-toggle">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-image" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Pictures</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-music" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Music</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-film" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Videos</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="far fa-file-alt" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Documents</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tabs_toggle_rounded_example %}
|
||||
{% endcapture %} {% capture tabs_toggle_rounded_example %}
|
||||
<div class="tabs is-toggle is-toggle-rounded">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
@@ -202,138 +209,162 @@ meta:
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tabs_fullwidth_example %}
|
||||
{% endcapture %} {% capture tabs_fullwidth_example %}
|
||||
<div class="tabs is-fullwidth">
|
||||
<ul>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon"><i class="fas fa-angle-left" aria-hidden="true"></i></span>
|
||||
<span class="icon"
|
||||
><i class="fas fa-angle-left" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Left</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon"><i class="fas fa-angle-up" aria-hidden="true"></i></span>
|
||||
<span class="icon"
|
||||
><i class="fas fa-angle-up" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Up</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span>Right</span>
|
||||
<span class="icon"><i class="fas fa-angle-right" aria-hidden="true"></i></span>
|
||||
<span class="icon"
|
||||
><i class="fas fa-angle-right" aria-hidden="true"></i
|
||||
></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tabs_centered_boxed_example %}
|
||||
{% endcapture %} {% capture tabs_centered_boxed_example %}
|
||||
<div class="tabs is-centered is-boxed">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-image" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Pictures</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-music" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Music</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-film" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Videos</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="far fa-file-alt" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Documents</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tabs_toggle_fullwidth_example %}
|
||||
{% endcapture %} {% capture tabs_toggle_fullwidth_example %}
|
||||
<div class="tabs is-toggle is-fullwidth">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-image" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Pictures</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-music" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Music</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-film" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Videos</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="far fa-file-alt" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Documents</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tabs_centered_boxed_medium_example %}
|
||||
{% endcapture %} {% capture tabs_centered_boxed_medium_example %}
|
||||
<div class="tabs is-centered is-boxed is-medium">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-image" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Pictures</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-music" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Music</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="fas fa-film" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Videos</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
|
||||
<span class="icon is-small"
|
||||
><i class="far fa-file-alt" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Documents</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tabs_toggle_fullwidth_large_example %}
|
||||
{% endcapture %} {% capture tabs_toggle_fullwidth_large_example %}
|
||||
<div class="tabs is-toggle is-fullwidth is-large">
|
||||
<ul>
|
||||
<li class="is-active">
|
||||
<a>
|
||||
<span class="icon"><i class="fas fa-image" aria-hidden="true"></i></span>
|
||||
<span class="icon"
|
||||
><i class="fas fa-image" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Pictures</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon"><i class="fas fa-music" aria-hidden="true"></i></span>
|
||||
<span class="icon"
|
||||
><i class="fas fa-music" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Music</span>
|
||||
</a>
|
||||
</li>
|
||||
@@ -345,7 +376,9 @@ meta:
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<span class="icon"><i class="far fa-file-alt" aria-hidden="true"></i></span>
|
||||
<span class="icon"
|
||||
><i class="far fa-file-alt" aria-hidden="true"></i
|
||||
></span>
|
||||
<span>Documents</span>
|
||||
</a>
|
||||
</li>
|
||||
@@ -355,98 +388,103 @@ meta:
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The Bulma <code>tabs</code> are a straightforward navigation component that come in a variety of versions. They only require the following structure:
|
||||
The Bulma <code>tabs</code> are a straightforward navigation component that
|
||||
come in a variety of versions. They only require the following structure:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
a <code>tabs</code> container
|
||||
</li>
|
||||
<li>
|
||||
a <code><ul></code> HTML element
|
||||
</li>
|
||||
<li>
|
||||
a list of <code><li></code> HTML element
|
||||
</li>
|
||||
<li>
|
||||
<code><a></code> HTML anchor elements for each link
|
||||
</li>
|
||||
<li>a <code>tabs</code> container</li>
|
||||
<li>a <code><ul></code> HTML element</li>
|
||||
<li>a list of <code><li></code> HTML element</li>
|
||||
<li><code><a></code> HTML anchor elements for each link</li>
|
||||
</ul>
|
||||
<p>
|
||||
The <strong>default</strong> tabs style has a single border at the bottom.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=tabs_example horizontal=true %}
|
||||
|
||||
{% include elements/anchor.html name="Alignment" %}
|
||||
{% include docs/elements/snippet.html content=tabs_example horizontal=true %} {%
|
||||
include docs/elements/anchor.html name="Alignment" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
To align the tabs list, use the <code>is-centered</code> or <code>is-right</code> modifier on the <code>.tabs</code> container:
|
||||
To align the tabs list, use the <code>is-centered</code> or
|
||||
<code>is-right</code> modifier on the <code>.tabs</code> container:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=tabs_centered_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/snippet.html content=tabs_right_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/anchor.html name="Icons" %}
|
||||
{% include docs/elements/snippet.html content=tabs_centered_example
|
||||
horizontal=true more=true %} {% include docs/elements/snippet.html
|
||||
content=tabs_right_example horizontal=true more=true %} {% include
|
||||
docs/elements/anchor.html name="Icons" %}
|
||||
|
||||
<div class="content">
|
||||
<p>You can use any of the <a href="https://fontawesome.com/">Font Awesome</a> <strong>icons</strong>.</p>
|
||||
<p>
|
||||
You can use any of the <a href="https://fontawesome.com/">Font Awesome</a>
|
||||
<strong>icons</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=tabs_icons_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
{% include docs/elements/snippet.html content=tabs_icons_example horizontal=true
|
||||
more=true %} {% include docs/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>
|
||||
<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 elements/snippet.html content=tabs_small_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/snippet.html content=tabs_medium_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/snippet.html content=tabs_large_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/anchor.html name="Styles" %}
|
||||
{% include docs/elements/snippet.html content=tabs_small_example horizontal=true
|
||||
more=true %} {% include docs/elements/snippet.html content=tabs_medium_example
|
||||
horizontal=true more=true %} {% include docs/elements/snippet.html
|
||||
content=tabs_large_example horizontal=true more=true %} {% include
|
||||
docs/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.
|
||||
If you want a more classic style with <strong>borders</strong>, just append
|
||||
the <code>is-boxed</code> modifier.
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=tabs_boxed_example horizontal=true more=true %}
|
||||
{% include docs/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.
|
||||
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 elements/snippet.html content=tabs_toggle_example horizontal=true more=true %}
|
||||
{% include docs/elements/snippet.html content=tabs_toggle_example
|
||||
horizontal=true more=true %}
|
||||
|
||||
<p class="content">
|
||||
If you use both <code>is-toggle</code> and <code>is-toggle-rounded</code>, the first and last items will be <strong>rounded</strong>.
|
||||
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 elements/snippet.html content=tabs_toggle_rounded_example horizontal=true more=true %}
|
||||
{% include docs/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>.
|
||||
If you want the tabs to take up the <strong>whole width</strong> available,
|
||||
use <code>is-fullwidth</code>.
|
||||
</p>
|
||||
|
||||
{% include elements/snippet.html content=tabs_fullwidth_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/anchor.html name="Combining" %}
|
||||
{% include docs/elements/snippet.html content=tabs_fullwidth_example
|
||||
horizontal=true more=true %} {% include docs/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>
|
||||
<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 elements/snippet.html content=tabs_centered_boxed_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/snippet.html content=tabs_toggle_fullwidth_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/snippet.html content=tabs_centered_boxed_medium_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %}
|
||||
|
||||
{% include components/variables.html type='component' %}
|
||||
{% include docs/elements/snippet.html content=tabs_centered_boxed_example
|
||||
horizontal=true more=true %} {% include docs/elements/snippet.html
|
||||
content=tabs_toggle_fullwidth_example horizontal=true more=true %} {% include
|
||||
docs/elements/snippet.html content=tabs_centered_boxed_medium_example
|
||||
horizontal=true more=true %} {% include docs/elements/snippet.html
|
||||
content=tabs_toggle_fullwidth_large_example horizontal=true more=true %} {%
|
||||
include docs/components/variables.html type='component' %}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Customize
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: customize
|
||||
doc-tab: customize
|
||||
hide_tabs: true
|
||||
hide_pagination: true
|
||||
@@ -9,5 +10,4 @@ breadcrumb:
|
||||
- documentation
|
||||
- customize
|
||||
---
|
||||
|
||||
{% include components/links.html category_id='customize' %}
|
||||
{% include docs/components/links.html category_id='customize' %}
|
||||
|
||||
@@ -1,82 +1,189 @@
|
||||
---
|
||||
title: Concepts
|
||||
layout: documentation
|
||||
title: Bulma Customization Concepts
|
||||
layout: docs
|
||||
theme: customize
|
||||
doc-tab: customize
|
||||
doc-subtab: concepts
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- customize
|
||||
- customize-concepts
|
||||
- home
|
||||
- documentation
|
||||
- customize
|
||||
- customize-concepts
|
||||
---
|
||||
|
||||
{% assign variables_link = site.data.links.by_id['customize-variables'] %}
|
||||
{% capture markdown %}
|
||||
Bulma is a **highly customizable CSS framework**. From colors to typography, spacing and sizes, forms and layouts, all parts of Bulma can be customized by the user.
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Bulma is highly customizable thanks to <strong>419 Sass variables</strong> living across <strong>28 files</strong>.
|
||||
</p>
|
||||
Bulma's styles and variables are defined at several levels:
|
||||
|
||||
<p>
|
||||
These variables exist at 4 levels:
|
||||
</p>
|
||||
* Global Sass variables
|
||||
* Component Sass variables
|
||||
* Global CSS variables
|
||||
* Component CSS variables
|
||||
* Helper classes
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<strong><a href="{{ site.url }}{{ variables_link.path }}#initial-variables">initial variables</a></strong>: global variables with <strong>literal</strong> values
|
||||
</li>
|
||||
<li>
|
||||
<strong><a href="{{ site.url }}{{ variables_link.path }}#derived-variables">derived variables</a></strong>: global variables with values that reference other variables, or are computed
|
||||
</li>
|
||||
<li>
|
||||
<strong><a href="{{ site.url }}{{ variables_link.path }}#generic-variables">generic variables</a></strong>: for the HTML elements which carry no CSS class
|
||||
</li>
|
||||
<li>
|
||||
<strong>element/component variables</strong>: variables that are specific to a Bulma element/component
|
||||
</li>
|
||||
</ul>
|
||||
All Bulma components are styled using **Sass variables** and **CSS Variables** (which are also called CSS custom properties). Read more about them:
|
||||
* [on the Sass website](https://sass-lang.com/documentation/variables/)
|
||||
* [on the MDN Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
|
||||
{% endcapture %}
|
||||
|
||||
<p>
|
||||
Since these variables carry the <code>!default</code> flag, they can be assigned a <strong>new value</strong> either before or after having been imported.
|
||||
</p>
|
||||
</div>
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
{% include elements/anchor.html name="Strategy" %}
|
||||
{% include docs/elements/anchor.html name="Global Sass Variables" %}
|
||||
|
||||
{% assign node_sass_link = site.data.links.by_id['customize-node-sass'] %}
|
||||
{% assign sass_cli_link = site.data.links.by_id['customize-sass-cli'] %}
|
||||
{% assign webpack_link = site.data.links.by_id['customize-webpack'] %}
|
||||
{% capture markdown %}
|
||||
Bulma uses Sass variables globally defines in 2 files located in the `utilities` folder:
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
To customize Bulma, you will need to:
|
||||
</p>
|
||||
* `initial-variables.scss` where you define variables by literal value
|
||||
* **colors** like `$blue: hsl(229, 53%, 53%)`
|
||||
* **font sizes** like `$size-1: 3rem`
|
||||
* **dimensions** like `$block-spacing: 1.5rem`
|
||||
* **breakpoints** like `$tablet: 769px`
|
||||
* **other values** like `$easing: ease-out` or `$radius-large: 0.75rem`
|
||||
* `derived-variables.scss` where variables are calculated from the values set in the previous file
|
||||
* **primary colors**:
|
||||
* `$primary`
|
||||
* `$link`
|
||||
* `$success`
|
||||
* `$info`
|
||||
* `$warning`
|
||||
* `$dark`
|
||||
* **utility colors**:
|
||||
* `$background`
|
||||
* `$border`
|
||||
* `$code` and `$pre`
|
||||
* `$shadow-color`
|
||||
* **typography**:
|
||||
* `$family-primary`
|
||||
* `$family-secondary`
|
||||
* `$family-code`
|
||||
* `$size-small`
|
||||
* `$size-normal`
|
||||
* `$size-medium`
|
||||
* `$size-large`
|
||||
* color maps:
|
||||
* `$colors`
|
||||
* `$shades`
|
||||
* `$sizes`
|
||||
{% endcapture %}
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<strong>install</strong> (or download) Bulma
|
||||
</li>
|
||||
<li>
|
||||
have a working <strong>Sass setup</strong>
|
||||
</li>
|
||||
<li>
|
||||
create your own <code>.scss</code> or <code>.sass</code> file
|
||||
</li>
|
||||
</ul>
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
<p>
|
||||
This can be achieved with any of the following:
|
||||
</p>
|
||||
{% include docs/elements/anchor.html name="Component Sass variables" %}
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<a href="{{ site.url }}{{ node_sass_link.path }}">node-sass</a>
|
||||
</li>
|
||||
<li>
|
||||
the <a href="{{ site.url }}{{ sass_cli_link.path }}">Sass CLI</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ site.url }}{{ webpack_link.path }}">webpack</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% capture markdown %}
|
||||
All Bulma components define its own Sass variables. For example, `components/breadcrumb.scss` define the following:
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
{%
|
||||
include docs/components/variables.html
|
||||
tab="components"
|
||||
subtab="breadcrumb"
|
||||
hide_css_vars=true
|
||||
%}
|
||||
|
||||
{% include docs/elements/anchor.html name="Global CSS Variables" %}
|
||||
|
||||
{% capture markdown %}
|
||||
Bulma uses global CSS variables defined at the `:root` level. They are all prefixed with `bulma-`:
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
{% highlight css %}
|
||||
:root {
|
||||
/* Colors and Lightness values */
|
||||
--bulma-scheme-h: 221;
|
||||
--bulma-scheme-s: 14%;
|
||||
--bulma-light-l: 90%;
|
||||
--bulma-light-invert-l: 20%;
|
||||
--bulma-dark-l: 20%;
|
||||
--bulma-dark-invert-l: 90%;
|
||||
--bulma-soft-l: 90%;
|
||||
--bulma-bold-l: 20%;
|
||||
--bulma-soft-invert-l: 20%;
|
||||
--bulma-bold-invert-l: 90%;
|
||||
/* etc. */
|
||||
|
||||
/* Color Palettes */
|
||||
--bulma-primary: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 1);
|
||||
--bulma-primary-base: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 1);
|
||||
--bulma-primary-rgb: 0, 209, 178;
|
||||
--bulma-primary-h: 171deg;
|
||||
--bulma-primary-s: 100%;
|
||||
--bulma-primary-l: 41%;
|
||||
--bulma-primary-00-l: 1%;
|
||||
--bulma-primary-05-l: 6%;
|
||||
--bulma-primary-10-l: 11%;
|
||||
--bulma-primary-15-l: 16%;
|
||||
--bulma-primary-20-l: 21%;
|
||||
/* etc. */
|
||||
|
||||
/* Typography */
|
||||
--bulma-family-primary: Inter, SF Pro, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
--bulma-family-secondary: Inter, SF Pro, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
--bulma-family-code: Inconsolata, Hack, SF Mono, Roboto Mono, Source Code Pro, Ubuntu Mono, monospace;
|
||||
--bulma-size-small: 0.75rem;
|
||||
--bulma-size-normal: 1rem;
|
||||
--bulma-size-medium: 1.25rem;
|
||||
--bulma-size-large: 1.5rem;
|
||||
/* etc. */
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
{% capture markdown %}
|
||||
You can **overwrite** them simply by setting a new value at the same scope (or even a more specific one):
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
{% highlight css %}
|
||||
:root {
|
||||
/* Set new values */
|
||||
--bulma-scheme-h: 35;
|
||||
--bulma-scheme-s: 20%;
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
{% include docs/elements/anchor.html name="Components CSS Variables" %}
|
||||
|
||||
{% capture markdown %}
|
||||
Bulma is also styled at the **component** level. For example, here is how the `.title` element is styled:
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
{% highlight css %}
|
||||
.title {
|
||||
--bulma-title-color: var(--bulma-text-strong);
|
||||
--bulma-title-family: false;
|
||||
--bulma-title-size: var(--bulma-size-3);
|
||||
--bulma-title-weight: var(--bulma-weight-extrabold);
|
||||
--bulma-title-line-height: 1.125;
|
||||
--bulma-title-strong-color: inherit;
|
||||
--bulma-title-strong-weight: inherit;
|
||||
--bulma-title-sub-size: 0.75em;
|
||||
--bulma-title-sup-size: 0.75em;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: var(--bulma-title-color);
|
||||
font-size: var(--bulma-title-size);
|
||||
font-weight: var(--bulma-title-weight);
|
||||
line-height: var(--bulma-title-line-height);
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
{% capture markdown %}
|
||||
You can overwrite this simply by setting new values under the same scope:
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
{% highlight css %}
|
||||
.title {
|
||||
--bulma-title-color: #fff;
|
||||
--bulma-title-line-height: 1.6;
|
||||
}
|
||||
{% endhighlight %}
|
||||
40
docs/documentation/customize/list-of-sass-variables.html
Normal file
40
docs/documentation/customize/list-of-sass-variables.html
Normal file
@@ -0,0 +1,40 @@
|
||||
---
|
||||
title: List of Bulma Sass variables
|
||||
layout: docs
|
||||
theme: customize
|
||||
doc-tab: customize
|
||||
doc-subtab: sass-list
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- customize
|
||||
- customize-sass-list
|
||||
---
|
||||
|
||||
{% include docs/elements/anchor.html name="Initial variables" %}
|
||||
|
||||
<div class="content">Defined at <code>utilities/initial-variables.scss</code>.</div>
|
||||
|
||||
{%
|
||||
include docs/components/variables.html
|
||||
tab="utilities"
|
||||
subtab="initial-variables"
|
||||
hide_css_vars=true
|
||||
%}
|
||||
|
||||
{% include docs/elements/anchor.html name="Derived variables" %}
|
||||
|
||||
<div class="content">Defined at <code>utilities/derived-variables.scss</code>.</div>
|
||||
|
||||
{%
|
||||
include docs/components/variables.html
|
||||
tab="utilities"
|
||||
subtab="derived-variables"
|
||||
hide_css_vars=true
|
||||
%}
|
||||
|
||||
{% include docs/elements/anchor.html name="Component variables" %}
|
||||
|
||||
<div class="content">
|
||||
For each Bulma component, the list of Sass variables is listed at the bottom of its page.
|
||||
</div>
|
||||
@@ -1,109 +0,0 @@
|
||||
---
|
||||
title: Variables
|
||||
layout: documentation
|
||||
doc-tab: customize
|
||||
doc-subtab: variables
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- customize
|
||||
- customize-variables
|
||||
---
|
||||
|
||||
{% assign initial_variables = site.data.variables.utilities.initial-variables %}
|
||||
{% assign initial_vars = initial_variables.by_name %}
|
||||
{% assign derived_variables = site.data.variables.utilities.derived-variables %}
|
||||
{% assign derived_vars = derived_variables.by_name %}
|
||||
|
||||
<div class="content">
|
||||
<p>Bulma has <strong>two</strong> variable files divided into <strong>4</strong> sections:</p>
|
||||
|
||||
<ol>
|
||||
<li>
|
||||
<strong>Initial variables</strong>: where you define variables by <strong>literal value</strong>, like:
|
||||
<ul>
|
||||
<li><strong>colors</strong>: <code>{{ initial_vars['$blue'].name }}: {{ initial_vars['$blue'].value }}</code></li>
|
||||
<li><strong>font sizes</strong>: <code>{{ initial_vars['$size-1'].name }}: {{ initial_vars['$size-1'].value }}</code></li>
|
||||
<li><strong>dimensions</strong>: <code>{{ initial_vars['$gap'].name }}: {{ initial_vars['$gap'].value }}</code></li>
|
||||
<li><strong>other values</strong>: <code>{{ initial_vars['$easing'].name }}: {{ initial_vars['$easing'].value }}</code> or <code>{{ initial_vars['$radius-large'].name }}: {{ initial_vars['$radius-large'].value }}</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Derived variables</strong> where variables are <strong>calculated</strong> from the values set in the previous file. For example, you can have:
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Primary colors</strong> derived from the initial variables:
|
||||
<ul>
|
||||
<li><code>{{ derived_vars['$primary'].name }}: {{ derived_vars['$primary'].value }}</code></li>
|
||||
<li><code>{{ derived_vars['$link'].name }}: {{ derived_vars['$link'].value }}</code></li>
|
||||
<li><code>{{ derived_vars['$info'].name }}: {{ derived_vars['$info'].value }}</code></li>
|
||||
<li><code>{{ derived_vars['$success'].name }}: {{ derived_vars['$success'].value }}</code></li>
|
||||
<li><code>{{ derived_vars['$warning'].name }}: {{ derived_vars['$warning'].value }}</code></li>
|
||||
<li><code>{{ derived_vars['$danger'].name }}: {{ derived_vars['$danger'].value }}</code></li>
|
||||
<li><code>{{ derived_vars['$dark'].name }}: {{ derived_vars['$dark'].value }}</code></li>
|
||||
<li><code>{{ derived_vars['$text'].name }}: {{ derived_vars['$text'].value }}</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>{{ derived_vars['$background'].name }}: {{ derived_vars['$background'].value }}</code>: a general background color</li>
|
||||
<li><code>{{ derived_vars['$link'].name }}: {{ derived_vars['$link'].value }}</code>: the links use the primary color</li>
|
||||
<li><code>{{ derived_vars['$family-primary'].name }}: {{ derived_vars['$family-primary'].value }}</code>: the primary font family is the sans-serif one</li>
|
||||
<li>
|
||||
<strong>Lists and maps</strong> which are collections of already defined variables:
|
||||
<ul>
|
||||
<li><code>{{ derived_vars['$colors'].name }}: {{ derived_vars['$colors'].value }}</code></li>
|
||||
<li><code>{{ derived_vars['$shades'].name }}: {{ derived_vars['$shades'].value }}</code></li>
|
||||
<li><code>{{ derived_vars['$sizes'].name }}: {{ derived_vars['$sizes'].value }}</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<p>
|
||||
To <strong>override</strong> any of these variables, just set them <em>before</em> importing Bulma.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Initial variables" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
These are <a href="https://github.com/jgthms/bulma/blob/master/sass/{{ initial_variables.file_path }}" target="_blank" rel="nofollow">initial variables</a> with a <strong>literal</strong> value.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<table class="table is-bordered">
|
||||
<tbody>
|
||||
{% for variable_name in initial_variables.list %}
|
||||
{% assign variable = initial_vars[variable_name] %}
|
||||
{% include elements/variable-row.html variable=variable hide_computed =true%}
|
||||
{% endfor %}
|
||||
<tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{% capture custom_message %}
|
||||
These are <a href="https://github.com/jgthms/bulma/blob/master/sass/{{ derived_variables.file_path }}" target="_blank" rel="nofollow">variables</a> with a value that <strong>references</strong> another variable.
|
||||
{% endcapture %}
|
||||
|
||||
{%
|
||||
include components/variables.html
|
||||
anchor_name = 'Derived variables'
|
||||
data = derived_variables
|
||||
custom_message = custom_message
|
||||
table_class = 'is-bordered'
|
||||
%}
|
||||
|
||||
{% capture custom_message %}
|
||||
You can use the following <a href="{{ site.data.variables.base.generic.file_url }}" target="_blank">generic variables</a> for general <strong>customization</strong>. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
|
||||
{% endcapture %}
|
||||
|
||||
{%
|
||||
include components/variables.html
|
||||
anchor_name = 'Generic variables'
|
||||
tab = 'base'
|
||||
subtab = 'generic'
|
||||
custom_message = custom_message
|
||||
table_class = 'is-bordered'
|
||||
%}
|
||||
37
docs/documentation/customize/with-css-variables.html
Normal file
37
docs/documentation/customize/with-css-variables.html
Normal file
@@ -0,0 +1,37 @@
|
||||
---
|
||||
title: Customize with CSS Variables
|
||||
layout: docs
|
||||
theme: customize
|
||||
doc-tab: customize
|
||||
doc-subtab: with-css-variables
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- customize
|
||||
- customize-with-css-variables
|
||||
---
|
||||
|
||||
{% capture markdown %}
|
||||
Bulma makes wide use of **CSS Variables** (also called CSS custom properties). Read more about them on the [dedicated page]({{ site.data.links.by_id['features-css-variables'].path }}).
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
{% capture markdown %}
|
||||
You can change the current Bulma simply by **opening your developer console** and changing a CSS variable's value.
|
||||
|
||||
If you set your CSS variables under the `:root` scope, you are **overwriting** Bulma's default theme. This can be done by with Sass or CSS.
|
||||
|
||||
To test out this CSS method, simply follow these steps:
|
||||
|
||||
<table class="table is-bordered">
|
||||
{% include docs/elements/step.html image="images/themes/step-1-inspect.png" content="Open your browser inspector" width=496 height=748 %}
|
||||
{% include docs/elements/step.html image="images/themes/step-2-html.png" content="Select the `html` element" width=528 height=232 %}
|
||||
{% include docs/elements/step.html image="images/themes/step-3-var.png" content="Insert a new value for the `--bulma-link-h` variable (the hue of the link color)" width=376 height=120 %}
|
||||
{% include docs/elements/step.html image="images/themes/step-4-menu.png" content="Notice how the CSS Helpers section in the side menu changes color" width=480 height=256 %}
|
||||
</table>
|
||||
{% endcapture %}
|
||||
|
||||
{% include docs/elements/anchor.html name="Customizing in the browser" %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
@@ -1,168 +0,0 @@
|
||||
---
|
||||
title: With node-sass
|
||||
layout: documentation
|
||||
doc-tab: customize
|
||||
doc-subtab: node-sass
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- customize
|
||||
- customize-node-sass
|
||||
---
|
||||
|
||||
{% capture dependencies %}
|
||||
npm install node-sass --save-dev
|
||||
npm install bulma --save-dev
|
||||
{% endcapture %}
|
||||
|
||||
{% capture package %}
|
||||
{
|
||||
"name": "mybulma",
|
||||
"version": "1.0.0",
|
||||
"main": "sass/mystyles.scss",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"bulma": "^0.7.2",
|
||||
"node-sass": "^4.9.2"
|
||||
}
|
||||
}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture step_2 %}
|
||||
<div class="content">
|
||||
<p>
|
||||
You only need <strong>2 packages</strong> to customize Bulma: <code>node-sass</code> and <code>bulma</code> itself.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight bash %}{{ dependencies }}{% endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Your <code>package.json</code> should look like this at this point.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight bash %}{{ package }}{% endhighlight %}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture scripts %}
|
||||
"scripts": {
|
||||
"css-build": "node-sass --omit-source-map-url sass/mystyles.scss css/mystyles.css",
|
||||
"css-watch": "npm run css-build -- --watch",
|
||||
"start": "npm run css-watch"
|
||||
}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture npm_build %}
|
||||
npm run css-build
|
||||
{% endcapture %}
|
||||
|
||||
{% capture npm_build_success %}
|
||||
Rendering Complete, saving .css file...
|
||||
Wrote CSS to /path/to/mybulma/css/mystyles.css
|
||||
{% endcapture %}
|
||||
|
||||
{% capture npm_watch %}
|
||||
npm start
|
||||
{% endcapture %}
|
||||
|
||||
{% capture step_5 %}
|
||||
<div class="content">
|
||||
<p>
|
||||
To build a CSS file from a Sass file, we can use <strong>node scripts</strong>. In <code>package.json</code>, add the following:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ scripts }}{% endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<ul>
|
||||
<li>
|
||||
<code>css-build</code> takes <code>sass/mystyles.scss</code> as an input, and outputs <code>css/mystyles.css</code>, while omitting the source map
|
||||
</li>
|
||||
<li>
|
||||
<code>css-watch</code> builds the CSS and watches for changes
|
||||
</li>
|
||||
<li>
|
||||
<code>start</code> is simply a shortcut for <code>css-watch</code>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
To test it out, go in your <strong>terminal</strong> and run the following command:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight bash %}{{ npm_build }}{% endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
If set up correctly, you will see the following message:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight bash %}{{ npm_build_success }}{% endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>Reload</strong> the page and it should be styled like this:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{%
|
||||
include components/figure.html
|
||||
path="customize/custom-bulma-02-default"
|
||||
extension="png"
|
||||
alt="Bulma default styles"
|
||||
width="600"
|
||||
height="300"
|
||||
caption="Bulma's default styles"
|
||||
%}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
To <strong>watch for changes</strong>, just launch the following command:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight bash %}{{ npm_watch }}{% endhighlight %}
|
||||
{% endcapture %}
|
||||
|
||||
{% include steps/create-package.html
|
||||
number="1"
|
||||
entry="sass/mystyles.scss"
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
{% include components/step.html
|
||||
title="2. Install the dev dependencies"
|
||||
content=step_2
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
{% include steps/create-sass-file.html
|
||||
number="3"
|
||||
path="../node_modules/bulma/bulma.sass"
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
{% include steps/create-html-page.html
|
||||
number="4"
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
{% include components/step.html
|
||||
title="5. Add node scripts to build your CSS"
|
||||
content=step_5
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
{% include steps/add-custom-styles.html
|
||||
number="6"
|
||||
%}
|
||||
@@ -1,146 +0,0 @@
|
||||
---
|
||||
title: With sass-cli
|
||||
layout: documentation
|
||||
doc-tab: customize
|
||||
doc-subtab: sass-cli
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- customize
|
||||
- customize-sass-cli
|
||||
---
|
||||
|
||||
{% capture gem_install %}
|
||||
gem install sass
|
||||
{% endcapture %}
|
||||
|
||||
{% capture gem_test %}
|
||||
Sass 3.5.3 (Bleeding Edge)
|
||||
{% endcapture %}
|
||||
|
||||
{% capture step_1 %}
|
||||
<div class="content">
|
||||
<p>
|
||||
In your terminal, create a new folder called <code>mybulma</code>, navigate to it, then install the <strong>Sass gem</strong>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight bash %}{{ gem_install }}{% endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
To try it out, run <code>sass -v</code> and you should see the following:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight bash %}{{ gem_test }}{% endhighlight %}
|
||||
|
||||
<div class="message is-info">
|
||||
<div class="message-body">
|
||||
<p>
|
||||
If you are on <strong>Windows</strong> and use <strong>Chocolatey</strong>, you can try <code>choco install sass</code>.
|
||||
</p>
|
||||
<p>
|
||||
If you are on <strong>Mac</strong> and use <strong>Homebrew</strong>, you can try <code>brew install sass/sass/sass</code>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture step_2 %}
|
||||
<div class="content">
|
||||
<p>
|
||||
Get the latest version of Bulma:
|
||||
</p>
|
||||
<p>
|
||||
<a class="button is-primary" href="{{ site.data.meta.download }}">
|
||||
<strong>Download</strong>
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
Unzip it and put the <code>bulma-{{ site.data.meta.version }}</code> folder inside your <code>mybulma</code> folder.
|
||||
</p>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture build_sass %}
|
||||
sass --no-source-map sass/mystyles.scss:css/mystyles.css
|
||||
{% endcapture %}
|
||||
|
||||
{% capture watch_sass %}
|
||||
sass --watch --no-source-map sass/mystyles.scss:css/mystyles.css
|
||||
{% endcapture %}
|
||||
|
||||
{% capture step_5 %}
|
||||
<div class="content">
|
||||
<p>
|
||||
In your terminal, type the following command:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight bash %}{{ build_sass }}{% endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>Reload</strong> the page and it should be styled like this:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{%
|
||||
include components/figure.html
|
||||
path="customize/custom-bulma-02-default"
|
||||
extension="png"
|
||||
alt="Bulma default styles"
|
||||
width="600"
|
||||
height="300"
|
||||
caption="Bulma's default styles"
|
||||
%}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
To <strong>watch for changes</strong>, just launch the following command:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight bash %}{{ watch_sass }}{% endhighlight %}
|
||||
{% endcapture %}
|
||||
|
||||
{% include components/step.html
|
||||
title='1. Install Sass'
|
||||
content=step_1
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
{% include components/step.html
|
||||
title='2. Download Bulma'
|
||||
content=step_2
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
{% assign bulma_path = site.data.meta.version | prepend: "../bulma-" | append: "/bulma.sass" %}
|
||||
|
||||
{% include steps/create-sass-file.html
|
||||
number="3"
|
||||
path=bulma_path
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
{% include steps/create-html-page.html
|
||||
number="4"
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
{% include components/step.html
|
||||
title='5. Build the CSS file'
|
||||
content=step_5
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
{% include steps/add-custom-styles.html
|
||||
number="6"
|
||||
%}
|
||||
198
docs/documentation/customize/with-sass.html
Normal file
198
docs/documentation/customize/with-sass.html
Normal file
@@ -0,0 +1,198 @@
|
||||
---
|
||||
title: Customize with Sass
|
||||
layout: docs
|
||||
theme: customize
|
||||
doc-tab: customize
|
||||
doc-subtab: with-sass
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- customize
|
||||
- customize-with-sass
|
||||
---
|
||||
|
||||
{% capture content %}
|
||||
Bulma is built using [Sass](https://sass-lang.com/). It uses **Sass variables** to define colors, sizes, spacing, and other aspects of the framework.
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=content %}
|
||||
|
||||
{% include docs/elements/anchor.html name="Install the dependencies" %}
|
||||
|
||||
{% capture content %}
|
||||
To customize Bulma with Sass, you first need to [install Sass](https://sass-lang.com/install/). The recommended approach is to use the `sass` npm package.
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=content %}
|
||||
|
||||
{% capture content %}
|
||||
{% highlight bash %}
|
||||
npm install sass
|
||||
npm install bulma
|
||||
{% endhighlight %}
|
||||
|
||||
In your `package.json`, add one script to build Bulma, one to build and watch for changes:
|
||||
|
||||
{% highlight json %}
|
||||
"build-bulma": "sass --load-path=node_modules my-bulma-project.scss my-bulma-project.css",
|
||||
"start": "npm run build-bulma -- --watch"
|
||||
{% endhighlight %}
|
||||
|
||||
Your whole `package.json` should look like this:
|
||||
|
||||
{% highlight json %}
|
||||
{
|
||||
"dependencies": {
|
||||
"bulma": "^1.0.0",
|
||||
"sass": "^1.72.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build-bulma": "sass --load-path=node_modules my-bulma-project.scss my-bulma-project.css",
|
||||
"start": "npm run build-bulma -- --watch"
|
||||
}
|
||||
}
|
||||
{% endhighlight %}
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=content %}
|
||||
|
||||
{% include docs/elements/anchor.html name="Create your Sass file" %}
|
||||
|
||||
{% capture content %}
|
||||
Next to your `package.json`, create a `my-bulma-project.scss` file.
|
||||
|
||||
To overwrite Bulma's Sass variables with your own value, write `@use` and the `with` keyword, which takes a Sass map:
|
||||
|
||||
{% highlight sass %}
|
||||
@use "sass:color";
|
||||
|
||||
// Set your brand colors
|
||||
$purple: #8a4d76;
|
||||
$pink: #fa7c91;
|
||||
$brown: #757763;
|
||||
$beige-light: #d0d1cd;
|
||||
$beige-lighter: #eff0eb;
|
||||
|
||||
// Path to Bulma's sass folder
|
||||
@use "bulma/sass" with (
|
||||
$family-primary: '"Nunito", sans-serif',
|
||||
$grey-dark: $brown,
|
||||
$grey-light: $beige-light,
|
||||
$primary: $purple,
|
||||
$link: $pink,
|
||||
$control-border-width: 2px,
|
||||
$input-shadow: none
|
||||
);
|
||||
|
||||
// Import the Google Font
|
||||
@import url("https://fonts.googleapis.com/css?family=Nunito:400,700");
|
||||
{% endhighlight %}
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=content %}
|
||||
|
||||
{% capture content %}
|
||||
Test out your setup by running the following command:
|
||||
|
||||
{% highlight bash %}
|
||||
npm run build-bulma
|
||||
{% endhighlight %}
|
||||
|
||||
You should see **2 files** appearing next to the other ones:
|
||||
|
||||
* `my-bulma-project.css`, your CSS output file
|
||||
* `my-bulma-project.css.map`, an optional source map
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=content %}
|
||||
|
||||
{% include docs/elements/anchor.html name="Add an HTML page" %}
|
||||
|
||||
{% capture content %}
|
||||
To view your Bulma project come to life, create an `index.html` page with the following content:
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=content %}
|
||||
|
||||
<div class="bd-example bd-highlight-full">
|
||||
{% highlight html -%}
|
||||
{%- include docs/snippets/custom-page.html -%}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
|
||||
{% include docs/elements/anchor.html name="Final result" %}
|
||||
|
||||
{% capture content %}
|
||||
Your project folder should look like this:
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=content %}
|
||||
|
||||
<table class="table is-bordered">
|
||||
<tr>
|
||||
<td>
|
||||
<div class="icon-text has-text-html">
|
||||
<span class="icon">
|
||||
<i class="fa-brands fa-html5"></i>
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td><code>index.html</code></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<div class="icon-text has-text-css">
|
||||
<span class="icon">
|
||||
<i class="fa-brands fa-css3"></i>
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td><code>my-bulma-project.css</code></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<div class="icon-text has-text-success">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-code"></i>
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td><code>my-bulma-project.css.map</code></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<div class="icon-text has-text-sass">
|
||||
<span class="icon">
|
||||
<i class="fa-brands fa-sass"></i>
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td><code>my-bulma-project.scss</code></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<div class="icon-text has-text-js">
|
||||
<span class="icon">
|
||||
<i class="fa-brands fa-js"></i>
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td><code>package.json</code></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="content">
|
||||
<p>And your final page will look like this:</p>
|
||||
</div>
|
||||
|
||||
{% include
|
||||
screenshot.html
|
||||
path="screenshots/custom-page.png"
|
||||
width=640
|
||||
height=330
|
||||
caption="Your final Bulma page"
|
||||
%}
|
||||
12
docs/documentation/customize/with-vite-js.html
Normal file
12
docs/documentation/customize/with-vite-js.html
Normal file
@@ -0,0 +1,12 @@
|
||||
---
|
||||
title: Customize with ViteJS
|
||||
layout: docs
|
||||
theme: customize
|
||||
doc-tab: customize
|
||||
doc-subtab: with-vitejs
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- customize
|
||||
- customize-with-vitejs
|
||||
---
|
||||
@@ -1,285 +0,0 @@
|
||||
---
|
||||
title: With webpack
|
||||
layout: documentation
|
||||
doc-tab: customize
|
||||
doc-subtab: webpack
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- customize
|
||||
- customize-webpack
|
||||
---
|
||||
|
||||
{% capture dependencies %}
|
||||
npm install bulma --save-dev
|
||||
npm install css-loader --save-dev
|
||||
npm install extract-text-webpack-plugin@next --save-dev
|
||||
npm install mini-css-extract-plugin --save-dev
|
||||
npm install node-sass --save-dev
|
||||
npm install sass-loader --save-dev
|
||||
npm install style-loader --save-dev
|
||||
npm install webpack --save-dev
|
||||
npm install webpack-cli --save-dev
|
||||
{% endcapture %}
|
||||
|
||||
{% capture package %}
|
||||
{
|
||||
"name": "mybulma",
|
||||
"version": "1.0.0",
|
||||
"main": "webpack.config.js",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"bulma": "^0.7.2",
|
||||
"css-loader": "^1.0.0",
|
||||
"extract-text-webpack-plugin": "^4.0.0-beta.0",
|
||||
"node-sass": "^4.9.2",
|
||||
"sass-loader": "^7.0.3",
|
||||
"style-loader": "^0.21.0",
|
||||
"webpack": "^4.16.0",
|
||||
"webpack-cli": "^3.0.8"
|
||||
}
|
||||
}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture step_2 %}
|
||||
<div class="content">
|
||||
<p>
|
||||
Install the packages required to parse and build your CSS:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!--email_off-->{% highlight bash %}{{ dependencies }}{% endhighlight %}<!--/email_off-->
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Your <code>package.json</code> should look like this at this point.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight bash %}{{ package }}{% endhighlight %}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture config %}
|
||||
const path = require('path');
|
||||
const ExtractTextPlugin = require("extract-text-webpack-plugin");
|
||||
|
||||
module.exports = {
|
||||
entry: './src/index.js',
|
||||
output: {
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
filename: 'js/bundle.js'
|
||||
},
|
||||
module: {
|
||||
rules: [{
|
||||
test: /\.scss$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
fallback: 'style-loader',
|
||||
use: [
|
||||
'css-loader',
|
||||
'sass-loader'
|
||||
]
|
||||
})
|
||||
}]
|
||||
},
|
||||
plugins: [
|
||||
new ExtractTextPlugin('css/mystyles.css'),
|
||||
]
|
||||
};
|
||||
{% endcapture %}
|
||||
|
||||
{% capture configv4 %}
|
||||
const path = require('path');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
|
||||
|
||||
module.exports = {
|
||||
entry: './src/index.js',
|
||||
output: {
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
filename: 'js/bundle.js'
|
||||
},
|
||||
module: {
|
||||
rules: [{
|
||||
test: /\.scss$/,
|
||||
use: [
|
||||
MiniCssExtractPlugin.loader,
|
||||
{
|
||||
loader: 'css-loader'
|
||||
},
|
||||
{
|
||||
loader: 'sass-loader',
|
||||
options: {
|
||||
sourceMap: true,
|
||||
// options...
|
||||
}
|
||||
}
|
||||
]
|
||||
}]
|
||||
},
|
||||
plugins: [
|
||||
new MiniCssExtractPlugin({
|
||||
filename: 'css/mystyles.css'
|
||||
}),
|
||||
]
|
||||
};
|
||||
{% endcapture %}
|
||||
|
||||
{% capture step_3 %}
|
||||
<div class="content">
|
||||
<p>
|
||||
Create a <code>webpack.config.js</code> file:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-highlight-full">
|
||||
{% highlight js %}{{ config }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
This setup takes the <code>src</code> folder as input, and outputs in the <code>dist</code> folder.
|
||||
</p>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture step_3_5 %}
|
||||
<div class="content">
|
||||
<p>
|
||||
Create a <code>webpack.config.js</code> file:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-highlight-full">
|
||||
{% highlight js %}{{ configv4 }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
This setup takes the <code>src</code> folder as input, and outputs in the <code>dist</code> folder.
|
||||
</p>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture require_css %}
|
||||
require('./mystyles.scss');
|
||||
{% endcapture %}
|
||||
|
||||
{% capture step_4 %}
|
||||
<div class="content">
|
||||
<p>
|
||||
Create a <code>src</code> folder in which you add a file called <code>index.js</code> with the following content:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight js %}{{ require_css }}{% endhighlight %}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture step_6 %}
|
||||
<div class="content">
|
||||
<p>
|
||||
Create a <code>dist</code> folder in which you add a <code>css</code> folder, and a <code>js</code> folder. Leave these last two folders empty. Their content will be generated by the webpack build.
|
||||
</p>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture webpack_script %}
|
||||
"scripts": {
|
||||
"build": "webpack --mode production"
|
||||
},
|
||||
{% endcapture %}
|
||||
|
||||
{% capture npm_build %}
|
||||
npm run build
|
||||
{% endcapture %}
|
||||
|
||||
{% capture npm_build_success %}
|
||||
Rendering Complete, saving .css file...
|
||||
Wrote CSS to /path/to/mybulma/css/mystyles.css
|
||||
{% endcapture %}
|
||||
|
||||
{% capture step_8 %}
|
||||
<div class="content">
|
||||
<p>
|
||||
In <code>package.json</code>, add the following:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ webpack_script }}{% endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
To test it out, go in your <strong>terminal</strong> and run the following command:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight bash %}{{ npm_build }}{% endhighlight %}
|
||||
{% endcapture %}
|
||||
|
||||
{% include steps/create-package.html
|
||||
number="1"
|
||||
entry="webpack.config.js"
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
{% include components/step.html
|
||||
title="2. Install the dev dependencies"
|
||||
content=step_2
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
{% include components/step.html
|
||||
title="3. Create a webpack config (Webpack <= 3)"
|
||||
content=step_3
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
{% include components/step.html
|
||||
title="3.5. Create a webpack config (Webpack 4)"
|
||||
content=step_3_5
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
{% include components/step.html
|
||||
title="4. Create a <code>src</code> folder"
|
||||
content=step_4
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
{% include steps/create-sass-file.html
|
||||
number="5"
|
||||
path='~bulma/bulma'
|
||||
bis=true
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
{% include components/step.html
|
||||
title="6. Create a <code>dist</code> folder"
|
||||
content=step_6
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
{% include steps/create-html-page.html
|
||||
number="7"
|
||||
dist=true
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
{% include components/step.html
|
||||
title="8. Add node scripts to build your bundle"
|
||||
content=step_8
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
{% include steps/add-custom-styles.html
|
||||
number="9"
|
||||
build=true
|
||||
%}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Elements
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: elements
|
||||
hide_tabs: true
|
||||
hide_pagination: true
|
||||
@@ -9,5 +10,4 @@ breadcrumb:
|
||||
- documentation
|
||||
- elements
|
||||
---
|
||||
|
||||
{% include components/links.html category_id='elements' %}
|
||||
{% include docs/components/links.html category_id='elements' %}
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
---
|
||||
title: Block
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: elements
|
||||
doc-subtab: block
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- elements
|
||||
- elements-block
|
||||
- home
|
||||
- documentation
|
||||
- elements
|
||||
- elements-block
|
||||
meta:
|
||||
colors: false
|
||||
sizes: false
|
||||
variables: true
|
||||
---
|
||||
|
||||
{% capture block_example %}
|
||||
<div class="block">
|
||||
This text is within a <strong>block</strong>.
|
||||
@@ -134,31 +134,33 @@ meta:
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>block</code> element is a simple <strong>spacer tool</strong>. It allows <strong>sibling</strong> HTML elements to have a consistent margin between them:
|
||||
The <code>block</code> element is a simple <strong>spacer tool</strong>. It allows <strong>sibling</strong> HTML
|
||||
elements to have a consistent margin between them:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=block_example %}
|
||||
{% include docs/elements/snippet.html content=block_example %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
As you can see, the first two blocks have a <code>margin-bottom</code> applied, but <strong>not the third one.</strong>. That is because Bulma applies a space on all blocks, <strong>except the last one</strong>. This means you can use as many blocks as you want, the spacing will only appear <strong>between them</strong>.
|
||||
</p>
|
||||
<p>
|
||||
Without using <code>block</code>, the HTML elements would have no space between them:
|
||||
As you can see, the first two blocks have a <code>margin-bottom</code> applied, but
|
||||
<strong>not the third .</strong>. That is because Bulma applies a space on all blocks,
|
||||
<strong>except the last one</strong>. This means you can use as many blocks as you want, the spacing will only
|
||||
appear <strong>between them</strong>.
|
||||
</p>
|
||||
<p>Without using <code>block</code>, the HTML elements would have no space between them:</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=no_block_example %}
|
||||
{% include docs/elements/snippet.html content=no_block_example %}
|
||||
|
||||
<!-- -->
|
||||
|
||||
{% include elements/anchor.html name="You're already using it" %}
|
||||
|
||||
{% include docs/elements/anchor.html name="You're already using it" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
As a matter of fact, you're <strong>already using</strong> the <code>block</code> without knowing it. Its CSS properties are <strong>shared</strong> across several Bulma elements and components:
|
||||
As a matter of fact, you're <strong>already using</strong> the <code>block</code> without knowing it. Its CSS
|
||||
properties are <strong>shared</strong> across several Bulma elements and components:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
@@ -176,13 +178,9 @@ meta:
|
||||
<li><code>title</code></li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
This is thanks to the <code>@extend %block</code> Sass placeholder feature.
|
||||
</p>
|
||||
<p>This is thanks to the <code>@extend %block</code> Sass placeholder feature.</p>
|
||||
|
||||
<p>
|
||||
Here's how it would look like in comparison:
|
||||
</p>
|
||||
<p>Here's how it would look like in comparison:</p>
|
||||
</div>
|
||||
|
||||
<div class="columns is-size-6">
|
||||
@@ -196,26 +194,28 @@ meta:
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
No matter which Bulma elements and components you are using, and no matter their order, they will have a <strong>consistent space</strong> between them.
|
||||
No matter which Bulma elements and components you are using, and no matter their order, they will have a
|
||||
<strong>consistent space</strong> between them.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- -->
|
||||
|
||||
{% include elements/anchor.html name="One line of CSS" %}
|
||||
{% include docs/elements/anchor.html name="One line of CSS" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
As you can see, the CSS of the <code>block</code> is very simple: it applies a <code>margin-bottom</code> on all siblings, <strong>except the last one</strong>.
|
||||
As you can see, the CSS of the <code>block</code> is very simple: it applies a <code>margin-bottom</code> on all
|
||||
siblings, <strong>except the last one</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight css %}{{ block_css }}{% endhighlight %}
|
||||
{% highlight css %}
|
||||
{{ block_css }}
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
This prevents the last sibling from adding unnecessary space at the bottom.
|
||||
</p>
|
||||
<p>This prevents the last sibling from adding unnecessary space at the bottom.</p>
|
||||
</div>
|
||||
|
||||
{% include components/variables.html type='element' %}
|
||||
|
||||
|
||||
@@ -1,59 +1,58 @@
|
||||
---
|
||||
title: Box
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: elements
|
||||
doc-subtab: box
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- elements
|
||||
- elements-box
|
||||
- home
|
||||
- documentation
|
||||
- elements
|
||||
- elements-box
|
||||
meta:
|
||||
colors: false
|
||||
sizes: false
|
||||
variables: true
|
||||
---
|
||||
|
||||
{% capture box_example %}
|
||||
<div class="box">
|
||||
I'm in a box.
|
||||
</div>
|
||||
<div class="box">I'm in a box.</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture box_form_example %}
|
||||
<form class="box">
|
||||
<div class="field">
|
||||
<label class="label">Email</label>
|
||||
<div class="control">
|
||||
<input class="input" type="email" placeholder="e.g. alex@example.com">
|
||||
<input class="input" type="email" placeholder="e.g. alex@example.com" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label">Password</label>
|
||||
<div class="control">
|
||||
<input class="input" type="password" placeholder="********">
|
||||
<input class="input" type="password" placeholder="********" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="button is-primary">Sign in</button>
|
||||
</form>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture box_card_example %}
|
||||
<div class="box">
|
||||
<article class="media">
|
||||
<div class="media-left">
|
||||
<figure class="image is-64x64">
|
||||
<img src="{{site.url}}/images/placeholders/128x128.png" alt="Image">
|
||||
<img src="{{site.url}}/assets/images/placeholders/128x128.png" alt="Image" />
|
||||
</figure>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
|
||||
<br>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
|
||||
<strong>John Smith</strong> <small>@johnsmith</small>
|
||||
<small>31m</small>
|
||||
<br />
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
|
||||
efficitur sit amet massa fringilla egestas. Nullam condimentum luctus
|
||||
turpis.
|
||||
</p>
|
||||
</div>
|
||||
<nav class="level is-mobile">
|
||||
@@ -81,27 +80,20 @@ meta:
|
||||
{% endcapture %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>box</code> element is a simple container with a white background, some padding, and a box shadow.
|
||||
</p>
|
||||
<p>The <code>box</code> element is a simple container with a white background, some padding, and a box shadow.</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=box_example %}
|
||||
{% include docs/elements/snippet.html content=box_example %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Because it acts as a container, you can easily include other components, like <strong>form elements</strong>:
|
||||
</p>
|
||||
<p>Because it acts as a container, you can easily include other components, like <strong>form elements</strong>:</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=box_form_example more=true %}
|
||||
{% include docs/elements/snippet.html content=box_form_example more=true %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Or a <code>media</code> object:
|
||||
</p>
|
||||
<p>Or a <code>media</code> object:</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=box_card_example more=true %}
|
||||
{% include docs/elements/snippet.html content=box_card_example more=true %}
|
||||
|
||||
{% include components/variables.html type='element' %}
|
||||
|
||||
@@ -1,30 +1,28 @@
|
||||
---
|
||||
title: Button
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: elements
|
||||
doc-subtab: button
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- elements
|
||||
- elements-button
|
||||
- home
|
||||
- documentation
|
||||
- elements
|
||||
- elements-button
|
||||
meta:
|
||||
colors: true
|
||||
sizes: true
|
||||
variables: true
|
||||
---
|
||||
|
||||
{% capture button_example %}
|
||||
<button class="button">Button</button>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_tags_example %}
|
||||
<a class="button">Anchor</a>
|
||||
<button class="button">Button</button>
|
||||
<input class="button" type="submit" value="Submit input">
|
||||
<input class="button" type="reset" value="Reset input">
|
||||
<input class="button" type="submit" value="Submit input" />
|
||||
<input class="button" type="reset" value="Reset input" />
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_colors_a_example %}
|
||||
<button class="button is-white">White</button>
|
||||
<button class="button is-light">Light</button>
|
||||
@@ -33,7 +31,6 @@ meta:
|
||||
<button class="button is-text">Text</button>
|
||||
<button class="button is-ghost">Ghost</button>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_colors_b_example %}
|
||||
<div class="buttons">
|
||||
<button class="button is-primary">Primary</button>
|
||||
@@ -47,7 +44,6 @@ meta:
|
||||
<button class="button is-danger">Danger</button>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_light_colors_b_example %}
|
||||
<div class="buttons">
|
||||
<button class="button is-primary is-light">Primary</button>
|
||||
@@ -61,7 +57,19 @@ meta:
|
||||
<button class="button is-danger is-light">Danger</button>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
{% capture button_dark_colors_b_example %}
|
||||
<div class="buttons">
|
||||
<button class="button is-primary is-dark">Primary</button>
|
||||
<button class="button is-link is-dark">Link</button>
|
||||
</div>
|
||||
|
||||
<div class="buttons">
|
||||
<button class="button is-info is-dark">Info</button>
|
||||
<button class="button is-success is-dark">Success</button>
|
||||
<button class="button is-warning is-dark">Warning</button>
|
||||
<button class="button is-danger is-dark">Danger</button>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
{% capture button_sizes_example %}
|
||||
<button class="button is-small">Small</button>
|
||||
<button class="button">Default</button>
|
||||
@@ -69,7 +77,6 @@ meta:
|
||||
<button class="button is-medium">Medium</button>
|
||||
<button class="button is-large">Large</button>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture buttons_medium_sizes_example %}
|
||||
<div class="buttons are-medium">
|
||||
<button class="button">All</button>
|
||||
@@ -77,7 +84,6 @@ meta:
|
||||
<button class="button">Size</button>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture buttons_small_normal_sizes_example %}
|
||||
<div class="buttons are-small">
|
||||
<button class="button">Small</button>
|
||||
@@ -87,112 +93,103 @@ meta:
|
||||
<button class="button">Small</button>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_displays_example %}
|
||||
<button class="button is-small is-fullwidth">Small</button>
|
||||
<button class="button is-fullwidth">Normal</button>
|
||||
<button class="button is-medium is-fullwidth">Medium</button>
|
||||
<button class="button is-large is-fullwidth">Large</button>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_outlined_example %}
|
||||
<button class="button is-outlined">Outlined</button>
|
||||
<button class="button is-primary is-outlined">Outlined</button>
|
||||
<button class="button is-link is-outlined">Outlined</button>
|
||||
<button class="button is-primary is-outlined">Outlined</button>
|
||||
<button class="button is-info is-outlined">Outlined</button>
|
||||
<button class="button is-success is-outlined">Outlined</button>
|
||||
<button class="button is-danger is-outlined">Outlined</button>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_inverted_example %}
|
||||
<button class="button is-primary is-inverted">Inverted</button>
|
||||
<button class="button is-link is-inverted">Inverted</button>
|
||||
<button class="button is-primary is-inverted">Inverted</button>
|
||||
<button class="button is-info is-inverted">Inverted</button>
|
||||
<button class="button is-success is-inverted">Inverted</button>
|
||||
<button class="button is-danger is-inverted">Inverted</button>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_inverted_outlined_example %}
|
||||
<button class="button is-primary is-inverted is-outlined">Invert Outlined</button>
|
||||
<button class="button is-link is-inverted is-outlined">Invert Outlined</button>
|
||||
<button class="button is-info is-inverted is-outlined">Invert Outlined</button>
|
||||
<button class="button is-success is-inverted is-outlined">Invert Outlined</button>
|
||||
<button class="button is-danger is-inverted is-outlined">Invert Outlined</button>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_rounded_example %}
|
||||
<button class="button is-rounded">Rounded</button>
|
||||
<button class="button is-primary is-rounded">Rounded</button>
|
||||
<button class="button is-link is-rounded">Rounded</button>
|
||||
<button class="button is-primary is-rounded">Rounded</button>
|
||||
<button class="button is-info is-rounded">Rounded</button>
|
||||
<button class="button is-success is-rounded">Rounded</button>
|
||||
<button class="button is-danger is-rounded">Rounded</button>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_normal_example %}
|
||||
<button class="button">Normal</button>
|
||||
<button class="button is-primary">Normal</button>
|
||||
<button class="button is-link">Normal</button>
|
||||
<button class="button is-primary">Normal</button>
|
||||
<button class="button is-info">Normal</button>
|
||||
<button class="button is-success">Normal</button>
|
||||
<button class="button is-warning">Normal</button>
|
||||
<button class="button is-danger">Normal</button>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_hover_example %}
|
||||
<button class="button is-hovered">Hover</button>
|
||||
<button class="button is-primary is-hovered">Hover</button>
|
||||
<button class="button is-link is-hovered">Hover</button>
|
||||
<button class="button is-primary is-hovered">Hover</button>
|
||||
<button class="button is-info is-hovered">Hover</button>
|
||||
<button class="button is-success is-hovered">Hover</button>
|
||||
<button class="button is-warning is-hovered">Hover</button>
|
||||
<button class="button is-danger is-hovered">Hover</button>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_focus_example %}
|
||||
<button class="button is-focused">Focus</button>
|
||||
<button class="button is-primary is-focused">Focus</button>
|
||||
<button class="button is-link is-focused">Focus</button>
|
||||
<button class="button is-primary is-focused">Focus</button>
|
||||
<button class="button is-info is-focused">Focus</button>
|
||||
<button class="button is-success is-focused">Focus</button>
|
||||
<button class="button is-warning is-focused">Focus</button>
|
||||
<button class="button is-danger is-focused">Focus</button>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_active_example %}
|
||||
<button class="button is-active">Active</button>
|
||||
<button class="button is-primary is-active">Active</button>
|
||||
<button class="button is-link is-active">Active</button>
|
||||
<button class="button is-primary is-active">Active</button>
|
||||
<button class="button is-info is-active">Active</button>
|
||||
<button class="button is-success is-active">Active</button>
|
||||
<button class="button is-warning is-active">Active</button>
|
||||
<button class="button is-danger is-active">Active</button>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_loading_example %}
|
||||
<button class="button is-loading">Loading</button>
|
||||
<button class="button is-primary is-loading">Loading</button>
|
||||
<button class="button is-link is-loading">Loading</button>
|
||||
<button class="button is-primary is-loading">Loading</button>
|
||||
<button class="button is-info is-loading">Loading</button>
|
||||
<button class="button is-success is-loading">Loading</button>
|
||||
<button class="button is-warning is-loading">Loading</button>
|
||||
<button class="button is-danger is-loading">Loading</button>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_static_example %}
|
||||
<span class="button is-static">Static</span>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_disabled_example %}
|
||||
<button class="button" title="Disabled button" disabled>Disabled</button>
|
||||
<button class="button is-primary" title="Disabled button" disabled>Disabled</button>
|
||||
<button class="button is-link" title="Disabled button" disabled>Disabled</button>
|
||||
<button class="button is-info" title="Disabled button" disabled>Disabled</button>
|
||||
<button class="button is-success" title="Disabled button" disabled>Disabled</button>
|
||||
<button class="button is-warning" title="Disabled button" disabled>Disabled</button>
|
||||
<button class="button is-danger" title="Disabled button" disabled>Disabled</button>
|
||||
<button class="button is-link" title="Disabled button" disabled>
|
||||
Disabled
|
||||
</button>
|
||||
<button class="button is-primary" title="Disabled button" disabled>
|
||||
Disabled
|
||||
</button>
|
||||
<button class="button is-info" title="Disabled button" disabled>
|
||||
Disabled
|
||||
</button>
|
||||
<button class="button is-success" title="Disabled button" disabled>
|
||||
Disabled
|
||||
</button>
|
||||
<button class="button is-warning" title="Disabled button" disabled>
|
||||
Disabled
|
||||
</button>
|
||||
<button class="button is-danger" title="Disabled button" disabled>
|
||||
Disabled
|
||||
</button>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_fa_example %}
|
||||
<p class="buttons">
|
||||
<button class="button">
|
||||
@@ -264,7 +261,6 @@ meta:
|
||||
</button>
|
||||
</p>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_only_icon_example %}
|
||||
<p class="buttons">
|
||||
<button class="button is-small">
|
||||
@@ -320,27 +316,19 @@ meta:
|
||||
</button>
|
||||
</p>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_group_example %}
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<button class="button is-link">
|
||||
Save changes
|
||||
</button>
|
||||
<button class="button is-link">Save changes</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button">
|
||||
Cancel
|
||||
</button>
|
||||
<button class="button">Cancel</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button is-danger">
|
||||
Delete post
|
||||
</button>
|
||||
<button class="button is-danger">Delete post</button>
|
||||
</p>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_addons_example %}
|
||||
<div class="field has-addons">
|
||||
<p class="control">
|
||||
@@ -369,7 +357,6 @@ meta:
|
||||
</p>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_group_addons_example %}
|
||||
<div class="field has-addons">
|
||||
<p class="control">
|
||||
@@ -425,7 +412,6 @@ meta:
|
||||
</p>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture buttons_list %}
|
||||
<div class="buttons">
|
||||
<button class="button is-success">Save changes</button>
|
||||
@@ -433,7 +419,6 @@ meta:
|
||||
<button class="button is-danger">Cancel</button>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture buttons_multiple %}
|
||||
<div class="buttons">
|
||||
<button class="button">One</button>
|
||||
@@ -458,7 +443,6 @@ meta:
|
||||
<button class="button">Twenty</button>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture buttons_addons %}
|
||||
<div class="buttons has-addons">
|
||||
<button class="button">Yes</button>
|
||||
@@ -466,7 +450,6 @@ meta:
|
||||
<button class="button">No</button>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture buttons_addons_centered %}
|
||||
<div class="buttons has-addons is-centered">
|
||||
<button class="button">Yes</button>
|
||||
@@ -474,7 +457,6 @@ meta:
|
||||
<button class="button">No</button>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture buttons_addons_right %}
|
||||
<div class="buttons has-addons is-right">
|
||||
<button class="button">Yes</button>
|
||||
@@ -482,7 +464,6 @@ meta:
|
||||
<button class="button">No</button>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture buttons_addons_selected %}
|
||||
<div class="buttons has-addons">
|
||||
<button class="button is-success is-selected">Yes</button>
|
||||
@@ -505,84 +486,88 @@ meta:
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <strong>button</strong> is an essential element of any design. It's meant to look and behave as an <strong>interactive</strong> element of your page.
|
||||
The <strong>button</strong> is an essential element of any design. It's meant to look and behave as an
|
||||
<strong>interactive</strong> element of your page.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html wrapper="buttons" content=button_example %}
|
||||
{% include docs/elements/snippet.html wrapper="buttons" content=button_example %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>button</code> class can be used on:
|
||||
</p>
|
||||
<p>The <code>button</code> class can be used on:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code><a></code> anchor links
|
||||
</li>
|
||||
<li>
|
||||
<code><button></code> form buttons
|
||||
</li>
|
||||
<li>
|
||||
<code><input type="submit"></code> submit inputs
|
||||
</li>
|
||||
<li>
|
||||
<code><input type="reset"></code> reset inputs
|
||||
</li>
|
||||
<li><code><a></code> anchor links</li>
|
||||
<li><code><button></code> form buttons</li>
|
||||
<li><code><input type="submit"></code> submit inputs</li>
|
||||
<li><code><input type="reset"></code> reset inputs</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html wrapper="buttons" content=button_tags_example %}
|
||||
|
||||
{% include elements/anchor.html name="Colors" %}
|
||||
{%
|
||||
include docs/elements/snippet.html wrapper="buttons"
|
||||
content=button_tags_example
|
||||
%}
|
||||
{%
|
||||
include docs/elements/anchor.html
|
||||
name="Colors"
|
||||
%}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The button is available in all the <strong>different colors</strong> defined by the <a href="{{ site.data.links.by_id.customize-variables.path }}"><code>$colors</code> Sass map</a>.
|
||||
The button is available in all the <strong>different colors</strong> defined by the
|
||||
<a href="{{ site.data.links.by_id.customize-variables.path }}"><code>$colors</code> Sass map</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html wrapper="buttons" content=button_colors_a_example %}
|
||||
|
||||
{% include elements/snippet.html content=button_colors_b_example %}
|
||||
{%
|
||||
include docs/elements/snippet.html wrapper="buttons"
|
||||
content=button_colors_a_example
|
||||
%}
|
||||
{%
|
||||
include docs/elements/snippet.html
|
||||
content=button_colors_b_example
|
||||
%}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Each color now comes in its <strong>light version</strong>. Simply append the modifier <code>is-light</code> to the color modifier to apply the light version of the button.
|
||||
Each color also comes in its <strong>light version</strong>. Simply append the modifier <code>is-light</code> to the
|
||||
color modifier to apply the light version of the button.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=button_light_colors_b_example %}
|
||||
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
{% include docs/elements/snippet.html content=button_light_colors_b_example %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The button comes in <strong>4 different sizes:</strong>
|
||||
</p>
|
||||
<p>A <strong>dark version</strong> also exists. Simply append the modifier <code>is-dark</code>.</p>
|
||||
</div>
|
||||
|
||||
{% include docs/elements/snippet.html content=button_dark_colors_b_example %}
|
||||
|
||||
{% include docs/elements/anchor.html name="Sizes" %}
|
||||
|
||||
<div class="content">
|
||||
<p>The button comes in <strong>4 different sizes:</strong></p>
|
||||
<ul>
|
||||
<li>
|
||||
small
|
||||
</li>
|
||||
<li>
|
||||
normal
|
||||
</li>
|
||||
<li>
|
||||
medium
|
||||
</li>
|
||||
<li>
|
||||
large
|
||||
</li>
|
||||
<li>small</li>
|
||||
<li>normal</li>
|
||||
<li>medium</li>
|
||||
<li>large</li>
|
||||
</ul>
|
||||
<p>
|
||||
While the default size is the <strong>normal</strong> one, the <code>is-normal</code> modifier exists in case you need to reset the button to its normal size.
|
||||
While the default size is the <strong>normal</strong> one, the <code>is-normal</code> modifier exists in case you
|
||||
need to reset the button to its normal size.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html wrapper="buttons" content=button_sizes_example %}
|
||||
{%
|
||||
include docs/elements/snippet.html wrapper="buttons"
|
||||
content=button_sizes_example
|
||||
%}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can change the size of <strong>multiple buttons</strong> at once by wrapping them in a <code>buttons</code> parent, and applying one of 3 modifiers:
|
||||
You can change the size of <strong>multiple buttons</strong> at once by wrapping them in a
|
||||
<code>buttons</code> parent, and applying one of 3 modifiers:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
@@ -597,32 +582,35 @@ meta:
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=buttons_medium_sizes_example %}
|
||||
{% include docs/elements/snippet.html content=buttons_medium_sizes_example %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can change the size of only a <strong>subset of buttons</strong> by simply applying a modifier class to them.
|
||||
<br>
|
||||
For example, if you want all buttons to be <strong>small</strong> but still have one in its <strong>normal</strong> size, simply do the following:
|
||||
For example, if you want all buttons to be <strong>small</strong> but still have one in its
|
||||
<strong>normal</strong> size, simply do the following:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=buttons_small_normal_sizes_example %}
|
||||
|
||||
{% include elements/anchor.html name="Responsive sizes" %}
|
||||
|
||||
{% include elements/new-tag.html version="0.9.4" %}
|
||||
{% include docs/elements/snippet.html content=buttons_small_normal_sizes_example %}
|
||||
{% include docs/elements/anchor.html name="Responsive sizes" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
If you want different button sizes for each breakpoint, you can use Bulma's <strong>responsive</strong> buttons. Simply append the <code>is-responsive</code> modifier:
|
||||
If you want different button sizes for each breakpoint, you can use Bulma's
|
||||
<strong>responsive</strong> buttons. Simply append the <code>is-responsive</code> modifier:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include snippets/responsive-buttons.html %}
|
||||
{% include docs/snippets/responsive-buttons.html %}
|
||||
|
||||
<div class="block">
|
||||
<a target="_blank" class="button is-small is-link is-outlined" href="{{ site.url }}/playground/responsive-buttons/">
|
||||
<a
|
||||
target="_blank"
|
||||
class="button is-small is-link is-outlined"
|
||||
href="{{ site.url }}/playground/responsive-buttons/"
|
||||
>
|
||||
<span>Open table in new window</span>
|
||||
<span class="icon">
|
||||
<i class="fa fa-external-link-alt"></i>
|
||||
@@ -632,47 +620,34 @@ meta:
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can customise the sizes by overwriting the <code>$button-responsive-sizes</code> Sass variable.
|
||||
You can customise the sizes by overwriting the
|
||||
<code>$button-responsive-sizes</code> Sass variable.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Displays" %}
|
||||
|
||||
{% include elements/snippet.html wrapper="buttons" content=button_displays_example %}
|
||||
|
||||
{% include elements/anchor.html name="Styles" %}
|
||||
{% include docs/elements/anchor.html name="Displays" %}
|
||||
{% include docs/elements/snippet.html wrapper="buttons" content=button_displays_example %}
|
||||
{% include docs/elements/anchor.html name="Styles" %}
|
||||
|
||||
<h4 class="subtitle">Outlined</h4>
|
||||
|
||||
{% include elements/snippet.html wrapper="buttons" content=button_outlined_example %}
|
||||
{%
|
||||
include docs/elements/snippet.html wrapper="buttons"
|
||||
content=button_outlined_example
|
||||
%}
|
||||
|
||||
<h4 class="subtitle">Inverted (the text color becomes the background color, and vice-versa)</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="bd-callout is-primary">
|
||||
<div class="buttons">
|
||||
{{ button_inverted_example }}
|
||||
</div>
|
||||
<div class="buttons">{{ button_inverted_example }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{button_inverted_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Invert Outlined (the invert color becomes the text and border colors)</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="bd-callout is-primary">
|
||||
<div class="buttons">
|
||||
{{ button_inverted_outlined_example }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{ button_inverted_outlined_example }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- button_inverted_example -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -680,94 +655,106 @@ meta:
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="buttons">
|
||||
{{ button_rounded_example }}
|
||||
</div>
|
||||
<div class="buttons">{{ button_rounded_example }}</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{ button_rounded_example }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- button_rounded_example -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="States" %}
|
||||
{% include docs/elements/anchor.html name="States" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Bulma styles the different <strong>states</strong> of its buttons. Each state is available as a pseudo-class and a CSS class:
|
||||
Bulma styles the different <strong>states</strong> of its buttons. Each state is available as a pseudo-class and a
|
||||
CSS class:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>:hover</code> and <code>is-hovered</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>:focus</code> and <code>is-focused</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>:active</code> and <code>is-active</code>
|
||||
</li>
|
||||
<li><code>:hover</code> and <code>is-hovered</code></li>
|
||||
<li><code>:focus</code> and <code>is-focused</code></li>
|
||||
<li><code>:active</code> and <code>is-active</code></li>
|
||||
</ul>
|
||||
<p>
|
||||
This allows you to obtain the style of a certain state without having to trigger it.
|
||||
</p>
|
||||
<p>This allows you to obtain the style of a certain state without having to trigger it.</p>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Normal</h4>
|
||||
|
||||
{% include elements/snippet.html wrapper="buttons" content=button_normal_example %}
|
||||
{%
|
||||
include docs/elements/snippet.html wrapper="buttons"
|
||||
content=button_normal_example
|
||||
%}
|
||||
|
||||
<h4 class="subtitle">Hover</h4>
|
||||
|
||||
{% include elements/snippet.html wrapper="buttons" content=button_hover_example %}
|
||||
{%
|
||||
include docs/elements/snippet.html wrapper="buttons"
|
||||
content=button_hover_example
|
||||
%}
|
||||
|
||||
<h4 class="subtitle">Focus</h4>
|
||||
|
||||
{% include elements/snippet.html wrapper="buttons" content=button_focus_example %}
|
||||
{%
|
||||
include docs/elements/snippet.html wrapper="buttons"
|
||||
content=button_focus_example
|
||||
%}
|
||||
|
||||
<h4 class="subtitle">Active</h4>
|
||||
|
||||
{% include elements/snippet.html wrapper="buttons" content=button_active_example %}
|
||||
{%
|
||||
include docs/elements/snippet.html wrapper="buttons"
|
||||
content=button_active_example
|
||||
%}
|
||||
|
||||
<h4 class="subtitle">Loading</h4>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can very easily turn a button into its <strong>loading</strong> version by appending the <code>is-loading</code> modifier. You don't even need to remove the inner text, which allows the button to maintain its <strong>original size</strong> between its default and loading states.
|
||||
You can very easily turn a button into its <strong>loading</strong> version by appending the
|
||||
<code>is-loading</code> modifier. You don't even need to remove the inner text, which allows the button to maintain
|
||||
its <strong>original size</strong> between its default and loading states.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="buttons">
|
||||
{{ button_loading_example }}
|
||||
</div>
|
||||
<div class="buttons">{{ button_loading_example }}</div>
|
||||
<div class="message is-info">
|
||||
<div class="message-body">
|
||||
<p>
|
||||
Since the loading spinner is implemented using the <code>::after</code> pseudo-element, it is not supported by the <code><input type="submit"></code> element. Consider using <code><button type="submit"></code> instead.
|
||||
Since the loading spinner is implemented using the
|
||||
<code>::after</code> pseudo-element, it is not supported by the
|
||||
<code><input type="submit"></code> element. Consider using
|
||||
<code><button type="submit"></code> instead.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{button_loading_example}}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- button_loading_example -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 id="static-button" class="subtitle">
|
||||
Static
|
||||
</h4>
|
||||
<h4 id="static-button" class="subtitle">Static</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can create a <strong>non-interactive button</strong> by using the <code>is-static</code> modifier. This is useful to align a text label with an input, for example when using <a href="{{site.url}}/documentation/form/general#form-addons">form addons</a>.
|
||||
You can create a <strong>non-interactive button</strong> by using the <code>is-static</code> modifier. This is
|
||||
useful to align a text label with an input, for example when using
|
||||
<a href="{{site.url}}/documentation/form/general#form-addons">form addons</a>.
|
||||
</p>
|
||||
</div>
|
||||
{{ button_static_example }}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{ button_static_example }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- button_static_example -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -775,23 +762,32 @@ meta:
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Bulma supports the use of the <code>disabled</code> <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button" target="_blank">Boolean HTML attribute</a>, which prevents the user from interacting with the button.
|
||||
Bulma supports the use of the <code>disabled</code>
|
||||
<a
|
||||
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button"
|
||||
target="_blank"
|
||||
>Boolean HTML attribute</a
|
||||
>, which prevents the user from interacting with the button.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="buttons">
|
||||
{{ button_disabled_example }}
|
||||
</div>
|
||||
<div class="buttons">{{ button_disabled_example }}</div>
|
||||
<div class="message is-danger">
|
||||
<div class="message-body">
|
||||
<p>The <code>is-disabled</code> CSS class has been deprecated in favor of the <code>disabled</code> HTML attribute. <a href="https://github.com/jgthms/bulma/issues/276">Learn more</a></p>
|
||||
<p>
|
||||
The <code>is-disabled</code> CSS class has been deprecated in favor of the <code>disabled</code> HTML
|
||||
attribute.
|
||||
<a href="https://github.com/jgthms/bulma/issues/276">Learn more</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{button_disabled_example}}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- button_disabled_example -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -799,65 +795,71 @@ meta:
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Bulma buttons can easily be enhanced by adding a <strong>Font Awesome icon</strong>. For the best results, wrap the inner text in a separate <code><span></code> element.
|
||||
Bulma buttons can easily be enhanced by adding a
|
||||
<strong>Font Awesome icon</strong>. For the best results, wrap the inner text in a separate
|
||||
<code><span></code> element.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=button_fa_example clipped=true %}
|
||||
{% include docs/elements/snippet.html content=button_fa_example clipped=true %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
If the button only contains an icon, Bulma will make sure the button remains <strong>square</strong>, no matter the size of the button <em>or</em> of the icon.
|
||||
If the button only contains an icon, Bulma will make sure the button remains <strong>square</strong>, no matter
|
||||
the size of the button <em>or</em> of the icon.
|
||||
</p>
|
||||
</div>
|
||||
{{ button_only_icon_example }}
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{ button_only_icon_example }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- button_only_icon_example -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Button group" %}
|
||||
{% include docs/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>
|
||||
<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 elements/snippet.html content=button_group_example %}
|
||||
|
||||
{% include elements/anchor.html name="Button addons" %}
|
||||
{% include docs/elements/snippet.html content=button_group_example %}
|
||||
{% include docs/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>
|
||||
<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 elements/snippet.html content=button_addons_example %}
|
||||
|
||||
{% include elements/anchor.html name="Button group with addons" %}
|
||||
{% include docs/elements/snippet.html content=button_addons_example %}
|
||||
{% include docs/elements/anchor.html name="Button group with addons" %}
|
||||
|
||||
<div class="content">
|
||||
<p>You can group together addons as well:</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=button_group_addons_example %}
|
||||
|
||||
{% include elements/anchor.html name="List of buttons" %}
|
||||
{% include docs/elements/snippet.html content=button_group_addons_example %}
|
||||
{% include docs/elements/anchor.html name="List of buttons" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can create a <strong>list of buttons</strong> by using the <code>buttons</code> container.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{ buttons_list }}
|
||||
<p>You can create a <strong>list of buttons</strong> by using the <code>buttons</code> container.</p>
|
||||
</div>
|
||||
<div class="bd-example">{{ buttons_list }}</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{ buttons_list }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- buttons_list -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -865,31 +867,30 @@ meta:
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
If the list is <strong>very long</strong>, it will automatically wrap on <strong>multiple lines</strong>, while keeping all buttons <strong>evenly spaced</strong>.
|
||||
If the list is <strong>very long</strong>, it will automatically wrap on <strong>multiple lines</strong>, while
|
||||
keeping all buttons <strong>evenly spaced</strong>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{ buttons_multiple }}
|
||||
</div>
|
||||
<div class="bd-example">{{ buttons_multiple }}</div>
|
||||
</div>
|
||||
<div class="column bd-highlight-full">
|
||||
{% highlight html %}{{ buttons_multiple }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- buttons_multiple -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can <strong>attach buttons together</strong> with the <code>has-addons</code> modifier.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{ buttons_addons }}
|
||||
<p>You can <strong>attach buttons together</strong> with the <code>has-addons</code> modifier.</p>
|
||||
</div>
|
||||
<div class="bd-example">{{ buttons_addons }}</div>
|
||||
</div>
|
||||
<div class="column bd-highlight-full">
|
||||
{% highlight html %}{{ buttons_addons }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- buttons_addons -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -906,7 +907,10 @@ meta:
|
||||
</div>
|
||||
</div>
|
||||
<div class="column bd-highlight-full">
|
||||
{% highlight html %}{{ buttons_addons_centered }}{{ buttons_addons_right }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- buttons_addons_centered -}}
|
||||
{{- buttons_addons_right -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -914,49 +918,50 @@ meta:
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can use any <strong>modifier</strong> class on each button to differentiate them. Make sure to add the <code>is-selected</code> modifier as well to make sure the selected button is <em>above</em> its siblings.
|
||||
You can use any <strong>modifier</strong> class on each button to differentiate them. Make sure to add the
|
||||
<code>is-selected</code> modifier as well to make sure the selected button is <em>above</em> its siblings.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{ buttons_addons_selected }}
|
||||
</div>
|
||||
<div class="bd-example">{{ buttons_addons_selected }}</div>
|
||||
</div>
|
||||
<div class="column bd-highlight-full">
|
||||
{% highlight html %}{{ buttons_addons_selected }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- buttons_addons_selected -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message is-info">
|
||||
<div class="message-header">
|
||||
<p>Difference between <a href="{{ site.url }}/documentation/form/general/#form-group">form groups</a> and <strong>list of buttons</strong></p>
|
||||
<p>
|
||||
Difference between
|
||||
<a href="{{ site.url }}/documentation/form/general/#form-group">form groups</a>
|
||||
and <strong>list of buttons</strong>
|
||||
</p>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
<div class="content">
|
||||
<p>
|
||||
While this list of buttons style can be achieved with either <code>field is-grouped</code> or the new <code>buttons</code> class, there are a few differences:
|
||||
While this list of buttons style can be achieved with either
|
||||
<code>field is-grouped</code> or the new <code>buttons</code> class, there are a few differences:
|
||||
</p>
|
||||
<ul>
|
||||
<li><code>buttons</code> has a <strong>simpler markup</strong></li>
|
||||
<li><code>buttons</code> can only contain <code>button</code> elements</li>
|
||||
<li><code>field is-grouped</code> can contain <em>any</em> type of <code>control</code> inputs</li>
|
||||
<li>
|
||||
<code>buttons</code> has a <strong>simpler markup</strong>
|
||||
</li>
|
||||
<li>
|
||||
<code>buttons</code> can only contain <code>button</code> elements
|
||||
</li>
|
||||
<li>
|
||||
<code>field is-grouped</code> can contain <em>any</em> type of <code>control</code> inputs
|
||||
</li>
|
||||
<li>
|
||||
<code>field is-grouped</code> can be forced to fit all controls on a <strong>single line</strong>
|
||||
</li>
|
||||
<li>
|
||||
with <code>field is-grouped</code> you can <strong>expand</strong> one of the controls
|
||||
<code>field is-grouped</code> can be forced to fit all controls on a
|
||||
<strong>single line</strong>
|
||||
</li>
|
||||
<li>with <code>field is-grouped</code> you can <strong>expand</strong> one of the controls</li>
|
||||
</ul>
|
||||
<p>
|
||||
Basically, if you only want a list of <em>buttons</em>, using <code>buttons</code> is recommended. If you need more control on the styling and the elements, use a <a href="{{ site.url }}/documentation/form/general/#form-group">form group</a>.
|
||||
Basically, if you only want a list of <em>buttons</em>, using <code>buttons</code> is recommended. If you need
|
||||
more control on the styling and the elements, use a
|
||||
<a href="{{ site.url }}/documentation/form/general/#form-group">form group</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include components/variables.html type='element' %}
|
||||
|
||||
|
||||
@@ -1,37 +1,40 @@
|
||||
---
|
||||
title: Content
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: elements
|
||||
doc-subtab: content
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- elements
|
||||
- elements-content
|
||||
- home
|
||||
- documentation
|
||||
- elements
|
||||
- elements-content
|
||||
meta:
|
||||
colors: false
|
||||
sizes: true
|
||||
variables: true
|
||||
---
|
||||
|
||||
{% capture content_pre %}
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Hello World</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
|
||||
</body>
|
||||
</html>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture content_pre %} <!DOCTYPE html> <html> <head>
|
||||
<title>Hello World</title> </head> <body> <p>Lorem
|
||||
ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae
|
||||
mollis.</p> </body> </html> {% endcapture %}
|
||||
{% capture content_example %}
|
||||
<div class="content">
|
||||
<h1>Hello World</h1>
|
||||
<p>Lorem ipsum<sup><a>[1]</a></sup> 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. Sub<sub>script</sub> works as well!</p>
|
||||
<p>
|
||||
Lorem ipsum<sup><a>[1]</a></sup> 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. Sub<sub>script</sub>
|
||||
works as well!
|
||||
</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>
|
||||
<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>
|
||||
@@ -39,7 +42,11 @@ meta:
|
||||
<li>Ut non enim metus.</li>
|
||||
</ul>
|
||||
<h3>Third level</h3>
|
||||
<p>Quisque ante lacus, malesuada ac auctor vitae, congue <a href="#">non ante</a>. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.</p>
|
||||
<p>
|
||||
Quisque ante lacus, malesuada ac auctor vitae, congue
|
||||
<a href="#">non ante</a>. Phasellus lacus ex, semper ac tortor nec,
|
||||
fringilla condimentum orci. Fusce eu rutrum tellus.
|
||||
</p>
|
||||
<ol>
|
||||
<li>Donec blandit a lorem id convallis.</li>
|
||||
<li>Cras gravida arcu at diam gravida gravida.</li>
|
||||
@@ -49,9 +56,19 @@ meta:
|
||||
<li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
|
||||
<li>Vivamus maximus ultricies pulvinar.</li>
|
||||
</ol>
|
||||
<blockquote>Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis.</blockquote>
|
||||
<p>Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et <em>justo sodales</em> elementum. Maecenas ultrices lacus quis neque consectetur, et lobortis nisi molestie.</p>
|
||||
<p>Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis vulputate risus in luctus. Maecenas vestibulum interdum commodo.</p>
|
||||
<blockquote>
|
||||
Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit
|
||||
ipsum, ut blandit est tellus sit amet turpis.
|
||||
</blockquote>
|
||||
<p>
|
||||
Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et
|
||||
<em>justo sodales</em> elementum. Maecenas ultrices lacus quis neque
|
||||
consectetur, et lobortis nisi molestie.
|
||||
</p>
|
||||
<p>
|
||||
Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis
|
||||
vulputate risus in luctus. Maecenas vestibulum interdum commodo.
|
||||
</p>
|
||||
<dl>
|
||||
<dt>Web</dt>
|
||||
<dd>The part of the Internet that contains websites and web pages</dd>
|
||||
@@ -60,11 +77,22 @@ meta:
|
||||
<dt>CSS</dt>
|
||||
<dd>A technology to make HTML look better</dd>
|
||||
</dl>
|
||||
<p>Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis malesuada nulla. Nulla facilisi. Nullam ac erat ante.</p>
|
||||
<p>
|
||||
Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl,
|
||||
suscipit sed mi sit amet, mollis malesuada nulla. Nulla facilisi. Nullam ac
|
||||
erat ante.
|
||||
</p>
|
||||
<h4>Fourth level</h4>
|
||||
<p>Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris euismod metus a tellus laoreet, at elementum ex efficitur.</p>
|
||||
<p>
|
||||
Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris
|
||||
euismod metus a tellus laoreet, at elementum ex efficitur.
|
||||
</p>
|
||||
<pre>{{ content_pre }}</pre>
|
||||
<p>Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut vehicula. Mauris eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.</p>
|
||||
<p>
|
||||
Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non.
|
||||
Ut finibus eleifend arcu ut vehicula. Mauris eu est maximus est porta
|
||||
condimentum in eu justo. Nulla id iaculis sapien.
|
||||
</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -95,21 +123,39 @@ meta:
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit sed dapibus at, vestibulum in felis. Etiam iaculis lorem ac nibh bibendum rhoncus. Nam interdum efficitur ligula sit amet ullamcorper. Etiam tristique, leo vitae porta faucibus, mi lacus laoreet metus, at cursus leo est vel tellus. Sed ac posuere est. Nunc ultricies nunc neque, vitae ultricies ex sodales quis. Aliquam eu nibh in libero accumsan pulvinar. Nullam nec nisl placerat, pretium metus vel, euismod ipsum. Proin tempor cursus nisl vel condimentum. Nam pharetra varius metus non pellentesque.</p>
|
||||
<p>
|
||||
Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit
|
||||
sed dapibus at, vestibulum in felis. Etiam iaculis lorem ac nibh bibendum
|
||||
rhoncus. Nam interdum efficitur ligula sit amet ullamcorper. Etiam
|
||||
tristique, leo vitae porta faucibus, mi lacus laoreet metus, at cursus leo
|
||||
est vel tellus. Sed ac posuere est. Nunc ultricies nunc neque, vitae
|
||||
ultricies ex sodales quis. Aliquam eu nibh in libero accumsan pulvinar.
|
||||
Nullam nec nisl placerat, pretium metus vel, euismod ipsum. Proin tempor
|
||||
cursus nisl vel condimentum. Nam pharetra varius metus non pellentesque.
|
||||
</p>
|
||||
<h5>Fifth level</h5>
|
||||
<p>Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit. Praesent aliquet ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue laoreet. Sed nec eleifend justo. Nam et sollicitudin odio.</p>
|
||||
<p>
|
||||
Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt
|
||||
ligula. Vestibulum at nunc elit. Praesent aliquet ligula mi, in luctus elit
|
||||
volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue
|
||||
laoreet. Sed nec eleifend justo. Nam et sollicitudin odio.
|
||||
</p>
|
||||
<figure>
|
||||
<img src="{{site.url}}/images/placeholders/256x256.png">
|
||||
<img src="{{site.url}}/images/placeholders/256x256.png">
|
||||
<figcaption>
|
||||
Figure 1: Some beautiful placeholders
|
||||
</figcaption>
|
||||
<img src="{{site.url}}/assets/images/placeholders/256x256.png" />
|
||||
<img src="{{site.url}}/assets/images/placeholders/256x256.png" />
|
||||
<figcaption>Figure 1: Some beautiful placeholders</figcaption>
|
||||
</figure>
|
||||
<h6>Sixth level</h6>
|
||||
<p>Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum commodo, ipsum tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus.</p>
|
||||
<p>
|
||||
Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus
|
||||
sed diam dignissim, ut eleifend eros accumsan. Phasellus non tortor eros. Ut
|
||||
sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada
|
||||
ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse
|
||||
euismod, elit vel rutrum commodo, ipsum tortor maximus dui, sed varius
|
||||
sapien odio vitae est. Etiam at cursus metus.
|
||||
</p>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture content_ol_html_example %}
|
||||
<div class="content">
|
||||
<ol type="1">
|
||||
@@ -139,7 +185,6 @@ meta:
|
||||
</ol>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture content_ol_css_example %}
|
||||
<div class="content">
|
||||
<ol class="is-lower-alpha">
|
||||
@@ -166,7 +211,10 @@ meta:
|
||||
{% endcapture %}
|
||||
|
||||
<div class="content">
|
||||
<p>When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use <code>content</code> as container. It can handle almost any HTML tag:</p>
|
||||
<p>
|
||||
When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use
|
||||
<code>content</code> as container. It can handle almost any HTML tag:
|
||||
</p>
|
||||
<ul>
|
||||
<li><code><p></code> paragraphs</li>
|
||||
<li><code><ul></code> <code><ol></code> <code><dl></code> lists</li>
|
||||
@@ -175,126 +223,165 @@ meta:
|
||||
<li><code><em></code> and <code><strong></code></li>
|
||||
<li><code><table></code> <code><tr></code> <code><th></code> <code><td></code> tables</li>
|
||||
</ul>
|
||||
<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>
|
||||
<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" %}
|
||||
{% include docs/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" %}
|
||||
{% include docs/elements/snippet.html content=content_example %}
|
||||
{% include docs/elements/anchor.html name="Ordered lists alternatives" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>Ordered lists</strong> <code><ol></code> support different <strong>types</strong> of items markers. To modify them, use either:
|
||||
<strong>Ordered lists</strong> <code><ol></code> support different <strong>types</strong> of items markers. To
|
||||
modify them, use either:
|
||||
</p>
|
||||
<ul>
|
||||
<li>the corresponding HTML attribute value</li>
|
||||
<li>
|
||||
the corresponding HTML attribute value
|
||||
</li>
|
||||
<li>
|
||||
one of the following CSS modifier classes: <code>is-lower-alpha</code>, <code>is-lower-roman</code>, <code>is-upper-alpha</code> or <code>is-upper-roman</code>
|
||||
one of the following CSS modifier classes: <code>is-lower-alpha</code>, <code>is-lower-roman</code>,
|
||||
<code>is-upper-alpha</code> or
|
||||
<code>is-upper-roman</code>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=content_ol_html_example %}
|
||||
|
||||
{% include elements/snippet.html content=content_ol_css_example %}
|
||||
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
{% include docs/elements/snippet.html content=content_ol_html_example %}
|
||||
{% include docs/elements/snippet.html content=content_ol_css_example %}
|
||||
{% include docs/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>
|
||||
<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>
|
||||
|
||||
|
||||
{% 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>
|
||||
<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>
|
||||
<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>
|
||||
<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 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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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 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>
|
||||
<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>
|
||||
<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>
|
||||
<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 %}
|
||||
|
||||
<div class="content">
|
||||
<h4>Small size <code>content</code></h4>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=small_example %}
|
||||
{% include docs/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 %}
|
||||
{% include docs/elements/snippet.html content=normal_example %}
|
||||
|
||||
<div class="content">
|
||||
<h4>Medium size <code>content</code></h4>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=medium_example %}
|
||||
{% include docs/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 docs/elements/snippet.html content=large_example %}
|
||||
|
||||
{% include components/variables.html type='element' %}
|
||||
|
||||
@@ -1,30 +1,28 @@
|
||||
---
|
||||
title: Delete
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: elements
|
||||
doc-subtab: delete
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- elements
|
||||
- elements-delete
|
||||
- home
|
||||
- documentation
|
||||
- elements
|
||||
- elements-delete
|
||||
meta:
|
||||
colors: false
|
||||
sizes: true
|
||||
variables: false
|
||||
---
|
||||
|
||||
{% capture cross_example %}
|
||||
<button class="delete"></button>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture cross_sizes_example %}
|
||||
<button class="delete is-small"></button>
|
||||
<button class="delete"></button>
|
||||
<button class="delete is-medium"></button>
|
||||
<button class="delete is-large"></button>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture cross_elements_example %}
|
||||
<div class="block">
|
||||
<span class="tag is-success">
|
||||
@@ -35,7 +33,8 @@ meta:
|
||||
|
||||
<div class="notification is-danger">
|
||||
<button class="delete"></button>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit
|
||||
amet, consectetur adipiscing elit
|
||||
</div>
|
||||
|
||||
<article class="message is-info">
|
||||
@@ -44,38 +43,38 @@ meta:
|
||||
<button class="delete"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus
|
||||
mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit
|
||||
amet fringilla. Nullam gravida purus diam, et dictum felis venenatis
|
||||
efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu
|
||||
et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna
|
||||
a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>delete</code> element is a stand-alone element that can be used in different contexts.
|
||||
</p>
|
||||
<p>
|
||||
On its own, it's a simple circle with a cross:
|
||||
</p>
|
||||
<p>The <code>delete</code> element is a stand-alone element that can be used in different contexts.</p>
|
||||
<p>On its own, it's a simple circle with a cross:</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=cross_example %}
|
||||
{% include docs/elements/snippet.html content=cross_example %}
|
||||
{% include docs/elements/anchor.html name="Sizes" %}
|
||||
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
<div class="content">
|
||||
<p>It comes in <strong>4 sizes</strong>:</p>
|
||||
</div>
|
||||
|
||||
{% include docs/elements/snippet.html content=cross_sizes_example %}
|
||||
{% include docs/elements/anchor.html name="Combinations" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
It comes in <strong>4 sizes</strong>:
|
||||
Bulma uses it for the
|
||||
<a href="{{ site.url }}/documentation/elements/tag/">tags</a>, the
|
||||
<a href="{{ site.url }}/documentation/elements/notification/">notifications</a>, and the
|
||||
<a href="{{ site.url }}/documentation/components/message/">messages</a>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=cross_sizes_example %}
|
||||
|
||||
{% include elements/anchor.html name="Combinations" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Bulma uses it for the <a href="{{ site.url }}/documentation/elements/tag/">tags</a>, the <a href="{{ site.url }}/documentation/elements/notification/">notifications</a>, and the <a href="{{ site.url }}/documentation/components/message/">messages</a>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=cross_elements_example %}
|
||||
{% include docs/elements/snippet.html content=cross_elements_example %}
|
||||
|
||||
@@ -1,8 +1,11 @@
|
||||
---
|
||||
title: Form
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: elements
|
||||
doc-subtab: form
|
||||
---
|
||||
|
||||
<meta http-equiv="refresh" content="0; url={{ site.url }}/documentation/form/general/">
|
||||
<meta
|
||||
http-equiv="refresh"
|
||||
content="0; url={{ site.url }}/documentation/form/general/"
|
||||
>
|
||||
|
||||
@@ -1,29 +1,28 @@
|
||||
---
|
||||
title: Icon
|
||||
subtitle: "Bulma is compatible with <strong>all icon font libraries</strong>: <a href=\"https://fontawesome.com/\">Font Awesome 5</a>, <a href=\"http://fontawesome.io/\">Font Awesome 4</a>, <a href=\"https://materialdesignicons.com\">Material Design Icons</a>, <a href=\"http://ionicons.com/\">Ionicons</a>, etc."
|
||||
subtitle: 'Bulma is compatible with <strong>all icon font libraries</strong>: <a href="https://fontawesome.com/">Font Awesome 5</a>, <a href="http://fontawesome.io/">Font Awesome 4</a>, <a href="https://materialdesignicons.com">Material Design Icons</a>, <a href="http://ionicons.com/">Ionicons</a>, etc.'
|
||||
fontawesome4: true
|
||||
ionicons: true
|
||||
mdi: true
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: elements
|
||||
doc-subtab: icon
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- elements
|
||||
- elements-icon
|
||||
- home
|
||||
- documentation
|
||||
- elements
|
||||
- elements-icon
|
||||
meta:
|
||||
colors: true
|
||||
sizes: true
|
||||
variables: true
|
||||
---
|
||||
|
||||
{% capture icon_example %}
|
||||
<span class="icon">
|
||||
<i class="fas fa-home"></i>
|
||||
</span>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture icon_text_example %}
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
@@ -32,7 +31,6 @@ meta:
|
||||
<span>Home</span>
|
||||
</span>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture icon_text_train_example %}
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
@@ -56,7 +54,6 @@ meta:
|
||||
</span>
|
||||
</span>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture icon_text_in_content_example %}
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -67,7 +64,9 @@ meta:
|
||||
</span>
|
||||
<span>dinner</span>
|
||||
</span>
|
||||
was soon afterwards dispatched; and already had Mrs. Bennet planned the courses that were to do credit to her housekeeping, when an answer arrived which deferred it all. Mr. Bingley was obliged to be in
|
||||
was soon afterwards dispatched; and already had Mrs. Bennet planned the
|
||||
courses that were to do credit to her housekeeping, when an answer arrived
|
||||
which deferred it all. Mr. Bingley was obliged to be in
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
<i class="fas fa-city"></i>
|
||||
@@ -79,13 +78,13 @@ meta:
|
||||
<span class="icon">
|
||||
<i class="fas fa-envelope-open-text"></i>
|
||||
</span>
|
||||
<span>invitation</span>
|
||||
</span>,
|
||||
etc.
|
||||
<span>invitation</span> </span
|
||||
>, etc.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Mrs. Bennet was quite disconcerted. She could not imagine what business he could have in town so soon after his
|
||||
Mrs. Bennet was quite disconcerted. She could not imagine what business he
|
||||
could have in town so soon after his
|
||||
<span class="icon-text">
|
||||
<span class="icon">
|
||||
<i class="fas fa-flag-checkered"></i>
|
||||
@@ -99,11 +98,11 @@ meta:
|
||||
</span>
|
||||
<span>flying</span>
|
||||
</span>
|
||||
about from one place to another, and never settled at Netherfield as he ought to be.
|
||||
about from one place to another, and never settled at Netherfield as he
|
||||
ought to be.
|
||||
</p>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture icon_text_div_example %}
|
||||
<div class="icon-text">
|
||||
<span class="icon has-text-info">
|
||||
@@ -123,9 +122,7 @@ meta:
|
||||
<span>Success</span>
|
||||
</div>
|
||||
|
||||
<p class="block">
|
||||
Your image has been successfully uploaded.
|
||||
</p>
|
||||
<p class="block">Your image has been successfully uploaded.</p>
|
||||
|
||||
<div class="icon-text">
|
||||
<span class="icon has-text-warning">
|
||||
@@ -150,7 +147,6 @@ meta:
|
||||
</p>
|
||||
|
||||
{% endcapture %}
|
||||
|
||||
{% capture icon_color_example %}
|
||||
<span class="icon has-text-info">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
@@ -165,7 +161,6 @@ meta:
|
||||
<i class="fas fa-ban"></i>
|
||||
</span>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture icon_text_color_example %}
|
||||
<span class="icon-text has-text-info">
|
||||
<span class="icon">
|
||||
@@ -195,7 +190,6 @@ meta:
|
||||
<span>Danger</span>
|
||||
</span>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture icon_sizes_example %}
|
||||
<span class="icon">
|
||||
<i class="fas fa-camera-retro fa-lg"></i>
|
||||
@@ -213,7 +207,6 @@ meta:
|
||||
<i class="fas fa-camera-retro fa-5x"></i>
|
||||
</span>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture stacked_medium %}
|
||||
<span class="icon is-medium">
|
||||
<span class="fa-stack fa-sm">
|
||||
@@ -222,7 +215,6 @@ meta:
|
||||
</span>
|
||||
</span>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture stacked_large %}
|
||||
<span class="icon is-large">
|
||||
<span class="fa-stack fa-lg">
|
||||
@@ -234,87 +226,100 @@ meta:
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>icon</code> element is a <strong>container</strong> for any type of <strong>icon font</strong>. Because the icons can take a few seconds to load, and because you want control over the <strong>space</strong> the icons will take, you can use the <code>icon</code> class as a reliable square container that will prevent the page to "jump" on page load.</p>
|
||||
The <code>icon</code> element is a <strong>container</strong> for any type of <strong>icon font</strong>. Because
|
||||
the icons can take a few seconds to load, and because you want control over the <strong>space</strong> the icons
|
||||
will take, you can use the <code>icon</code> class as a reliable square container that will prevent the page to
|
||||
"jump" on page load.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="block bd-icon-size">
|
||||
{% include elements/snippet.html content=icon_example %}
|
||||
{% include docs/elements/snippet.html content=icon_example %}
|
||||
</div>
|
||||
|
||||
<div class="message is-info">
|
||||
<div class="message-body">
|
||||
The <strong>yellow background</strong> is only here for demonstration purposes, to highlight the icon container's area.
|
||||
The <strong>yellow background</strong> is only here for demonstration purposes, to highlight the icon container's
|
||||
area.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
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.
|
||||
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 elements/anchor.html name="Icon text" %}
|
||||
|
||||
{% include elements/new-tag.html version="0.9.2" %}
|
||||
{% include docs/elements/anchor.html name="Icon text" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can combine an <code>icon</code> with <strong>text</strong>, using the <code>icon-text</code> wrapper, as long as all text <em>inside</em> is wrapped in its own <code>span</code> element:
|
||||
You can combine an <code>icon</code> with <strong>text</strong>, using the <code>icon-text</code> wrapper, as long
|
||||
as all text <em>inside</em> is wrapped in its own <code>span</code> element:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=icon_text_example %}
|
||||
{% include docs/elements/snippet.html content=icon_text_example %}
|
||||
|
||||
<div class="content">
|
||||
<p>You can combine <strong>as many</strong> <code>icon</code> elements and text elements as you want:</p>
|
||||
</div>
|
||||
|
||||
{% include docs/elements/snippet.html content=icon_text_train_example %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can combine <strong>as many</strong> <code>icon</code> elements and text elements as you want:
|
||||
Since <code>icon-text</code> is an <code>inline-flex</code> element, it can easily be inserted within any paragraph
|
||||
of <strong>text</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=icon_text_train_example %}
|
||||
{% include docs/elements/snippet.html content=icon_text_in_content_example %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Since <code>icon-text</code> is an <code>inline-flex</code> element, it can easily be inserted within any paragraph of <strong>text</strong>.
|
||||
You can also turn the <code>icon-text</code> into a <code>flex</code> element simply by using a
|
||||
<code><div></code> tag instead:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=icon_text_in_content_example %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can also turn the <code>icon-text</code> into a <code>flex</code> element simply by using a <code><div></code> tag instead:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=icon_text_div_example %}
|
||||
{% include docs/elements/snippet.html content=icon_text_div_example %}
|
||||
|
||||
<!-- -->
|
||||
{% include elements/anchor.html name="Colors" %}
|
||||
{% include docs/elements/anchor.html name="Colors" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Since icon fonts are simply <strong>text</strong>, you can use the <a href="{{ site.url }}/documentation/helpers/color-helpers/">color helpers</a> to change the icon's color.
|
||||
Since icon fonts are simply <strong>text</strong>, you can use the
|
||||
<a href="{{ site.url }}/documentation/helpers/color-helpers/">color helpers</a>
|
||||
to change the icon's color.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=icon_color_example %}
|
||||
{% include docs/elements/snippet.html content=icon_color_example %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The same applies to the <code>icon-text</code>:
|
||||
</p>
|
||||
<p>The same applies to the <code>icon-text</code>:</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=icon_text_color_example %}
|
||||
{% include docs/elements/snippet.html content=icon_text_color_example %}
|
||||
|
||||
<!-- -->
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
{% include docs/elements/anchor.html name="Sizes" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The Bulma <code>icon</code> container comes in <strong>4 sizes</strong>. It should always be <em>slightly bigger</em> than the icon it contains. For example, Font Awesome 5 icons use a font-size of <code>1em</code> by default (since it inherits the font size), but provides <a href="https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons" target="_blank">additional sizes</a>.
|
||||
The Bulma <code>icon</code> container comes in <strong>4 sizes</strong>. It should always be
|
||||
<em>slightly bigger</em> than the icon it contains. For example, Font Awesome 5 icons use a font-size of
|
||||
<code>1em</code> by default (since it inherits the font size), but provides
|
||||
<a
|
||||
href="https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons"
|
||||
target="_blank"
|
||||
>additional sizes</a
|
||||
>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -474,25 +479,15 @@ meta:
|
||||
</table>
|
||||
|
||||
<!-- -->
|
||||
{% include elements/anchor.html name="Font Awesome variations" %}
|
||||
{% include docs/elements/anchor.html name="Font Awesome variations" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Font Awesome also provides modifier classes for:
|
||||
</p>
|
||||
<p>Font Awesome also provides modifier classes for:</p>
|
||||
<ul>
|
||||
<li>
|
||||
fixed width icons
|
||||
</li>
|
||||
<li>
|
||||
bordered icons
|
||||
</li>
|
||||
<li>
|
||||
animated icons
|
||||
</li>
|
||||
<li>
|
||||
stacked icons
|
||||
</li>
|
||||
<li>fixed width icons</li>
|
||||
<li>bordered icons</li>
|
||||
<li>animated icons</li>
|
||||
<li>stacked icons</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -506,9 +501,7 @@ meta:
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
Fixed width
|
||||
</td>
|
||||
<td>Fixed width</td>
|
||||
<td>
|
||||
<code>fas fa-fw</code>
|
||||
</td>
|
||||
@@ -519,9 +512,7 @@ meta:
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Bordered
|
||||
</td>
|
||||
<td>Bordered</td>
|
||||
<td>
|
||||
<code>fas fa-border</code>
|
||||
</td>
|
||||
@@ -532,9 +523,7 @@ meta:
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Animated
|
||||
</td>
|
||||
<td>Animated</td>
|
||||
<td>
|
||||
<code>fas fa-spinner fa-pulse</code>
|
||||
</td>
|
||||
@@ -545,11 +534,11 @@ meta:
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2">
|
||||
Stacked
|
||||
</td>
|
||||
<td rowspan="2">Stacked</td>
|
||||
<td>
|
||||
{% highlight html %}{{ stacked_medium }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- stacked_medium -}}
|
||||
{%- endhighlight %}
|
||||
</td>
|
||||
<td class="bd-icon-size">
|
||||
<span class="icon is-medium">
|
||||
@@ -562,7 +551,9 @@ meta:
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{% highlight html %}{{ stacked_large }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- stacked_large -}}
|
||||
{%- endhighlight %}
|
||||
</td>
|
||||
<td class="bd-icon-size">
|
||||
<span class="icon is-large">
|
||||
@@ -577,11 +568,12 @@ meta:
|
||||
</table>
|
||||
|
||||
<!-- -->
|
||||
{% include elements/anchor.html name="Material Design Icons" %}
|
||||
{% include docs/elements/anchor.html name="Material Design Icons" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Here is how the <code>icon</code> container can be used with <a href="https://materialdesignicons.com">Material Design Icons</a>.
|
||||
Here is how the <code>icon</code> container can be used with
|
||||
<a href="https://materialdesignicons.com">Material Design Icons</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -780,16 +772,10 @@ meta:
|
||||
</table>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
MDI also provides modifier classes for:
|
||||
</p>
|
||||
<p>MDI also provides modifier classes for:</p>
|
||||
<ul>
|
||||
<li>
|
||||
light and dark icons
|
||||
</li>
|
||||
<li>
|
||||
rotated & flipped icons
|
||||
</li>
|
||||
<li>light and dark icons</li>
|
||||
<li>rotated & flipped icons</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -803,9 +789,7 @@ meta:
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
Light color
|
||||
</td>
|
||||
<td>Light color</td>
|
||||
<td>
|
||||
<code>mdi mdi-light</code>
|
||||
</td>
|
||||
@@ -816,9 +800,7 @@ meta:
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Dark color
|
||||
</td>
|
||||
<td>Dark color</td>
|
||||
<td>
|
||||
<code>mdi mdi-dark</code>
|
||||
</td>
|
||||
@@ -829,9 +811,7 @@ meta:
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Light inactive color
|
||||
</td>
|
||||
<td>Light inactive color</td>
|
||||
<td>
|
||||
<code>mdi mdi-light mdi-inactive</code>
|
||||
</td>
|
||||
@@ -842,9 +822,7 @@ meta:
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Dark inactive color
|
||||
</td>
|
||||
<td>Dark inactive color</td>
|
||||
<td>
|
||||
<code>mdi mdi-dark mdi-inactive</code>
|
||||
</td>
|
||||
@@ -855,9 +833,7 @@ meta:
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Flipped
|
||||
</td>
|
||||
<td>Flipped</td>
|
||||
<td>
|
||||
<code>mdi mdi-flip-h</code>
|
||||
<br>
|
||||
@@ -874,9 +850,7 @@ meta:
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Rotated
|
||||
</td>
|
||||
<td>Rotated</td>
|
||||
<td>
|
||||
<code>mdi mdi-rotate-45</code>
|
||||
<br>
|
||||
@@ -902,12 +876,10 @@ meta:
|
||||
</table>
|
||||
|
||||
<!-- -->
|
||||
{% include elements/anchor.html name="Ionicons" %}
|
||||
{% include docs/elements/anchor.html name="Ionicons" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Here is how the <code>icon</code> container can be used with <a href="http://ionicons.com">Ionicons</a>.
|
||||
</p>
|
||||
<p>Here is how the <code>icon</code> container can be used with <a href="http://ionicons.com">Ionicons</a>.</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
@@ -1000,4 +972,4 @@ meta:
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% include components/variables.html type='element' %}
|
||||
|
||||
|
||||
@@ -1,58 +1,65 @@
|
||||
---
|
||||
title: Image
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: elements
|
||||
doc-subtab: image
|
||||
dimensions:
|
||||
- 16
|
||||
- 24
|
||||
- 32
|
||||
- 48
|
||||
- 64
|
||||
- 96
|
||||
- 128
|
||||
- 16
|
||||
- 24
|
||||
- 32
|
||||
- 48
|
||||
- 64
|
||||
- 96
|
||||
- 128
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- elements
|
||||
- elements-image
|
||||
- home
|
||||
- documentation
|
||||
- elements
|
||||
- elements-image
|
||||
meta:
|
||||
colors: false
|
||||
sizes: false
|
||||
variables: true
|
||||
---
|
||||
|
||||
{% capture image %}
|
||||
<figure class="image is-128x128">
|
||||
<img src="{{site.url}}/images/placeholders/128x128.png">
|
||||
<img src="{{site.url}}/assets/images/placeholders/128x128.png" />
|
||||
</figure>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture rounded_image %}
|
||||
<figure class="image is-128x128">
|
||||
<img class="is-rounded" src="{{site.url}}/images/placeholders/128x128.png">
|
||||
<img class="is-rounded" src="{{site.url}}/assets/images/placeholders/128x128.png" />
|
||||
</figure>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture retina_image %}
|
||||
<figure class="image is-128x128">
|
||||
<img src="{{site.url}}/images/placeholders/256x256.png">
|
||||
<img src="{{site.url}}/assets/images/placeholders/256x256.png" />
|
||||
</figure>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture iframe_ratio %}
|
||||
<figure class="image is-16by9">
|
||||
<iframe class="has-ratio" width="640" height="360" src="https://www.youtube.com/embed/YE7VzlLtp-4" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe
|
||||
class="has-ratio"
|
||||
width="640"
|
||||
height="360"
|
||||
src="https://www.youtube.com/embed/YE7VzlLtp-4"
|
||||
frameborder="0"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</figure>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="content">
|
||||
<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>
|
||||
<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 elements/snippet.html content=image %}
|
||||
|
||||
{% include elements/anchor.html name="Fixed square images" %}
|
||||
{% include docs/elements/snippet.html content=image %}
|
||||
{% include docs/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>
|
||||
@@ -62,9 +69,15 @@ meta:
|
||||
<tbody>
|
||||
{% for dimension in page.dimensions %}
|
||||
<tr>
|
||||
<td><code>image is-{{ dimension }}x{{ dimension }}</code></td>
|
||||
<td>
|
||||
<figure class="image is-{{ dimension }}x{{ dimension }}"><img src="{{site.url}}/images/placeholders/{{ dimension }}x{{ dimension }}.png"></figure>
|
||||
<code>image is-{{ dimension }}x{{ dimension }}</code>
|
||||
</td>
|
||||
<td>
|
||||
<figure class="image is-{{ dimension }}x{{ dimension }}">
|
||||
<img
|
||||
src="{{site.url}}/assets/images/placeholders/{{ dimension }}x{{ dimension }}.png"
|
||||
>
|
||||
</figure>
|
||||
</td>
|
||||
<td>{{ dimension }}x{{ dimension }}px</td>
|
||||
</tr>
|
||||
@@ -72,111 +85,184 @@ meta:
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% include elements/anchor.html name="Rounded images" %}
|
||||
{% include docs/elements/anchor.html name="Rounded images" %}
|
||||
|
||||
<div class="content">
|
||||
<p>You can also make rounded images, using <code>is-rounded</code> class:</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=rounded_image %}
|
||||
|
||||
{% include elements/anchor.html name="Retina images" %}
|
||||
{% include docs/elements/snippet.html content=rounded_image %}
|
||||
{% include docs/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>four times 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>
|
||||
<p>
|
||||
Because the image is fixed in size, you can use an image that is
|
||||
<strong>four times 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 elements/snippet.html content=retina_image %}
|
||||
|
||||
{% include elements/anchor.html name="Responsive images with ratios" %}
|
||||
{% include docs/elements/snippet.html content=retina_image %}
|
||||
{% include docs/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 <a href="https://en.wikipedia.org/wiki/Aspect_ratio_%28image%29#Still_photography">common aspect ratios in still photography</a>:</p>
|
||||
<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
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/Aspect_ratio_%28image%29#Still_photography"
|
||||
>common aspect ratios in still photography</a
|
||||
>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table id="images" class="table is-bordered">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>image is-square</code></td>
|
||||
<td style="width: 10rem;"><figure class="image is-square"><img src="{{site.url}}/images/placeholders/480x480.png"></figure></td>
|
||||
<td style="width: 10rem">
|
||||
<figure class="image is-square">
|
||||
<img src="{{site.url}}/assets/images/placeholders/480x480.png">
|
||||
</figure>
|
||||
</td>
|
||||
<td>Square (or 1 by 1)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-1by1</code></td>
|
||||
<td style="width: 10rem;"><figure class="image is-1by1"><img src="{{site.url}}/images/placeholders/480x480.png"></figure></td>
|
||||
<td style="width: 10rem">
|
||||
<figure class="image is-1by1">
|
||||
<img src="{{site.url}}/assets/images/placeholders/480x480.png">
|
||||
</figure>
|
||||
</td>
|
||||
<td>1 by 1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-5by4</code></td>
|
||||
<td style="width: 10rem;"><figure class="image is-5by4"><img src="{{site.url}}/images/placeholders/600x480.png"></figure></td>
|
||||
<td style="width: 10rem">
|
||||
<figure class="image is-5by4">
|
||||
<img src="{{site.url}}/assets/images/placeholders/600x480.png">
|
||||
</figure>
|
||||
</td>
|
||||
<td>5 by 4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-4by3</code></td>
|
||||
<td style="width: 10rem;"><figure class="image is-4by3"><img src="{{site.url}}/images/placeholders/640x480.png"></figure></td>
|
||||
<td style="width: 10rem">
|
||||
<figure class="image is-4by3">
|
||||
<img src="{{site.url}}/assets/images/placeholders/640x480.png">
|
||||
</figure>
|
||||
</td>
|
||||
<td>4 by 3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-3by2</code></td>
|
||||
<td style="width: 10rem;"><figure class="image is-3by2"><img src="{{site.url}}/images/placeholders/480x320.png"></figure></td>
|
||||
<td style="width: 10rem">
|
||||
<figure class="image is-3by2">
|
||||
<img src="{{site.url}}/assets/images/placeholders/480x320.png">
|
||||
</figure>
|
||||
</td>
|
||||
<td>3 by 2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-5by3</code></td>
|
||||
<td style="width: 10rem;"><figure class="image is-5by3"><img src="{{site.url}}/images/placeholders/800x480.png"></figure></td>
|
||||
<td style="width: 10rem">
|
||||
<figure class="image is-5by3">
|
||||
<img src="{{site.url}}/assets/images/placeholders/800x480.png">
|
||||
</figure>
|
||||
</td>
|
||||
<td>5 by 3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-16by9</code></td>
|
||||
<td style="width: 10rem;"><figure class="image is-16by9"><img src="{{site.url}}/images/placeholders/640x360.png"></figure></td>
|
||||
<td style="width: 10rem">
|
||||
<figure class="image is-16by9">
|
||||
<img src="{{site.url}}/assets/images/placeholders/640x360.png">
|
||||
</figure>
|
||||
</td>
|
||||
<td>16 by 9</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-2by1</code></td>
|
||||
<td style="width: 10rem;"><figure class="image is-2by1"><img src="{{site.url}}/images/placeholders/640x320.png"></figure></td>
|
||||
<td style="width: 10rem">
|
||||
<figure class="image is-2by1">
|
||||
<img src="{{site.url}}/assets/images/placeholders/640x320.png">
|
||||
</figure>
|
||||
</td>
|
||||
<td>2 by 1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-3by1</code></td>
|
||||
<td style="width: 10rem;"><figure class="image is-3by1"><img src="{{site.url}}/images/placeholders/720x240.png"></figure></td>
|
||||
<td style="width: 10rem">
|
||||
<figure class="image is-3by1">
|
||||
<img src="{{site.url}}/assets/images/placeholders/720x240.png">
|
||||
</figure>
|
||||
</td>
|
||||
<td>3 by 1</td>
|
||||
</tr>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-4by5</code></td>
|
||||
<td style="width: 10rem;"><figure class="image is-4by5"><img src="{{site.url}}/images/placeholders/480x600.png"></figure></td>
|
||||
<td style="width: 10rem">
|
||||
<figure class="image is-4by5">
|
||||
<img src="{{site.url}}/assets/images/placeholders/480x600.png">
|
||||
</figure>
|
||||
</td>
|
||||
<td>4 by 5</td>
|
||||
</tr>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-3by4</code></td>
|
||||
<td style="width: 10rem;"><figure class="image is-3by4"><img src="{{site.url}}/images/placeholders/480x640.png"></figure></td>
|
||||
<td style="width: 10rem">
|
||||
<figure class="image is-3by4">
|
||||
<img src="{{site.url}}/assets/images/placeholders/480x640.png">
|
||||
</figure>
|
||||
</td>
|
||||
<td>3 by 4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-2by3</code></td>
|
||||
<td style="width: 10rem;"><figure class="image is-2by3"><img src="{{site.url}}/images/placeholders/320x480.png"></figure></td>
|
||||
<td style="width: 10rem">
|
||||
<figure class="image is-2by3">
|
||||
<img src="{{site.url}}/assets/images/placeholders/320x480.png">
|
||||
</figure>
|
||||
</td>
|
||||
<td>2 by 3</td>
|
||||
</tr>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-3by5</code></td>
|
||||
<td style="width: 10rem;"><figure class="image is-3by5"><img src="{{site.url}}/images/placeholders/480x800.png"></figure></td>
|
||||
<td style="width: 10rem">
|
||||
<figure class="image is-3by5">
|
||||
<img src="{{site.url}}/assets/images/placeholders/480x800.png">
|
||||
</figure>
|
||||
</td>
|
||||
<td>3 by 5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<tr>
|
||||
<td><code>image is-9by16</code></td>
|
||||
<td style="width: 10rem;"><figure class="image is-9by16"><img src="{{site.url}}/images/placeholders/360x640.png"></figure></td>
|
||||
<td style="width: 10rem">
|
||||
<figure class="image is-9by16">
|
||||
<img src="{{site.url}}/assets/images/placeholders/360x640.png">
|
||||
</figure>
|
||||
</td>
|
||||
<td>9 by 16</td>
|
||||
</tr>
|
||||
<tr>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-1by2</code></td>
|
||||
<td style="width: 10rem;"><figure class="image is-1by2"><img src="{{site.url}}/images/placeholders/320x640.png"></figure></td>
|
||||
<td style="width: 10rem">
|
||||
<figure class="image is-1by2">
|
||||
<img src="{{site.url}}/assets/images/placeholders/320x640.png">
|
||||
</figure>
|
||||
</td>
|
||||
<td>1 by 2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-1by3</code></td>
|
||||
<td style="width: 10rem;"><figure class="image is-1by3"><img src="{{site.url}}/images/placeholders/240x720.png"></figure></td>
|
||||
<td>1 by 3</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>image is-1by3</code></td>
|
||||
<td style="width: 10rem">
|
||||
<figure class="image is-1by3">
|
||||
<img src="{{site.url}}/assets/images/placeholders/240x720.png">
|
||||
</figure>
|
||||
</td>
|
||||
<td>1 by 3</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="content">
|
||||
@@ -186,21 +272,25 @@ meta:
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>The <code>image</code> container will usually take up the <strong>whole width</strong> while maintaining the perfect ratio.
|
||||
<br>If it doesn't, you can force it by appending the <code>is-fullwidth</code> modifier.</p>
|
||||
<p>
|
||||
The <code>image</code> container will usually take up the <strong>whole width</strong> while maintaining the perfect
|
||||
ratio. <br>
|
||||
If it doesn't, you can force it by appending the <code>is-fullwidth</code> modifier.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Arbitrary ratios with any element" %}
|
||||
{% include docs/elements/anchor.html name="Arbitrary ratios with any element" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can apply a specific <strong>ratio</strong> on <strong>any element</strong> other than an <code>img</code>, simply by applying the <code>has-ratio</code> modifier to a resizable element.
|
||||
You can apply a specific <strong>ratio</strong> on <strong>any element</strong> other than an <code>img</code>,
|
||||
simply by applying the <code>has-ratio</code> modifier to a resizable element.
|
||||
</p>
|
||||
<p>
|
||||
For example, you can apply a <code>16by9</code> ratio on an <code>iframe</code>. Resize the browser, and you'll see how the ratio is maintained.
|
||||
For example, you can apply a <code>16by9</code> ratio on an <code>iframe</code>. Resize the browser, and you'll see
|
||||
how the ratio is maintained.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=iframe_ratio horizontal=true %}
|
||||
{% include docs/elements/snippet.html content=iframe_ratio horizontal=true %}
|
||||
|
||||
{% include components/variables.html type='element' %}
|
||||
|
||||
@@ -1,34 +1,34 @@
|
||||
---
|
||||
title: Notification
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: elements
|
||||
doc-subtab: notification
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- elements
|
||||
- elements-notification
|
||||
- home
|
||||
- documentation
|
||||
- elements
|
||||
- elements-notification
|
||||
meta:
|
||||
colors: true
|
||||
sizes: false
|
||||
variables: true
|
||||
---
|
||||
|
||||
{% capture notification %}
|
||||
<div class="notification">
|
||||
<button class="delete"></button>
|
||||
Lorem ipsum dolor sit amet, consectetur
|
||||
adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
|
||||
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
|
||||
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam,
|
||||
et dictum <a>felis venenatis</a> efficitur.
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture notification_js_html %}
|
||||
<div class="notification">
|
||||
<button class="delete"></button>
|
||||
Lorem ipsum
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture notification_js_code %}
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
(document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
|
||||
@@ -43,58 +43,69 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The notification is a simple colored block meant to draw the attention to the user about something. As such, it can be used as a pinned notification in the corner of the viewport. That's why it supports the use of the <code>delete</code> element.
|
||||
The notification is a simple colored block meant to draw the attention to the user about something. As such, it can
|
||||
be used as a pinned notification in the corner of the viewport. That's why it supports the use of the
|
||||
<code>delete</code> element.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=notification %}
|
||||
|
||||
{% include elements/anchor.html name="Colors" %}
|
||||
{% include docs/elements/snippet.html content=notification %}
|
||||
{% include docs/elements/anchor.html name="Colors" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The notification element is available in all the <strong>different colors</strong> defined by the <a href="{{ site.data.links.by_id.customize-variables.path }}"><code>$colors</code> Sass map</a>.
|
||||
The notification element is available in all the
|
||||
<strong>different colors</strong> defined by the
|
||||
<a href="{{ site.data.links.by_id.customize-variables.path }}"><code>$colors</code> Sass map</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% for color in site.data.colors.justColors %}
|
||||
{% capture foobar %}
|
||||
{% capture foobar %}
|
||||
<div class="notification is-{{ color }}">
|
||||
<button class="delete"></button>
|
||||
Primar lorem ipsum dolor sit amet, consectetur
|
||||
adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur.
|
||||
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum
|
||||
dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
|
||||
nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
|
||||
diam, et dictum <a>felis venenatis</a> efficitur.
|
||||
</div>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% include docs/elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% include elements/anchor.html name="Light colors" %}
|
||||
{% include docs/elements/anchor.html name="Light colors" %}
|
||||
|
||||
<div class="content">
|
||||
Each color also comes in its <strong>light</strong> version. Simply append the <code>is-light</code> modifier to obtain the light version of the notification.
|
||||
Each color also comes in its <strong>light</strong> version. Simply append the <code>is-light</code> modifier to
|
||||
obtain the light version of the notification.
|
||||
</div>
|
||||
|
||||
{% for color in site.data.colors.justColors %}
|
||||
{% capture foobar %}
|
||||
{% capture foobar %}
|
||||
<div class="notification is-{{ color }} is-light">
|
||||
<button class="delete"></button>
|
||||
Primar lorem ipsum dolor sit amet, consectetur
|
||||
adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur.
|
||||
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum
|
||||
dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
|
||||
nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
|
||||
diam, et dictum <a>felis venenatis</a> efficitur.
|
||||
</div>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% include docs/elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% include elements/anchor.html name="JavaScript example" %}
|
||||
{% include docs/elements/anchor.html name="JavaScript example" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The Bulma package <strong>does not come with any JavaScript</strong>. Here is however an implementation example, which sets the <code>click</code> handler for Bulma <code>delete</code> elements, anywhere on the page, in vanilla JavaScript.
|
||||
The Bulma package <strong>does not come with any JavaScript</strong>. Here is however an implementation example,
|
||||
which sets the <code>click</code> handler for Bulma <code>delete</code> elements, anywhere on the page, in vanilla
|
||||
JavaScript.
|
||||
</p>
|
||||
|
||||
{% highlight html %}{{ notification_js_html }}{% endhighlight %}
|
||||
|
||||
{% highlight javascript %}{{ notification_js_code }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- notification_js_html -}}
|
||||
{%- endhighlight %}
|
||||
{% highlight javascript -%}
|
||||
{{- notification_js_code -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
|
||||
{% include components/variables.html type='element' %}
|
||||
|
||||
|
||||
@@ -1,23 +1,22 @@
|
||||
---
|
||||
title: Progress Bar
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: elements
|
||||
doc-subtab: progress
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- elements
|
||||
- elements-progress
|
||||
- home
|
||||
- documentation
|
||||
- elements
|
||||
- elements-progress
|
||||
meta:
|
||||
colors: true
|
||||
sizes: true
|
||||
variables: true
|
||||
---
|
||||
|
||||
{% capture progress %}
|
||||
<progress class="progress" value="15" max="100">15%</progress>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture progress_indeterminate %}
|
||||
<progress class="progress is-small is-primary" max="100">15%</progress>
|
||||
<progress class="progress is-danger" max="100">30%</progress>
|
||||
@@ -27,46 +26,53 @@ meta:
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The Bulma progress bar is a simple CSS class that styles the native <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress" target="_blank"><code><progress></code> HTML element</a>.
|
||||
The Bulma progress bar is a simple CSS class that styles the native
|
||||
<a
|
||||
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress"
|
||||
target="_blank"
|
||||
><code><progress></code> HTML element</a
|
||||
>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=progress %}
|
||||
|
||||
{% include elements/anchor.html name="Colors" %}
|
||||
{% include docs/elements/snippet.html content=progress %}
|
||||
{% include docs/elements/anchor.html name="Colors" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The progress bar element is available in all the <strong>different colors</strong> defined by the <a href="{{ site.data.links.by_id.customize-variables.path }}"><code>$colors</code> Sass map</a>.
|
||||
The progress bar element is available in all the
|
||||
<strong>different colors</strong> defined by the
|
||||
<a href="{{ site.data.links.by_id.customize-variables.path }}"><code>$colors</code> Sass map</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% for color in site.data.colors.justColors %}
|
||||
{% capture foobar %}
|
||||
{% assign n = forloop.index | times: 15 %}
|
||||
<progress class="progress is-{{ color }}" value="{{ n }}" max="100">{{ n }}%</progress>
|
||||
{% capture foobar %} {% assign n
|
||||
= forloop.index | times: 15 %}
|
||||
<progress class="progress is-{{ color }}" value="{{ n }}" max="100">
|
||||
{{ n }}%
|
||||
</progress>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% include docs/elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
|
||||
{% include docs/elements/anchor.html name="Sizes" %}
|
||||
{% for size in site.data.sizes %}
|
||||
{% capture foobar %}
|
||||
{% assign n = forloop.index | times: 20 %}
|
||||
<progress class="progress is-{{ size }}" value="{{ n }}" max="100">{{ n }}%</progress>
|
||||
{% capture foobar %} {% assign n = forloop.index | times: 20
|
||||
%}
|
||||
<progress class="progress is-{{ size }}" value="{{ n }}" max="100">
|
||||
{{ n }}%
|
||||
</progress>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% include docs/elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% include elements/anchor.html name="Indeterminate" %}
|
||||
{% include docs/elements/anchor.html name="Indeterminate" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
If you don't set the HTML <code>value</code> attribute, you can display an <strong>indeterminate</strong> progress bar. It's used to show that some progress is going on, but the total duration is not yet determined.
|
||||
If you don't set the HTML <code>value</code> attribute, you can display an <strong>indeterminate</strong> progress
|
||||
bar. It's used to show that some progress is going on, but the total duration is not yet determined.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=progress_indeterminate %}
|
||||
{% include docs/elements/snippet.html content=progress_indeterminate %}
|
||||
|
||||
{% include components/variables.html type='element' %}
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
---
|
||||
title: Table
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: elements
|
||||
doc-subtab: table
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- elements
|
||||
- elements-table
|
||||
- home
|
||||
- documentation
|
||||
- elements
|
||||
- elements-table
|
||||
meta:
|
||||
colors: false
|
||||
sizes: false
|
||||
variables: true
|
||||
---
|
||||
|
||||
{% capture table_example %}
|
||||
<table class="table">
|
||||
<thead>
|
||||
@@ -49,7 +49,13 @@ meta:
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>1</th>
|
||||
<td><a href="https://en.wikipedia.org/wiki/Leicester_City_F.C." title="Leicester City F.C.">Leicester City</a> <strong>(C)</strong>
|
||||
<td>
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/Leicester_City_F.C."
|
||||
title="Leicester City F.C."
|
||||
>Leicester City</a
|
||||
>
|
||||
<strong>(C)</strong>
|
||||
</td>
|
||||
<td>38</td>
|
||||
<td>23</td>
|
||||
@@ -59,11 +65,24 @@ meta:
|
||||
<td>36</td>
|
||||
<td>+32</td>
|
||||
<td>81</td>
|
||||
<td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage" title="2016–17 UEFA Champions League">Champions League group stage</a></td>
|
||||
<td>
|
||||
Qualification for the
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage"
|
||||
title="2016–17 UEFA Champions League"
|
||||
>Champions League group stage</a
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>2</th>
|
||||
<td><a href="https://en.wikipedia.org/wiki/Arsenal_F.C." title="Arsenal F.C.">Arsenal</a></td>
|
||||
<td>
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/Arsenal_F.C."
|
||||
title="Arsenal F.C."
|
||||
>Arsenal</a
|
||||
>
|
||||
</td>
|
||||
<td>38</td>
|
||||
<td>20</td>
|
||||
<td>11</td>
|
||||
@@ -72,11 +91,24 @@ meta:
|
||||
<td>36</td>
|
||||
<td>+29</td>
|
||||
<td>71</td>
|
||||
<td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage" title="2016–17 UEFA Champions League">Champions League group stage</a></td>
|
||||
<td>
|
||||
Qualification for the
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage"
|
||||
title="2016–17 UEFA Champions League"
|
||||
>Champions League group stage</a
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>3</th>
|
||||
<td><a href="https://en.wikipedia.org/wiki/Tottenham_Hotspur_F.C." title="Tottenham Hotspur F.C.">Tottenham Hotspur</a></td>
|
||||
<td>
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/Tottenham_Hotspur_F.C."
|
||||
title="Tottenham Hotspur F.C."
|
||||
>Tottenham Hotspur</a
|
||||
>
|
||||
</td>
|
||||
<td>38</td>
|
||||
<td>19</td>
|
||||
<td>13</td>
|
||||
@@ -85,11 +117,24 @@ meta:
|
||||
<td>35</td>
|
||||
<td>+34</td>
|
||||
<td>70</td>
|
||||
<td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage" title="2016–17 UEFA Champions League">Champions League group stage</a></td>
|
||||
<td>
|
||||
Qualification for the
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage"
|
||||
title="2016–17 UEFA Champions League"
|
||||
>Champions League group stage</a
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="is-selected">
|
||||
<th>4</th>
|
||||
<td><a href="https://en.wikipedia.org/wiki/Manchester_City_F.C." title="Manchester City F.C.">Manchester City</a></td>
|
||||
<td>
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/Manchester_City_F.C."
|
||||
title="Manchester City F.C."
|
||||
>Manchester City</a
|
||||
>
|
||||
</td>
|
||||
<td>38</td>
|
||||
<td>19</td>
|
||||
<td>9</td>
|
||||
@@ -98,11 +143,24 @@ meta:
|
||||
<td>41</td>
|
||||
<td>+30</td>
|
||||
<td>66</td>
|
||||
<td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Play-off_round" title="2016–17 UEFA Champions League">Champions League play-off round</a></td>
|
||||
<td>
|
||||
Qualification for the
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Play-off_round"
|
||||
title="2016–17 UEFA Champions League"
|
||||
>Champions League play-off round</a
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>5</th>
|
||||
<td><a href="https://en.wikipedia.org/wiki/Manchester_United_F.C." title="Manchester United F.C.">Manchester United</a></td>
|
||||
<td>
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/Manchester_United_F.C."
|
||||
title="Manchester United F.C."
|
||||
>Manchester United</a
|
||||
>
|
||||
</td>
|
||||
<td>38</td>
|
||||
<td>19</td>
|
||||
<td>9</td>
|
||||
@@ -111,11 +169,24 @@ meta:
|
||||
<td>35</td>
|
||||
<td>+14</td>
|
||||
<td>66</td>
|
||||
<td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Group_stage" title="2016–17 UEFA Europa League">Europa League group stage</a></td>
|
||||
<td>
|
||||
Qualification for the
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Group_stage"
|
||||
title="2016–17 UEFA Europa League"
|
||||
>Europa League group stage</a
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>6</th>
|
||||
<td><a href="https://en.wikipedia.org/wiki/Southampton_F.C." title="Southampton F.C.">Southampton</a></td>
|
||||
<td>
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/Southampton_F.C."
|
||||
title="Southampton F.C."
|
||||
>Southampton</a
|
||||
>
|
||||
</td>
|
||||
<td>38</td>
|
||||
<td>18</td>
|
||||
<td>9</td>
|
||||
@@ -124,11 +195,24 @@ meta:
|
||||
<td>41</td>
|
||||
<td>+18</td>
|
||||
<td>63</td>
|
||||
<td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Group_stage" title="2016–17 UEFA Europa League">Europa League group stage</a></td>
|
||||
<td>
|
||||
Qualification for the
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Group_stage"
|
||||
title="2016–17 UEFA Europa League"
|
||||
>Europa League group stage</a
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>7</th>
|
||||
<td><a href="https://en.wikipedia.org/wiki/West_Ham_United_F.C." title="West Ham United F.C.">West Ham United</a></td>
|
||||
<td>
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/West_Ham_United_F.C."
|
||||
title="West Ham United F.C."
|
||||
>West Ham United</a
|
||||
>
|
||||
</td>
|
||||
<td>38</td>
|
||||
<td>16</td>
|
||||
<td>14</td>
|
||||
@@ -137,11 +221,24 @@ meta:
|
||||
<td>51</td>
|
||||
<td>+14</td>
|
||||
<td>62</td>
|
||||
<td>Qualification for the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Third_qualifying_round" title="2016–17 UEFA Europa League">Europa League third qualifying round</a></td>
|
||||
<td>
|
||||
Qualification for the
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Third_qualifying_round"
|
||||
title="2016–17 UEFA Europa League"
|
||||
>Europa League third qualifying round</a
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>8</th>
|
||||
<td><a href="https://en.wikipedia.org/wiki/Liverpool_F.C." title="Liverpool F.C.">Liverpool</a></td>
|
||||
<td>
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/Liverpool_F.C."
|
||||
title="Liverpool F.C."
|
||||
>Liverpool</a
|
||||
>
|
||||
</td>
|
||||
<td>38</td>
|
||||
<td>16</td>
|
||||
<td>12</td>
|
||||
@@ -154,7 +251,13 @@ meta:
|
||||
</tr>
|
||||
<tr>
|
||||
<th>9</th>
|
||||
<td><a href="https://en.wikipedia.org/wiki/Stoke_City_F.C." title="Stoke City F.C.">Stoke City</a></td>
|
||||
<td>
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/Stoke_City_F.C."
|
||||
title="Stoke City F.C."
|
||||
>Stoke City</a
|
||||
>
|
||||
</td>
|
||||
<td>38</td>
|
||||
<td>14</td>
|
||||
<td>9</td>
|
||||
@@ -167,7 +270,13 @@ meta:
|
||||
</tr>
|
||||
<tr>
|
||||
<th>10</th>
|
||||
<td><a href="https://en.wikipedia.org/wiki/Chelsea_F.C." title="Chelsea F.C.">Chelsea</a></td>
|
||||
<td>
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/Chelsea_F.C."
|
||||
title="Chelsea F.C."
|
||||
>Chelsea</a
|
||||
>
|
||||
</td>
|
||||
<td>38</td>
|
||||
<td>12</td>
|
||||
<td>14</td>
|
||||
@@ -180,7 +289,13 @@ meta:
|
||||
</tr>
|
||||
<tr>
|
||||
<th>11</th>
|
||||
<td><a href="https://en.wikipedia.org/wiki/Everton_F.C." title="Everton F.C.">Everton</a></td>
|
||||
<td>
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/Everton_F.C."
|
||||
title="Everton F.C."
|
||||
>Everton</a
|
||||
>
|
||||
</td>
|
||||
<td>38</td>
|
||||
<td>11</td>
|
||||
<td>14</td>
|
||||
@@ -193,7 +308,13 @@ meta:
|
||||
</tr>
|
||||
<tr>
|
||||
<th>12</th>
|
||||
<td><a href="https://en.wikipedia.org/wiki/Swansea_City_A.F.C." title="Swansea City A.F.C.">Swansea City</a></td>
|
||||
<td>
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/Swansea_City_A.F.C."
|
||||
title="Swansea City A.F.C."
|
||||
>Swansea City</a
|
||||
>
|
||||
</td>
|
||||
<td>38</td>
|
||||
<td>12</td>
|
||||
<td>11</td>
|
||||
@@ -206,7 +327,13 @@ meta:
|
||||
</tr>
|
||||
<tr>
|
||||
<th>13</th>
|
||||
<td><a href="https://en.wikipedia.org/wiki/Watford_F.C." title="Watford F.C.">Watford</a></td>
|
||||
<td>
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/Watford_F.C."
|
||||
title="Watford F.C."
|
||||
>Watford</a
|
||||
>
|
||||
</td>
|
||||
<td>38</td>
|
||||
<td>12</td>
|
||||
<td>9</td>
|
||||
@@ -219,7 +346,13 @@ meta:
|
||||
</tr>
|
||||
<tr>
|
||||
<th>14</th>
|
||||
<td><a href="https://en.wikipedia.org/wiki/West_Bromwich_Albion_F.C." title="West Bromwich Albion F.C.">West Bromwich Albion</a></td>
|
||||
<td>
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/West_Bromwich_Albion_F.C."
|
||||
title="West Bromwich Albion F.C."
|
||||
>West Bromwich Albion</a
|
||||
>
|
||||
</td>
|
||||
<td>38</td>
|
||||
<td>10</td>
|
||||
<td>13</td>
|
||||
@@ -232,7 +365,13 @@ meta:
|
||||
</tr>
|
||||
<tr>
|
||||
<th>15</th>
|
||||
<td><a href="https://en.wikipedia.org/wiki/Crystal_Palace_F.C." title="Crystal Palace F.C.">Crystal Palace</a></td>
|
||||
<td>
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/Crystal_Palace_F.C."
|
||||
title="Crystal Palace F.C."
|
||||
>Crystal Palace</a
|
||||
>
|
||||
</td>
|
||||
<td>38</td>
|
||||
<td>11</td>
|
||||
<td>9</td>
|
||||
@@ -245,7 +384,13 @@ meta:
|
||||
</tr>
|
||||
<tr>
|
||||
<th>16</th>
|
||||
<td><a href="https://en.wikipedia.org/wiki/A.F.C._Bournemouth" title="A.F.C. Bournemouth">AFC Bournemouth</a></td>
|
||||
<td>
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/A.F.C._Bournemouth"
|
||||
title="A.F.C. Bournemouth"
|
||||
>AFC Bournemouth</a
|
||||
>
|
||||
</td>
|
||||
<td>38</td>
|
||||
<td>11</td>
|
||||
<td>9</td>
|
||||
@@ -258,7 +403,13 @@ meta:
|
||||
</tr>
|
||||
<tr>
|
||||
<th>17</th>
|
||||
<td><a href="https://en.wikipedia.org/wiki/Sunderland_A.F.C." title="Sunderland A.F.C.">Sunderland</a></td>
|
||||
<td>
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/Sunderland_A.F.C."
|
||||
title="Sunderland A.F.C."
|
||||
>Sunderland</a
|
||||
>
|
||||
</td>
|
||||
<td>38</td>
|
||||
<td>9</td>
|
||||
<td>12</td>
|
||||
@@ -271,7 +422,13 @@ meta:
|
||||
</tr>
|
||||
<tr>
|
||||
<th>18</th>
|
||||
<td><a href="https://en.wikipedia.org/wiki/Newcastle_United_F.C." title="Newcastle United F.C.">Newcastle United</a> <strong>(R)</strong>
|
||||
<td>
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/Newcastle_United_F.C."
|
||||
title="Newcastle United F.C."
|
||||
>Newcastle United</a
|
||||
>
|
||||
<strong>(R)</strong>
|
||||
</td>
|
||||
<td>38</td>
|
||||
<td>9</td>
|
||||
@@ -281,11 +438,24 @@ meta:
|
||||
<td>65</td>
|
||||
<td>−21</td>
|
||||
<td>37</td>
|
||||
<td>Relegation to the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship" title="2016–17 Football League Championship">Football League Championship</a></td>
|
||||
<td>
|
||||
Relegation to the
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship"
|
||||
title="2016–17 Football League Championship"
|
||||
>Football League Championship</a
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>19</th>
|
||||
<td><a href="https://en.wikipedia.org/wiki/Norwich_City_F.C." title="Norwich City F.C.">Norwich City</a> <strong>(R)</strong>
|
||||
<td>
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/Norwich_City_F.C."
|
||||
title="Norwich City F.C."
|
||||
>Norwich City</a
|
||||
>
|
||||
<strong>(R)</strong>
|
||||
</td>
|
||||
<td>38</td>
|
||||
<td>9</td>
|
||||
@@ -295,10 +465,24 @@ meta:
|
||||
<td>67</td>
|
||||
<td>−28</td>
|
||||
<td>34</td>
|
||||
<td>Relegation to the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship" title="2016–17 Football League Championship">Football League Championship</a></td> </tr>
|
||||
<td>
|
||||
Relegation to the
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship"
|
||||
title="2016–17 Football League Championship"
|
||||
>Football League Championship</a
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>20</th>
|
||||
<td><a href="https://en.wikipedia.org/wiki/Aston_Villa_F.C." title="Aston Villa F.C.">Aston Villa</a> <strong>(R)</strong>
|
||||
<td>
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/Aston_Villa_F.C."
|
||||
title="Aston Villa F.C."
|
||||
>Aston Villa</a
|
||||
>
|
||||
<strong>(R)</strong>
|
||||
</td>
|
||||
<td>38</td>
|
||||
<td>3</td>
|
||||
@@ -308,39 +492,63 @@ meta:
|
||||
<td>76</td>
|
||||
<td>−49</td>
|
||||
<td>17</td>
|
||||
<td>Relegation to the <a href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship" title="2016–17 Football League Championship">Football League Championship</a></td>
|
||||
<td>
|
||||
Relegation to the
|
||||
<a
|
||||
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship"
|
||||
title="2016–17 Football League Championship"
|
||||
>Football League Championship</a
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture table_colors %}
|
||||
<table class="table is-bordered">
|
||||
<tbody>
|
||||
{% for color in site.data.colors.justColors %}
|
||||
<tr>
|
||||
<th class="is-{{ color }}">{{ color | capitalize }} th cell</th>
|
||||
<td>Two</td>
|
||||
<td class="is-{{ color }}">{{ color | capitalize }} td cell</td>
|
||||
<td>Four</td>
|
||||
<td>Five</td>
|
||||
</tr>
|
||||
<tr class="is-{{ color }}">
|
||||
<th>{{ color | capitalize }} row</th>
|
||||
<td>Two</td>
|
||||
<td>Three</td>
|
||||
<td>Four</td>
|
||||
<td>Five</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can create a <strong>Bulma table</strong> simply by attaching a single <code>table</code> CSS class on a <code><table></code> HTML element with the following structure:
|
||||
You can create a <strong>Bulma table</strong> simply by attaching a single <code>table</code> CSS class on a
|
||||
<code><table></code> HTML element with the following structure:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<code><table class="table"></code> as the main <strong>container</strong>
|
||||
<code><table class="table"></code> as the main
|
||||
<strong>container</strong>
|
||||
<ul>
|
||||
<li>
|
||||
<code>thead</code> the optional <strong>top</strong> part of the table
|
||||
</li>
|
||||
<li>
|
||||
<code>tfoot</code> the optional <strong>bottom</strong> part of the table
|
||||
</li>
|
||||
<li><code>thead</code> the optional <strong>top</strong> part of the table</li>
|
||||
<li><code>tfoot</code> the optional <strong>bottom</strong> part of the table</li>
|
||||
<li>
|
||||
<code>tbody</code> the main <strong>content</strong> of the table
|
||||
<ul>
|
||||
<li>
|
||||
<code>tr</code> each table <strong>row</strong>
|
||||
<ul>
|
||||
<li>
|
||||
<code>th</code> a table cell <strong>heading</strong>
|
||||
</li>
|
||||
<li>
|
||||
<code>td</code> a table <strong>cell</strong>
|
||||
</li>
|
||||
<li><code>th</code> a table cell <strong>heading</strong></li>
|
||||
<li><code>td</code> a table <strong>cell</strong></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -349,13 +557,43 @@ meta:
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
You can set a table row as <strong>selected</strong> by appending the <code>is-selected</code> modifier on a <code><tr></code>
|
||||
You can set a table row as <strong>selected</strong> by appending the <code>is-selected</code> modifier on a
|
||||
<code><tr></code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=table_example horizontal=true more=true %}
|
||||
{%
|
||||
include docs/elements/snippet.html content=table_example horizontal=true
|
||||
more=true
|
||||
%}
|
||||
|
||||
{% include elements/anchor.html name="Modifiers" %}
|
||||
{% include docs/elements/anchor.html name="Colors" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can change the color of a single <code><td></code> or <code><th></code> cell, or a whole
|
||||
<code><tr></code> row, by adding one of the color modifiers:
|
||||
</p>
|
||||
<ul>
|
||||
<li><code>is-primary</code></li>
|
||||
<li><code>is-link</code></li>
|
||||
<li><code>is-info</code></li>
|
||||
<li><code>is-success</code></li>
|
||||
<li><code>is-warning</code></li>
|
||||
<li><code>is-danger</code></li>
|
||||
<li><code>is-black</code></li>
|
||||
<li><code>is-dark</code></li>
|
||||
<li><code>is-light</code></li>
|
||||
<li><code>is-white</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{%
|
||||
include docs/elements/snippet.html content=table_colors horizontal=true
|
||||
more=true
|
||||
%}
|
||||
|
||||
{% include docs/elements/anchor.html name="Modifiers" %}
|
||||
|
||||
{% capture scrollable_table %}
|
||||
<div class="table-container">
|
||||
@@ -367,14 +605,14 @@ meta:
|
||||
|
||||
{% capture simple_scrollable_table_example %}
|
||||
<div class="table-container">
|
||||
<table class="table is-bordered is-striped ">
|
||||
<table class="table is-bordered is-striped">
|
||||
<tbody>
|
||||
{% for i in (1..5) %}
|
||||
<tr>
|
||||
{% for j in (1..100) %}
|
||||
<td>{{ j | times: i }}</td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
<tr>
|
||||
{% for j in (1..100) %}
|
||||
<td>{{ j | times: i }}</td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -578,7 +816,9 @@ meta:
|
||||
<code>table is-bordered is-striped is-narrow is-hoverable is-fullwidth</code>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
<table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
|
||||
<table
|
||||
class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>One</th>
|
||||
@@ -611,14 +851,18 @@ meta:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Table container" %}
|
||||
{% include docs/elements/anchor.html name="Table container" %}
|
||||
|
||||
<p class="content">
|
||||
You can create a <strong>scrollable table</strong> by wrapping a <code>table</code> in a <code>table-container</code> element:
|
||||
You can create a <strong>scrollable table</strong> by wrapping a <code>table</code> in a
|
||||
<code>table-container</code> element:
|
||||
</p>
|
||||
|
||||
{% highlight html %}{{ scrollable_table }}{% endhighlight %}
|
||||
|
||||
{% highlight html -%}
|
||||
{{- scrollable_table -}}
|
||||
{%- endhighlight %}
|
||||
{{ simple_scrollable_table_example }}
|
||||
|
||||
{% include components/variables.html type='element' %}
|
||||
{%
|
||||
include docs/components/variables.html
|
||||
type='element'
|
||||
%}
|
||||
|
||||
@@ -1,25 +1,22 @@
|
||||
---
|
||||
title: Tags
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: elements
|
||||
doc-subtab: tag
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- elements
|
||||
- elements-tag
|
||||
- home
|
||||
- documentation
|
||||
- elements
|
||||
- elements-tag
|
||||
meta:
|
||||
colors: true
|
||||
sizes: true
|
||||
variables: true
|
||||
---
|
||||
|
||||
{% capture tag %}
|
||||
<span class="tag">
|
||||
Tag label
|
||||
</span>
|
||||
<span class="tag"> Tag label </span>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tags_colors %}
|
||||
<span class="tag is-black">Black</span>
|
||||
<span class="tag is-dark">Dark</span>
|
||||
@@ -32,7 +29,6 @@ meta:
|
||||
<span class="tag is-warning">Warning</span>
|
||||
<span class="tag is-danger">Danger</span>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tags_light_colors %}
|
||||
<span class="tag is-primary is-light">Primary</span>
|
||||
<span class="tag is-link is-light">Link</span>
|
||||
@@ -41,13 +37,11 @@ meta:
|
||||
<span class="tag is-warning is-light">Warning</span>
|
||||
<span class="tag is-danger is-light">Danger</span>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture sizes %}
|
||||
<span class="tag is-link is-normal">Normal</span>
|
||||
<span class="tag is-primary is-medium">Medium</span>
|
||||
<span class="tag is-info is-large">Large</span>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture are_medium %}
|
||||
<div class="tags are-medium">
|
||||
<span class="tag">All</span>
|
||||
@@ -55,7 +49,6 @@ meta:
|
||||
<span class="tag">Size</span>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture are_large %}
|
||||
<div class="tags are-large">
|
||||
<span class="tag">All</span>
|
||||
@@ -63,7 +56,6 @@ meta:
|
||||
<span class="tag">Size</span>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture are_medium_one_large %}
|
||||
<div class="tags are-medium">
|
||||
<span class="tag">Medium</span>
|
||||
@@ -73,11 +65,22 @@ meta:
|
||||
<span class="tag">Medium</span>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture hoverable_tags %}
|
||||
<a class="tag">Hover me</a>
|
||||
<button class="tag">Hover me</button>
|
||||
<div class="tag is-hoverable">Hover me</div>
|
||||
{% endcapture %}
|
||||
{% capture hoverable_colored_tags %}
|
||||
<a class="tag is-link">Hover me</a>
|
||||
<button class="tag is-primary">Hover me</button>
|
||||
<div class="tag is-hoverable is-success">Hover me</div>
|
||||
<a class="tag is-info">Hover me</a>
|
||||
<button class="tag is-warning">Hover me</button>
|
||||
<div class="tag is-hoverable is-danger">Hover me</div>
|
||||
{% endcapture %}
|
||||
{% capture rounded %}
|
||||
<span class="tag is-rounded">Rounded</span>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture delete %}
|
||||
<span class="tag is-success">
|
||||
Bar
|
||||
@@ -92,11 +95,9 @@ meta:
|
||||
<button class="delete"></button>
|
||||
</span>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture is_delete %}
|
||||
<a class="tag is-delete"></a>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tags %}
|
||||
<div class="tags">
|
||||
<span class="tag">One</span>
|
||||
@@ -104,7 +105,6 @@ meta:
|
||||
<span class="tag">Three</span>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tags_multiple %}
|
||||
<div class="tags">
|
||||
<span class="tag">One</span>
|
||||
@@ -129,14 +129,12 @@ meta:
|
||||
<span class="tag">Twenty</span>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tags_addons %}
|
||||
<div class="tags has-addons">
|
||||
<span class="tag">Package</span>
|
||||
<span class="tag is-primary">Bulma</span>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tags_field_addons %}
|
||||
<div class="field is-grouped is-grouped-multiline">
|
||||
<div class="control">
|
||||
@@ -161,14 +159,12 @@ meta:
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tags_delete_addons %}
|
||||
<div class="tags has-addons">
|
||||
<span class="tag is-danger">Alex Smith</span>
|
||||
<a class="tag is-delete"></a>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tags_blog_addons %}
|
||||
<div class="field is-grouped is-grouped-multiline">
|
||||
<div class="control">
|
||||
@@ -224,190 +220,164 @@ meta:
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The Bulma <strong>tag</strong> is a small but versatile element. It's very useful as a way to attach information to a block or other component. Its size makes it also easy to display in numbers, making it appropriate for long lists of items.
|
||||
The Bulma <strong>tag</strong> is a small but versatile element. It's very useful as a way to attach information to
|
||||
a block or other component. Its size makes it also easy to display in numbers, making it appropriate for long lists
|
||||
of items.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
By default, a <strong>tag</strong> is a 1.5rem high label.
|
||||
</div>
|
||||
<div class="column is-4">By default, a <strong>tag</strong> is a 1.5rem high label.</div>
|
||||
<div class="column is-2">
|
||||
<span class="tag">
|
||||
Tag label
|
||||
</span>
|
||||
<span class="tag"> Tag label </span>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
{% highlight html %}{{ tag }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- tag -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Colors" %}
|
||||
{% include docs/elements/anchor.html name="Colors" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
Like with buttons, there are <strong>10 different colors</strong> available.
|
||||
</div>
|
||||
<div class="column is-4">Like with buttons, there are <strong>10 different colors</strong> available.</div>
|
||||
<div class="column is-2">
|
||||
<p class="field">
|
||||
<span class="tag is-black">
|
||||
Black
|
||||
</span>
|
||||
<span class="tag is-black"> Black </span>
|
||||
</p>
|
||||
<p class="field">
|
||||
<span class="tag is-dark">
|
||||
Dark
|
||||
</span>
|
||||
<span class="tag is-dark"> Dark </span>
|
||||
</p>
|
||||
<p class="field">
|
||||
<span class="tag is-light">
|
||||
Light
|
||||
</span>
|
||||
<span class="tag is-light"> Light </span>
|
||||
</p>
|
||||
<p class="field">
|
||||
<span class="tag is-white">
|
||||
White
|
||||
</span>
|
||||
<span class="tag is-white"> White </span>
|
||||
</p>
|
||||
<p class="field">
|
||||
<span class="tag is-primary">
|
||||
Primary
|
||||
</span>
|
||||
<span class="tag is-primary"> Primary </span>
|
||||
</p>
|
||||
<p class="field">
|
||||
<span class="tag is-link">
|
||||
Link
|
||||
</span>
|
||||
<span class="tag is-link"> Link </span>
|
||||
</p>
|
||||
<p class="field">
|
||||
<span class="tag is-info">
|
||||
Info
|
||||
</span>
|
||||
<span class="tag is-info"> Info </span>
|
||||
</p>
|
||||
<p class="field">
|
||||
<span class="tag is-success">
|
||||
Success
|
||||
</span>
|
||||
<span class="tag is-success"> Success </span>
|
||||
</p>
|
||||
<p class="field">
|
||||
<span class="tag is-warning">
|
||||
Warning
|
||||
</span>
|
||||
<span class="tag is-warning"> Warning </span>
|
||||
</p>
|
||||
<span class="tag is-danger">
|
||||
Danger
|
||||
</span>
|
||||
<span class="tag is-danger"> Danger </span>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
{% highlight html %}{{ tags_colors }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- tags_colors -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
<p>
|
||||
You can now choose the <strong>light version</strong> of a color.
|
||||
</p>
|
||||
<p>You can now choose the <strong>light version</strong> of a color.</p>
|
||||
</div>
|
||||
<div class="column is-2">
|
||||
<p class="field">
|
||||
<span class="tag is-primary is-light">
|
||||
Primary
|
||||
</span>
|
||||
<span class="tag is-primary is-light"> Primary </span>
|
||||
</p>
|
||||
<p class="field">
|
||||
<span class="tag is-link is-light">
|
||||
Link
|
||||
</span>
|
||||
<span class="tag is-link is-light"> Link </span>
|
||||
</p>
|
||||
<p class="field">
|
||||
<span class="tag is-info is-light">
|
||||
Info
|
||||
</span>
|
||||
<span class="tag is-info is-light"> Info </span>
|
||||
</p>
|
||||
<p class="field">
|
||||
<span class="tag is-success is-light">
|
||||
Success
|
||||
</span>
|
||||
<span class="tag is-success is-light"> Success </span>
|
||||
</p>
|
||||
<p class="field">
|
||||
<span class="tag is-warning is-light">
|
||||
Warning
|
||||
</span>
|
||||
<span class="tag is-warning is-light"> Warning </span>
|
||||
</p>
|
||||
<span class="tag is-danger is-light">
|
||||
Danger
|
||||
</span>
|
||||
<span class="tag is-danger is-light"> Danger </span>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
{% highlight html %}{{ tags_light_colors }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- tags_light_colors -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
{% include docs/elements/anchor.html name="Sizes" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
<div class="content">
|
||||
<p>The tag comes in <strong>3 different</strong> sizes.</p>
|
||||
<p>
|
||||
The tag comes in <strong>3 different</strong> sizes.
|
||||
</p>
|
||||
<p>
|
||||
While the default size is the <strong>normal</strong> one, the <code>is-normal</code> modifier exists in case you need to reset the tag to its normal size.
|
||||
While the default size is the <strong>normal</strong> one, the <code>is-normal</code> modifier exists in case
|
||||
you need to reset the tag to its normal size.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-2">
|
||||
<p class="field">
|
||||
<span class="tag is-link is-normal">
|
||||
Normal
|
||||
</span>
|
||||
<span class="tag is-link is-normal"> Normal </span>
|
||||
</p>
|
||||
<p class="field">
|
||||
<span class="tag is-primary is-medium">
|
||||
Medium
|
||||
</span>
|
||||
<span class="tag is-primary is-medium"> Medium </span>
|
||||
</p>
|
||||
<p class="field">
|
||||
<span class="tag is-info is-large">
|
||||
Large
|
||||
</span>
|
||||
<span class="tag is-info is-large"> Large </span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
{% highlight html %}{{ sizes }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- sizes -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can change the size of <strong>all</strong> tags at once:
|
||||
</p>
|
||||
<p>You can change the size of <strong>all</strong> tags at once:</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=are_medium %}
|
||||
|
||||
{% include elements/snippet.html content=are_large %}
|
||||
{% include docs/elements/snippet.html content=are_medium %}
|
||||
{% include docs/elements/snippet.html content=are_large %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can however keep the original size of a <strong>subset</strong> of tags, simply by applying one of its modifier class:
|
||||
You can however keep the original size of a <strong>subset</strong> of tags, simply by applying one of its modifier
|
||||
class:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=are_medium_one_large %}
|
||||
{% include docs/elements/snippet.html content=are_medium_one_large %}
|
||||
|
||||
{% include elements/anchor.html name="Modifiers" %}
|
||||
{% include docs/elements/anchor.html name="Hover/Active state" %}
|
||||
|
||||
<div class="content">
|
||||
<p>A tag element will react to the <code>:hover</code> and <code>:active</code> states if:</p>
|
||||
<ul>
|
||||
<li>it's an anchor element <code><a class="tag"></code></li>
|
||||
<li>it's a button element <code><button class="tag"></code></li>
|
||||
<li>it has the <code>is-hoverable</code> modifier class <code><div class="tag is-hoverable"></code></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include docs/elements/snippet.html content=hoverable_tags %}
|
||||
|
||||
{% include docs/elements/anchor.html name="Modifiers" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
You can add the <code>is-rounded</code> modifier to make a <strong>rounded</strong> tag.
|
||||
</div>
|
||||
<div class="column is-2">
|
||||
{{ rounded }}
|
||||
</div>
|
||||
<div class="column is-2">{{ rounded }}</div>
|
||||
<div class="column is-6">
|
||||
{% highlight html %}{{ rounded }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- rounded -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -415,20 +385,30 @@ meta:
|
||||
<div class="column is-4">
|
||||
You can add the <code>is-delete</code> modifier to turn the tag into a <strong>delete button</strong>.
|
||||
</div>
|
||||
<div class="column is-2">
|
||||
{{ is_delete }}
|
||||
</div>
|
||||
<div class="column is-2">{{ is_delete }}</div>
|
||||
<div class="column is-6">
|
||||
{% highlight html %}{{ is_delete }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- is_delete -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Combinations" %}
|
||||
{% include docs/elements/anchor.html name="Combinations" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
You can append a <strong>delete button</strong>.
|
||||
<div class="column is-4">You can create <strong>hoverable colored</strong> tags.</div>
|
||||
<div class="column is-2">
|
||||
{{ hoverable_colored_tags }}
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
{% highlight html -%}
|
||||
{{- hoverable_colored_tags -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-4">You can append a <strong>delete button</strong>.</div>
|
||||
<div class="column is-2">
|
||||
<p class="field">
|
||||
<span class="tag is-success">
|
||||
@@ -450,25 +430,25 @@ meta:
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
{% highlight html %}{{ delete }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- delete -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="List of tags" %}
|
||||
{% include docs/elements/anchor.html name="List of tags" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can now create a <strong>list of tags</strong> with the <code>tags</code> container.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{ tags }}
|
||||
<p>You can now create a <strong>list of tags</strong> with the <code>tags</code> container.</p>
|
||||
</div>
|
||||
<div class="bd-example">{{ tags }}</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{ tags }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- tags -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -476,49 +456,46 @@ meta:
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
If the list is <strong>very long</strong>, it will automatically wrap on <strong>multiple lines</strong>, while keeping all tags <strong>evenly spaced</strong>.
|
||||
If the list is <strong>very long</strong>, it will automatically wrap on <strong>multiple lines</strong>, while
|
||||
keeping all tags <strong>evenly spaced</strong>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{ tags_multiple }}
|
||||
</div>
|
||||
<div class="bd-example">{{ tags_multiple }}</div>
|
||||
</div>
|
||||
<div class="column bd-highlight-full">
|
||||
{% highlight html %}{{ tags_multiple }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- tags_multiple -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Tag addons" %}
|
||||
{% include docs/elements/anchor.html name="Tag addons" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can <strong>attach tags together</strong> with the <code>has-addons</code> modifier.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{ tags_addons }}
|
||||
<p>You can <strong>attach tags together</strong> with the <code>has-addons</code> modifier.</p>
|
||||
</div>
|
||||
<div class="bd-example">{{ tags_addons }}</div>
|
||||
</div>
|
||||
<div class="column bd-highlight-full">
|
||||
{% highlight html %}{{ tags_addons }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- tags_addons -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can attach a <strong>text</strong> tag with a <strong>delete</strong> tag together.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{ tags_delete_addons }}
|
||||
<p>You can attach a <strong>text</strong> tag with a <strong>delete</strong> tag together.</p>
|
||||
</div>
|
||||
<div class="bd-example">{{ tags_delete_addons }}</div>
|
||||
</div>
|
||||
<div class="column bd-highlight-full">
|
||||
{% highlight html %}{{ tags_delete_addons }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- tags_delete_addons -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -526,32 +503,31 @@ meta:
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
If you want to attach <code>tags</code> containers <strong>together</strong>, simply use the <code>field</code> element with the <code>is-grouped</code> and <code>is-grouped-multiline</code> modifiers.
|
||||
If you want to attach <code>tags</code> containers <strong>together</strong>, simply use the
|
||||
<code>field</code> element with the <code>is-grouped</code> and <code>is-grouped-multiline</code> modifiers.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{ tags_field_addons }}
|
||||
</div>
|
||||
<div class="bd-example">{{ tags_field_addons }}</div>
|
||||
</div>
|
||||
<div class="column bd-highlight-full">
|
||||
{% highlight html %}{{ tags_field_addons }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- tags_field_addons -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
This can be useful for a long list of <strong>blog tags</strong>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{ tags_blog_addons }}
|
||||
<p>This can be useful for a long list of <strong>blog tags</strong>.</p>
|
||||
</div>
|
||||
<div class="bd-example">{{ tags_blog_addons }}</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{ tags_blog_addons }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- tags_blog_addons -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include components/variables.html type='element' %}
|
||||
|
||||
|
||||
@@ -1,24 +1,23 @@
|
||||
---
|
||||
title: Title and Subtitle
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: elements
|
||||
doc-subtab: title
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- elements
|
||||
- elements-title
|
||||
- home
|
||||
- documentation
|
||||
- elements
|
||||
- elements-title
|
||||
meta:
|
||||
colors: false
|
||||
sizes: true
|
||||
variables: true
|
||||
---
|
||||
|
||||
{% capture default %}
|
||||
<h1 class="title">Title</h1>
|
||||
<h2 class="subtitle">Subtitle</h2>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture title_sizes %}
|
||||
<h1 class="title is-1">Title 1</h1>
|
||||
<h2 class="title is-2">Title 2</h2>
|
||||
@@ -27,7 +26,6 @@ meta:
|
||||
<h5 class="title is-5">Title 5</h5>
|
||||
<h6 class="title is-6">Title 6</h6>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture subtitle_sizes %}
|
||||
<h1 class="subtitle is-1">Subtitle 1</h1>
|
||||
<h2 class="subtitle is-2">Subtitle 2</h2>
|
||||
@@ -36,7 +34,6 @@ meta:
|
||||
<h5 class="subtitle is-5">Subtitle 5</h5>
|
||||
<h6 class="subtitle is-6">Subtitle 6</h6>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture combine %}
|
||||
<p class="title is-1">Title 1</p>
|
||||
<p class="subtitle is-3">Subtitle 3</p>
|
||||
@@ -47,7 +44,6 @@ meta:
|
||||
<p class="title is-3">Title 3</p>
|
||||
<p class="subtitle is-5">Subtitle 5</p>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture spaced %}
|
||||
<p class="title is-1 is-spaced">Title 1</p>
|
||||
<p class="subtitle is-3">Subtitle 3</p>
|
||||
@@ -78,11 +74,13 @@ meta:
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
{% highlight html %}{{ default }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- default -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
{% include docs/elements/anchor.html name="Sizes" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-3">
|
||||
@@ -97,7 +95,9 @@ meta:
|
||||
<p class="title is-6">Title 6</p>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
{% highlight html %}{{ title_sizes }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- title_sizes -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -112,7 +112,9 @@ meta:
|
||||
<p class="subtitle is-6">Subtitle 6</p>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
{% highlight html %}{{ subtitle_sizes }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- subtitle_sizes -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -122,7 +124,10 @@ meta:
|
||||
<div class="column is-3">
|
||||
<div class="content">
|
||||
<p>When you <strong>combine</strong> a title and a subtitle, they move closer together.</p>
|
||||
<p>As a rule of thumb, it is recommended to use a size difference of <strong>two</strong>. So if you use a <code>title is-1</code>, combine it with a <code>subtitle is-3</code>.</p>
|
||||
<p>
|
||||
As a rule of thumb, it is recommended to use a size difference of
|
||||
<strong>two</strong>. So if you use a <code>title is-1</code>, combine it with a <code>subtitle is-3</code>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
@@ -140,7 +145,9 @@ meta:
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
{% highlight html %}{{ combine }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- combine -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -150,9 +157,9 @@ meta:
|
||||
<div class="column is-3">
|
||||
<div class="content">
|
||||
<p>
|
||||
<span class="tag is-success">New!</span>
|
||||
You can maintain the normal spacing between titles and subtitles if you use the <code>is-spaced</code> modifier
|
||||
on the first element.
|
||||
</p>
|
||||
<p>You can maintain the normal spacing between titles and subtitles if you use the <code>is-spaced</code> modifier on the first element.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
@@ -170,8 +177,10 @@ meta:
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-5">
|
||||
{% highlight html %}{{ spaced }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- spaced -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include components/variables.html type='element' %}
|
||||
|
||||
|
||||
13
docs/documentation/features.html
Normal file
13
docs/documentation/features.html
Normal file
@@ -0,0 +1,13 @@
|
||||
---
|
||||
title: Features
|
||||
layout: docs
|
||||
theme: features
|
||||
doc-tab: features
|
||||
hide_tabs: true
|
||||
hide_pagination: true
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- features
|
||||
---
|
||||
{% include docs/components/links.html category_id='features' %}
|
||||
12
docs/documentation/features/auto-color.html
Normal file
12
docs/documentation/features/auto-color.html
Normal file
@@ -0,0 +1,12 @@
|
||||
---
|
||||
title: Auto Color in Bulma
|
||||
layout: docs
|
||||
theme: features
|
||||
doc-tab: features
|
||||
doc-subtab: auto-color
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- features
|
||||
- features-auto-color
|
||||
---
|
||||
248
docs/documentation/features/color-palettes.md
Normal file
248
docs/documentation/features/color-palettes.md
Normal file
@@ -0,0 +1,248 @@
|
||||
---
|
||||
title: Color Palettes in Bulma
|
||||
layout: docs
|
||||
markdown: true
|
||||
theme: features
|
||||
doc-tab: features
|
||||
doc-subtab: color-palettes
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- features
|
||||
- features-color-palettes
|
||||
---
|
||||
|
||||
Bulma comes with 7 primary colors:
|
||||
|
||||
<table class="table is-bordered">
|
||||
<tr><td><code>text</code></td><td><span class="bd-color-swatch" style="--background: var(--bulma-text);"></span></td></tr>
|
||||
<tr><td><code>link</code></td><td><span class="bd-color-swatch" style="--background: var(--bulma-link);"></span></td></tr>
|
||||
<tr><td><code>primary</code></td><td><span class="bd-color-swatch" style="--background: var(--bulma-primary);"></span></td></tr>
|
||||
<tr><td><code>info</code></td><td><span class="bd-color-swatch" style="--background: var(--bulma-info);"></span></td></tr>
|
||||
<tr><td><code>success</code></td><td><span class="bd-color-swatch" style="--background: var(--bulma-success);"></span></td></tr>
|
||||
<tr><td><code>warning</code></td><td><span class="bd-color-swatch" style="--background: var(--bulma-warning);"></span></td></tr>
|
||||
<tr><td><code>danger</code></td><td><span class="bd-color-swatch" style="--background: var(--bulma-danger);"></span></td></tr>
|
||||
</table>
|
||||
|
||||
Bulma will automatically **generate a collection of CSS variables** for each of those colors. These sets of variables act as a **color palette** you can use to play with different _shades_ of a same color.
|
||||
|
||||
For example, by setting the primary color with `$primary: hsl(171, 100%, 41%)`, Bulma will generate the following CSS variables:
|
||||
|
||||
- `--bulma-primary`
|
||||
- `--bulma-primary-rgb` if you want to create your own RGBA shade: `rgba(var(--bulma-primary-rgb), 0.5)`
|
||||
- `--bulma-primary-h` equal to the primary **hue**
|
||||
- `--bulma-primary-s` equal to the primary **saturation**
|
||||
- `--bulma-primary-l` equal to the primary **lightness**
|
||||
- `--bulma-primary-base` (equal to `--bulma-primary`)
|
||||
- `--bulma-primary-invert` which is a color that will look decent on the primary color (in a foreground/background combination)
|
||||
- `--bulma-primary-light` which is the primary color at `90%` lightness
|
||||
- `--bulma-primary-light-invert` which is a color that looks good on the `-light` version
|
||||
- `--bulma-primary-dark` which is the primary color at `20%` lightness
|
||||
- `--bulma-primary-dark-invert` which is a color that looks good on the `-dark` version
|
||||
- `--bulma-primary-soft` which is a `light` color in light mode, and a `dark` color in dark mode
|
||||
- `--bulma-primary-bold` which is a `dark` color in light mode, and a `light` color in dark mode
|
||||
- `--bulma-primary-soft-invert` which is the same as the `bold` version
|
||||
- `--bulma-primary-bold-invert` which is the same as the `soft` version
|
||||
- `--bulma-primary-on-scheme` which is a color that looks good on the `scheme-main` color (which by default is white, and is used as the page's background color)
|
||||
|
||||
Here is what they look like:
|
||||
|
||||
<table class="table is-bordered">
|
||||
<tr>
|
||||
<td><code>--bulma-primary</code></td>
|
||||
<td><span class="bd-color-swatch" style="--background: var(--bulma-primary);"></span></td>
|
||||
<td><span class="color-primary">The quick brown fox jumps over the lazy dog</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>--bulma-primary-invert</code></td>
|
||||
<td><span class="bd-color-swatch" style="--background: var(--bulma-primary-invert);"></span></td>
|
||||
<td><span class="color-primary-invert">The quick brown fox jumps over the lazy dog</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>--bulma-primary-light</code></td>
|
||||
<td><span class="bd-color-swatch" style="--background: var(--bulma-primary-light);"></span></td>
|
||||
<td><span class="color-primary-light">The quick brown fox jumps over the lazy dog</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>--bulma-primary-light-invert</code></td>
|
||||
<td><span class="bd-color-swatch" style="--background: var(--bulma-primary-light-invert);"></span></td>
|
||||
<td><span class="color-primary-light-invert">The quick brown fox jumps over the lazy dog</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>--bulma-primary-dark</code></td>
|
||||
<td><span class="bd-color-swatch" style="--background: var(--bulma-primary-dark);"></span></td>
|
||||
<td><span class="color-primary-dark">The quick brown fox jumps over the lazy dog</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>--bulma-primary-dark-invert</code></td>
|
||||
<td><span class="bd-color-swatch" style="--background: var(--bulma-primary-dark-invert);"></span></td>
|
||||
<td><span class="color-primary-dark-invert">The quick brown fox jumps over the lazy dog</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>--bulma-primary-soft</code></td>
|
||||
<td><span class="bd-color-swatch" style="--background: var(--bulma-primary-soft);"></span></td>
|
||||
<td><span class="has-text-primary-soft">The quick brown fox jumps over the lazy dog</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>--bulma-primary-bold</code></td>
|
||||
<td><span class="bd-color-swatch" style="--background: var(--bulma-primary-bold);"></span></td>
|
||||
<td><span class="has-text-primary-bold">The quick brown fox jumps over the lazy dog</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>--bulma-primary-on-scheme</code></td>
|
||||
<td><span class="bd-color-swatch" style="--background: var(--bulma-primary-on-scheme);"></span></td>
|
||||
<td><span class="color-primary-on-scheme">The quick brown fox jumps over the lazy dog</span></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
## Soft and Bold colors
|
||||
|
||||
Because Bulma now has a Dark Mode, it comes with a new color concept: **soft** and **bold** colors.
|
||||
|
||||
A **soft** color is a shade of a color that has little contrast with the background. It's a muted, faint shade of that color.
|
||||
|
||||
In light mode, this means that a soft color will be light as well. It's ideal of **backgrounds**:
|
||||
|
||||
<table class="table is-bordered">
|
||||
<tr>
|
||||
<td><span class="bd-color-swatch" style="--background: var(--bulma-primary-soft);"></span></td>
|
||||
<td><code>--bulma-primary-soft</code> as <strong>background</strong></td>
|
||||
<td class="has-background-primary-soft">The quick brown fox jumps over the lazy dog</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
On the other hand, the **bold** color has a stark contrast with the background. It's a strong, distinct shade of that color.
|
||||
|
||||
In light mode, this means that a bold color will be dark. It's ideal of **text colors**:
|
||||
|
||||
{% include docs/components/single-color-row.html color="primary-bold" label="text color" classname="has-text-primary-bold" %}
|
||||
|
||||
The best use of these colors is to **combine them**: the soft color as background, the bold color as foreground:
|
||||
|
||||
<table class="table is-bordered">
|
||||
<tr>
|
||||
<td>
|
||||
<code>--bulma-primary-soft</code> as <strong>background</strong><br>
|
||||
<code>--bulma-primary-bold</code> as <strong>foreground</strong>
|
||||
</td>
|
||||
<td class="has-text-primary-bold has-background-primary-soft" style="vertical-align: middle;">The quick brown fox jumps over the lazy dog</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
### Automatic switching when going into Dark Mode
|
||||
|
||||
If you use switch to between light mode and dark mode, you will notice that the soft and bold colors will **swap**. That way, you don't need to update your CSS classes to keep a decent design.
|
||||
|
||||
<table class="table is-bordered">
|
||||
<tr>
|
||||
<th>System</th>
|
||||
<th>Light Mode</th>
|
||||
<th>Dark Mode</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="has-text-primary-bold has-background-primary-soft" style="vertical-align: middle;">The quick brown fox jumps over the lazy dog</td>
|
||||
<td class="theme-light has-text-primary-bold has-background-primary-soft" style="vertical-align: middle;">The quick brown fox jumps over the lazy dog</td>
|
||||
<td class="theme-dark has-text-primary-bold has-background-primary-soft" style="vertical-align: middle;">The quick brown fox jumps over the lazy dog</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
## Invert colors
|
||||
|
||||
The purpose of `-invert` colors is to combine them with their base counterparts. For example, if you use `primary-light` as the background color, you can use `primary-light-invert` as the foreground color:
|
||||
|
||||
<table class="table is-bordered">
|
||||
{% include docs/elements/background-foreground-row.html %}
|
||||
{% include docs/elements/background-foreground-row.html color="light" %}
|
||||
{% include docs/elements/background-foreground-row.html color="dark" %}
|
||||
</table>
|
||||
|
||||
## 21 shades for each color
|
||||
|
||||
Bulma will automatically generate 21 shades of each color, one for each amount of **lightness**, starting from _around_ `0%` and going up in `5%` increments, until `100%` is reached.
|
||||
|
||||
> I am saying _around_ `0%` because the last digit is determined by the base color. If the base color's lightness is `42%`, then `--bulma-primary-00` will be `2%`, not `0%`.
|
||||
|
||||
<table class="table is-bordered">
|
||||
{% for i in (0..19) %}
|
||||
{% assign color = i | times: 5 | prepend: '00' | slice: -2, 2 %}
|
||||
<tr>
|
||||
<td><code>--bulma-primary-{{ color }}</code></td>
|
||||
<td><span class="bd-color-swatch" style="--background: var(--bulma-primary-{{ color }});"></span></td>
|
||||
<td><code>--bulma-primary-{{ color }}-invert</code></td>
|
||||
<td><span class="bd-color-swatch" style="--background: var(--bulma-primary-{{ color }}-invert);"></span></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
|
||||
<tr>
|
||||
<td><code>--bulma-primary-100</code></td>
|
||||
<td><span class="bd-color-swatch" style="--background: var(--bulma-primary-100);"></span></td>
|
||||
<td><code>--bulma-primary-100-invert</code></td>
|
||||
<td><span class="bd-color-swatch" style="--background: var(--bulma-primary-100-invert);"></span></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
Each of these shades has an `-invert` counterpart that can be used as a foreground color:
|
||||
|
||||
<table class="table is-bordered">
|
||||
{% for i in (0..19) %}
|
||||
{% assign color = i | times: 5 | prepend: '00' | slice: -2, 2 %}
|
||||
{% include docs/elements/background-foreground-row.html color=color %}
|
||||
{% endfor %}
|
||||
|
||||
{% include docs/elements/background-foreground-row.html color="100" %}
|
||||
|
||||
</table>
|
||||
|
||||
### Lightness CSS variables
|
||||
|
||||
If you write your own CSS and want to use one these shades yourself, you can access the **lightness** value via its dedicated CSS variable that has a `-l` suffix.
|
||||
|
||||
For example, the `bulma-primary-75` color is defined like this:
|
||||
|
||||
```css
|
||||
:root {
|
||||
--bulma-primary-75: hsla(
|
||||
var(--bulma-primary-h),
|
||||
var(--bulma-primary-s),
|
||||
var(--bulma-primary-75-l),
|
||||
1
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
In this case, `--bulma-primary-75-l` is equal to `76%`, and you can access its value with the `var(--bulma-primary-75-l)` CSS variable.
|
||||
|
||||
## CSS helper classes
|
||||
|
||||
While you can access all a color's CSS variables directly by writing `color: var(--bulma-primary)` for example, Bulma also provides **CSS helper classes** for each color.
|
||||
|
||||
Those helper classes exist for to set either the `color` or the `background`.
|
||||
|
||||
<div class="table-container">
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Color</th>
|
||||
<th colspan="2"><code>color</code> class</th>
|
||||
<th colspan="2"><code>background</code> class</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% include docs/elements/palette-class-row.html color="primary" %}
|
||||
{% include docs/elements/palette-class-row.html color="primary-invert" %}
|
||||
{% include docs/elements/palette-class-row.html color="primary-light" %}
|
||||
{% include docs/elements/palette-class-row.html color="primary-light-invert" %}
|
||||
{% include docs/elements/palette-class-row.html color="primary-dark" %}
|
||||
{% include docs/elements/palette-class-row.html color="primary-dark-invert" %}
|
||||
{% include docs/elements/palette-class-row.html color="primary-on-scheme" %}
|
||||
{% for i in (0..19) %}
|
||||
{% assign color = i | times: 5 | prepend: '00' | slice: -2, 2 %}
|
||||
{% assign name = color | prepend: 'primary-' %}
|
||||
{% include docs/elements/palette-class-row.html color=name %}
|
||||
{% endfor %}
|
||||
{% include docs/elements/palette-class-row.html color="primary-100" %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
71
docs/documentation/features/css-variables.md
Normal file
71
docs/documentation/features/css-variables.md
Normal file
@@ -0,0 +1,71 @@
|
||||
---
|
||||
title: CSS Variables in Bulma
|
||||
layout: docs
|
||||
markdown: true
|
||||
theme: features
|
||||
doc-tab: features
|
||||
doc-subtab: css-variables
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- features
|
||||
- features-css-variables
|
||||
---
|
||||
|
||||
All Bulma components are styled using **CSS Variables** (which are also called CSS custom properties). [Read more about them on the MDN Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).
|
||||
|
||||
For example, here is how the `.title` element is styled:
|
||||
|
||||
```css
|
||||
.title {
|
||||
color: var(--bulma-title-color);
|
||||
font-size: var(--bulma-title-size);
|
||||
font-weight: var(--bulma-title-weight);
|
||||
line-height: var(--bulma-title-line-height);
|
||||
}
|
||||
```
|
||||
|
||||
## Scope
|
||||
|
||||
Bulma CSS variables are either defined:
|
||||
|
||||
- at the **global** scope `:root`
|
||||
- at the **component** scope, like `.button`
|
||||
|
||||
CSS Variables defined at a more specific scope (like `.button`) will override the ones defined at a more global scope.
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* Default global value */
|
||||
--bulma-size-medium: 1.25rem;
|
||||
}
|
||||
|
||||
.button {
|
||||
/* Overrides the global value */
|
||||
--bulma-size-medium: 1.5rem;
|
||||
}
|
||||
```
|
||||
|
||||
## Prefix
|
||||
|
||||
All Bulma CSS variables are prefixed with `bulma-` (including the dash). You will notice theme when inspecting a webpage:
|
||||
|
||||
<img src="/assets/images/content-inspect.png" alt="Inspect CSS variables" width="640" height="340">
|
||||
|
||||
This prefix can be changed by setting the `$cssvars-prefix` Sass variable:
|
||||
|
||||
```scss
|
||||
@use "bulma/sass" with (
|
||||
$cssvars-prefix: "my-prefix-"
|
||||
);
|
||||
```
|
||||
|
||||
## Themes
|
||||
|
||||
The global CSS variables defined at the `:root` level are what defines a **Bulma theme**. Think of a theme as simply a collection of CSS variables.
|
||||
|
||||
<p>
|
||||
<a href="{{ site.url }}/documentation/features/themes/">
|
||||
Read more about Themes
|
||||
</a>
|
||||
</p>
|
||||
473
docs/documentation/features/dark-mode.md
Normal file
473
docs/documentation/features/dark-mode.md
Normal file
@@ -0,0 +1,473 @@
|
||||
---
|
||||
title: Dark Mode in Bulma
|
||||
layout: docs
|
||||
markdown: true
|
||||
theme: features
|
||||
doc-tab: features
|
||||
doc-subtab: dark-mode
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- features
|
||||
- features-dark-mode
|
||||
---
|
||||
|
||||
|
||||
|
||||
Modern browsers come with a way to detect if a user has set their theme preference to `light` or `dark` by using the [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) keyword.
|
||||
|
||||
This value can be used in a media query to change a website's styles accordingly:
|
||||
|
||||
```css
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
/* Update CSS variables */
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
However, it's not possible for a website to alter this preference. That's why it's preferable to **also** add a `data-theme` HTML attribute or a `theme-dark` CSS class.
|
||||
|
||||
This is how Bulma defines its dark theme:
|
||||
|
||||
```css
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
/* Update CSS variables */
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme=dark],
|
||||
.theme-dark {
|
||||
/* Update CSS variables */
|
||||
}
|
||||
```
|
||||
|
||||
With these rules:
|
||||
|
||||
* the website will be **light by default**, if no user preference is set
|
||||
* it will also be **light** if the user has set their preference to `light`
|
||||
* the website will be **dark** if the user has set their preference to `dark`
|
||||
|
||||
{% include docs/elements/anchor.html name="Force Dark Mode within a page" %}
|
||||
|
||||
You can **enable** Dark Mode in part of your HTML by simply using the HTML attribute or the CSS class:
|
||||
|
||||
```html
|
||||
<div>
|
||||
This is in Light Mode if the user hasn't set a preference, or if their preference is set to <code>light</code>.
|
||||
</div>
|
||||
|
||||
<div data-theme="dark">
|
||||
This is in Dark Mode
|
||||
</div>
|
||||
|
||||
<div class="theme-dark">
|
||||
This is also in Dark Mode
|
||||
</div>
|
||||
```
|
||||
|
||||
{% include docs/elements/anchor.html name="Force Dark Mode for a whole webpage" %}
|
||||
|
||||
If you want to enable Dark Mode for a whole webpage, simply set the attribute or the class on the `<html>` element:
|
||||
|
||||
```html
|
||||
<html data-theme="dark">
|
||||
<!-- Or -->
|
||||
<html class="theme-dark">
|
||||
```
|
||||
|
||||
{% include docs/elements/anchor.html name="How the Dark theme is created" %}
|
||||
|
||||
This is the content of the `sass/themes/dark.scss` file:
|
||||
|
||||
```scss
|
||||
@use "sass/utilities/initial-variables" as iv;
|
||||
@use "sass/utilities/css-variables" as cv;
|
||||
@use "sass/utilities/derived-variables" as dv;
|
||||
@use "sass/themes/setup";
|
||||
|
||||
// The main lightness of this theme
|
||||
$scheme-main-l: 11%;
|
||||
$background-l: 14%;
|
||||
$text-l: 71%;
|
||||
|
||||
// The main scheme color, used to make calculations
|
||||
$scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
|
||||
$background: hsl(iv.$scheme-h, iv.$scheme-s, $background-l);
|
||||
$text: hsl(iv.$scheme-h, iv.$scheme-s, $text-l);
|
||||
|
||||
@mixin dark-theme {
|
||||
// Required: update the lightness colors and hover/active states
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"scheme-brightness": "dark",
|
||||
"scheme-main-l": $scheme-main-l,
|
||||
"scheme-main-bis-l": $scheme-main-l + 2%,
|
||||
"scheme-main-ter-l": $scheme-main-l + 4%,
|
||||
"background-l": $background-l,
|
||||
"border-weak-l": 21%,
|
||||
"border-l": 24%,
|
||||
"text-weak-l": 53%,
|
||||
"text-l": $text-l,
|
||||
"text-strong-l": 93%,
|
||||
"text-title-l": 100%,
|
||||
"hover-background-l-delta": 5%,
|
||||
"active-background-l-delta": 10%,
|
||||
"hover-border-l-delta": 10%,
|
||||
"active-border-l-delta": 20%,
|
||||
"hover-color-l-delta": 5%,
|
||||
"active-color-l-delta": 10%,
|
||||
)
|
||||
);
|
||||
|
||||
// Required: update the "on scheme" colors since the main scheme color is changed
|
||||
// from white (100% lightness)
|
||||
// to black (11% lightness in this case)
|
||||
@each $name, $color in dv.$colors {
|
||||
@include cv.generate-on-scheme-colors($name, $color, $scheme-main);
|
||||
}
|
||||
|
||||
// Optional: update the shadow color
|
||||
@include cv.register-hsl("shadow", white);
|
||||
}
|
||||
```
|
||||
|
||||
This mixin outputs a list of CSS variables and their new value.
|
||||
|
||||
To use this theme with the `prefer-color-scheme` media query, write the following:
|
||||
|
||||
```scss
|
||||
@use "sass/utilities/css-variables" as cv;
|
||||
@use "sass/themes/dark";
|
||||
|
||||
@include cv.system-theme($name: "dark") {
|
||||
@include dark.dark-theme;
|
||||
}
|
||||
```
|
||||
|
||||
To use this theme with the `[data-theme=dark]` and `.theme-dark` selectors, write the following:
|
||||
|
||||
```scss
|
||||
@use "sass/utilities/css-variables" as cv;
|
||||
@use "sass/themes/dark";
|
||||
@use "sass/themes/setup";
|
||||
|
||||
@include cv.bulma-theme($name: "dark") {
|
||||
@include dark.dark-theme;
|
||||
@include setup.setup-theme;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### The `bulma-theme()` mixin
|
||||
|
||||
This mixin will allow you to generate a CSS rule-set with both an appropriate HTML attribute selector and a CSS class selector, which names are defined by the `$name` parameter.
|
||||
|
||||
```scss
|
||||
@use "sass/utilities/css-variables" as cv;
|
||||
|
||||
@include cv.bulma-theme($name: "my-theme") {
|
||||
// Your code
|
||||
}
|
||||
```
|
||||
|
||||
This will output the following:
|
||||
|
||||
```css
|
||||
[data-theme=my-theme],
|
||||
.theme-my-theme {
|
||||
/* Your code */
|
||||
}
|
||||
```
|
||||
|
||||
### The `system-theme()` mixin
|
||||
|
||||
This mixin will generate a `@media (prefers-color-scheme: $name)` media query.
|
||||
|
||||
```scss
|
||||
@use "sass/utilities/css-variables" as cv;
|
||||
|
||||
@include cv.system-theme($name: "dark") {
|
||||
// Your code
|
||||
}
|
||||
```
|
||||
|
||||
This will output the following:
|
||||
|
||||
```css
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
/* Your code */
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### The `register-vars()` function
|
||||
|
||||
All Bulma CSS variables are prefixed with `bulma-`. This prefix is defined with the `$cssvars-prefix: "bulma-";` Sass variable.
|
||||
|
||||
Because writing all CSS variables with this prefix can be cumbersome, Bulma provides a Sass function to register new variables: `register-vars()`.
|
||||
|
||||
This function accepts a Sass map of `name: value` pairs.
|
||||
|
||||
```scss
|
||||
@use "sass/utilities/css-variables" as cv;
|
||||
|
||||
$scheme-main-l: 11%;
|
||||
$background-l: 14%;
|
||||
$text-l: 71%;
|
||||
|
||||
@include cv.bulma-theme($name: "my-theme") {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"scheme-brightness": "dark",
|
||||
"scheme-main-l": $scheme-main-l,
|
||||
"scheme-main-bis-l": $scheme-main-l + 2%,
|
||||
"scheme-main-ter-l": $scheme-main-l + 4%,
|
||||
"background-l": $background-l,
|
||||
"border-weak-l": 21%,
|
||||
"border-l": 24%,
|
||||
"text-weak-l": 53%,
|
||||
"text-l": $text-l,
|
||||
"text-strong-l": 93%,
|
||||
"text-title-l": 100%,
|
||||
"hover-background-l-delta": 5%,
|
||||
"active-background-l-delta": 10%,
|
||||
"hover-border-l-delta": 10%,
|
||||
"active-border-l-delta": 20%,
|
||||
"hover-color-l-delta": 5%,
|
||||
"active-color-l-delta": 10%,
|
||||
)
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Updating the lightness
|
||||
|
||||
For Dark Mode, Bulma will keep the same hue and saturation of the main scheme color. It will however **invert the lightness** of background, borders, text colors, and hover/active states.
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Lightness Name</th>
|
||||
<th colspan="2">Light Mode (default)</th>
|
||||
<th colspan="2">Dark Mode (default)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>--bulma-scheme-main-l</code></th>
|
||||
<td><code>100%</code></td>
|
||||
<td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-l));"></span></td>
|
||||
<td><code>11%</code></td>
|
||||
<td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-l));"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>--bulma-scheme-main-bis-l</code></th>
|
||||
<td><code>98%</code></td>
|
||||
<td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-bis-l));"></span></td>
|
||||
<td><code>13%</code></td>
|
||||
<td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-bis-l));"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>--bulma-scheme-main-ter-l</code></th>
|
||||
<td><code>98%</code></td>
|
||||
<td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-ter-l));"></span></td>
|
||||
<td><code>15%</code></td>
|
||||
<td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-ter-l));"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>--bulma-background-l</code></th>
|
||||
<td><code>96%</code></td>
|
||||
<td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-background-l));"></span></td>
|
||||
<td><code>14%</code></td>
|
||||
<td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-background-l));"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>--bulma-border-weak-l</code></th>
|
||||
<td><code>93%</code></td>
|
||||
<td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-border-weak-l));"></span></td>
|
||||
<td><code>21%</code></td>
|
||||
<td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-border-weak-l));"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>--bulma-border-l</code></th>
|
||||
<td><code>86%</code></td>
|
||||
<td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-border-l));"></span></td>
|
||||
<td><code>24%</code></td>
|
||||
<td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-border-l));"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>--bulma-text-weak-l</code></th>
|
||||
<td><code>48%</code></td>
|
||||
<td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-weak-l));"></span></td>
|
||||
<td><code>53%</code></td>
|
||||
<td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-weak-l));"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>--bulma-text-l</code></th>
|
||||
<td><code>29%</code></td>
|
||||
<td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-l));"></span></td>
|
||||
<td><code>71%</code></td>
|
||||
<td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-l));"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>--bulma-text-strong-l</code></th>
|
||||
<td><code>21%</code></td>
|
||||
<td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-strong-l));"></span></td>
|
||||
<td><code>93%</code></td>
|
||||
<td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-strong-l));"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>--bulma-text-title-l</code></th>
|
||||
<td><code>14%</code></td>
|
||||
<td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-title-l));"></span></td>
|
||||
<td><code>100%</code></td>
|
||||
<td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-title-l));"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>--bulma-hover-background-l-delta</code></th>
|
||||
<td colspan="2"><code>5%</code></td>
|
||||
<td colspan="2"><code>5%</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>--bulma-active-background-l-delta</code></th>
|
||||
<td colspan="2"><code>10%</code></td>
|
||||
<td colspan="2"><code>10%</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>--bulma-hover-border-l-delta</code></th>
|
||||
<td colspan="2"><code>10%</code></td>
|
||||
<td colspan="2"><code>10%</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>--bulma-active-border-l-delta</code></th>
|
||||
<td colspan="2"><code>20%</code></td>
|
||||
<td colspan="2"><code>20%</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>--bulma-hover-color-l-delta</code></th>
|
||||
<td colspan="2"><code>5%</code></td>
|
||||
<td colspan="2"><code>5%</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>--bulma-active-color-l-delta</code></th>
|
||||
<td colspan="2"><code>10%</code></td>
|
||||
<td colspan="2"><code>10%</code></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
### The `generate-on-scheme-colors()` function
|
||||
|
||||
The **scheme** color is the one used for:
|
||||
|
||||
* {% include docs/elements/color-swatch.html background="var(--bulma-background)" %} backgrounds
|
||||
* {% include docs/elements/color-swatch.html background="var(--bulma-border)" %} borders
|
||||
* text shades
|
||||
* {% include docs/elements/color-swatch.html background="var(--bulma-text-strong)" %} strong text
|
||||
* {% include docs/elements/color-swatch.html background="var(--bulma-text-weak)" %} weak text
|
||||
* {% include docs/elements/color-swatch.html background="var(--bulma-title-color)" %} title text
|
||||
* {% include docs/elements/color-swatch.html background="var(--bulma-text)" %} and normal text
|
||||
|
||||
For each of the 7 primary colors {% include docs/elements/primary-colors.html %}, the default Bulma theme generates **on scheme** shades, meaning shades of each color that will look decent on the main scheme color.
|
||||
|
||||
In Light Mode, they look like this:
|
||||
|
||||
<table class="table is-bordered">
|
||||
<tbody>
|
||||
{% for color in site.data.colors.justColors %}
|
||||
{% assign foreground = color | prepend: 'var(--bulma-' | append: '-on-scheme)' %}
|
||||
<tr>
|
||||
<th><code>{{ color }}</code></th>
|
||||
<td>{% include docs/elements/color-swatch.html background="var(--bulma-scheme-main)" color=foreground text=foreground %}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
Because in Dark Mode we are inverting the lightness of these colors, the page background will go from white {% include docs/elements/color-swatch.html background="#fff" %} to black {% include docs/elements/color-swatch.html background="#141414" %}. We thus need to update the `-on-scheme` colors of all 7 primary colors.
|
||||
|
||||
In Dark Mode, they look like this:
|
||||
|
||||
<table class="table is-bordered">
|
||||
<tbody>
|
||||
{% for color in site.data.colors.justColors %}
|
||||
{% assign foreground = color | prepend: 'var(--bulma-' | append: '-on-scheme)' %}
|
||||
<tr>
|
||||
<th><code>{{ color }}</code></th>
|
||||
<td class="theme-dark">{% include docs/elements/color-swatch.html background="var(--bulma-scheme-main)" color=foreground text=foreground %}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
If you are creating your own theme, you can automatically generate new `-on-scheme` colors by using the `generate-on-scheme-colors()` for **each** color. It takes 3 parameters:
|
||||
|
||||
* `$name` which is a string. E.g. `"primary"`
|
||||
* `$color` which is the color value. E.g.
|
||||
* `$scheme-main` which is the theme's main scheme color (the one used as the page background). E.g. `#fff`
|
||||
|
||||
The full code looks like this:
|
||||
|
||||
```scss
|
||||
@use "sass/utilities/css-variables" as cv;
|
||||
@use "sass/utilities/derived-variables" as dv;
|
||||
|
||||
$scheme-main-l: 11%;
|
||||
$scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
|
||||
|
||||
@include cv.bulma-theme($name: "my-theme") {
|
||||
@each $name, $color in dv.$colors {
|
||||
@include cv.generate-on-scheme-colors($name, $color, $scheme-main);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### The `setup-theme()` function
|
||||
|
||||
In Bulma, some CSS variables reference other CSS variables. For example, `--bulma-scheme-main` is defined like this:
|
||||
|
||||
```css
|
||||
:root {
|
||||
--bulma-scheme-main: hsl(
|
||||
var(--bulma-scheme-h)
|
||||
var(--bulma-scheme-s)
|
||||
var(--bulma-scheme-main-l)
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
Because of how CSS variables work, if you update the value of `--bulma-scheme-main-l`, you need to define `--bulma-scheme-main` again. That is what `setup-theme()` does.
|
||||
|
||||
```css
|
||||
[data-theme=my-theme],
|
||||
.theme-my-theme {
|
||||
--bulma-scheme-main-l: 7%;
|
||||
--bulma-scheme-main: hsl(
|
||||
var(--bulma-scheme-h)
|
||||
var(--bulma-scheme-s)
|
||||
var(--bulma-scheme-main-l)
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
If you create your own theme, simply call this function _after_ having set your own CSS variables:
|
||||
|
||||
```scss
|
||||
@use "sass/themes/setup";
|
||||
|
||||
@include cv.bulma-theme($name: "my-theme") {
|
||||
// Set your own CSS variables,
|
||||
// either manually:
|
||||
--bulma-scheme-main-l: 7%;
|
||||
// or using Bulma's register-vars() function:
|
||||
@include register-vars((
|
||||
"bulma-scheme-main-l": 7%,
|
||||
));
|
||||
|
||||
// Then, setup the new theme.
|
||||
@include setup.setup-theme();
|
||||
}
|
||||
```
|
||||
416
docs/documentation/features/skeletons.html
Normal file
416
docs/documentation/features/skeletons.html
Normal file
@@ -0,0 +1,416 @@
|
||||
---
|
||||
title: Skeletons in Bulma
|
||||
layout: docs
|
||||
markdown: true
|
||||
theme: features
|
||||
doc-tab: features
|
||||
doc-subtab: skeletons
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- features
|
||||
- features-skeletons
|
||||
---
|
||||
|
||||
{% capture title_is_skeleton %}
|
||||
<h1 class="title is-skeleton">
|
||||
Title
|
||||
</h1>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture title_has_skeleton %}
|
||||
<h1 class="title has-skeleton">
|
||||
Title
|
||||
</h1>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture subtitle_is_skeleton %}
|
||||
<h2 class="subtitle is-skeleton">
|
||||
Subtitle
|
||||
</h2>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture subtitle_has_skeleton %}
|
||||
<h2 class="subtitle has-skeleton">
|
||||
Subtitle
|
||||
</h2>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture title_and_subtitle_is_skeleton %}
|
||||
<h1 class="title is-skeleton">
|
||||
Title
|
||||
</h1>
|
||||
<h2 class="subtitle is-skeleton">
|
||||
Subtitle
|
||||
</h2>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture title_and_subtitle_has_skeleton %}
|
||||
<h1 class="title has-skeleton">
|
||||
Title
|
||||
</h1>
|
||||
<h2 class="subtitle has-skeleton">
|
||||
Subtitle
|
||||
</h2>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture skeleton_block %}
|
||||
<div class="skeleton-block"></div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture skeleton_block_with_text %}
|
||||
<div class="skeleton-block">
|
||||
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||||
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
|
||||
ut fermentum massa justo sit amet risus. Donec sed odio dui.
|
||||
Nullam quis risus eget urna mollis ornare vel eu leo.
|
||||
Cum sociis natoque penatibus et magnis dis parturient montes,
|
||||
nascetur ridiculus mus. Nullam id dolor id
|
||||
nibh ultricies vehicula ut id elit.
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture skeleton_lines %}
|
||||
<div class="skeleton-lines">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture markdown %}
|
||||
A skeleton loader is a loading state that acts as a **placeholder** for content in an interface.
|
||||
Bulma v1 ships with 2 skeleton elements, and skeleton variants for most Bulma components.
|
||||
|
||||
All skeleton loaders share these CSS variables:
|
||||
|
||||
```css
|
||||
:root {
|
||||
--bulma-skeleton-background: var(--bulma-border);
|
||||
--bulma-skeleton-radius: var(--bulma-radius-small);
|
||||
--bulma-skeleton-block-min-height: 4.5em;
|
||||
--bulma-skeleton-lines-gap: 0.75em;
|
||||
--bulma-skeleton-line-height: 0.75em;
|
||||
}
|
||||
```
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
{% include docs/elements/anchor.html name="Skeleton Block" %}
|
||||
|
||||
{% capture markdown %}
|
||||
The skeleton block is a simple block element with a pulsating background. It has a minimum height of `4.5em`.
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
{% include docs/elements/snippet.html content=skeleton_block %}
|
||||
|
||||
{% capture markdown %}
|
||||
If you insert text inside this block, you can make its height responsive:
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
{% include docs/elements/snippet.html content=skeleton_block_with_text %}
|
||||
|
||||
{% include docs/elements/anchor.html name="Skeleton Lines" %}
|
||||
|
||||
{% capture markdown %}
|
||||
The skeleton lines element is a loading element which resembles a **paragraph**. Each `<div></div>` will render as a separate loading line.
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
{% include docs/elements/snippet.html content=skeleton_lines %}
|
||||
|
||||
{% include docs/elements/anchor.html name="Bulma components with skeletons" %}
|
||||
|
||||
{% capture markdown %}
|
||||
Most Bulma elements and components have a skeleton variant, which can be enabled by adding either the `is-skeleton` or `has-skeleton` modifier.
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
{% include docs/elements/anchor-bis.html name="Button" %}
|
||||
|
||||
{% capture button_skeleton %}
|
||||
<div class="buttons">
|
||||
<button class="button is-skeleton">Button</button>
|
||||
<button class="button is-link is-skeleton">Link</button>
|
||||
<button class="button is-primary is-skeleton">Primary</button>
|
||||
<button class="button is-success is-skeleton">Success</button>
|
||||
<button class="button is-info is-skeleton">Info</button>
|
||||
<button class="button is-warning is-skeleton">Warning</button>
|
||||
<button class="button is-danger is-skeleton">Danger</button>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
{% include docs/elements/snippet.html content=button_skeleton %}
|
||||
|
||||
{% include docs/elements/anchor-bis.html name="Icon" %}
|
||||
|
||||
{% capture icon_skeleton %}
|
||||
<span class="icon is-skeleton">
|
||||
<i class="fas fa-reply"></i>
|
||||
</span>
|
||||
{% endcapture %}
|
||||
|
||||
{% include docs/elements/snippet.html content=icon_skeleton %}
|
||||
|
||||
{% include docs/elements/anchor-bis.html name="Image" %}
|
||||
|
||||
{% capture image_skeleton %}
|
||||
<figure class="image is-16x16 is-skeleton">
|
||||
<img alt="Placeholder" src="https://placehold.co/16x16">
|
||||
</figure>
|
||||
|
||||
<figure class="image is-32x32 is-skeleton">
|
||||
<img alt="Placeholder" src="https://placehold.co/32x32">
|
||||
</figure>
|
||||
|
||||
<figure class="image is-64x64 is-skeleton">
|
||||
<img alt="Placeholder" src="https://placehold.co/64x64">
|
||||
</figure>
|
||||
|
||||
<figure class="image is-128x128 is-skeleton">
|
||||
<img alt="Placeholder" src="https://placehold.co/128x128">
|
||||
</figure>
|
||||
{% endcapture %}
|
||||
|
||||
{% include docs/elements/snippet.html content=image_skeleton %}
|
||||
|
||||
{% include docs/elements/anchor-bis.html name="Media Object" %}
|
||||
|
||||
{% capture media_skeleton %}
|
||||
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-64x64 is-skeleton">
|
||||
<img src="https://placehold.co/128x128" alt="Placeholder image">
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<div class="content is-skeleton">
|
||||
<p>
|
||||
<strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
|
||||
<br>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor
|
||||
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus est non commodo luctus,
|
||||
nisi erat porttitor ligula, eget lacinia odio sem nec elit
|
||||
vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
|
||||
</p>
|
||||
</div>
|
||||
<nav class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<a class="level-item"><span class="icon is-small is-skeleton"><i class="fas fa-reply"></i></span></a>
|
||||
<a class="level-item"><span class="icon is-small is-skeleton"><i class="fas fa-retweet"></i></span></a>
|
||||
<a class="level-item"><span class="icon is-small is-skeleton"><i class="fas fa-heart"></i></span></a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="media-right">
|
||||
<button aria-label="delete" class="delete is-skeleton"></button>
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture media_skeleton_bis %}
|
||||
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-64x64 is-skeleton">
|
||||
<img src="https://placehold.co/128x128" alt="Placeholder image">
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<textarea class="textarea is-skeleton" placeholder="Add a comment..."></textarea>
|
||||
</p>
|
||||
</div>
|
||||
<nav class="level">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<a class="button is-info is-skeleton">Submit</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<label class="checkbox is-skeleton"> <input type="checkbox"> Press enter to submit </label>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
|
||||
{% include docs/elements/snippet.html content=media_skeleton %}
|
||||
{% include docs/elements/snippet.html content=media_skeleton_bis %}
|
||||
|
||||
{% include docs/elements/anchor-bis.html name="Notification" %}
|
||||
|
||||
{% capture notification_skeleton %}
|
||||
<div class="notification is-skeleton">
|
||||
Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include docs/elements/snippet.html content=notification_skeleton %}
|
||||
|
||||
{% include docs/elements/anchor-bis.html name="Tag" %}
|
||||
|
||||
{% capture tag_skeleton %}
|
||||
<span class="tag is-skeleton">Tag</span>{% for color in site.data.colors.justColors %}
|
||||
<span class="tag is-{{ color }} is-skeleton">{{ color | capitalize }}</span>{% endfor %}
|
||||
{% endcapture %}
|
||||
|
||||
{% include docs/elements/snippet.html content=tag_skeleton %}
|
||||
|
||||
{% include docs/elements/anchor-bis.html name="Title and Subtitle" %}
|
||||
|
||||
The `.title` and `.subtitle` elements have both an `is-skeleton` and `has-skeleton` variant:
|
||||
|
||||
* `is-skeleton` will turn the whole block into a loading skeleton
|
||||
* `has-skeleton` will turn only a small part of its content into a loading skeleton, to simulate loading only the inner text rather than the whole block
|
||||
|
||||
{% include docs/elements/snippet.html content=title_is_skeleton %}
|
||||
{% include docs/elements/snippet.html content=title_has_skeleton %}
|
||||
{% include docs/elements/snippet.html content=subtitle_is_skeleton %}
|
||||
{% include docs/elements/snippet.html content=subtitle_has_skeleton %}
|
||||
{% include docs/elements/snippet.html content=title_and_subtitle_is_skeleton %}
|
||||
{% include docs/elements/snippet.html content=title_and_subtitle_has_skeleton %}
|
||||
|
||||
{% include docs/elements/anchor-bis.html name="Form Controls" %}
|
||||
|
||||
{% capture input_skeleton %}
|
||||
<input class="input is-skeleton">
|
||||
{% endcapture %}
|
||||
|
||||
{% capture textarea_skeleton %}
|
||||
<textarea class="textarea is-skeleton"></textarea>
|
||||
{% endcapture %}
|
||||
|
||||
{% include docs/elements/snippet.html content=input_skeleton %}
|
||||
{% include docs/elements/snippet.html content=textarea_skeleton %}
|
||||
|
||||
<div class="skeleton-toggler display-flex align-items-center gap-2">
|
||||
<button id="js-toggle-skeleton" class="button">
|
||||
<div id="js-timer" class="timer is-active">
|
||||
<div class="timer-mask"></div>
|
||||
</div>
|
||||
<span class="mr-2">Toggle Skeleton Animations</span>
|
||||
<span class="tag is-success" style="margin-right: -0.5rem;">Active</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<style type="text/css">
|
||||
.timer {
|
||||
--duration: 2;
|
||||
--size: 1.5;
|
||||
--background: var(--bulma-border-weak);
|
||||
--foreground: var(--bulma-danger);
|
||||
animation-duration: calc(var(--duration) * 1s);
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: steps(1000, start);
|
||||
background: linear-gradient(90deg, var(--foreground) 50%, var(--background) 50%);
|
||||
border-radius: 100%;
|
||||
height: calc(var(--size) * 1em);
|
||||
margin: 0 0.5rem 0 -0.5rem;
|
||||
mask: radial-gradient(transparent 0%, transparent 29%, #000 30%, #000 100%);
|
||||
position: relative;
|
||||
width: calc(var(--size) * 1em);
|
||||
}
|
||||
|
||||
.timer.is-active {
|
||||
--foreground: var(--bulma-success);
|
||||
animation-name: anim-timer;
|
||||
}
|
||||
|
||||
.timer.is-active .timer-mask {
|
||||
animation-name: anim-timer-mask;
|
||||
}
|
||||
|
||||
.timer-mask {
|
||||
animation-duration: calc(var(--duration) * 1s);
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: steps(500, start);
|
||||
border-radius: 100% 0 0 100% / 50% 0 0 50%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transform-origin: 100% 50%;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@keyframes anim-timer {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes anim-timer-mask {
|
||||
0% {
|
||||
background: var(--background);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
background: var(--background);
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
50.01% {
|
||||
background: var(--foreground);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
background: var(--foreground);
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const hasSkeletons = document.querySelectorAll('.has-skeleton');
|
||||
const isSkeletons = document.querySelectorAll('.is-skeleton');
|
||||
const timer = document.getElementById('js-timer');
|
||||
const toggleSkeleton = document.getElementById('js-toggle-skeleton');
|
||||
const toggleSkeletonTag = toggleSkeleton.querySelector('.tag');
|
||||
|
||||
let skeletonInterval = setInterval(toggleSkeletons, 2000);
|
||||
|
||||
function toggleSkeletonInterval() {
|
||||
if (skeletonInterval) {
|
||||
clearInterval(skeletonInterval);
|
||||
skeletonInterval = null;
|
||||
toggleSkeletonTag.className = "tag is-danger is-light";
|
||||
toggleSkeletonTag.textContent = "Inactive";
|
||||
timer.classList.remove("is-active");
|
||||
return;
|
||||
} else {
|
||||
skeletonInterval = setInterval(toggleSkeletons, 2000);
|
||||
toggleSkeletonTag.className = "tag is-success";
|
||||
toggleSkeletonTag.textContent = "Active";
|
||||
timer.classList.add("is-active");
|
||||
}
|
||||
}
|
||||
|
||||
function toggleSkeletons() {
|
||||
hasSkeletons.forEach((el) => {
|
||||
el.classList.toggle("has-skeleton");
|
||||
});
|
||||
|
||||
isSkeletons.forEach((el) => {
|
||||
el.classList.toggle("is-skeleton");
|
||||
});
|
||||
}
|
||||
|
||||
toggleSkeleton.addEventListener("click", () => {
|
||||
toggleSkeletonInterval();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
12
docs/documentation/features/smart-columns.html
Normal file
12
docs/documentation/features/smart-columns.html
Normal file
@@ -0,0 +1,12 @@
|
||||
---
|
||||
title: Smart Columns in Bulma
|
||||
layout: docs
|
||||
theme: features
|
||||
doc-tab: features
|
||||
doc-subtab: smart-columns
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- features
|
||||
- features-smart-columns
|
||||
---
|
||||
12
docs/documentation/features/smart-grid.html
Normal file
12
docs/documentation/features/smart-grid.html
Normal file
@@ -0,0 +1,12 @@
|
||||
---
|
||||
title: Smart Grid in Bulma
|
||||
layout: docs
|
||||
theme: features
|
||||
doc-tab: features
|
||||
doc-subtab: smart-grid
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- features
|
||||
- features-smart-grid
|
||||
---
|
||||
83
docs/documentation/features/themes.md
Normal file
83
docs/documentation/features/themes.md
Normal file
@@ -0,0 +1,83 @@
|
||||
---
|
||||
title: Themes in Bulma
|
||||
layout: docs
|
||||
markdown: true
|
||||
theme: features
|
||||
doc-tab: features
|
||||
doc-subtab: themes
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- features
|
||||
- features-themes
|
||||
---
|
||||
|
||||
|
||||
In Bulma, a **theme** is a **collection** of CSS variables.
|
||||
|
||||
Bulma comes with 2 themes:
|
||||
|
||||
- `light.scss` (required)
|
||||
- `dark.scss` (optional)
|
||||
|
||||
## The default themes
|
||||
|
||||
Because Bulma requires a default value for all CSS variables, it comes with a **default light theme** located at `/sass/themes/light.scss`.
|
||||
|
||||
It also comes with a **dark theme** located at `/sass/themes/dark.scss`.
|
||||
|
||||
The file `/sass/themes/_index.scss` takes care of including both themes, each in two ways:
|
||||
|
||||
* with the `@media (prefers-color-scheme: $name)` media query
|
||||
* with an HTML attribute `[data-theme=$name]` and CSS class `.theme-$name` selector
|
||||
|
||||
The only difference is that the light theme is also defined at the top-level: `:root` (equivalent to the `html` element, the ancestor of all HTML elements on a webpage). This ensures that a **default** value is set for all CSS variables.
|
||||
|
||||
The CSS output of that theme resembles the following:
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* CSS Variables */
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
/* CSS Variables */
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
/* CSS Variables */
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme=light],
|
||||
.theme-light {
|
||||
/* CSS Variables */
|
||||
}
|
||||
|
||||
[data-theme=dark],
|
||||
.theme-dark {
|
||||
/* CSS Variables */
|
||||
}
|
||||
```
|
||||
|
||||
## Creating a custom theme
|
||||
|
||||
Creating a theme is essentially **setting your own CSS variables**. A custom theme requires:
|
||||
|
||||
* a name like `sunrise`
|
||||
* a scope like `:root`, `[data-theme=sunrise]`, `.theme-sunrise` or all three
|
||||
* a set of CSS variables and their new value
|
||||
|
||||
### Customizing in the browser
|
||||
|
||||
If you set your CSS variables under the `:root` scope, you are **overwriting** Bulma's default theme. This can be done by with Sass or CSS.
|
||||
|
||||
To test out the CSS method, simply follow these steps:
|
||||
|
||||
{% include docs/elements/step.html image="images/themes/step-1-inspect.png" content="Open your browser inspector" width=496 height=748 %}
|
||||
{% include docs/elements/step.html image="images/themes/step-2-html.png" content="Select the `html` element" width=528 height=232 %}
|
||||
{% include docs/elements/step.html image="images/themes/step-3-var.png" content="Insert a new value for the `--bulma-link-h` variable (the hue of the link color)" width=376 height=120 %}
|
||||
{% include docs/elements/step.html image="images/themes/step-4-menu.png" content="Notice how the CSS Helpers section in the side menu changes color" width=480 height=256 %}
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Form
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: form
|
||||
hide_tabs: true
|
||||
hide_pagination: true
|
||||
@@ -9,5 +10,4 @@ breadcrumb:
|
||||
- documentation
|
||||
- form
|
||||
---
|
||||
|
||||
{% include components/links.html category_id='form' %}
|
||||
{% include docs/components/links.html category_id='form' %}
|
||||
|
||||
@@ -1,75 +1,72 @@
|
||||
---
|
||||
title: Checkbox
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: form
|
||||
doc-subtab: checkbox
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- form
|
||||
- form-checkbox
|
||||
- home
|
||||
- documentation
|
||||
- form
|
||||
- form-checkbox
|
||||
meta:
|
||||
colors: false
|
||||
sizes: false
|
||||
variables: false
|
||||
---
|
||||
|
||||
{% capture checkbox_example %}
|
||||
<label class="checkbox">
|
||||
<input type="checkbox">
|
||||
<input type="checkbox" />
|
||||
Remember me
|
||||
</label>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture checkbox_link_example %}
|
||||
<label class="checkbox">
|
||||
<input type="checkbox">
|
||||
<input type="checkbox" />
|
||||
I agree to the <a href="#">terms and conditions</a>
|
||||
</label>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture checkbox_disabled_example %}
|
||||
<label class="checkbox" disabled>
|
||||
<input type="checkbox" disabled>
|
||||
<input type="checkbox" disabled />
|
||||
Save my preferences
|
||||
</label>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>checkbox</code> class is a simple wrapper around the <code><input type="checkbox"></code> HTML element. It is intentionally not styled, to preserve cross-browser compatibility and the user experience.
|
||||
The <code>checkbox</code> class is a simple wrapper around the <code><input type="checkbox"></code> HTML
|
||||
element. It is intentionally not styled, to preserve cross-browser compatibility and the user experience.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{checkbox_example}}
|
||||
</div>
|
||||
<div class="column is-half">{{ checkbox_example }}</div>
|
||||
<div class="column is-half bd-highlight-full">
|
||||
{% highlight html %}{{checkbox_example}}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- checkbox_example -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can add <strong>links</strong> to your checkbox, or even <strong>disable</strong> it.
|
||||
</p>
|
||||
<p>You can add <strong>links</strong> to your checkbox, or even <strong>disable</strong> it.</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{checkbox_link_example}}
|
||||
</div>
|
||||
<div class="column is-half">{{ checkbox_link_example }}</div>
|
||||
<div class="column is-half bd-highlight-full">
|
||||
{% highlight html %}{{checkbox_link_example}}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- checkbox_link_example -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{checkbox_disabled_example}}
|
||||
</div>
|
||||
<div class="column is-half">{{ checkbox_disabled_example }}</div>
|
||||
<div class="column is-half bd-highlight-full">
|
||||
{% highlight html %}{{checkbox_disabled_example}}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- checkbox_disabled_example -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,274 +1,218 @@
|
||||
---
|
||||
title: File upload
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: form
|
||||
doc-subtab: file
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- form
|
||||
- form-file
|
||||
- home
|
||||
- documentation
|
||||
- form
|
||||
- form-file
|
||||
file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
|
||||
variables_keys:
|
||||
- $file-border-color
|
||||
- $file-radius
|
||||
- $file-cta-background-color
|
||||
- $file-cta-color
|
||||
- $file-cta-hover-color
|
||||
- $file-cta-active-color
|
||||
- $file-name-border-color
|
||||
- $file-name-border-style
|
||||
- $file-name-border-width
|
||||
- $file-name-max-width
|
||||
- $file-border-color
|
||||
- $file-radius
|
||||
- $file-cta-background-color
|
||||
- $file-cta-color
|
||||
- $file-cta-hover-color
|
||||
- $file-cta-active-color
|
||||
- $file-name-border-color
|
||||
- $file-name-border-style
|
||||
- $file-name-border-width
|
||||
- $file-name-max-width
|
||||
meta:
|
||||
experimental: true
|
||||
colors: true
|
||||
sizes: true
|
||||
variables: true
|
||||
---
|
||||
|
||||
{% capture file %}
|
||||
<div class="file">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<input class="file-input" type="file" name="resume" />
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Choose a file…
|
||||
</span>
|
||||
<span class="file-label"> Choose a file… </span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_name %}
|
||||
<div class="file has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<input class="file-input" type="file" name="resume" />
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Choose a file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
<span class="file-label"> Choose a file… </span>
|
||||
</span>
|
||||
<span class="file-name"> {{ page.file_name }} </span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_name_right %}
|
||||
<div class="file has-name is-right">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<input class="file-input" type="file" name="resume" />
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Choose a file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
<span class="file-label"> Choose a file… </span>
|
||||
</span>
|
||||
<span class="file-name"> {{ page.file_name }} </span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_name_fullwidth %}
|
||||
<div class="file has-name is-fullwidth">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<input class="file-input" type="file" name="resume" />
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Choose a file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
<span class="file-label"> Choose a file… </span>
|
||||
</span>
|
||||
<span class="file-name"> {{ page.file_name }} </span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_boxed %}
|
||||
<div class="file is-boxed">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<input class="file-input" type="file" name="resume" />
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Choose a file…
|
||||
</span>
|
||||
<span class="file-label"> Choose a file… </span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_boxed_name %}
|
||||
<div class="file has-name is-boxed">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<input class="file-input" type="file" name="resume" />
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Choose a file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
<span class="file-label"> Choose a file… </span>
|
||||
</span>
|
||||
<span class="file-name"> {{ page.file_name }} </span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_colors_a %}
|
||||
<div class="file is-primary">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<input class="file-input" type="file" name="resume" />
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Primary file…
|
||||
</span>
|
||||
<span class="file-label"> Primary file… </span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_colors_b %}
|
||||
<div class="file is-info has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<input class="file-input" type="file" name="resume" />
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Info file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
<span class="file-label"> Info file… </span>
|
||||
</span>
|
||||
<span class="file-name"> {{ page.file_name }} </span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_colors_c %}
|
||||
<div class="file is-warning is-boxed">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<input class="file-input" type="file" name="resume" />
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-cloud-upload-alt"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Warning file…
|
||||
</span>
|
||||
<span class="file-label"> Warning file… </span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_colors_d %}
|
||||
<div class="file is-danger has-name is-boxed">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<input class="file-input" type="file" name="resume" />
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-cloud-upload-alt"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Danger file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
<span class="file-label"> Danger file… </span>
|
||||
</span>
|
||||
<span class="file-name"> {{ page.file_name }} </span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_centered %}
|
||||
<div class="file is-centered is-boxed is-success has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<input class="file-input" type="file" name="resume" />
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Centered file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
<span class="file-label"> Centered file… </span>
|
||||
</span>
|
||||
<span class="file-name"> {{ page.file_name }} </span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_right %}
|
||||
<div class="file is-right is-info">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<input class="file-input" type="file" name="resume" />
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Right file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
<span class="file-label"> Right file… </span>
|
||||
</span>
|
||||
<span class="file-name"> {{ page.file_name }} </span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_javascript %}
|
||||
<div id="file-js-example" class="file has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<input class="file-input" type="file" name="resume" />
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Choose a file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
No file uploaded
|
||||
<span class="file-label"> Choose a file… </span>
|
||||
</span>
|
||||
<span class="file-name"> No file uploaded </span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const fileInput = document.querySelector('#file-js-example input[type=file]');
|
||||
const fileInput = document.querySelector("#file-js-example input[type=file]");
|
||||
fileInput.onchange = () => {
|
||||
if (fileInput.files.length > 0) {
|
||||
const fileName = document.querySelector('#file-js-example .file-name');
|
||||
const fileName = document.querySelector("#file-js-example .file-name");
|
||||
fileName.textContent = fileInput.files[0].name;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
{% endcapture %}
|
||||
|
||||
@@ -276,7 +220,8 @@ meta:
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>file</code> element is a simple <strong>interactive label</strong> that wraps an <code><input type="file"></code>. It comprises several sub-elements:
|
||||
The <code>file</code> element is a simple <strong>interactive label</strong> that wraps an
|
||||
<code><input type="file"></code>. It comprises several sub-elements:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
@@ -285,23 +230,15 @@ meta:
|
||||
<li>
|
||||
<code>file-label</code> the actual <strong>interactive</strong> and clickable part of the element
|
||||
<ul>
|
||||
<li>
|
||||
<code>file-input</code> the <strong>native</strong> file input, hidden for styling purposes
|
||||
</li>
|
||||
<li><code>file-input</code> the <strong>native</strong> file input, hidden for styling purposes</li>
|
||||
<li>
|
||||
<code>file-cta</code> the upload <strong>call-to-action</strong>
|
||||
<ul>
|
||||
<li>
|
||||
<code>file-icon</code> an optional <strong>upload</strong> icon
|
||||
</li>
|
||||
<li>
|
||||
<code>file-label</code> the "Choose a file…" text
|
||||
</li>
|
||||
<li><code>file-icon</code> an optional <strong>upload</strong> icon</li>
|
||||
<li><code>file-label</code> the "Choose a file…" text</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<code>file-name</code> a container for the <strong>chosen file</strong> name
|
||||
</li>
|
||||
<li><code>file-name</code> a container for the <strong>chosen file</strong> name</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -309,39 +246,37 @@ meta:
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=file %}
|
||||
|
||||
{% include elements/anchor.html name="Modifiers" %}
|
||||
{% include docs/elements/snippet.html content=file %}
|
||||
{% include docs/elements/anchor.html name="Modifiers" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-6">
|
||||
<div class="content">
|
||||
<p>
|
||||
With the <code>has-name</code> modifier combined with the <code>file-name</code> element, you can add a <strong>placeholder</strong> for the selected file name.
|
||||
With the <code>has-name</code> modifier combined with the <code>file-name</code> element, you can add a
|
||||
<strong>placeholder</strong> for the selected file name.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{ file_name }}
|
||||
</div>
|
||||
<div class="bd-example">{{ file_name }}</div>
|
||||
</div>
|
||||
<div class="column is-6 bd-highlight-full">
|
||||
{% highlight html %}{{ file_name }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- file_name -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-6">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can move the CTA to the <strong>right side</strong> with the <code>is-right</code> modifier.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{ file_name_right }}
|
||||
<p>You can move the CTA to the <strong>right side</strong> with the <code>is-right</code> modifier.</p>
|
||||
</div>
|
||||
<div class="bd-example">{{ file_name_right }}</div>
|
||||
</div>
|
||||
<div class="column is-6 bd-highlight-full">
|
||||
{% highlight html %}{{ file_name_right }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- file_name_right -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -352,52 +287,49 @@ meta:
|
||||
You can also <strong>expand</strong> the name to fill up the space with the <code>is-fullwidth</code> modifier.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{ file_name_fullwidth }}
|
||||
</div>
|
||||
<div class="bd-example">{{ file_name_fullwidth }}</div>
|
||||
</div>
|
||||
<div class="column is-6 bd-highlight-full">
|
||||
{% highlight html %}{{ file_name_fullwidth }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- file_name_fullwidth -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-6">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can have a <strong>boxed block</strong> with the <code>is-boxed</code> modifier.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{ file_boxed }}
|
||||
<p>You can have a <strong>boxed block</strong> with the <code>is-boxed</code> modifier.</p>
|
||||
</div>
|
||||
<div class="bd-example">{{ file_boxed }}</div>
|
||||
</div>
|
||||
<div class="column is-6 bd-highlight-full">
|
||||
{% highlight html %}{{ file_boxed }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- file_boxed -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-6">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can <strong>combine</strong> <code>has-name</code> and <code>is-boxed</code>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bd-example">
|
||||
{{ file_boxed_name }}
|
||||
<p>You can <strong>combine</strong> <code>has-name</code> and <code>is-boxed</code>.</p>
|
||||
</div>
|
||||
<div class="bd-example">{{ file_boxed_name }}</div>
|
||||
</div>
|
||||
<div class="column is-6 bd-highlight-full">
|
||||
{% highlight html %}{{ file_boxed_name }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- file_boxed_name -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Colors" %}
|
||||
{% include docs/elements/anchor.html name="Colors" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can style the file element by appending one of the <strong>{{ site.data.colors.derived | size }} color modifiers</strong>:
|
||||
You can style the file element by appending one of the
|
||||
<strong>{{ site.data.colors.derived | size }} color modifiers</strong>:
|
||||
</p>
|
||||
<ul>
|
||||
{% for color in site.data.colors.derived %}
|
||||
@@ -408,24 +340,19 @@ meta:
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=file_colors_a %}
|
||||
{% include elements/snippet.html content=file_colors_b %}
|
||||
{% include elements/snippet.html content=file_colors_c %}
|
||||
{% include elements/snippet.html content=file_colors_d %}
|
||||
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
{% include docs/elements/snippet.html content=file_colors_a %}
|
||||
{% include docs/elements/snippet.html content=file_colors_b %}
|
||||
{% include docs/elements/snippet.html content=file_colors_c %}
|
||||
{% include docs/elements/snippet.html content=file_colors_d %}
|
||||
{% include docs/elements/anchor.html name="Sizes" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can append one of the <strong>4 available sizes</strong>:
|
||||
</p>
|
||||
<p>You can append one of the <strong>4 available sizes</strong>:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>is-small</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>is-normal</code> (default)
|
||||
</li>
|
||||
<li><code>is-normal</code> (default)</li>
|
||||
<li>
|
||||
<code>is-medium</code>
|
||||
</li>
|
||||
@@ -436,121 +363,94 @@ meta:
|
||||
</div>
|
||||
|
||||
{% for size in site.data.sizes %}
|
||||
{% capture foobar %}
|
||||
{% capture foobar %}
|
||||
<div class="file is-{{ size }}">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<input class="file-input" type="file" name="resume" />
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
{{ size | capitalize }} file…
|
||||
</span>
|
||||
<span class="file-label"> {{ size | capitalize }} file… </span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% include docs/elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% for size in site.data.sizes %}
|
||||
{% capture foobar %}
|
||||
{% capture foobar %}
|
||||
<div class="file is-{{ size }} has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<input class="file-input" type="file" name="resume" />
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
{{ size | capitalize }} file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
<span class="file-label"> {{ size | capitalize }} file… </span>
|
||||
</span>
|
||||
<span class="file-name"> {{ page.file_name }} </span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% include docs/elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% for size in site.data.sizes %}
|
||||
{% capture foobar %}
|
||||
{% capture foobar %}
|
||||
<div class="file is-{{ size }} is-boxed">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<input class="file-input" type="file" name="resume" />
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
{{ size | capitalize }} file…
|
||||
</span>
|
||||
<span class="file-label"> {{ size | capitalize }} file… </span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% include docs/elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% for size in site.data.sizes %}
|
||||
{% capture foobar %}
|
||||
{% capture foobar %}
|
||||
<div class="file is-{{ size }} is-boxed has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<input class="file-input" type="file" name="resume" />
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
{{ size | capitalize }} file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
<span class="file-label"> {{ size | capitalize }} file… </span>
|
||||
</span>
|
||||
<span class="file-name"> {{ page.file_name }} </span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% include docs/elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% include elements/anchor.html name="Alignment" %}
|
||||
{% include docs/elements/anchor.html name="Alignment" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can <strong>align</strong> the file input:
|
||||
</p>
|
||||
<p>You can <strong>align</strong> the file input:</p>
|
||||
<ul>
|
||||
<li>
|
||||
to the <strong>center</strong> with the <code>is-centered</code> modifier
|
||||
</li>
|
||||
<li>
|
||||
to the <strong>right</strong> with the <code>is-right</code> modifier
|
||||
</li>
|
||||
<li>to the <strong>center</strong> with the <code>is-centered</code> modifier</li>
|
||||
<li>to the <strong>right</strong> with the <code>is-right</code> modifier</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=file_centered %}
|
||||
|
||||
{% include elements/snippet.html content=file_right %}
|
||||
|
||||
{% include elements/anchor.html name="JavaScript" %}
|
||||
{% include docs/elements/snippet.html content=file_centered %}
|
||||
{% include docs/elements/snippet.html content=file_right %}
|
||||
{% include docs/elements/anchor.html name="JavaScript" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
A file upload input requires JavaScript to <strong>retrieve</strong> the <strong>selected file name</strong>.
|
||||
Here is an example of how this could be done:
|
||||
A file upload input requires JavaScript to <strong>retrieve</strong> the <strong>selected file name</strong>. Here
|
||||
is an example of how this could be done:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html horizontal=true content=file_javascript %}
|
||||
|
||||
{% include components/variables.html
|
||||
type='element'
|
||||
variables_keys=page.variables_keys
|
||||
folder='elements'
|
||||
file='form'
|
||||
{% include docs/elements/snippet.html horizontal=true content=file_javascript %}
|
||||
{%
|
||||
include docs/components/variables.html type='element'
|
||||
variables_keys=page.variables_keys folder='elements' file='form'
|
||||
%}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Form controls
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: form
|
||||
doc-subtab: general
|
||||
breadcrumb:
|
||||
@@ -18,7 +19,6 @@ variables_keys:
|
||||
- $label-weight
|
||||
- $help-size
|
||||
---
|
||||
|
||||
{% capture example %}
|
||||
<div class="field">
|
||||
<label class="label">Name</label>
|
||||
@@ -345,9 +345,9 @@ variables_keys:
|
||||
<input class="input" type="text" placeholder="Find a repository">
|
||||
</div>
|
||||
<div class="control">
|
||||
<a class="button is-info">
|
||||
<button class="button is-info">
|
||||
Search
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
@@ -380,9 +380,9 @@ variables_keys:
|
||||
<input class="input" type="text" placeholder="Amount of money">
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button">
|
||||
<button class="button">
|
||||
Transfer
|
||||
</a>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -400,9 +400,9 @@ variables_keys:
|
||||
<input class="input" type="text" placeholder="Amount of money">
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button">
|
||||
<button class="button">
|
||||
Transfer
|
||||
</a>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
@@ -448,9 +448,9 @@ variables_keys:
|
||||
<input class="input" type="text" placeholder="Amount of money">
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary">
|
||||
<button class="button is-primary">
|
||||
Transfer
|
||||
</a>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
@@ -470,9 +470,9 @@ variables_keys:
|
||||
<input class="input" type="text" placeholder="Amount of money">
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary">
|
||||
<button class="button is-primary">
|
||||
Transfer
|
||||
</a>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
@@ -480,9 +480,9 @@ variables_keys:
|
||||
{% capture group_example %}
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a class="button is-primary">
|
||||
<button class="button is-primary">
|
||||
Submit
|
||||
</a>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-light">
|
||||
@@ -495,9 +495,9 @@ variables_keys:
|
||||
{% capture group_centered_example %}
|
||||
<div class="field is-grouped is-grouped-centered">
|
||||
<p class="control">
|
||||
<a class="button is-primary">
|
||||
<button class="button is-primary">
|
||||
Submit
|
||||
</a>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-light">
|
||||
@@ -510,9 +510,9 @@ variables_keys:
|
||||
{% capture group_right_example %}
|
||||
<div class="field is-grouped is-grouped-right">
|
||||
<p class="control">
|
||||
<a class="button is-primary">
|
||||
<button class="button is-primary">
|
||||
Submit
|
||||
</a>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-light">
|
||||
@@ -528,9 +528,9 @@ variables_keys:
|
||||
<input class="input" type="text" placeholder="Find a repository">
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-info">
|
||||
<button class="button is-info">
|
||||
Search
|
||||
</a>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
@@ -538,69 +538,69 @@ variables_keys:
|
||||
{% capture group_multiline_example %}
|
||||
<div class="field is-grouped is-grouped-multiline">
|
||||
<p class="control">
|
||||
<a class="button">
|
||||
<button class="button">
|
||||
One
|
||||
</a>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button">
|
||||
<button class="button">
|
||||
Two
|
||||
</a>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button">
|
||||
<button class="button">
|
||||
Three
|
||||
</a>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button">
|
||||
<button class="button">
|
||||
Four
|
||||
</a>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button">
|
||||
<button class="button">
|
||||
Five
|
||||
</a>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button">
|
||||
<button class="button">
|
||||
Six
|
||||
</a>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button">
|
||||
<button class="button">
|
||||
Seven
|
||||
</a>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button">
|
||||
<button class="button">
|
||||
Eight
|
||||
</a>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button">
|
||||
<button class="button">
|
||||
Nine
|
||||
</a>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button">
|
||||
<button class="button">
|
||||
Ten
|
||||
</a>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button">
|
||||
<button class="button">
|
||||
Eleven
|
||||
</a>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button">
|
||||
<button class="button">
|
||||
Twelve
|
||||
</a>
|
||||
</button>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button">
|
||||
<button class="button">
|
||||
Thirteen
|
||||
</a>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
@@ -814,11 +814,10 @@ variables_keys:
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Bulma supports the following native <strong>HTML form elements</strong>: <code><form></code> <code><button></code> <code><input></code> <code><textarea></code> and <code><label></code>.
|
||||
</p>
|
||||
<p>
|
||||
The following CSS <strong>classes</strong> are supported:
|
||||
Bulma supports the following native <strong>HTML form elements</strong>: <code><form></code>
|
||||
<code><button></code> <code><input></code> <code><textarea></code> and <code><label></code>.
|
||||
</p>
|
||||
<p>The following CSS <strong>classes</strong> are supported:</p>
|
||||
<ul>
|
||||
<li><code>label</code></li>
|
||||
<li><code>input</code></li>
|
||||
@@ -833,15 +832,17 @@ variables_keys:
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
To maintain an evenly balanced design, Bulma provides a very useful <code>control</code> container with which you can <strong>wrap</strong> the form controls.
|
||||
To maintain an evenly balanced design, Bulma provides a very useful <code>control</code> container with which you
|
||||
can <strong>wrap</strong> the form controls.
|
||||
<br>
|
||||
When combining several controls in a <strong>form</strong>, use the <code>field</code> class as a <strong>container</strong>, to keep the spacing consistent.
|
||||
When combining several controls in a <strong>form</strong>, use the <code>field</code> class as a
|
||||
<strong>container</strong>, to keep the spacing consistent.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Complete form example" %}
|
||||
{% include docs/elements/anchor.html name="Complete form example" %}
|
||||
|
||||
{% include elements/snippet.html content=example more=true %}
|
||||
{% include docs/elements/snippet.html content=example more=true %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -849,7 +850,7 @@ variables_keys:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Form field" %}
|
||||
{% include docs/elements/anchor.html name="Form field" %}
|
||||
|
||||
<div class="content">
|
||||
<p>The <code>field</code> container is a simple container for:</p>
|
||||
@@ -860,19 +861,21 @@ variables_keys:
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=field_example %}
|
||||
{% include docs/elements/snippet.html content=field_example %}
|
||||
|
||||
<div class="content">
|
||||
<p>This container allows form fields to be <strong>spaced consistently</strong>.</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=fields_example %}
|
||||
{% include docs/elements/snippet.html content=fields_example %}
|
||||
|
||||
{% include elements/anchor.html name="Form control" %}
|
||||
{% include docs/elements/anchor.html name="Form control" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The Bulma <code>control</code> is a versatile <strong>block</strong> container meant to <strong>enhance single form controls</strong>. Because it has the same height as the element that it wraps, it can <strong class="has-text-danger">only contain</strong> the following Bulma elements:
|
||||
The Bulma <code>control</code> is a versatile <strong>block</strong> container meant to
|
||||
<strong>enhance single form controls</strong>. Because it has the same height as the element that it wraps, it can
|
||||
<strong class="has-text-danger">only contain</strong> the following Bulma elements:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
@@ -881,33 +884,23 @@ variables_keys:
|
||||
<li><code>button</code></li>
|
||||
<li><code>icon</code></li>
|
||||
</ul>
|
||||
<p>
|
||||
This container gives the ability to:
|
||||
</p>
|
||||
<p>This container gives the ability to:</p>
|
||||
<ul>
|
||||
<li>
|
||||
keep the <strong>spacing</strong> consistent
|
||||
</li>
|
||||
<li>
|
||||
combine form controls into a <strong>group</strong>
|
||||
</li>
|
||||
<li>
|
||||
combine form controls into a <strong>list</strong>
|
||||
</li>
|
||||
<li>
|
||||
append and prepend <strong>icons</strong> to a form control
|
||||
</li>
|
||||
<li>keep the <strong>spacing</strong> consistent</li>
|
||||
<li>combine form controls into a <strong>group</strong></li>
|
||||
<li>combine form controls into a <strong>list</strong></li>
|
||||
<li>append and prepend <strong>icons</strong> to a form control</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=control_input_example %}
|
||||
{% include docs/elements/snippet.html content=control_input_example %}
|
||||
|
||||
{% include elements/snippet.html content=control_select_example %}
|
||||
{% include docs/elements/snippet.html content=control_select_example %}
|
||||
|
||||
{% include elements/snippet.html content=control_button_example %}
|
||||
{% include docs/elements/snippet.html content=control_button_example %}
|
||||
|
||||
<!-- Font Awesome Icons -->
|
||||
{% include elements/anchor.html name="With icons" %}
|
||||
{% include docs/elements/anchor.html name="With icons" %}
|
||||
|
||||
<div class="content">
|
||||
<p>You can append one of 2 <strong>modifiers</strong> on a control:</p>
|
||||
@@ -915,118 +908,130 @@ variables_keys:
|
||||
<li>
|
||||
<code>has-icons-left</code>
|
||||
</li>
|
||||
<li>
|
||||
and/or <code>has-icons-right</code>
|
||||
</li>
|
||||
<li>and/or <code>has-icons-right</code></li>
|
||||
</ul>
|
||||
<p>You also need to add a modifier on the <strong>icon</strong>:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>icon is-left</code> if <code>has-icons-left</code> is used
|
||||
</li>
|
||||
<li>
|
||||
<code>icon is-right</code> if <code>has-icons-right</code> is used
|
||||
</li>
|
||||
<li><code>icon is-left</code> if <code>has-icons-left</code> is used</li>
|
||||
<li><code>icon is-right</code> if <code>has-icons-right</code> is used</li>
|
||||
</ul>
|
||||
<p>The size of the <strong>input</strong> will define the size of the icon container.</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=icons_example clipped=true %}
|
||||
{% include docs/elements/snippet.html content=icons_example clipped=true %}
|
||||
|
||||
<div class="content">
|
||||
<p>You can append icons to <strong>select dropdowns</strong> as well.</p>
|
||||
</div>
|
||||
|
||||
{% include docs/elements/snippet.html content=select_icons_example %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can append icons to <strong>select dropdowns</strong> as well.
|
||||
If the control contains an icon, Bulma will make sure the icon remains <strong>centered</strong>, no matter the size
|
||||
of the input <em>or</em> of the icon.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=select_icons_example %}
|
||||
{% include docs/elements/snippet.html content=has_icons_small_example %}
|
||||
|
||||
{% include docs/elements/snippet.html content=has_icons_normal_example clipped=true %}
|
||||
|
||||
{% include docs/elements/snippet.html content=has_icons_medium_example clipped=true %}
|
||||
|
||||
{% include docs/elements/snippet.html content=has_icons_large_example clipped=true %}
|
||||
|
||||
{% include docs/elements/anchor.html name="Form addons" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
If the control contains an icon, Bulma will make sure the icon remains <strong>centered</strong>, no matter the size of the input <em>or</em> of the icon.
|
||||
If you want to <strong>attach controls</strong> together, use the <code>has-addons</code> modifier on the
|
||||
<code>field</code> container:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=has_icons_small_example %}
|
||||
|
||||
{% include elements/snippet.html content=has_icons_normal_example clipped=true %}
|
||||
|
||||
{% include elements/snippet.html content=has_icons_medium_example clipped=true %}
|
||||
|
||||
{% include elements/snippet.html content=has_icons_large_example clipped=true %}
|
||||
|
||||
{% include elements/anchor.html name="Form addons" %}
|
||||
|
||||
<div class="content">
|
||||
<p>If you want to <strong>attach controls</strong> together, use the <code>has-addons</code> modifier on the <code>field</code> container:</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=addons_example %}
|
||||
{% include docs/elements/snippet.html content=addons_example %}
|
||||
|
||||
<div class="content">
|
||||
<p>You can attach inputs, buttons, and dropdowns <strong>only</strong>.</p>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>It can be useful to append a <a href="{{site.url}}/documentation/elements/button#static-button">static button</a>.</p>
|
||||
<p>
|
||||
It can be useful to append a <a href="{{site.url}}/documentation/elements/button#static-button">static button</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=addons_static_example %}
|
||||
|
||||
<div class="content">
|
||||
<p>Use the <code>is-expanded</code> modifier on the element you want to fill up the remaining space (in this case, the input):</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=addons_expanded_example horizontal=true more=true %}
|
||||
|
||||
<div class="content">
|
||||
<p>If you want a full width select dropdown, pair <code>control is-expanded</code> with <code>select is-fullwidth</code>.</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=addons_expanded_fullwidth_example %}
|
||||
|
||||
<div class="content">
|
||||
<p>Use the <code>has-addons-centered</code> or the <code>has-addons-right</code> modifiers to alter the <strong>alignment</strong>.</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=addons_center_example %}
|
||||
|
||||
{% include elements/snippet.html content=addons_right_example %}
|
||||
|
||||
{% include elements/anchor.html name="Form group" %}
|
||||
{% include docs/elements/snippet.html content=addons_static_example %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
If you want to <strong>group</strong> controls together, use the <code>is-grouped</code> modifier on the <code>field</code> container.
|
||||
Use the <code>is-expanded</code> modifier on the element you want to fill up the remaining space (in this case, the
|
||||
input):
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=group_example %}
|
||||
|
||||
<div class="content">
|
||||
Use the <code>is-grouped-centered</code> or the <code>is-grouped-right</code> modifiers to alter the <strong>alignment</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=group_centered_example %}
|
||||
|
||||
{% include elements/snippet.html content=group_right_example %}
|
||||
{% include docs/elements/snippet.html content=addons_expanded_example horizontal=true more=true %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Add the <code>is-expanded</code> modifier on the control element you want to <strong>fill up the remaining space</strong> with.
|
||||
If you want a full width select dropdown, pair <code>control is-expanded</code> with
|
||||
<code>select is-fullwidth</code>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=group_expanded_example %}
|
||||
{% include docs/elements/snippet.html content=addons_expanded_fullwidth_example %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Use the <code>has-addons-centered</code> or the <code>has-addons-right</code> modifiers to alter the
|
||||
<strong>alignment</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include docs/elements/snippet.html content=addons_center_example %}
|
||||
|
||||
{% include docs/elements/snippet.html content=addons_right_example %}
|
||||
|
||||
{% include docs/elements/anchor.html name="Form group" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
If you want to <strong>group</strong> controls together, use the <code>is-grouped</code> modifier on the
|
||||
<code>field</code> container.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include docs/elements/snippet.html content=group_example %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Use the <code>is-grouped-centered</code> or the <code>is-grouped-right</code> modifiers to alter the
|
||||
<strong>alignment</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include docs/elements/snippet.html content=group_centered_example %}
|
||||
|
||||
{% include docs/elements/snippet.html content=group_right_example %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Add the <code>is-expanded</code> modifier on the control element you want to
|
||||
<strong>fill up the remaining space</strong> with.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include docs/elements/snippet.html content=group_expanded_example %}
|
||||
|
||||
<div id="form-group-multiline" class="content">
|
||||
<p>
|
||||
Add the <code>is-grouped-multiline</code> modifier to allow controls to fill up <strong>multiple lines</strong>. This is ideal for a long list of controls.
|
||||
Add the <code>is-grouped-multiline</code> modifier to allow controls to fill up <strong>multiple lines</strong>.
|
||||
This is ideal for a long list of controls.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=group_multiline_example clipped=true %}
|
||||
{% include docs/elements/snippet.html content=group_multiline_example clipped=true %}
|
||||
|
||||
<div class="message is-info">
|
||||
<div class="message-header">
|
||||
@@ -1035,40 +1040,39 @@ variables_keys:
|
||||
<div class="message-body">
|
||||
<div class="content">
|
||||
<p>
|
||||
If you only need a list of <em>buttons</em>, try out the new <code>buttons</code> class with which you can create a <a href="{{ site.url }}/documentation/elements/button/#list-of-buttons">multiline list of buttons</a>.
|
||||
If you only need a list of <em>buttons</em>, try out the new <code>buttons</code> class with which you can
|
||||
create a <a href="{{ site.url }}/documentation/elements/button/#list-of-buttons">multiline list of buttons</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Horizontal form" %}
|
||||
{% include docs/elements/anchor.html name="Horizontal form" %}
|
||||
|
||||
<div class="content">
|
||||
<p>If you want a <strong>horizontal</strong> form control, use the <code>is-horizontal</code> modifier on the <code>field</code> container, in which you include:</p>
|
||||
<p>
|
||||
If you want a <strong>horizontal</strong> form control, use the <code>is-horizontal</code> modifier on the
|
||||
<code>field</code> container, in which you include:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>field-label</code> for the side label
|
||||
</li>
|
||||
<li>
|
||||
<code>field-body</code> for the input/select/textarea container
|
||||
</li>
|
||||
<li><code>field-label</code> for the side label</li>
|
||||
<li><code>field-body</code> for the input/select/textarea container</li>
|
||||
</ul>
|
||||
<p>You can use <code>is-grouped</code> or <code>has-addons</code> for the child elements.</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=horizontal_form_example horizontal=true more=true %}
|
||||
{% include docs/elements/snippet.html content=horizontal_form_example horizontal=true more=true %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
To preserve the <strong>vertical alignment</strong> of labels with each type and size of control, the <code>field-label</code> comes with <strong>4 size modifiers</strong>:
|
||||
To preserve the <strong>vertical alignment</strong> of labels with each type and size of control, the
|
||||
<code>field-label</code> comes with <strong>4 size modifiers</strong>:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>is-small</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>is-normal</code> for any <code>input</code> or <code>button</code>
|
||||
</li>
|
||||
<li><code>is-normal</code> for any <code>input</code> or <code>button</code></li>
|
||||
<li>
|
||||
<code>is-medium</code>
|
||||
</li>
|
||||
@@ -1078,23 +1082,25 @@ variables_keys:
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=field_label_example horizontal=true more=true %}
|
||||
{% include docs/elements/snippet.html content=field_label_example horizontal=true more=true %}
|
||||
|
||||
{% capture custom_message %}
|
||||
Form elements can be <strong>customized</strong> using the following generic variables. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/anchor.html name="Disabled form" %}
|
||||
{% include docs/elements/anchor.html name="Disabled form" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can disable part or a whole form by wrapping a set of controls in a <strong>fieldset</strong> with a <code>disabled</code> HTML attribute.
|
||||
You can disable part or a whole form by wrapping a set of controls in a <strong>fieldset</strong> with a
|
||||
<code>disabled</code> HTML attribute.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=disabled_fields_example %}
|
||||
{% include docs/elements/snippet.html content=disabled_fields_example %}
|
||||
|
||||
{% include components/variables.html
|
||||
{%
|
||||
include docs/components/variables.html
|
||||
anchor_name='Control variables'
|
||||
type='element'
|
||||
variables_keys=page.variables_control_keys
|
||||
@@ -1103,7 +1109,8 @@ variables_keys:
|
||||
file='controls'
|
||||
%}
|
||||
|
||||
{% include components/variables.html
|
||||
{%
|
||||
include docs/components/variables.html
|
||||
anchor_name='Form variables'
|
||||
type='element'
|
||||
variables_keys=page.variables_keys
|
||||
|
||||
@@ -1,104 +1,107 @@
|
||||
---
|
||||
title: Input
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: form
|
||||
doc-subtab: input
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- form
|
||||
- form-input
|
||||
- home
|
||||
- documentation
|
||||
- form
|
||||
- form-input
|
||||
variables_keys:
|
||||
- $input-color
|
||||
- $input-background-color
|
||||
- $input-border-color
|
||||
- $input-shadow
|
||||
- $input-hover-color
|
||||
- $input-hover-border-color
|
||||
- $input-focus-color
|
||||
- $input-focus-border-color
|
||||
- $input-focus-box-shadow-size
|
||||
- $input-focus-box-shadow-color
|
||||
- $input-disabled-color
|
||||
- $input-disabled-background-color
|
||||
- $input-disabled-border-color
|
||||
- $input-arrow
|
||||
- $input-icon-color
|
||||
- $input-icon-active-color
|
||||
- $input-radius
|
||||
- $input-color
|
||||
- $input-background-color
|
||||
- $input-border-color
|
||||
- $input-shadow
|
||||
- $input-hover-color
|
||||
- $input-hover-border-color
|
||||
- $input-focus-color
|
||||
- $input-focus-border-color
|
||||
- $input-focus-box-shadow-size
|
||||
- $input-focus-box-shadow-color
|
||||
- $input-disabled-color
|
||||
- $input-disabled-background-color
|
||||
- $input-disabled-border-color
|
||||
- $input-arrow
|
||||
- $input-icon-color
|
||||
- $input-icon-active-color
|
||||
- $input-radius
|
||||
meta:
|
||||
colors: true
|
||||
sizes: true
|
||||
variables: true
|
||||
---
|
||||
|
||||
{% capture input_example %}
|
||||
<input class="input" type="text" placeholder="Text input">
|
||||
<input class="input" type="text" placeholder="Text input" />
|
||||
{% endcapture %}
|
||||
|
||||
{% capture rounded_example %}
|
||||
<input class="input is-rounded" type="text" placeholder="Rounded input">
|
||||
<input class="input is-rounded" type="text" placeholder="Rounded input" />
|
||||
{% endcapture %}
|
||||
|
||||
{% capture normal_example %}
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="Normal input">
|
||||
<input class="input" type="text" placeholder="Normal input" />
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture hover_example %}
|
||||
<div class="control">
|
||||
<input class="input is-hovered" type="text" placeholder="Hovered input">
|
||||
<input class="input is-hovered" type="text" placeholder="Hovered input" />
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture focus_example %}
|
||||
<div class="control">
|
||||
<input class="input is-focused" type="text" placeholder="Focused input">
|
||||
<input class="input is-focused" type="text" placeholder="Focused input" />
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture loading_example %}
|
||||
<div class="control is-loading">
|
||||
<input class="input" type="text" placeholder="Loading input">
|
||||
<input class="input" type="text" placeholder="Loading input" />
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture loading_sizes_example %}
|
||||
<div class="field">
|
||||
<div class="control is-small is-loading">
|
||||
<input class="input is-small" type="text" placeholder="Small loading input">
|
||||
<input
|
||||
class="input is-small"
|
||||
type="text"
|
||||
placeholder="Small loading input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control is-loading">
|
||||
<input class="input" type="text" placeholder="Normal loading input">
|
||||
<input class="input" type="text" placeholder="Normal loading input" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control is-medium is-loading">
|
||||
<input class="input is-medium" type="text" placeholder="Medium loading input">
|
||||
<input
|
||||
class="input is-medium"
|
||||
type="text"
|
||||
placeholder="Medium loading input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control is-large is-loading">
|
||||
<input class="input is-large" type="text" placeholder="Large loading input">
|
||||
<input
|
||||
class="input is-large"
|
||||
type="text"
|
||||
placeholder="Large loading input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture disabled_example %}
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="Disabled input" disabled>
|
||||
<input class="input" type="text" placeholder="Disabled input" disabled />
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture readonly_example %}
|
||||
<div class="control">
|
||||
<input class="input" type="text" value="This text is readonly" readonly>
|
||||
<input class="input" type="text" value="This text is readonly" readonly />
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture static_example %}
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label is-normal">
|
||||
@@ -107,7 +110,12 @@ meta:
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<input class="input is-static" type="email" value="me@example.com" readonly>
|
||||
<input
|
||||
class="input is-static"
|
||||
type="email"
|
||||
value="me@example.com"
|
||||
readonly
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -120,17 +128,16 @@ meta:
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<p class="control">
|
||||
<input class="input" type="email" placeholder="Recipient email">
|
||||
<input class="input" type="email" placeholder="Recipient email" />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture icons_example %}
|
||||
<div class="field">
|
||||
<p class="control has-icons-left has-icons-right">
|
||||
<input class="input" type="email" placeholder="Email">
|
||||
<input class="input" type="email" placeholder="Email" />
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-envelope"></i>
|
||||
</span>
|
||||
@@ -141,17 +148,16 @@ meta:
|
||||
</div>
|
||||
<div class="field">
|
||||
<p class="control has-icons-left">
|
||||
<input class="input" type="password" placeholder="Password">
|
||||
<input class="input" type="password" placeholder="Password" />
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-lock"></i>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture has_icons_small_example %}
|
||||
<div class="control has-icons-left has-icons-right">
|
||||
<input class="input is-small" type="email" placeholder="Email">
|
||||
<input class="input is-small" type="email" placeholder="Email" />
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-envelope"></i>
|
||||
</span>
|
||||
@@ -160,10 +166,9 @@ meta:
|
||||
</span>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture has_icons_normal_example %}
|
||||
<div class="control has-icons-left has-icons-right">
|
||||
<input class="input" type="email" placeholder="Email">
|
||||
<input class="input" type="email" placeholder="Email" />
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-envelope"></i>
|
||||
</span>
|
||||
@@ -172,10 +177,9 @@ meta:
|
||||
</span>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture has_icons_medium_example %}
|
||||
<div class="control has-icons-left has-icons-right">
|
||||
<input class="input is-medium" type="email" placeholder="Email">
|
||||
<input class="input is-medium" type="email" placeholder="Email" />
|
||||
<span class="icon is-left">
|
||||
<i class="fas fa-envelope"></i>
|
||||
</span>
|
||||
@@ -184,10 +188,9 @@ meta:
|
||||
</span>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture has_icons_large_example %}
|
||||
<div class="control has-icons-left has-icons-right">
|
||||
<input class="input is-large" type="email" placeholder="Email">
|
||||
<input class="input is-large" type="email" placeholder="Email" />
|
||||
<span class="icon is-medium is-left">
|
||||
<i class="fas fa-envelope"></i>
|
||||
</span>
|
||||
@@ -199,7 +202,9 @@ meta:
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The Bulma <code>input</code> CSS class is meant for <code><input></code> HTML elements. The following <a href="http://htmlreference.io/element/input/" target="_blank">type attributes</a> are supported:
|
||||
The Bulma <code>input</code> CSS class is meant for <code><input></code> HTML elements. The following
|
||||
<a href="http://htmlreference.io/element/input/" target="_blank">type attributes</a>
|
||||
are supported:
|
||||
</p>
|
||||
<ul>
|
||||
<li><code>type="text"</code></li>
|
||||
@@ -207,97 +212,105 @@ meta:
|
||||
<li><code>type="email"</code></li>
|
||||
<li><code>type="tel"</code></li>
|
||||
</ul>
|
||||
<p>
|
||||
Several <strong>modifiers</strong> are supported which affect:
|
||||
</p>
|
||||
<p>Several <strong>modifiers</strong> are supported which affect:</p>
|
||||
<ul>
|
||||
<li>the <strong><a href="#colors">color</a></strong></li>
|
||||
<li>the <strong><a href="#sizes">size</a></strong></li>
|
||||
<li>the <strong><a href="#states">state</a></strong></li>
|
||||
<li>
|
||||
the <strong><a href="#colors">color</a></strong>
|
||||
</li>
|
||||
<li>
|
||||
the <strong><a href="#sizes">size</a></strong>
|
||||
</li>
|
||||
<li>
|
||||
the <strong><a href="#states">state</a></strong>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{input_example}}
|
||||
</div>
|
||||
<div class="column is-half">{{ input_example }}</div>
|
||||
<div class="column is-half bd-highlight-full">
|
||||
{% highlight html %}{{input_example}}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- input_example -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Colors" %}
|
||||
|
||||
{% include docs/elements/anchor.html name="Colors" %}
|
||||
{% for color in site.data.colors.justColors %}
|
||||
{% capture foobar %}
|
||||
<input class="input is-{{ color }}" type="text" placeholder="{{ color | capitalize }} input">
|
||||
{% capture foobar %}
|
||||
<input
|
||||
class="input is-{{ color }}"
|
||||
type="text"
|
||||
placeholder="{{ color | capitalize }} input"
|
||||
/>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% include docs/elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
|
||||
{% include docs/elements/anchor.html name="Sizes" %}
|
||||
{% for size in site.data.sizes %}
|
||||
{% capture foobar %}
|
||||
<input class="input is-{{ size }}" type="text" placeholder="{{ size | capitalize }} input">
|
||||
{% capture foobar %}
|
||||
<input
|
||||
class="input is-{{ size }}"
|
||||
type="text"
|
||||
placeholder="{{ size | capitalize }} input"
|
||||
/>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% include docs/elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% include elements/anchor.html name="Styles" %}
|
||||
{% include docs/elements/anchor.html name="Styles" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">{{ rounded_example }}</div>
|
||||
<div class="column is-half">
|
||||
{{ rounded_example }}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{ rounded_example }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- rounded_example -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="States" %}
|
||||
{% include docs/elements/anchor.html name="States" %}
|
||||
|
||||
<h4 class="title is-5">Normal</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">{{ normal_example }}</div>
|
||||
<div class="column is-half">
|
||||
{{normal_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{normal_example}}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- normal_example -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="title is-5">Hover</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">{{ hover_example }}</div>
|
||||
<div class="column is-half">
|
||||
{{hover_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{hover_example}}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- hover_example -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="title is-5">Focus</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">{{ focus_example }}</div>
|
||||
<div class="column is-half">
|
||||
{{focus_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{focus_example}}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- focus_example -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="title is-5">Loading</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">{{ loading_example }}</div>
|
||||
<div class="column is-half">
|
||||
{{loading_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{loading_example}}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- loading_example -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -305,58 +318,62 @@ meta:
|
||||
<div class="column is-half">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can resize the loading spinner by appending <code>is-small</code>, <code>is-medium</code> or <code>is-large</code> to the <code>control</code> container.
|
||||
You can resize the loading spinner by appending <code>is-small</code>, <code>is-medium</code> or
|
||||
<code>is-large</code> to the <code>control</code> container.
|
||||
</p>
|
||||
</div>
|
||||
{{loading_sizes_example}}
|
||||
{{ loading_sizes_example }}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{loading_sizes_example}}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- loading_sizes_example -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="title is-5">Disabled</h4>
|
||||
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">{{ disabled_example }}</div>
|
||||
<div class="column is-half">
|
||||
{{disabled_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{disabled_example}}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- disabled_example -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="title is-5">Readonly and static inputs</h4>
|
||||
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
If you use the <code>readonly</code> HTML attribute, the input will look similar to a normal one, but is not editable and has no shadow.
|
||||
If you use the <code>readonly</code> HTML attribute, the input will look similar to a normal one, but is not
|
||||
editable and has no shadow.
|
||||
</p>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-half">{{ readonly_example }}</div>
|
||||
<div class="column is-half">
|
||||
{{ readonly_example }}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{ readonly_example }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- readonly_example -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
If you <em>also</em> append the <code>is-static</code> modifier, it removes the background, border, shadow, and horizontal padding, while maintaining the <strong>vertical spacing</strong> so you can easily align the input in any context, like a horizontal form.
|
||||
If you <em>also</em> append the <code>is-static</code> modifier, it removes the background, border, shadow, and
|
||||
horizontal padding, while maintaining the <strong>vertical spacing</strong> so you can easily align the input in any
|
||||
context, like a horizontal form.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
{{ static_example }}
|
||||
</div>
|
||||
{% highlight html %}{{ static_example }}{% endhighlight %}
|
||||
<div class="bd-example">{{ static_example }}</div>
|
||||
{% highlight html -%}
|
||||
{{- static_example -}}
|
||||
{%- endhighlight %}
|
||||
|
||||
<!-- Font Awesome Icons -->
|
||||
{% include elements/anchor.html name="With Font Awesome icons" %}
|
||||
{% include docs/elements/anchor.html name="With Font Awesome icons" %}
|
||||
|
||||
<div class="content">
|
||||
<p>You can append one of 2 <strong>modifiers</strong> on a control:</p>
|
||||
@@ -364,27 +381,21 @@ meta:
|
||||
<li>
|
||||
<code>has-icons-left</code>
|
||||
</li>
|
||||
<li>
|
||||
and/or <code>has-icons-right</code>
|
||||
</li>
|
||||
<li>and/or <code>has-icons-right</code></li>
|
||||
</ul>
|
||||
<p>You also need to add a modifier on the <strong>icon</strong>:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>icon is-left</code> if <code>has-icons-left</code> is used
|
||||
</li>
|
||||
<li>
|
||||
<code>icon is-right</code> if <code>has-icons-right</code> is used
|
||||
</li>
|
||||
<li><code>icon is-left</code> if <code>has-icons-left</code> is used</li>
|
||||
<li><code>icon is-right</code> if <code>has-icons-right</code> is used</li>
|
||||
</ul>
|
||||
<p>The size of the <strong>input</strong> will define the size of the icon container.</p>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-half">{{ icons_example }}</div>
|
||||
<div class="column is-half">
|
||||
{{icons_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{icons_example}}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- icons_example -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -392,45 +403,47 @@ meta:
|
||||
<div class="column is-half">
|
||||
<div class="content">
|
||||
<p>
|
||||
If the control contains an icon, Bulma will make sure the icon remains <strong>centered</strong>, no matter the size of the input <em>or</em> of the icon.
|
||||
If the control contains an icon, Bulma will make sure the icon remains
|
||||
<strong>centered</strong>, no matter the size of the input <em>or</em> of the icon.
|
||||
</p>
|
||||
</div>
|
||||
{{has_icons_small_example}}
|
||||
{{ has_icons_small_example }}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{has_icons_small_example}}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- has_icons_small_example -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">{{ has_icons_normal_example }}</div>
|
||||
<div class="column is-half">
|
||||
{{has_icons_normal_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{has_icons_normal_example}}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- has_icons_normal_example -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">{{ has_icons_medium_example }}</div>
|
||||
<div class="column is-half">
|
||||
{{has_icons_medium_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{has_icons_medium_example}}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- has_icons_medium_example -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">{{ has_icons_large_example }}</div>
|
||||
<div class="column is-half">
|
||||
{{has_icons_large_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{has_icons_large_example}}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- has_icons_large_example -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include components/variables.html type='element'
|
||||
variables_keys=page.variables_keys
|
||||
folder='elements'
|
||||
file='form'
|
||||
{%
|
||||
include docs/components/variables.html type='element'
|
||||
variables_keys=page.variables_keys folder='elements' file='form'
|
||||
%}
|
||||
|
||||
@@ -1,57 +1,55 @@
|
||||
---
|
||||
title: Radio button
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: form
|
||||
doc-subtab: radio
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- form
|
||||
- form-radio
|
||||
- home
|
||||
- documentation
|
||||
- form
|
||||
- form-radio
|
||||
meta:
|
||||
colors: false
|
||||
sizes: false
|
||||
variables: false
|
||||
---
|
||||
|
||||
{% capture radio_example %}
|
||||
<div class="control">
|
||||
<label class="radio">
|
||||
<input type="radio" name="answer">
|
||||
<input type="radio" name="answer" />
|
||||
Yes
|
||||
</label>
|
||||
<label class="radio">
|
||||
<input type="radio" name="answer">
|
||||
<input type="radio" name="answer" />
|
||||
No
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture radio_default_example %}
|
||||
<div class="control">
|
||||
<label class="radio">
|
||||
<input type="radio" name="foobar">
|
||||
<input type="radio" name="foobar" />
|
||||
Foo
|
||||
</label>
|
||||
<label class="radio">
|
||||
<input type="radio" name="foobar" checked>
|
||||
<input type="radio" name="foobar" checked />
|
||||
Bar
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture radio_disabled_example %}
|
||||
<div class="control">
|
||||
<label class="radio">
|
||||
<input type="radio" name="rsvp">
|
||||
<input type="radio" name="rsvp" />
|
||||
Going
|
||||
</label>
|
||||
<label class="radio">
|
||||
<input type="radio" name="rsvp">
|
||||
<input type="radio" name="rsvp" />
|
||||
Not going
|
||||
</label>
|
||||
<label class="radio" disabled>
|
||||
<input type="radio" name="rsvp" disabled>
|
||||
<input type="radio" name="rsvp" disabled />
|
||||
Maybe
|
||||
</label>
|
||||
</div>
|
||||
@@ -59,7 +57,8 @@ meta:
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>radio</code> class is a simple wrapper around the <code><input type="radio"></code> HTML elements. It is intentionally not styled, to preserve cross-browser compatibility and the user experience.
|
||||
The <code>radio</code> class is a simple wrapper around the <code><input type="radio"></code> HTML elements.
|
||||
It is intentionally not styled, to preserve cross-browser compatibility and the user experience.
|
||||
</p>
|
||||
<p>
|
||||
Make sure the linked radio buttons have the <strong>same value</strong> for their <code>name</code> HTML attribute.
|
||||
@@ -67,40 +66,42 @@ meta:
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{radio_example}}
|
||||
</div>
|
||||
<div class="column is-half">{{ radio_example }}</div>
|
||||
<div class="column is-half bd-highlight-full">
|
||||
{% highlight html %}{{radio_example}}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- radio_example -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can check a radio button by <strong>default</strong> by adding the <code>checked</code> HTML attribute to the <code><input></code> element.
|
||||
You can check a radio button by <strong>default</strong> by adding the <code>checked</code> HTML attribute to the
|
||||
<code><input></code> element.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{radio_default_example}}
|
||||
</div>
|
||||
<div class="column is-half">{{ radio_default_example }}</div>
|
||||
<div class="column is-half bd-highlight-full">
|
||||
{% highlight html %}{{radio_default_example}}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- radio_default_example -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can <strong>disable</strong> a radio button by adding the <code>disabled</code> HTML attribute to both the <code><label></code> and the <code><input></code>.
|
||||
You can <strong>disable</strong> a radio button by adding the <code>disabled</code> HTML attribute to both the
|
||||
<code><label></code> and the <code><input></code>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{radio_disabled_example}}
|
||||
</div>
|
||||
<div class="column is-half">{{ radio_disabled_example }}</div>
|
||||
<div class="column is-half bd-highlight-full">
|
||||
{% highlight html %}{{radio_disabled_example}}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- radio_disabled_example -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
---
|
||||
title: Select
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: form
|
||||
doc-subtab: select
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- form
|
||||
- form-select
|
||||
- home
|
||||
- documentation
|
||||
- form
|
||||
- form-select
|
||||
meta:
|
||||
colors: true
|
||||
sizes: true
|
||||
variables: false
|
||||
---
|
||||
|
||||
{% capture select_example %}
|
||||
<div class="select">
|
||||
<select>
|
||||
@@ -22,7 +22,6 @@ meta:
|
||||
</select>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture select_multiple_example %}
|
||||
<div class="select is-multiple">
|
||||
<select multiple size="8">
|
||||
@@ -41,7 +40,6 @@ meta:
|
||||
</select>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture rounded_example %}
|
||||
<div class="select is-rounded">
|
||||
<select>
|
||||
@@ -50,7 +48,6 @@ meta:
|
||||
</select>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture normal_example %}
|
||||
<div class="select">
|
||||
<select>
|
||||
@@ -59,7 +56,6 @@ meta:
|
||||
</select>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture hover_example %}
|
||||
<div class="select">
|
||||
<select class="is-hovered">
|
||||
@@ -68,7 +64,6 @@ meta:
|
||||
</select>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture focus_example %}
|
||||
<div class="select">
|
||||
<select class="is-focused">
|
||||
@@ -77,7 +72,6 @@ meta:
|
||||
</select>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture loading_example %}
|
||||
<div class="select is-loading">
|
||||
<select>
|
||||
@@ -86,7 +80,6 @@ meta:
|
||||
</select>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture disabled_example %}
|
||||
<div class="select is-disabled">
|
||||
<select disabled>
|
||||
@@ -95,7 +88,6 @@ meta:
|
||||
</select>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture icons_example %}
|
||||
<div class="control has-icons-left">
|
||||
<div class="select">
|
||||
@@ -110,7 +102,6 @@ meta:
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture has_icons_small_example %}
|
||||
<div class="control has-icons-left">
|
||||
<div class="select is-small">
|
||||
@@ -125,7 +116,6 @@ meta:
|
||||
</span>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture has_icons_normal_example %}
|
||||
<div class="control has-icons-left">
|
||||
<div class="select">
|
||||
@@ -140,7 +130,6 @@ meta:
|
||||
</span>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture has_icons_medium_example %}
|
||||
<div class="control has-icons-left">
|
||||
<div class="select is-medium">
|
||||
@@ -155,7 +144,6 @@ meta:
|
||||
</span>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture has_icons_large_example %}
|
||||
<div class="control has-icons-left">
|
||||
<div class="select is-large">
|
||||
@@ -173,48 +161,57 @@ meta:
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>select</code> class is a simple wrapper around the <code><select></code> HTML element, which gives the styling more flexibility and support for icons.
|
||||
The <code>select</code> class is a simple wrapper around the <code><select></code> HTML element, which gives
|
||||
the styling more flexibility and support for icons.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{ select_example }}
|
||||
</div>
|
||||
<div class="column is-half">{{ select_example }}</div>
|
||||
<div class="column is-half bd-highlight-full">
|
||||
{% highlight html %}{{ select_example }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- select_example -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>Several <strong>modifiers</strong> are supported which affect:</p>
|
||||
<ul>
|
||||
<li>the <strong><a href="#colors">color</a></strong></li>
|
||||
<li>the <strong><a href="#sizes">size</a></strong></li>
|
||||
<li>the <strong><a href="#states">state</a></strong></li>
|
||||
<li>
|
||||
the <strong><a href="#colors">color</a></strong>
|
||||
</li>
|
||||
<li>
|
||||
the <strong><a href="#sizes">size</a></strong>
|
||||
</li>
|
||||
<li>
|
||||
the <strong><a href="#states">state</a></strong>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Multiple select" %}
|
||||
{% include docs/elements/anchor.html name="Multiple select" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can style a <strong>multiple select</strong> dropdown, by using the <code>is-multiple</code> modifier, and by using the <code>multiple</code> HTML attribute.
|
||||
You can style a <strong>multiple select</strong> dropdown, by using the <code>is-multiple</code> modifier, and
|
||||
by using the <code>multiple</code> HTML attribute.
|
||||
</p>
|
||||
</div>
|
||||
{{ select_multiple_example }}
|
||||
</div>
|
||||
<div class="column is-half bd-highlight-full">
|
||||
{% highlight html %}{{ select_multiple_example }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- select_multiple_example -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Colors" %}
|
||||
|
||||
{% include docs/elements/anchor.html name="Colors" %}
|
||||
{% for color in site.data.colors.justColors %}
|
||||
{% capture foobar %}
|
||||
{% capture foobar %}
|
||||
<div class="select is-{{ color }}">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
@@ -222,36 +219,31 @@ meta:
|
||||
</select>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% include docs/elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% include elements/anchor.html name="Styles" %}
|
||||
{% include docs/elements/anchor.html name="Styles" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can create a <strong>rounded dropdown</strong> by appending the <code>is-rounded</code> modifier:
|
||||
</p>
|
||||
<p>You can create a <strong>rounded dropdown</strong> by appending the <code>is-rounded</code> modifier:</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">{{ rounded_example }}</div>
|
||||
<div class="column is-half">
|
||||
{{ rounded_example }}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{ rounded_example }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- rounded_example -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
{% include docs/elements/anchor.html name="Sizes" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>select</code> element comes in <strong>4</strong> different sizes:
|
||||
</p>
|
||||
<p>The <code>select</code> element comes in <strong>4</strong> different sizes:</p>
|
||||
</div>
|
||||
|
||||
{% for size in site.data.sizes %}
|
||||
{% capture foobar %}
|
||||
{% capture foobar %}
|
||||
<div class="select is-{{ size }}">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
@@ -259,73 +251,65 @@ meta:
|
||||
</select>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% include docs/elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% include elements/anchor.html name="States" %}
|
||||
{% include docs/elements/anchor.html name="States" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Bulma styles the different <strong>states</strong> of the <code>select</code> element. Each state is available as a pseudo-class and a CSS class:
|
||||
Bulma styles the different <strong>states</strong> of the <code>select</code> element. Each state is available as a
|
||||
pseudo-class and a CSS class:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>:hover</code> and <code>is-hovered</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>:focus</code> and <code>is-focused</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>:active</code> and <code>is-active</code>
|
||||
</li>
|
||||
<li><code>:hover</code> and <code>is-hovered</code></li>
|
||||
<li><code>:focus</code> and <code>is-focused</code></li>
|
||||
<li><code>:active</code> and <code>is-active</code></li>
|
||||
</ul>
|
||||
<p>
|
||||
This allows you to obtain the style of a certain state without having to trigger it.
|
||||
</p>
|
||||
<p>This allows you to obtain the style of a certain state without having to trigger it.</p>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Normal</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">{{ normal_example }}</div>
|
||||
<div class="column is-half">
|
||||
{{ normal_example }}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{ normal_example }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- normal_example -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Hover</h4>
|
||||
<div class="columns">
|
||||
<div class="column is-half">{{ hover_example }}</div>
|
||||
<div class="column is-half">
|
||||
{{ hover_example }}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{ hover_example }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- hover_example -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Focus</h4>
|
||||
<div class="columns">
|
||||
<div class="column is-half">{{ focus_example }}</div>
|
||||
<div class="column is-half">
|
||||
{{ focus_example }}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{ focus_example }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- focus_example -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Loading</h4>
|
||||
<div class="columns">
|
||||
<div class="column is-half">{{ loading_example }}</div>
|
||||
<div class="column is-half">
|
||||
{{ loading_example }}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{ loading_example }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- loading_example -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="With icons" %}
|
||||
{% include docs/elements/anchor.html name="With icons" %}
|
||||
|
||||
<div class="content">
|
||||
<p>You can append the <strong>modifier</strong> on a control:</p>
|
||||
@@ -336,18 +320,16 @@ meta:
|
||||
</ul>
|
||||
<p>You also need to add a modifier on the <strong>icon</strong>:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>icon is-left</code> since <code>has-icons-left</code> is used
|
||||
</li>
|
||||
<li><code>icon is-left</code> since <code>has-icons-left</code> is used</li>
|
||||
</ul>
|
||||
<p>The size of the <strong>select</strong> will define the size of the icon container.</p>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-half">{{ icons_example }}</div>
|
||||
<div class="column is-half">
|
||||
{{ icons_example }}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{ icons_example }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- icons_example -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -355,39 +337,42 @@ meta:
|
||||
<div class="column is-half">
|
||||
<div class="content">
|
||||
<p>
|
||||
If the control contains an icon, Bulma will make sure the icon remains <strong>centered</strong>, no matter the size of the input <em>or</em> of the icon.
|
||||
If the control contains an icon, Bulma will make sure the icon remains
|
||||
<strong>centered</strong>, no matter the size of the input <em>or</em> of the icon.
|
||||
</p>
|
||||
</div>
|
||||
{{ has_icons_small_example }}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{ has_icons_small_example }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- has_icons_small_example -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">{{ has_icons_normal_example }}</div>
|
||||
<div class="column is-half">
|
||||
{{ has_icons_normal_example }}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{ has_icons_normal_example }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- has_icons_normal_example -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">{{ has_icons_medium_example }}</div>
|
||||
<div class="column is-half">
|
||||
{{ has_icons_medium_example }}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{ has_icons_medium_example }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- has_icons_medium_example -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">{{ has_icons_large_example }}</div>
|
||||
<div class="column is-half">
|
||||
{{ has_icons_large_example }}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{ has_icons_large_example }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- has_icons_large_example -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,31 +1,36 @@
|
||||
---
|
||||
title: Textarea
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: form
|
||||
doc-subtab: textarea
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- form
|
||||
- form-textarea
|
||||
- home
|
||||
- documentation
|
||||
- form
|
||||
- form-textarea
|
||||
meta:
|
||||
colors: true
|
||||
sizes: true
|
||||
variables: false
|
||||
---
|
||||
|
||||
{% capture textarea_example %}
|
||||
<textarea class="textarea" placeholder="e.g. Hello world"></textarea>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture textarea_rows_example %}
|
||||
<textarea class="textarea" placeholder="10 lines of textarea" rows="10"></textarea>
|
||||
<textarea
|
||||
class="textarea"
|
||||
placeholder="10 lines of textarea"
|
||||
rows="10"
|
||||
></textarea>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture colors_example %}
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<textarea class="textarea is-primary" placeholder="Primary textarea"></textarea>
|
||||
<textarea
|
||||
class="textarea is-primary"
|
||||
placeholder="Primary textarea"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
@@ -35,21 +40,29 @@ meta:
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<textarea class="textarea is-success" placeholder="Success textarea"></textarea>
|
||||
<textarea
|
||||
class="textarea is-success"
|
||||
placeholder="Success textarea"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<textarea class="textarea is-warning" placeholder="Warning textarea"></textarea>
|
||||
<textarea
|
||||
class="textarea is-warning"
|
||||
placeholder="Warning textarea"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<textarea class="textarea is-danger" placeholder="Danger textarea"></textarea>
|
||||
<textarea
|
||||
class="textarea is-danger"
|
||||
placeholder="Danger textarea"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture sizes_example %}
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
@@ -63,7 +76,10 @@ meta:
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<textarea class="textarea is-medium" placeholder="Medium textarea"></textarea>
|
||||
<textarea
|
||||
class="textarea is-medium"
|
||||
placeholder="Medium textarea"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
@@ -72,35 +88,39 @@ meta:
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture normal_example %}
|
||||
<div class="control">
|
||||
<textarea class="textarea" placeholder="Normal textarea"></textarea>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture hover_example %}
|
||||
<div class="control">
|
||||
<textarea class="textarea is-hovered" placeholder="Hovered textarea"></textarea>
|
||||
<textarea
|
||||
class="textarea is-hovered"
|
||||
placeholder="Hovered textarea"
|
||||
></textarea>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture focus_example %}
|
||||
<div class="control">
|
||||
<textarea class="textarea is-focused" placeholder="Focused textarea"></textarea>
|
||||
<textarea
|
||||
class="textarea is-focused"
|
||||
placeholder="Focused textarea"
|
||||
></textarea>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture loading_example %}
|
||||
<div class="control is-loading">
|
||||
<textarea class="textarea" placeholder="Loading textarea"></textarea>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture loading_sizes_example %}
|
||||
<div class="field">
|
||||
<div class="control is-small is-loading">
|
||||
<textarea class="textarea is-small" placeholder="Small loading textarea"></textarea>
|
||||
<textarea
|
||||
class="textarea is-small"
|
||||
placeholder="Small loading textarea"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
@@ -110,22 +130,30 @@ meta:
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control is-medium is-loading">
|
||||
<textarea class="textarea is-medium" placeholder="Medium loading textarea"></textarea>
|
||||
<textarea
|
||||
class="textarea is-medium"
|
||||
placeholder="Medium loading textarea"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control is-large is-loading">
|
||||
<textarea class="textarea is-large" placeholder="Large loading textarea"></textarea>
|
||||
<textarea
|
||||
class="textarea is-large"
|
||||
placeholder="Large loading textarea"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture disabled_example %}
|
||||
<div class="control">
|
||||
<textarea class="textarea" placeholder="Disabled textarea" disabled></textarea>
|
||||
<textarea
|
||||
class="textarea"
|
||||
placeholder="Disabled textarea"
|
||||
disabled
|
||||
></textarea>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture readonly_example %}
|
||||
<div class="control">
|
||||
<textarea class="textarea" readonly>This content is readonly</textarea>
|
||||
@@ -134,123 +162,118 @@ meta:
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The Bulma <code>textarea</code> CSS class is the multiline version of the <a href="{{ site.data.links.by_id.form-input.path }}"><code>input</code> element</a>:
|
||||
The Bulma <code>textarea</code> CSS class is the multiline version of the
|
||||
<a href="{{ site.data.links.by_id.form-input.path }}"><code>input</code> element</a>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=textarea_example %}
|
||||
|
||||
{% include docs/elements/snippet.html content=textarea_example %}
|
||||
{% capture fixedsize_example %}
|
||||
<div class="control">
|
||||
<textarea class="textarea has-fixed-size" placeholder="Fixed size textarea"></textarea>
|
||||
<textarea
|
||||
class="textarea has-fixed-size"
|
||||
placeholder="Fixed size textarea"
|
||||
></textarea>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can set the height of the textarea using the <code>rows</code> HTML attribute.
|
||||
</p>
|
||||
<p>You can set the height of the textarea using the <code>rows</code> HTML attribute.</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=textarea_rows_example %}
|
||||
|
||||
{% include elements/anchor.html name="Colors" %}
|
||||
{% include docs/elements/snippet.html content=textarea_rows_example %}
|
||||
{% include docs/elements/anchor.html name="Colors" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>textarea</code> element is available in several colors:
|
||||
</p>
|
||||
<p>The <code>textarea</code> element is available in several colors:</p>
|
||||
</div>
|
||||
|
||||
{% for color in site.data.colors.justColors %}
|
||||
{% capture foobar %}
|
||||
<textarea class="textarea is-{{ color }}" placeholder="{{ color | capitalize }} textarea"></textarea>
|
||||
{% capture foobar %}
|
||||
<textarea
|
||||
class="textarea is-{{ color }}"
|
||||
placeholder="{{ color | capitalize }} textarea"
|
||||
></textarea>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% include docs/elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
{% include docs/elements/anchor.html name="Sizes" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>textarea</code> element comes in <strong>4 different sizes:</strong>
|
||||
The <code>textarea</code> element comes in
|
||||
<strong>4 different sizes:</strong>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=sizes_example %}
|
||||
|
||||
{% include elements/anchor.html name="States" %}
|
||||
{% include docs/elements/snippet.html content=sizes_example %}
|
||||
{% include docs/elements/anchor.html name="States" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Bulma styles the different <strong>states</strong> of the <code>textarea</code> element. Each state is available as a pseudo-class and a CSS class:
|
||||
Bulma styles the different <strong>states</strong> of the <code>textarea</code> element. Each state is available as
|
||||
a pseudo-class and a CSS class:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>:hover</code> and <code>is-hovered</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>:focus</code> and <code>is-focused</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>:active</code> and <code>is-active</code>
|
||||
</li>
|
||||
<li><code>:hover</code> and <code>is-hovered</code></li>
|
||||
<li><code>:focus</code> and <code>is-focused</code></li>
|
||||
<li><code>:active</code> and <code>is-active</code></li>
|
||||
</ul>
|
||||
<p>
|
||||
This allows you to obtain the style of a certain state without having to trigger it.
|
||||
</p>
|
||||
<p>This allows you to obtain the style of a certain state without having to trigger it.</p>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Normal</h4>
|
||||
|
||||
{% include elements/snippet.html content=normal_example %}
|
||||
{% include docs/elements/snippet.html content=normal_example %}
|
||||
|
||||
<h4 class="subtitle">Hover</h4>
|
||||
|
||||
{% include elements/snippet.html content=hover_example %}
|
||||
{% include docs/elements/snippet.html content=hover_example %}
|
||||
|
||||
<h4 class="subtitle">Focus</h4>
|
||||
|
||||
{% include elements/snippet.html content=focus_example %}
|
||||
{% include docs/elements/snippet.html content=focus_example %}
|
||||
|
||||
<h4 class="subtitle">Loading</h4>
|
||||
|
||||
{% include elements/snippet.html content=loading_example %}
|
||||
{% include docs/elements/snippet.html content=loading_example %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can resize the loading spinner by appending <code>is-small</code>, <code>is-medium</code> or <code>is-large</code> to the <code>control</code> container.
|
||||
You can resize the loading spinner by appending <code>is-small</code>, <code>is-medium</code> or
|
||||
<code>is-large</code> to the <code>control</code> container.
|
||||
</p>
|
||||
</div>
|
||||
{{loading_sizes_example}}
|
||||
{{ loading_sizes_example }}
|
||||
</div>
|
||||
<div class="column is-half bd-highlight-full">
|
||||
{% highlight html %}{{loading_sizes_example}}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- loading_sizes_example -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Disabled</h4>
|
||||
|
||||
{% include elements/snippet.html content=disabled_example %}
|
||||
{% include docs/elements/snippet.html content=disabled_example %}
|
||||
|
||||
<h4 class="subtitle">Readonly</h4>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
If you use the <code>readonly</code> HTML attribute, the textarea will look similar to a normal one, but is not editable and has no shadow.
|
||||
If you use the <code>readonly</code> HTML attribute, the textarea will look similar to a normal one, but is not
|
||||
editable and has no shadow.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=readonly_example %}
|
||||
{% include docs/elements/snippet.html content=readonly_example %}
|
||||
|
||||
<h4 class="subtitle">Fixed Size</h4>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can disable a <code>textarea</code> resizing by appending the <code>has-fixed-size</code> modifier:
|
||||
</p>
|
||||
<p>You can disable a <code>textarea</code> resizing by appending the <code>has-fixed-size</code> modifier:</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=fixedsize_example %}
|
||||
{% include docs/elements/snippet.html content=fixedsize_example %}
|
||||
|
||||
13
docs/documentation/grid.html
Normal file
13
docs/documentation/grid.html
Normal file
@@ -0,0 +1,13 @@
|
||||
---
|
||||
title: Grid
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: grid
|
||||
hide_tabs: true
|
||||
hide_pagination: true
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- grid
|
||||
---
|
||||
{% include docs/components/links.html category_id='grid' %}
|
||||
153
docs/documentation/grid/fixed-grid.html
Normal file
153
docs/documentation/grid/fixed-grid.html
Normal file
@@ -0,0 +1,153 @@
|
||||
---
|
||||
title: Fixed Grid
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-library: true
|
||||
doc-tab: grid
|
||||
breakpoints:
|
||||
- mobile
|
||||
- tablet
|
||||
- desktop
|
||||
- widescreen
|
||||
- fullhd
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- grid
|
||||
- grid-fixed
|
||||
---
|
||||
|
||||
{% capture markdown %}
|
||||
If instead of having a minimum column width you want a **fixed** number of columns, wrap your grid in a `fixed-grid` container.
|
||||
|
||||
By default, this fixed grid has **2 columns**:
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
{% capture fixed_count_code %}
|
||||
<div class="fixed-grid">
|
||||
<div class="grid">
|
||||
{% for i in (1..11) %}<div class="cell">Cell {{ i }}</div>
|
||||
{% endfor %}<div class="cell">Cell 12</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture fixed_count %}
|
||||
<div class="fixed-grid">
|
||||
<div class="grid">
|
||||
{% for i in (1..12) %}
|
||||
<div class="cell py-3 px-4 has-background-primary has-text-primary-invert has-radius-normal">
|
||||
Cell {{ i }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{{ fixed_count }}
|
||||
|
||||
{% include docs/elements/snippet.html content=fixed_count_code no_example=true more=true fullwidth=true horizontal=true %}
|
||||
|
||||
{% include docs/elements/anchor.html name="Applying fixed grid modifiers" %}
|
||||
|
||||
{% capture markdown %}
|
||||
You can change the **column count** by adding the `has-$n-cols` modifier class with a value ranging from `1` to `12`:
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Class</th>
|
||||
<th>Column Count</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for i in (0..12) %}
|
||||
<tr>
|
||||
<td><code>has-{{ i }}-cols</code></td>
|
||||
<td><code>{{ i }}</code></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% include docs/elements/anchor.html name="Container breakpoints" %}
|
||||
|
||||
{% capture markdown %}
|
||||
You can specify a different column count **per breakpoint**:
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="2">Column Count</th>
|
||||
<th>Mobile</th>
|
||||
<th>Tablet</th>
|
||||
<th>Desktop</th>
|
||||
<th>Widescreen</th>
|
||||
<th>Full HD</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Until <code>{{ site.data.breakpoints.mobile.to }}px</code></td>
|
||||
<td>From <code>{{ site.data.breakpoints.tablet.from }}px</code></td>
|
||||
<td>From <code>{{ site.data.breakpoints.desktop.from }}px</code></td>
|
||||
<td>From <code>{{ site.data.breakpoints.widescreen.from }}px</code></td>
|
||||
<td>From <code>{{ site.data.breakpoints.fullhd.from }}px</code></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for i in (1..12) %}
|
||||
<tr>
|
||||
<th>{{ i }}</th>
|
||||
{% for bp in page.breakpoints %}
|
||||
<td><code>has-cols-{{ i }}-{{ bp }}</code></td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% include docs/elements/anchor.html name="Auto Count Fixed Grid" %}
|
||||
|
||||
{% capture markdown %}
|
||||
By adding the `has-auto-count` modifier, the fixed grid will **automatically** change its count for each **breakpoint**:
|
||||
|
||||
* 2 on mobile
|
||||
* 4 on tablet
|
||||
* 8 on desktop
|
||||
* 12 on widescreen
|
||||
* 16 on fullhd
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
{% capture auto_count %}
|
||||
<div class="fixed-grid has-auto-count">
|
||||
<div class="grid">
|
||||
{% for i in (1..16) %}
|
||||
<div class="cell py-3 px-4 has-background-primary has-text-primary-invert has-radius-normal">
|
||||
Cell {{ i }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture auto_count_code %}
|
||||
<div class="fixed-grid has-auto-count">
|
||||
<div class="grid">
|
||||
{% for i in (1..15) %}<div class="cell">Cell {{ i }}</div>
|
||||
{% endfor %}<div class="cell">Cell 16</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{{ auto_count }}
|
||||
|
||||
{% include docs/elements/snippet.html content=auto_count_code no_example=true more=true fullwidth=true horizontal=true %}
|
||||
304
docs/documentation/grid/grid-cells.html
Normal file
304
docs/documentation/grid/grid-cells.html
Normal file
@@ -0,0 +1,304 @@
|
||||
---
|
||||
title: Grid Cells
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-library: true
|
||||
doc-tab: grid
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- grid
|
||||
- grid-cells
|
||||
---
|
||||
|
||||
{% capture markdown %}
|
||||
Each Bulma grid is comprised of several **cells**. You can adjust the width and height of each of these cells individually, and for each separate breakpoint.
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Description</th>
|
||||
<th>Class</th>
|
||||
<th>Example</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Which column the cell <strong>starts</strong> at</td>
|
||||
<td><code>is-col-start</code></td>
|
||||
<td class="p-0" style="--hl-radius: 0;">{% highlight html %}<div class="is-col-start-2"></div>{% endhighlight %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Which column the cell <strong>ends</strong> at, counting <em>from the end</em></td>
|
||||
<td><code>is-col-from-end</code></td>
|
||||
<td class="p-0" style="--hl-radius: 0;">{% highlight html %}<div class="is-col-from-end-1"></div>{% endhighlight %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>How many columns</strong> the cell will span</td>
|
||||
<td><code>is-col-span</code></td>
|
||||
<td class="p-0" style="--hl-radius: 0;">{% highlight html %}<div class="is-col-span-3"></div>{% endhighlight %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Which row the cell <strong>starts</strong> at</td>
|
||||
<td><code>is-row-start</code></td>
|
||||
<td class="p-0" style="--hl-radius: 0;">{% highlight html %}<div class="is-row-start-2"></div>{% endhighlight %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Which row the cell <strong>ends</strong> at, counting <em>from the end</em></td>
|
||||
<td><code>is-row-from-end</code></td>
|
||||
<td class="p-0" style="--hl-radius: 0;">{% highlight html %}<div class="is-row-from-end-1"></div>{% endhighlight %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>How many rows</strong> the cell will span</td>
|
||||
<td><code>is-row-span</code></td>
|
||||
<td class="p-0" style="--hl-radius: 0;">{% highlight html %}<div class="is-row-span-3"></div>{% endhighlight %}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% comment %} -- {% endcomment %}
|
||||
|
||||
{% include docs/elements/anchor.html name="Column Start" %}
|
||||
|
||||
{% capture col_start_code %}
|
||||
<div class="fixed-grid has-4-cols">
|
||||
<div class="grid">
|
||||
<div class="cell">Cell 1</div>
|
||||
<div class="cell is-col-start-3">Cell 2</div>
|
||||
<div class="cell">Cell 3</div>
|
||||
<div class="cell">Cell 4</div>
|
||||
<div class="cell">Cell 5</div>
|
||||
<div class="cell">Cell 6</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture col_start %}
|
||||
<div class="fixed-grid has-4-cols">
|
||||
<div class="grid">
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 1</div>
|
||||
<div class="cell py-3 px-4 has-background-primary has-text-primary-invert has-radius-normal is-col-start-3">Cell 2</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 3</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 4</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 5</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 6</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture markdown %}
|
||||
Change which column a cell ends at, counting from the end.
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
{{ col_start }}
|
||||
|
||||
{% include docs/elements/snippet.html content=col_start_code no_example=true more=true fullwidth=true horizontal=true %}
|
||||
|
||||
{% comment %} -- {% endcomment %}
|
||||
|
||||
{% include docs/elements/anchor.html name="Column From End" %}
|
||||
|
||||
{% capture col_end_code %}
|
||||
<div class="fixed-grid has-4-cols">
|
||||
<div class="grid">
|
||||
<div class="cell">Cell 1</div>
|
||||
<div class="cell is-col-from-end-2">Cell 2</div>
|
||||
<div class="cell">Cell 3</div>
|
||||
<div class="cell">Cell 4</div>
|
||||
<div class="cell">Cell 5</div>
|
||||
<div class="cell">Cell 6</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture col_end %}
|
||||
<div class="fixed-grid has-4-cols">
|
||||
<div class="grid">
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 1</div>
|
||||
<div class="cell py-3 px-4 has-background-primary has-text-primary-invert has-radius-normal is-col-from-end-2">Cell 2</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 3</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 4</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 5</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 6</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture markdown %}
|
||||
Change which column a cell starts at.
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
{{ col_end }}
|
||||
|
||||
{% include docs/elements/snippet.html content=col_end_code no_example=true more=true fullwidth=true horizontal=true %}
|
||||
|
||||
{% comment %} -- {% endcomment %}
|
||||
|
||||
{% include docs/elements/anchor.html name="Column Span" %}
|
||||
|
||||
{% capture col_span_code %}
|
||||
<div class="fixed-grid has-4-cols">
|
||||
<div class="grid">
|
||||
<div class="cell">Cell 1</div>
|
||||
<div class="cell is-col-span-2">Cell 2</div>
|
||||
<div class="cell">Cell 3</div>
|
||||
<div class="cell">Cell 4</div>
|
||||
<div class="cell">Cell 5</div>
|
||||
<div class="cell">Cell 6</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture col_span %}
|
||||
<div class="fixed-grid has-4-cols">
|
||||
<div class="grid">
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 1</div>
|
||||
<div class="cell py-3 px-4 has-background-primary has-text-primary-invert has-radius-normal is-col-span-2">Cell 2</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 3</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 4</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 5</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 6</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture markdown %}
|
||||
Change how many columns a cell spans.
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
{{ col_span }}
|
||||
|
||||
{% include docs/elements/snippet.html content=col_span_code no_example=true more=true fullwidth=true horizontal=true %}
|
||||
|
||||
|
||||
|
||||
{% comment %} -- {% endcomment %}
|
||||
|
||||
{% include docs/elements/anchor.html name="Row Start" %}
|
||||
|
||||
{% capture row_start_code %}
|
||||
<div class="fixed-grid has-4-cols">
|
||||
<div class="grid">
|
||||
<div class="cell">Cell 1</div>
|
||||
<div class="cell is-row-start-3">Cell 2</div>
|
||||
<div class="cell">Cell 3</div>
|
||||
<div class="cell">Cell 4</div>
|
||||
<div class="cell">Cell 5</div>
|
||||
<div class="cell">Cell 6</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture row_start %}
|
||||
<div class="fixed-grid has-4-cols">
|
||||
<div class="grid">
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 1</div>
|
||||
<div class="cell py-3 px-4 has-background-primary has-text-primary-invert has-radius-normal is-row-start-3">Cell 2</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 3</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 4</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 5</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 6</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture markdown %}
|
||||
Change which row a cell ends at, counting from the end.
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
{{ row_start }}
|
||||
|
||||
{% include docs/elements/snippet.html content=row_start_code no_example=true more=true fullwidth=true horizontal=true %}
|
||||
|
||||
{% comment %} -- {% endcomment %}
|
||||
|
||||
{% include docs/elements/anchor.html name="Row From End" %}
|
||||
|
||||
{% capture row_end_code %}
|
||||
<div class="fixed-grid has-4-cols">
|
||||
<div class="grid">
|
||||
<div class="cell">Cell 1</div>
|
||||
<div class="cell is-row-from-end-1">Cell 2</div>
|
||||
<div class="cell">Cell 3</div>
|
||||
<div class="cell">Cell 4</div>
|
||||
<div class="cell">Cell 5</div>
|
||||
<div class="cell">Cell 6</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture row_end %}
|
||||
<div class="fixed-grid has-4-cols">
|
||||
<div class="grid">
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 1</div>
|
||||
<div class="cell py-3 px-4 has-background-primary has-text-primary-invert has-radius-normal is-row-from-end-1">Cell 2</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 3</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 4</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 5</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 6</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture markdown %}
|
||||
Change which row a cell starts at.
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
{{ row_end }}
|
||||
|
||||
{% include docs/elements/snippet.html content=row_end_code no_example=true more=true fullwidth=true horizontal=true %}
|
||||
|
||||
{% comment %} -- {% endcomment %}
|
||||
|
||||
{% include docs/elements/anchor.html name="Row Span" %}
|
||||
|
||||
{% capture row_span_code %}
|
||||
<div class="fixed-grid has-4-cols">
|
||||
<div class="grid">
|
||||
<div class="cell">Cell 1</div>
|
||||
<div class="cell is-row-span-2">Cell 2</div>
|
||||
<div class="cell">Cell 3</div>
|
||||
<div class="cell">Cell 4</div>
|
||||
<div class="cell">Cell 5</div>
|
||||
<div class="cell">Cell 6</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture row_span %}
|
||||
<div class="fixed-grid has-4-cols">
|
||||
<div class="grid">
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 1</div>
|
||||
<div class="cell py-3 px-4 has-background-primary has-text-primary-invert has-radius-normal is-row-span-2">Cell 2</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 3</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 4</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 5</div>
|
||||
<div class="cell py-3 px-4 has-background-primary-light has-text-primary-light-invert has-radius-normal">Cell 6</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture markdown %}
|
||||
Change how many rows a cell spans.
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
{{ row_span }}
|
||||
|
||||
{% include docs/elements/snippet.html content=row_span_code no_example=true more=true fullwidth=true horizontal=true %}
|
||||
|
||||
|
||||
113
docs/documentation/grid/playground.html
Normal file
113
docs/documentation/grid/playground.html
Normal file
@@ -0,0 +1,113 @@
|
||||
---
|
||||
title: Bulma Grid Playground
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-library: true
|
||||
doc-tab: grid
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- grid
|
||||
- grid-playground
|
||||
---
|
||||
|
||||
{% include docs/elements/anchor.html name="Smart Grid" %}
|
||||
|
||||
<div class="content">You can use this example to try out the Smart Grid with different column widths and different gap values.</div>
|
||||
|
||||
<div class="block js-modifier" data-target="js-grid" data-output="js-output-grid" data-property="is-col-min">
|
||||
<div class="buttons are-small has-addons">
|
||||
<span class="button is-static">
|
||||
Minimum Column Width
|
||||
</span>
|
||||
<button class="js-modifier-property dn" data-property="is-col-min"></button>
|
||||
<button class="button js-modifier-value is-link">Default</button>
|
||||
{% for i in (1..12) %}
|
||||
<button class="button js-modifier-value" data-value="{{ i }}">{{ i }}</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block js-modifier" data-target="js-grid" data-output="js-output-grid">
|
||||
<div class="buttons are-small has-addons">
|
||||
<span class="button is-static">
|
||||
Property
|
||||
</span>
|
||||
<button class="button is-link js-modifier-property" data-property="is-gap">Gap</button>
|
||||
<button class="button js-modifier-property" data-property="is-column-gap">Column Gap</button>
|
||||
<button class="button js-modifier-property" data-property="is-row-gap">Row Gap</button>
|
||||
<span class="button is-static">
|
||||
Value
|
||||
</span>
|
||||
<button class="button js-modifier-value is-link">Default</button>
|
||||
{% for i in (0..7) %}
|
||||
<button class="button js-modifier-value" data-value="{{ i }}">{{ i }}</button>
|
||||
<button class="button js-modifier-value" data-value="{{ i }}.5">{{ i }}.5</button>
|
||||
{% endfor %}
|
||||
<button class="button js-modifier-value" data-value="8">8</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block flex has-text-small">
|
||||
<strong>
|
||||
HTML
|
||||
</strong>
|
||||
<code><div class="<span id="js-output-grid">grid</span>"></code>
|
||||
</div>
|
||||
|
||||
{% capture auto_grid %}
|
||||
<div id="js-grid" class="grid">
|
||||
{% for i in (1..24) %}
|
||||
<div class="cell py-3 px-4 has-background-primary has-text-primary-invert has-radius-normal">
|
||||
Cell {{ i }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{{ auto_grid }}
|
||||
|
||||
{% include docs/elements/anchor.html name="Fixed Grid" %}
|
||||
|
||||
<div class="content">You can use these controls to try out the Fixed Grid with different columns counts.</div>
|
||||
|
||||
<div class="block js-modifier" data-target="js-fixed-grid" data-output="js-output-fixed-grid" data-property-start="has" data-property-end="cols">
|
||||
<div class="buttons are-small has-addons">
|
||||
<span class="button is-static">
|
||||
Column Count
|
||||
</span>
|
||||
<button class="js-modifier-property dn" data-property-start="has" data-property-end="cols"></button>
|
||||
<button class="button js-modifier-value is-link">Default</button>
|
||||
{% for i in (1..12) %}
|
||||
<button class="button js-modifier-value" data-value="{{ i }}">{{ i }}</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block flex has-text-small">
|
||||
<strong>
|
||||
HTML
|
||||
</strong>
|
||||
<code><div class="<span id="js-output-fixed-grid">fixed-grid</span>"></code>
|
||||
</div>
|
||||
|
||||
{% capture fixed_grid_playground %}
|
||||
<div id="js-fixed-grid" class="fixed-grid js-resizable" data-target="js-resize-value">
|
||||
<button class="js-resizable-handle"><div></div><div></div></button>
|
||||
<div class="grid">
|
||||
{% for i in (1..24) %}
|
||||
<div class="cell py-3 px-4 has-background-primary has-text-primary-invert has-radius-normal">
|
||||
Cell {{ i }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="content">
|
||||
Use the <strong>handle</strong> on the right side to change the container's width: <code id="js-resize-value">1200</code>
|
||||
</div>
|
||||
|
||||
{{ fixed_grid_playground }}
|
||||
|
||||
<div style="padding-top: 50vh;"><em>Space intentionally left blank to prevent layout jumps</em></div>
|
||||
110
docs/documentation/grid/smart-grid.html
Normal file
110
docs/documentation/grid/smart-grid.html
Normal file
@@ -0,0 +1,110 @@
|
||||
---
|
||||
title: Smart Grid
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-library: true
|
||||
doc-tab: grid
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- grid
|
||||
- grid-smart
|
||||
---
|
||||
|
||||
{% capture markdown %}
|
||||
Bulma v1 comes with a new **Smart Grid**. This grid is a 2 dimensional layout component that features **flexible columns**: Bulma will _fit_ as many columns as possible, given a minimum column width and a column and row gap.
|
||||
|
||||
By default, the Smart Grid has:
|
||||
|
||||
* a minimum column width of `9rem`
|
||||
* a gap of `0.75rem`
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
{% capture basic_grid_code %}
|
||||
<div class="grid">
|
||||
{% for i in (1..23) %}<div class="cell">Cell {{ i }}</div>
|
||||
{% endfor %}<div class="cell">Cell 24</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture basic_grid %}
|
||||
<div class="grid">
|
||||
{% for i in (1..24) %}<div class="cell py-3 px-4 has-background-primary has-text-primary-invert has-radius-normal">Cell {{ i }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{{ basic_grid }}
|
||||
|
||||
{% include docs/elements/snippet.html content=basic_grid_code no_example=true more=true fullwidth=true horizontal=true %}
|
||||
|
||||
{% include docs/elements/anchor.html name="Smart Grid modifiers" %}
|
||||
|
||||
{% capture markdown %}
|
||||
You can change the minimum column width by increments of `1.5rem`, by adding the `is-col-min` modifier class with a value ranging from `0` to `12`:
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Class</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for i in (1..12) %}
|
||||
<tr>
|
||||
<td><code>is-col-min-{{ i }}</code></td>
|
||||
<td><code>{{ i | times: 1.5 }}rem</code></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% capture markdown %}
|
||||
You can also change the `gap`, `column-gap` and/or `row-gap` by increments of `0.5rem`:
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Gap Class</th>
|
||||
<th>Column Gap</th>
|
||||
<th>Row Gap</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for i in (0..8) %}
|
||||
<tr>
|
||||
<td><code>gap-{{ i }}</code></td>
|
||||
<td><code>column-gap-{{ i }}</code></td>
|
||||
<td><code>row-gap-{{ i }}</code></td>
|
||||
<td><code>{{ i | times: 0.5 }}rem</code></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% capture auto_grid_code %}
|
||||
<div class="grid">
|
||||
{% for i in (1..23) %}<div class="cell">Cell {{ i }}</div>
|
||||
{% endfor %}<div class="cell">Cell 24</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture auto_grid %}
|
||||
<div id="js-grid" class="grid">
|
||||
{% for i in (1..24) %}
|
||||
<div class="cell py-3 px-4 has-background-primary has-text-primary-invert has-radius-normal">
|
||||
Cell {{ i }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endcapture %}
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Helpers
|
||||
layout: documentation
|
||||
title: CSS Helpers
|
||||
layout: docs
|
||||
theme: helpers
|
||||
doc-tab: helpers
|
||||
hide_tabs: true
|
||||
hide_pagination: true
|
||||
@@ -9,5 +10,4 @@ breadcrumb:
|
||||
- documentation
|
||||
- helpers
|
||||
---
|
||||
|
||||
{% include components/links.html category_id='helpers' %}
|
||||
{% include docs/components/links.html category_id='helpers' %}
|
||||
|
||||
@@ -1,201 +1,404 @@
|
||||
---
|
||||
title: Color helpers
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: helpers
|
||||
doc-tab: helpers
|
||||
doc-subtab: helpers-color
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- helpers
|
||||
- helpers-color
|
||||
- home
|
||||
- documentation
|
||||
- helpers
|
||||
- helpers-color
|
||||
---
|
||||
|
||||
{% include elements/anchor.html name="Text color" %}
|
||||
{% include docs/elements/anchor.html name="Text color" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can set any element to one of the <strong>10 colors</strong> or <strong>9 shades of grey</strong>:
|
||||
You can set any element to one of the <strong>10 colors</strong> or
|
||||
<strong>9 shades of grey</strong>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Color
|
||||
</th>
|
||||
<th>
|
||||
Example
|
||||
</th>
|
||||
<th>Class</th>
|
||||
<th>Color</th>
|
||||
<th>Example</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>has-text-white</code></td><td>{% include color/white.html %}</td><td class="has-text-white has-background-black">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-black</code></td><td>{% include color/black.html %}</td><td class="has-text-black">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-light</code></td><td>{% include color/white-ter.html %}</td><td class="has-text-light has-background-grey">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-dark</code></td><td>{% include color/grey-darker.html %}</td><td class="has-text-dark">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-primary</code></td><td>{% include color/turquoise.html %}</td><td class="has-text-primary">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-link</code></td><td>{% include color/blue.html %}</td><td class="has-text-link">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-info</code></td><td>{% include color/cyan.html %}</td><td class="has-text-info">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-success</code></td><td>{% include color/green.html %}</td><td class="has-text-success">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-warning</code></td><td>{% include color/yellow.html %}</td><td class="has-text-warning">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-danger</code></td><td>{% include color/red.html %}</td><td class="has-text-danger">Hello Bulma</td></tr>
|
||||
<tr>
|
||||
<td><code>has-text-white</code></td>
|
||||
<td>{% include docs/color/white.html %}</td>
|
||||
<td class="has-text-white has-background-black">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-black</code></td>
|
||||
<td>{% include docs/color/black.html %}</td>
|
||||
<td class="has-text-black">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-light</code></td>
|
||||
<td>{% include docs/color/white-ter.html %}</td>
|
||||
<td class="has-text-light has-background-grey">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-dark</code></td>
|
||||
<td>{% include docs/color/grey-darker.html %}</td>
|
||||
<td class="has-text-dark">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-primary</code></td>
|
||||
<td>{% include docs/color/turquoise.html %}</td>
|
||||
<td class="has-text-primary">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-link</code></td>
|
||||
<td>{% include docs/color/blue.html %}</td>
|
||||
<td class="has-text-link">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-info</code></td>
|
||||
<td>{% include docs/color/cyan.html %}</td>
|
||||
<td class="has-text-info">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-success</code></td>
|
||||
<td>{% include docs/color/green.html %}</td>
|
||||
<td class="has-text-success">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-warning</code></td>
|
||||
<td>{% include docs/color/yellow.html %}</td>
|
||||
<td class="has-text-warning">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-danger</code></td>
|
||||
<td>{% include docs/color/red.html %}</td>
|
||||
<td class="has-text-danger">Hello Bulma</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Shade
|
||||
</th>
|
||||
<th>
|
||||
Example
|
||||
</th>
|
||||
<th>Class</th>
|
||||
<th>Shade</th>
|
||||
<th>Example</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>has-text-black-bis</code></td><td>{% include color/black-bis.html %}</td><td class="has-text-black-bis">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-black-ter</code></td><td>{% include color/black-ter.html %}</td><td class="has-text-black-ter">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-grey-darker</code></td><td>{% include color/grey-darker.html %}</td><td class="has-text-grey-darker">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-grey-dark</code></td><td>{% include color/grey-dark.html %}</td><td class="has-text-grey-dark">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-grey</code></td><td>{% include color/grey.html %}</td><td class="has-text-grey">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-grey-light</code></td><td>{% include color/grey-light.html %}</td><td class="has-text-grey-light">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-grey-lighter</code></td><td>{% include color/grey-lighter.html %}</td><td class="has-text-grey-lighter">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-white-ter</code></td><td>{% include color/white-ter.html %}</td><td class="has-background-black-ter has-text-white-ter">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-white-bis</code></td><td>{% include color/white-bis.html %}</td><td class="has-background-black-bis has-text-white-bis">Hello Bulma</td></tr>
|
||||
<tr>
|
||||
<td><code>has-text-black-bis</code></td>
|
||||
<td>{% include docs/color/black-bis.html %}</td>
|
||||
<td class="has-text-black-bis">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-black-ter</code></td>
|
||||
<td>{% include docs/color/black-ter.html %}</td>
|
||||
<td class="has-text-black-ter">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-grey-darker</code></td>
|
||||
<td>{% include docs/color/grey-darker.html %}</td>
|
||||
<td class="has-text-grey-darker">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-grey-dark</code></td>
|
||||
<td>{% include docs/color/grey-dark.html %}</td>
|
||||
<td class="has-text-grey-dark">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-grey</code></td>
|
||||
<td>{% include docs/color/grey.html %}</td>
|
||||
<td class="has-text-grey">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-grey-light</code></td>
|
||||
<td>{% include docs/color/grey-light.html %}</td>
|
||||
<td class="has-text-grey-light">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-grey-lighter</code></td>
|
||||
<td>{% include docs/color/grey-lighter.html %}</td>
|
||||
<td class="has-text-grey-lighter">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-white-ter</code></td>
|
||||
<td>{% include docs/color/white-ter.html %}</td>
|
||||
<td class="has-background-black-ter has-text-white-ter">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-white-bis</code></td>
|
||||
<td>{% include docs/color/white-bis.html %}</td>
|
||||
<td class="has-background-black-bis has-text-white-bis">Hello Bulma</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% include elements/new-tag.html version="0.9.0" %}
|
||||
|
||||
<p class="block">You can use each color in their <strong>light</strong> and <strong>dark versions</strong>. Simply append <code>*-light</code> or <code>*-dark</code>.</p>
|
||||
<p class="block">
|
||||
You can use each color in their <strong>light</strong> and
|
||||
<strong>dark versions</strong>. Simply append <code>*-light</code> or
|
||||
<code>*-dark</code>.
|
||||
</p>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Light/Dark color
|
||||
</th>
|
||||
<th>
|
||||
Example
|
||||
</th>
|
||||
<th>Class</th>
|
||||
<th>Light/Dark color</th>
|
||||
<th>Example</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>has-text-primary-light</code></td><td>{% include color/turquoise-light.html %}</td><td class="has-background-dark has-text-primary-light">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-link-light</code></td><td>{% include color/blue-light.html %}</td><td class="has-background-dark has-text-link-light">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-info-light</code></td><td>{% include color/cyan-light.html %}</td><td class="has-background-dark has-text-info-light">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-success-light</code></td><td>{% include color/green-light.html %}</td><td class="has-background-dark has-text-success-light">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-warning-light</code></td><td>{% include color/yellow-light.html %}</td><td class="has-background-dark has-text-warning-light">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-danger-light</code></td><td>{% include color/red-light.html %}</td><td class="has-background-dark has-text-danger-light">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-primary-dark</code></td><td>{% include color/turquoise-dark.html %}</td><td class="has-text-primary-dark">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-link-dark</code></td><td>{% include color/blue-dark.html %}</td><td class="has-text-link-dark">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-info-dark</code></td><td>{% include color/cyan-dark.html %}</td><td class="has-text-info-dark">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-success-dark</code></td><td>{% include color/green-dark.html %}</td><td class="has-text-success-dark">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-warning-dark</code></td><td>{% include color/yellow-dark.html %}</td><td class="has-text-warning-dark">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-text-danger-dark</code></td><td>{% include color/red-dark.html %}</td><td class="has-text-danger-dark">Hello Bulma</td></tr>
|
||||
<tr>
|
||||
<td><code>has-text-primary-light</code></td>
|
||||
<td>{% include docs/color/turquoise-light.html %}</td>
|
||||
<td class="has-background-dark has-text-primary-light">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-link-light</code></td>
|
||||
<td>{% include docs/color/blue-light.html %}</td>
|
||||
<td class="has-background-dark has-text-link-light">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-info-light</code></td>
|
||||
<td>{% include docs/color/cyan-light.html %}</td>
|
||||
<td class="has-background-dark has-text-info-light">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-success-light</code></td>
|
||||
<td>{% include docs/color/green-light.html %}</td>
|
||||
<td class="has-background-dark has-text-success-light">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-warning-light</code></td>
|
||||
<td>{% include docs/color/yellow-light.html %}</td>
|
||||
<td class="has-background-dark has-text-warning-light">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-danger-light</code></td>
|
||||
<td>{% include docs/color/red-light.html %}</td>
|
||||
<td class="has-background-dark has-text-danger-light">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-primary-dark</code></td>
|
||||
<td>{% include docs/color/turquoise-dark.html %}</td>
|
||||
<td class="has-text-primary-dark">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-link-dark</code></td>
|
||||
<td>{% include docs/color/blue-dark.html %}</td>
|
||||
<td class="has-text-link-dark">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-info-dark</code></td>
|
||||
<td>{% include docs/color/cyan-dark.html %}</td>
|
||||
<td class="has-text-info-dark">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-success-dark</code></td>
|
||||
<td>{% include docs/color/green-dark.html %}</td>
|
||||
<td class="has-text-success-dark">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-warning-dark</code></td>
|
||||
<td>{% include docs/color/yellow-dark.html %}</td>
|
||||
<td class="has-text-warning-dark">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-danger-dark</code></td>
|
||||
<td>{% include docs/color/red-dark.html %}</td>
|
||||
<td class="has-text-danger-dark">Hello Bulma</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% assign vernum = site.data.meta.version | downcase | remove: "." | plus: 0 %}
|
||||
|
||||
{% include elements/anchor.html name="Background color" %}
|
||||
{% assign vernum = site.data.meta.version | downcase | remove: '.' | plus: 0 %}
|
||||
{% include docs/elements/anchor.html name="Background color" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can set any element to one of the <strong>10 colors</strong> or <strong>9 shades of grey</strong>:
|
||||
You can set any element to one of the <strong>10 colors</strong> or
|
||||
<strong>9 shades of grey</strong>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Background color
|
||||
</th>
|
||||
<th>Class</th>
|
||||
<th>Background color</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>has-background-white</code></td><td>{% include color/white.html %}</td></tr>
|
||||
<tr><td><code>has-background-black</code></td><td>{% include color/black.html %}</td></tr>
|
||||
<tr><td><code>has-background-light</code></td><td>{% include color/white-ter.html %}</td></tr>
|
||||
<tr><td><code>has-background-dark</code></td><td>{% include color/grey-darker.html %}</td></tr>
|
||||
<tr><td><code>has-background-primary</code></td><td>{% include color/turquoise.html %}</td></tr>
|
||||
<tr><td><code>has-background-link</code></td><td>{% include color/blue.html %}</td></tr>
|
||||
<tr><td><code>has-background-info</code></td><td>{% include color/cyan.html %}</td></tr>
|
||||
<tr><td><code>has-background-success</code></td><td>{% include color/green.html %}</td></tr>
|
||||
<tr><td><code>has-background-warning</code></td><td>{% include color/yellow.html %}</td></tr>
|
||||
<tr><td><code>has-background-danger</code></td><td>{% include color/red.html %}</td></tr>
|
||||
<tr>
|
||||
<td><code>has-background-white</code></td>
|
||||
<td>{% include docs/color/white.html %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-black</code></td>
|
||||
<td>{% include docs/color/black.html %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-light</code></td>
|
||||
<td>{% include docs/color/white-ter.html %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-dark</code></td>
|
||||
<td>{% include docs/color/grey-darker.html %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-primary</code></td>
|
||||
<td>{% include docs/color/turquoise.html %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-link</code></td>
|
||||
<td>{% include docs/color/blue.html %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-info</code></td>
|
||||
<td>{% include docs/color/cyan.html %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-success</code></td>
|
||||
<td>{% include docs/color/green.html %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-warning</code></td>
|
||||
<td>{% include docs/color/yellow.html %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-danger</code></td>
|
||||
<td>{% include docs/color/red.html %}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Background shade
|
||||
</th>
|
||||
<th>Class</th>
|
||||
<th>Background shade</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>has-background-black-bis</code></td><td>{% include color/black-bis.html %}</td></tr>
|
||||
<tr><td><code>has-background-black-ter</code></td><td>{% include color/black-ter.html %}</td></tr>
|
||||
<tr><td><code>has-background-grey-darker</code></td><td>{% include color/grey-darker.html %}</td></tr>
|
||||
<tr><td><code>has-background-grey-dark</code></td><td>{% include color/grey-dark.html %}</td></tr>
|
||||
<tr><td><code>has-background-grey</code></td><td>{% include color/grey.html %}</td></tr>
|
||||
<tr><td><code>has-background-grey-light</code></td><td>{% include color/grey-light.html %}</td></tr>
|
||||
<tr><td><code>has-background-grey-lighter</code></td><td>{% include color/grey-lighter.html %}</td></tr>
|
||||
<tr><td><code>has-background-white-ter</code></td><td>{% include color/white-ter.html %}</td></tr>
|
||||
<tr><td><code>has-background-white-bis</code></td><td>{% include color/white-bis.html %}</td></tr>
|
||||
<tr>
|
||||
<td><code>has-background-black-bis</code></td>
|
||||
<td>{% include docs/color/black-bis.html %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-black-ter</code></td>
|
||||
<td>{% include docs/color/black-ter.html %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-grey-darker</code></td>
|
||||
<td>{% include docs/color/grey-darker.html %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-grey-dark</code></td>
|
||||
<td>{% include docs/color/grey-dark.html %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-grey</code></td>
|
||||
<td>{% include docs/color/grey.html %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-grey-light</code></td>
|
||||
<td>{% include docs/color/grey-light.html %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-grey-lighter</code></td>
|
||||
<td>{% include docs/color/grey-lighter.html %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-white-ter</code></td>
|
||||
<td>{% include docs/color/white-ter.html %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-white-bis</code></td>
|
||||
<td>{% include docs/color/white-bis.html %}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% include elements/new-tag.html version="0.9.0" %}
|
||||
|
||||
<p class="block">You can use each color in their <strong>light</strong> and <strong>dark versions</strong>. Simply append <code>*-light</code> or <code>*-dark</code>.</p>
|
||||
<p class="block">
|
||||
You can use each color in their <strong>light</strong> and
|
||||
<strong>dark versions</strong>. Simply append <code>*-light</code> or
|
||||
<code>*-dark</code>.
|
||||
</p>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Light/Dark background
|
||||
</th>
|
||||
<th>
|
||||
Example
|
||||
</th>
|
||||
<th>Class</th>
|
||||
<th>Light/Dark background</th>
|
||||
<th>Example</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>has-background-primary-light</code></td><td>{% include color/turquoise-light.html %}</td><td class="has-text-primary has-background-primary-light">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-background-link-light</code></td><td>{% include color/blue-light.html %}</td><td class="has-text-link has-background-link-light">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-background-info-light</code></td><td>{% include color/cyan-light.html %}</td><td class="has-text-info has-background-info-light">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-background-success-light</code></td><td>{% include color/green-light.html %}</td><td class="has-text-success has-background-success-light">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-background-warning-light</code></td><td>{% include color/yellow-light.html %}</td><td class="has-text-warning has-background-warning-light">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-background-danger-light</code></td><td>{% include color/red-light.html %}</td><td class="has-text-danger has-background-danger-light">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-background-primary-dark</code></td><td>{% include color/turquoise-dark.html %}</td><td class="has-text-white has-background-primary-dark">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-background-link-dark</code></td><td>{% include color/blue-dark.html %}</td><td class="has-text-white has-background-link-dark">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-background-info-dark</code></td><td>{% include color/cyan-dark.html %}</td><td class="has-text-white has-background-info-dark">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-background-success-dark</code></td><td>{% include color/green-dark.html %}</td><td class="has-text-white has-background-success-dark">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-background-warning-dark</code></td><td>{% include color/yellow-dark.html %}</td><td class="has-text-white has-background-warning-dark">Hello Bulma</td></tr>
|
||||
<tr><td><code>has-background-danger-dark</code></td><td>{% include color/red-dark.html %}</td><td class="has-text-white has-background-danger-dark">Hello Bulma</td></tr>
|
||||
<tr>
|
||||
<td><code>has-background-primary-light</code></td>
|
||||
<td>{% include docs/color/turquoise-light.html %}</td>
|
||||
<td class="has-text-primary has-background-primary-light">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-link-light</code></td>
|
||||
<td>{% include docs/color/blue-light.html %}</td>
|
||||
<td class="has-text-link has-background-link-light">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-info-light</code></td>
|
||||
<td>{% include docs/color/cyan-light.html %}</td>
|
||||
<td class="has-text-info has-background-info-light">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-success-light</code></td>
|
||||
<td>{% include docs/color/green-light.html %}</td>
|
||||
<td class="has-text-success has-background-success-light">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-warning-light</code></td>
|
||||
<td>{% include docs/color/yellow-light.html %}</td>
|
||||
<td class="has-text-warning has-background-warning-light">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-danger-light</code></td>
|
||||
<td>{% include docs/color/red-light.html %}</td>
|
||||
<td class="has-text-danger has-background-danger-light">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-primary-dark</code></td>
|
||||
<td>{% include docs/color/turquoise-dark.html %}</td>
|
||||
<td class="has-text-white has-background-primary-dark">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-link-dark</code></td>
|
||||
<td>{% include docs/color/blue-dark.html %}</td>
|
||||
<td class="has-text-white has-background-link-dark">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-info-dark</code></td>
|
||||
<td>{% include docs/color/cyan-dark.html %}</td>
|
||||
<td class="has-text-white has-background-info-dark">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-success-dark</code></td>
|
||||
<td>{% include docs/color/green-dark.html %}</td>
|
||||
<td class="has-text-white has-background-success-dark">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-warning-dark</code></td>
|
||||
<td>{% include docs/color/yellow-dark.html %}</td>
|
||||
<td class="has-text-white has-background-warning-dark">Hello Bulma</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-background-danger-dark</code></td>
|
||||
<td>{% include docs/color/red-dark.html %}</td>
|
||||
<td class="has-text-white has-background-danger-dark">Hello Bulma</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -1,68 +1,68 @@
|
||||
---
|
||||
title: Flexbox helpers
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: helpers
|
||||
doc-tab: helpers
|
||||
doc-subtab: helpers-flexbox
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- helpers
|
||||
- helpers-flexbox
|
||||
- home
|
||||
- documentation
|
||||
- helpers
|
||||
- helpers-flexbox
|
||||
flex-direction-values:
|
||||
- row
|
||||
- row-reverse
|
||||
- column
|
||||
- column-reverse
|
||||
- row
|
||||
- row-reverse
|
||||
- column
|
||||
- column-reverse
|
||||
flex-wrap-values:
|
||||
- nowrap
|
||||
- wrap
|
||||
- wrap-reverse
|
||||
- nowrap
|
||||
- wrap
|
||||
- wrap-reverse
|
||||
justify-content-values:
|
||||
- flex-start
|
||||
- flex-end
|
||||
- center
|
||||
- space-between
|
||||
- space-around
|
||||
- space-evenly
|
||||
- start
|
||||
- end
|
||||
- left
|
||||
- right
|
||||
- flex-start
|
||||
- flex-end
|
||||
- center
|
||||
- space-between
|
||||
- space-around
|
||||
- space-evenly
|
||||
- start
|
||||
- end
|
||||
- left
|
||||
- right
|
||||
align-content-values:
|
||||
- flex-start
|
||||
- flex-end
|
||||
- center
|
||||
- space-between
|
||||
- space-around
|
||||
- space-evenly
|
||||
- stretch
|
||||
- start
|
||||
- end
|
||||
- baseline
|
||||
- flex-start
|
||||
- flex-end
|
||||
- center
|
||||
- space-between
|
||||
- space-around
|
||||
- space-evenly
|
||||
- stretch
|
||||
- start
|
||||
- end
|
||||
- baseline
|
||||
align-items-values:
|
||||
- stretch
|
||||
- flex-start
|
||||
- flex-end
|
||||
- center
|
||||
- baseline
|
||||
- start
|
||||
- end
|
||||
- self-start
|
||||
- self-end
|
||||
- stretch
|
||||
- flex-start
|
||||
- flex-end
|
||||
- center
|
||||
- baseline
|
||||
- start
|
||||
- end
|
||||
- self-start
|
||||
- self-end
|
||||
align-self-values:
|
||||
- auto
|
||||
- flex-start
|
||||
- flex-end
|
||||
- center
|
||||
- baseline
|
||||
- stretch
|
||||
- auto
|
||||
- flex-start
|
||||
- flex-end
|
||||
- center
|
||||
- baseline
|
||||
- stretch
|
||||
---
|
||||
|
||||
{% include elements/new-tag.html version="0.9.1" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Combined with <code>is-flex</code>, all of the <strong>Flexbox CSS properties</strong> are available as Bulma helpers:
|
||||
Combined with <code>is-flex</code>, all of the
|
||||
<strong>Flexbox CSS properties</strong> are available as Bulma helpers:
|
||||
</p>
|
||||
<ul>
|
||||
<li><code>flex-direction</code></li>
|
||||
@@ -76,31 +76,22 @@ align-self-values:
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Flex direction" %}
|
||||
|
||||
{% include elements/flexbox-helper-table.html property="flex-direction" values=page.flex-direction-values %}
|
||||
|
||||
{% include elements/anchor.html name="Flex wrap" %}
|
||||
|
||||
{% include elements/flexbox-helper-table.html property="flex-wrap" values=page.flex-wrap-values %}
|
||||
|
||||
{% include elements/anchor.html name="Justify content" %}
|
||||
|
||||
{% include elements/flexbox-helper-table.html property="justify-content" values=page.justify-content-values %}
|
||||
|
||||
{% include elements/anchor.html name="Align content" %}
|
||||
|
||||
{% include elements/flexbox-helper-table.html property="align-content" values=page.align-content-values %}
|
||||
|
||||
{% include elements/anchor.html name="Align items" %}
|
||||
|
||||
{% include elements/flexbox-helper-table.html property="align-items" values=page.align-items-values %}
|
||||
|
||||
{% include elements/anchor.html name="Align self" %}
|
||||
|
||||
{% include elements/flexbox-helper-table.html property="align-self" values=page.align-self-values %}
|
||||
|
||||
{% include elements/anchor.html name="Flex grow and flex shrink" %}
|
||||
{% include docs/elements/anchor.html name="Flex direction" %} {% include
|
||||
docs/elements/flexbox-helper-table.html property="flex-direction"
|
||||
values=page.flex-direction-values %} {% include docs/elements/anchor.html
|
||||
name="Flex wrap" %} {% include docs/elements/flexbox-helper-table.html
|
||||
property="flex-wrap" values=page.flex-wrap-values %} {% include
|
||||
docs/elements/anchor.html name="Justify content" %} {% include
|
||||
docs/elements/flexbox-helper-table.html property="justify-content"
|
||||
values=page.justify-content-values %} {% include docs/elements/anchor.html
|
||||
name="Align content" %} {% include docs/elements/flexbox-helper-table.html
|
||||
property="align-content" values=page.align-content-values %} {% include
|
||||
docs/elements/anchor.html name="Align items" %} {% include
|
||||
docs/elements/flexbox-helper-table.html property="align-items"
|
||||
values=page.align-items-values %} {% include docs/elements/anchor.html
|
||||
name="Align self" %} {% include docs/elements/flexbox-helper-table.html
|
||||
property="align-self" values=page.align-self-values %} {% include
|
||||
docs/elements/anchor.html name="Flex grow and flex shrink" %}
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
@@ -114,20 +105,27 @@ align-self-values:
|
||||
<th colspan="2">Grow</th>
|
||||
</tr>
|
||||
{% for i in (0..5) %}
|
||||
<tr>
|
||||
<td><code>is-flex-grow-{{ i }}</code></td>
|
||||
<td><code>flex-grow: {{ i }}</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>is-flex-grow-{{ i }}</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>flex-grow: {{ i }}</code>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
<tr>
|
||||
<th colspan="2">Shrink</th>
|
||||
</tr>
|
||||
{% for i in (0..5) %}
|
||||
<tr>
|
||||
<td><code>is-flex-shrink-{{ i }}</code></td>
|
||||
<td><code>flex-shrink: {{ i }}</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>is-flex-shrink-{{ i }}</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>flex-shrink: {{ i }}</code>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
@@ -1,18 +1,17 @@
|
||||
---
|
||||
title: Other helpers
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: helpers
|
||||
doc-tab: helpers
|
||||
doc-subtab: helpers-other
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- helpers
|
||||
- helpers-other
|
||||
- home
|
||||
- documentation
|
||||
- helpers
|
||||
- helpers-other
|
||||
---
|
||||
|
||||
<p class="block">
|
||||
Here are some other helpers shipped with Bulma:
|
||||
</p>
|
||||
<p class="block">Here are some other helpers shipped with Bulma:</p>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<tbody>
|
||||
|
||||
89
docs/documentation/helpers/palette-helpers.html
Normal file
89
docs/documentation/helpers/palette-helpers.html
Normal file
@@ -0,0 +1,89 @@
|
||||
---
|
||||
title: Color Palette helpers
|
||||
layout: docs
|
||||
theme: helpers
|
||||
doc-tab: helpers
|
||||
doc-subtab: helpers-palette
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- helpers
|
||||
- helpers-palette
|
||||
---
|
||||
|
||||
<p class="block">Bulma comes with 7 primary colors:</p>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<tr><td><code>text</code></td><td><span class="bd-color-swatch" style="--background: var(--bulma-text);"></span></td></tr>
|
||||
<tr><td><code>link</code></td><td><span class="bd-color-swatch" style="--background: var(--bulma-link);"></span></td></tr>
|
||||
<tr><td><code>primary</code></td><td><span class="bd-color-swatch" style="--background: var(--bulma-primary);"></span></td></tr>
|
||||
<tr><td><code>info</code></td><td><span class="bd-color-swatch" style="--background: var(--bulma-info);"></span></td></tr>
|
||||
<tr><td><code>success</code></td><td><span class="bd-color-swatch" style="--background: var(--bulma-success);"></span></td></tr>
|
||||
<tr><td><code>warning</code></td><td><span class="bd-color-swatch" style="--background: var(--bulma-warning);"></span></td></tr>
|
||||
<tr><td><code>danger</code></td><td><span class="bd-color-swatch" style="--background: var(--bulma-danger);"></span></td></tr>
|
||||
</table>
|
||||
|
||||
<p class="block">Bulma will automatically <strong>generate a collection of shades</strong> for each of those colors. These act as a <strong>color palette</strong> you can use to play with different variants of a same color.</p>
|
||||
|
||||
{% include docs/elements/anchor.html name="Text color" %}
|
||||
|
||||
<div class="content">
|
||||
Bulma comes with CSS classes for <strong>27 shades</strong> of each color. Each shade also comes with an <strong>invert</strong> equivalent, that is useful to combine in a foreground/background combination.
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Class</th>
|
||||
<th>Code</th>
|
||||
<th>Example</th>
|
||||
<th>Swatch</th>
|
||||
<th>Invert</th>
|
||||
<th>Swatch</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for shade in site.data.palette %}
|
||||
{% assign background = "var(--bulma-primary" | append: shade | append: ")" %}
|
||||
{% assign invert = "var(--bulma-primary" | append: shade | append: "-invert)" %}
|
||||
<tr>
|
||||
<td style="vertical-align: middle;"><code>has-text-primary{{ shade }}</code></td>
|
||||
<td class="p-0" style="--hl-radius: 0;">{% highlight html %}<p class="has-text-primary{{ shade }}">Hello Bulma</p>{% endhighlight %}</td>
|
||||
<td style="vertical-align: middle;"><span class="has-text-primary{{ shade }}">Hello Bulma</span></td>
|
||||
<td class="has-text-centered" style="vertical-align: middle;">{% include docs/elements/color-swatch.html background=background %}</td>
|
||||
<td style="vertical-align: middle;"><span class="has-text-primary{{ shade }}-invert">Hello Bulma</span></td>
|
||||
<td class="has-text-centered" style="vertical-align: middle;">{% include docs/elements/color-swatch.html background=invert %}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% include docs/elements/anchor.html name="Background color" %}
|
||||
|
||||
<div class="content">
|
||||
All 27 shades are also available as <strong>background helpers</strong>. Combined with the invert color as foreground, it's easy to make readable elements with just 2 classes.
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Class</th>
|
||||
<th>Code</th>
|
||||
<th>Example</th>
|
||||
<th>Swatch</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for shade in site.data.palette %}
|
||||
{% assign background = "var(--bulma-primary" | append: shade | append: ")" %}
|
||||
<tr>
|
||||
<td style="vertical-align: middle;"><code>has-background-primary{{ shade }}</code></td>
|
||||
<td class="p-0" style="--hl-radius: 0;"><div style="max-width: 40rem; overflow: hidden;">{% highlight html %}<p class="has-background-primary{{ shade }} has-text-primary{{ shade }}-invert">
|
||||
Hello Bulma
|
||||
</p>{% endhighlight %}</div></td>
|
||||
<td style="vertical-align: middle;" class="has-background-primary{{ shade }} has-text-primary{{ shade }}-invert">Hello Bulma</td>
|
||||
<td class="has-text-centered" style="vertical-align: middle;">{% include docs/elements/color-swatch.html background=background %}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -1,13 +1,14 @@
|
||||
---
|
||||
title: Spacing helpers
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: helpers
|
||||
doc-tab: helpers
|
||||
doc-subtab: helpers-spacing
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- helpers
|
||||
- helpers-spacing
|
||||
- home
|
||||
- documentation
|
||||
- helpers
|
||||
- helpers-spacing
|
||||
shortcuts:
|
||||
margin: m
|
||||
padding: p
|
||||
@@ -37,44 +38,46 @@ customValues:
|
||||
large: 60px
|
||||
---
|
||||
|
||||
{% include elements/new-tag.html version="0.9.0" %}
|
||||
|
||||
<div class="content">
|
||||
<p>Bulma provides <strong>margin</strong> <code>m*</code> and <strong>padding</strong> <code>p*</code> helpers in all <strong>directions</strong>:</p>
|
||||
<p>
|
||||
Bulma provides <strong>margin</strong> <code>m*</code> and
|
||||
<strong>padding</strong> <code>p*</code> helpers in all
|
||||
<strong>directions</strong>:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li><code>*t</code> for <strong>top</strong></li>
|
||||
<li><code>*r</code> for <strong>right</strong></li>
|
||||
<li><code>*b</code> for <strong>bottom</strong></li>
|
||||
<li><code>*l</code> for <strong>left</strong></li>
|
||||
<li>
|
||||
<code>*t</code> for <strong>top</strong>
|
||||
<code>*x</code> horizontally for both <strong>left</strong> and
|
||||
<strong>right</strong>
|
||||
</li>
|
||||
<li>
|
||||
<code>*r</code> for <strong>right</strong>
|
||||
</li>
|
||||
<li>
|
||||
<code>*b</code> for <strong>bottom</strong>
|
||||
</li>
|
||||
<li>
|
||||
<code>*l</code> for <strong>left</strong>
|
||||
</li>
|
||||
<li>
|
||||
<code>*x</code> horizontally for both <strong>left</strong> and <strong>right</strong>
|
||||
</li>
|
||||
<li>
|
||||
<code>*y</code> vertically for both <strong>top</strong> and <strong>bottom</strong>
|
||||
<code>*y</code> vertically for both <strong>top</strong> and
|
||||
<strong>bottom</strong>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
You need to <strong>combine</strong> a margin/padding prefix with a direction suffix. For example:
|
||||
You need to <strong>combine</strong> a margin/padding prefix with a
|
||||
direction suffix. For example:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>for a <code>margin-top</code>, use <code>mt-*</code></li>
|
||||
<li>for a <code>padding-bottom</code>, use <code>pb-*</code></li>
|
||||
<li>for both <code>margin-left</code> and <code>margin-right</code>, use <code>mx-*</code></li>
|
||||
<li>
|
||||
for both <code>margin-left</code> and <code>margin-right</code>, use
|
||||
<code>mx-*</code>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
Each of these <code>property-direction</code> <strong>combinations</strong> needs to be appended with one of <strong>6 value suffixes</strong>:
|
||||
Each of these <code>property-direction</code>
|
||||
<strong>combinations</strong> needs to be appended with one of
|
||||
<strong>6 value suffixes</strong>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -84,102 +87,99 @@ customValues:
|
||||
<th>Value</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><code>*-0</code></td><td><code>0</code></td></tr>
|
||||
<tr><td><code>*-1</code></td><td><code>0.25rem</code></td></tr>
|
||||
<tr><td><code>*-2</code></td><td><code>0.5rem</code></td></tr>
|
||||
<tr><td><code>*-3</code></td><td><code>0.75rem</code></td></tr>
|
||||
<tr><td><code>*-4</code></td><td><code>1rem</code></td></tr>
|
||||
<tr><td><code>*-5</code></td><td><code>1.5rem</code></td></tr>
|
||||
<tr><td><code>*-6</code></td><td><code>3rem</code></td></tr>
|
||||
<tr>
|
||||
<td><code>*-0</code></td>
|
||||
<td><code>0</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>*-1</code></td>
|
||||
<td><code>0.25rem</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>*-2</code></td>
|
||||
<td><code>0.5rem</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>*-3</code></td>
|
||||
<td><code>0.75rem</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>*-4</code></td>
|
||||
<td><code>1rem</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>*-5</code></td>
|
||||
<td><code>1.5rem</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>*-6</code></td>
|
||||
<td><code>3rem</code></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% include elements/anchor.html name="List of all spacing helpers" %}
|
||||
{% include docs/elements/anchor.html name="List of all spacing helpers" %}
|
||||
|
||||
<p class="block">
|
||||
There are <strong>112 spacing helpers</strong> to choose from:
|
||||
</p>
|
||||
|
||||
{% include
|
||||
components/spacing-table.html
|
||||
values=page.values
|
||||
shortcuts=page.shortcuts
|
||||
directions=page.directions
|
||||
horizontal=page.horizontal
|
||||
vertical=page.vertical
|
||||
%}
|
||||
{% include docs/components/spacing-table.html values=page.values
|
||||
shortcuts=page.shortcuts directions=page.directions horizontal=page.horizontal
|
||||
vertical=page.vertical %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
To use these classes, simply append them to any HTML element:
|
||||
</p>
|
||||
<p>To use these classes, simply append them to any HTML element:</p>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<!-- Adds 1rem of margin at the bottom -->
|
||||
<p class="mb-4">
|
||||
Margin bottom
|
||||
</p>
|
||||
<p class="mb-4">Margin bottom</p>
|
||||
|
||||
<!-- Adds 0.25rem of padding on the left and the right -->
|
||||
<p class="px-1">
|
||||
Horizontal padding
|
||||
</p>
|
||||
<p class="px-1">Horizontal padding</p>
|
||||
|
||||
<!-- Removes the margin on the right and adds 0.75rem padding at the top -->
|
||||
<p class="mr-0 pt-3">
|
||||
Both
|
||||
</p>
|
||||
{% endhighlight %}
|
||||
|
||||
{% include elements/anchor.html name="Configuration" %}
|
||||
|
||||
{% capture custom %}
|
||||
$spacing-shortcuts: ("margin": "mg");
|
||||
$spacing-horizontal: "h";
|
||||
$spacing-vertical: null;
|
||||
$spacing-values: ("small": 10px, "medium": 30px, "large": 60px);
|
||||
{% endcapture %}
|
||||
<p class="mr-0 pt-3">Both</p>
|
||||
{% endhighlight %} {% include docs/elements/anchor.html name="Configuration" %}
|
||||
{% capture custom %} $spacing-shortcuts: ("margin": "mg"); $spacing-horizontal:
|
||||
"h"; $spacing-vertical: null; $spacing-values: ("small": 10px, "medium": 30px,
|
||||
"large": 60px); {% endcapture %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Because every developer has their own preferences, and to satisfy Bulma's customization features, it's possible to specify your own <strong>class name shortcuts</strong> as well as the <strong>spacing values</strong>.
|
||||
</p>
|
||||
<p>
|
||||
For example, if you wanted:
|
||||
Because every developer has their own preferences, and to satisfy Bulma's
|
||||
customization features, it's possible to specify your own
|
||||
<strong>class name shortcuts</strong> as well as the
|
||||
<strong>spacing values</strong>.
|
||||
</p>
|
||||
<p>For example, if you wanted:</p>
|
||||
<ul>
|
||||
<li><strong>margin</strong> to be abbreviated to <code>mg</code></li>
|
||||
<li>
|
||||
<strong>margin</strong> to be abbreviated to <code>mg</code>
|
||||
<strong>padding</strong> to be totally
|
||||
<strong class="has-text-danger">excluded</strong>
|
||||
</li>
|
||||
<li><strong>horizontal</strong> to be abbreviated to <code>h</code></li>
|
||||
<li><strong>vertical</strong> to be excluded as well</li>
|
||||
<li>
|
||||
<strong>padding</strong> to be totally <strong class="has-text-danger">excluded</strong>
|
||||
</li>
|
||||
<li>
|
||||
<strong>horizontal</strong> to be abbreviated to <code>h</code>
|
||||
</li>
|
||||
<li>
|
||||
<strong>vertical</strong> to be excluded as well
|
||||
</li>
|
||||
<li>
|
||||
and to only have 3 values: <strong>"small"</strong> at <code>10px</code>, <strong>"medium"</strong> at <code>30px</code>, and <strong>"large"</strong> at <code>60px</code>
|
||||
and to only have 3 values: <strong>"small"</strong> at <code>10px</code>,
|
||||
<strong>"medium"</strong> at <code>30px</code>, and
|
||||
<strong>"large"</strong> at <code>60px</code>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
You can simplify the CSS output by customizing these <strong>SCSS variables</strong>:
|
||||
You can simplify the CSS output by customizing these
|
||||
<strong>SCSS variables</strong>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight scss %}{{ custom }}{% endhighlight %}
|
||||
|
||||
{% include
|
||||
components/spacing-table.html
|
||||
values=page.customValues
|
||||
shortcuts=page.customShortcuts
|
||||
directions=page.directions
|
||||
horizontal=page.customHorizontal
|
||||
%}
|
||||
{% highlight scss -%} {{- custom -}} {%- endhighlight %} {% include
|
||||
docs/components/spacing-table.html values=page.customValues
|
||||
shortcuts=page.customShortcuts directions=page.directions
|
||||
horizontal=page.customHorizontal %}
|
||||
|
||||
<p>
|
||||
By customizing the output, you've narrowed down the list of spacing helpers from 112 to only <strong>18</strong>.
|
||||
By customizing the output, you've narrowed down the list of spacing helpers
|
||||
from 112 to only <strong>18</strong>.
|
||||
</p>
|
||||
|
||||
@@ -1,102 +1,89 @@
|
||||
---
|
||||
title: Typography helpers
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: helpers
|
||||
doc-tab: helpers
|
||||
doc-subtab: helpers-typography
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- helpers
|
||||
- helpers-typography
|
||||
- home
|
||||
- documentation
|
||||
- helpers
|
||||
- helpers-typography
|
||||
---
|
||||
|
||||
{% assign initial_vars = site.data.variables.utilities.initial-variables.by_name %}
|
||||
{% assign sizes = site.data.variables.utilities.derived-variables.by_name['$sizes'].value | split: ' ' %}
|
||||
|
||||
{% capture thead %}
|
||||
{% assign initial_vars =
|
||||
site.data.variables.utilities['initial-variables'].by_name %} {% assign sizes =
|
||||
site.data.variables.utilities['derived-variables'].by_name['$sizes'].value |
|
||||
split: ' ' %} {% capture thead %}
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Class</th>
|
||||
{% for breakpoint_hash in site.data.breakpoints %} {% assign breakpoint =
|
||||
breakpoint_hash[1] %}
|
||||
<th>
|
||||
Class
|
||||
{{ breakpoint.name }}<br />
|
||||
{% if breakpoint.id == 'mobile' %} Up to
|
||||
<code>{{ breakpoint.to }}px</code>
|
||||
{% elsif breakpoint.id == 'fullhd' %}
|
||||
<code>{{ breakpoint.from }}px</code> and above {% else %} Between
|
||||
<code>{{ breakpoint.from }}px</code> and
|
||||
<code>{{ breakpoint.to }}px</code>
|
||||
{% endif %}
|
||||
</th>
|
||||
{% for breakpoint_hash in site.data.breakpoints %}
|
||||
{% assign breakpoint = breakpoint_hash[1] %}
|
||||
<th>
|
||||
{{ breakpoint.name }}<br>
|
||||
{% if breakpoint.id == 'mobile' %}
|
||||
Up to <code>{{ breakpoint.to }}px</code>
|
||||
{% elsif breakpoint.id == 'fullhd' %}
|
||||
<code>{{ breakpoint.from }}px</code> and above
|
||||
{% else %}
|
||||
Between <code>{{ breakpoint.from }}px</code> and <code>{{ breakpoint.to }}px</code>
|
||||
{% endif %}
|
||||
</th>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture size1 %}
|
||||
{% endcapture %} {% capture size1 %}
|
||||
<td class="is-narrow has-background-danger-light">
|
||||
<code class="has-background-danger-light">{{ initial_vars['$size-1'].value }}</code>
|
||||
<code class="has-background-danger-light"
|
||||
>{{ initial_vars['$size-1'].value }}</code
|
||||
>
|
||||
</td>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture unchanged %}
|
||||
<td class="is-narrow has-text-grey-light">
|
||||
unchanged
|
||||
</td>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture left %}
|
||||
{% endcapture %} {% capture unchanged %}
|
||||
<td class="is-narrow has-text-grey-light">unchanged</td>
|
||||
{% endcapture %} {% capture left %}
|
||||
<td class="is-narrow has-background-primary-light has-text-primary">
|
||||
left-aligned
|
||||
</td>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/anchor.html name="Size" %}
|
||||
{% endcapture %} {% include docs/elements/anchor.html name="Size" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
There are <strong>{{ sizes | size }} sizes</strong> to choose from:
|
||||
</p>
|
||||
<p>There are <strong>{{ sizes | size }} sizes</strong> to choose from:</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Font-size
|
||||
</th>
|
||||
<th>
|
||||
Size
|
||||
</th>
|
||||
<th>Class</th>
|
||||
<th>Font-size</th>
|
||||
<th>Size</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for size in sizes %}
|
||||
<tr>
|
||||
{% assign key = '$size-' | append: forloop.index %}
|
||||
<td><code>is-size-{{ forloop.index }}</code></td>
|
||||
<td><code>{{ initial_vars[key].value }}</code></td>
|
||||
<td><span class="is-size-{{ forloop.index }}">Example</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
{% assign key = '$size-' | append: forloop.index %}
|
||||
<td>
|
||||
<code>is-size-{{ forloop.index }}</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>{{ initial_vars[key].value }}</code>
|
||||
</td>
|
||||
<td><span class="is-size-{{ forloop.index }}">Example</span></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% include elements/anchor.html name="Responsive size" %}
|
||||
{% include docs/elements/anchor.html name="Responsive size" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can choose a <strong>specific</strong> size for <em>each</em> viewport width. You simply need to append the <strong>viewport width</strong> to the size modifier.
|
||||
</p>
|
||||
<p>
|
||||
For example, here are the modifiers for <code>$size-1</code>:
|
||||
You can choose a <strong>specific</strong> size for <em>each</em> viewport
|
||||
width. You simply need to append the <strong>viewport width</strong> to the
|
||||
size modifier.
|
||||
</p>
|
||||
<p>For example, here are the modifiers for <code>$size-1</code>:</p>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
@@ -105,111 +92,84 @@ breadcrumb:
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>is-size-1-mobile</code></td>
|
||||
{{ size1 }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ size1 }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged
|
||||
}}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>is-size-1-touch</code></td>
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ size1 }} {{ size1 }} {{ unchanged }} {{ unchanged }} {{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>is-size-1-tablet</code></td>
|
||||
{{ unchanged }}
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
{{ unchanged }} {{ size1 }} {{ size1 }} {{ size1 }} {{ size1 }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>is-size-1-desktop</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
{{ unchanged }} {{ unchanged }} {{ size1 }} {{ size1 }} {{ size1 }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>is-size-1-widescreen</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ size1 }}
|
||||
{{ size1 }}
|
||||
{{ unchanged }} {{ unchanged }} {{ unchanged }} {{ size1 }} {{ size1 }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>is-size-1-fullhd</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ size1 }}
|
||||
{{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ size1
|
||||
}}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can use the same logic for each of the <strong>7 sizes</strong>.
|
||||
</p>
|
||||
<p>You can use the same logic for each of the <strong>7 sizes</strong>.</p>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Alignment" %}
|
||||
{% include docs/elements/anchor.html name="Alignment" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can align the text with the use of one of <strong>4 alignment helpers</strong>:
|
||||
You can align the text with the use of one of
|
||||
<strong>4 alignment helpers</strong>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Alignment
|
||||
</th>
|
||||
<th>Class</th>
|
||||
<th>Alignment</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>has-text-centered</code></td>
|
||||
<td>Makes the text <strong>centered</strong></td>
|
||||
<td><code>has-text-centered</code></td>
|
||||
<td>Makes the text <strong>centered</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-justified</code></td>
|
||||
<td>Makes the text <strong>justified</strong></td>
|
||||
<td><code>has-text-justified</code></td>
|
||||
<td>Makes the text <strong>justified</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-left</code></td>
|
||||
<td>Makes the text aligned to the <strong>left</strong></td>
|
||||
<td><code>has-text-left</code></td>
|
||||
<td>Makes the text aligned to the <strong>left</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-right</code></td>
|
||||
<td>Makes the text aligned to the <strong>right</strong></td>
|
||||
<td><code>has-text-right</code></td>
|
||||
<td>Makes the text aligned to the <strong>right</strong></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% include elements/anchor.html name="Responsive Alignment" %}
|
||||
{% include docs/elements/anchor.html name="Responsive Alignment" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can <strong>align text</strong> differently for each <strong>viewport width</strong>. Simply append the <strong>viewport width</strong> to the alignment modifier.
|
||||
You can <strong>align text</strong> differently for each
|
||||
<strong>viewport width</strong>. Simply 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>
|
||||
<p>For example, here are the modifiers for <code>has-text-left</code>:</p>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
@@ -218,75 +178,44 @@ breadcrumb:
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>has-text-left-mobile</code></td>
|
||||
{{ left }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ left }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged
|
||||
}}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>has-text-left-touch</code></td>
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ left }} {{ left }} {{ unchanged }} {{ unchanged }} {{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>has-text-left-tablet-only</code></td>
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }} {{ left }} {{ unchanged }} {{ unchanged }} {{ unchanged
|
||||
}}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>has-text-left-tablet</code></td>
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
{{ unchanged }} {{ left }} {{ left }} {{ left }} {{ left }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>has-text-left-desktop-only</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }} {{ unchanged }} {{ left }} {{ unchanged }} {{ unchanged
|
||||
}}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>has-text-left-desktop</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
{{ unchanged }} {{ unchanged }} {{ left }} {{ left }} {{ left }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>has-text-left-widescreen-only</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }} {{ unchanged }} {{ unchanged }} {{ left }} {{ unchanged
|
||||
}}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>has-text-left-widescreen</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
{{ left }}
|
||||
{{ unchanged }} {{ unchanged }} {{ unchanged }} {{ left }} {{ left }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow"><code>has-text-left-fullhd</code></td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ left }}
|
||||
{{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ left
|
||||
}}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -298,119 +227,139 @@ breadcrumb:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Text transformation" %}
|
||||
{% include docs/elements/anchor.html name="Text transformation" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can transform the text with the use of one of <strong>4 text transformation helpers</strong>:
|
||||
You can transform the text with the use of one of
|
||||
<strong>4 text transformation helpers</strong>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Transformation
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Class</th>
|
||||
<th>Transformation</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>is-capitalized</code></td>
|
||||
<td>Transforms <strong>the first character</strong> of each word to <strong>Uppercase</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-lowercase</code></td>
|
||||
<td>Transforms <strong>all characters</strong> to <strong>lowercase</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-uppercase</code></td>
|
||||
<td>Transforms <strong>all characters</strong> to <strong>UPPERCASE</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-italic</code></td>
|
||||
<td>Transforms <strong>all characters</strong> to <strong class="is-italic">italic</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{% include elements/new-tag.html version="0.9.3" %}<code>is-underlined</code></td>
|
||||
<td><strong class="is-underlined">Underlines</strong> the text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-capitalized</code></td>
|
||||
<td>
|
||||
Transforms <strong>the first character</strong> of each word to
|
||||
<strong>Uppercase</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-lowercase</code></td>
|
||||
<td>
|
||||
Transforms <strong>all characters</strong> to <strong>lowercase</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-uppercase</code></td>
|
||||
<td>
|
||||
Transforms <strong>all characters</strong> to <strong>UPPERCASE</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-italic</code></td>
|
||||
<td>
|
||||
Transforms <strong>all characters</strong> to
|
||||
<strong class="is-italic">italic</strong>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>is-underlined</code>
|
||||
</td>
|
||||
<td><strong class="is-underlined">Underlines</strong> the text</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% include elements/anchor.html name="Text weight" %}
|
||||
{% include docs/elements/anchor.html name="Text weight" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can transform the text weight with the use of one of <strong>5 text weight helpers</strong>:
|
||||
You can transform the text weight with the use of one of
|
||||
<strong>5 text weight helpers</strong>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Weight
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Class</th>
|
||||
<th>Weight</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>has-text-weight-light</code></td>
|
||||
<td>Transforms text weight to <span class="has-text-weight-light">light</span></td>
|
||||
<td>
|
||||
Transforms text weight to
|
||||
<span class="has-text-weight-light">light</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-weight-normal</code></td>
|
||||
<td>Transforms text weight to <span class="has-text-weight-normal">normal</span></td>
|
||||
<td>
|
||||
Transforms text weight to
|
||||
<span class="has-text-weight-normal">normal</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-weight-medium</code></td>
|
||||
<td>Transforms text weight to <span class="has-text-weight-medium">medium</span></td>
|
||||
<td>
|
||||
Transforms text weight to
|
||||
<span class="has-text-weight-medium">medium</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-weight-semibold</code></td>
|
||||
<td>Transforms text weight to <span class="has-text-weight-semibold">semi-bold</span></td>
|
||||
<td>
|
||||
Transforms text weight to
|
||||
<span class="has-text-weight-semibold">semi-bold</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>has-text-weight-bold</code></td>
|
||||
<td>Transforms text weight to <span class="has-text-weight-bold">bold</span></td>
|
||||
<td>
|
||||
Transforms text weight to <span class="has-text-weight-bold">bold</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% include elements/anchor.html name="Font family" %}
|
||||
{% include docs/elements/anchor.html name="Font family" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can change the font family with the use of one of <strong>5 font family helpers</strong>:
|
||||
You can change the font family with the use of one of
|
||||
<strong>5 font family helpers</strong>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% assign font_families = "sans-serif,monospace,primary,secondary,code" | split: ',' %}
|
||||
{% assign font_families = 'sans-serif,monospace,primary,secondary,code' | split:
|
||||
',' %}
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Family
|
||||
</th>
|
||||
<th>Class</th>
|
||||
<th>Family</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for family in font_families %}
|
||||
<tr>
|
||||
<td><code>is-family-{{ family }}</code></td>
|
||||
<td>Sets font family to <code>$family-{{ family }}</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>is-family-{{ family }}</code>
|
||||
</td>
|
||||
<td>Sets font family to <code>$family-{{ family }}</code></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -1,68 +1,47 @@
|
||||
---
|
||||
title: Responsive helpers
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: helpers
|
||||
doc-tab: helpers
|
||||
doc-subtab: helpers-visibility
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- helpers
|
||||
- helpers-visibility
|
||||
- home
|
||||
- documentation
|
||||
- helpers
|
||||
- helpers-visibility
|
||||
---
|
||||
|
||||
{% capture thead %}
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Class</th>
|
||||
{% for breakpoint_hash in site.data.breakpoints %} {% assign breakpoint =
|
||||
breakpoint_hash[1] %}
|
||||
<th>
|
||||
Class
|
||||
{{ breakpoint.name }}<br />
|
||||
{% if breakpoint.id == 'mobile' %} Up to
|
||||
<code>{{ breakpoint.to }}px</code>
|
||||
{% elsif breakpoint.id == 'fullhd' %}
|
||||
<code>{{ breakpoint.from }}px</code> and above {% else %} Between
|
||||
<code>{{ breakpoint.from }}px</code> and
|
||||
<code>{{ breakpoint.to }}px</code>
|
||||
{% endif %}
|
||||
</th>
|
||||
{% for breakpoint_hash in site.data.breakpoints %}
|
||||
{% assign breakpoint = breakpoint_hash[1] %}
|
||||
<th>
|
||||
{{ breakpoint.name }}<br>
|
||||
{% if breakpoint.id == 'mobile' %}
|
||||
Up to <code>{{ breakpoint.to }}px</code>
|
||||
{% elsif breakpoint.id == 'fullhd' %}
|
||||
<code>{{ breakpoint.from }}px</code> and above
|
||||
{% else %}
|
||||
Between <code>{{ breakpoint.from }}px</code> and <code>{{ breakpoint.to }}px</code>
|
||||
{% endif %}
|
||||
</th>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture flex %}
|
||||
<td class="is-narrow has-text-primary has-background-primary-light">
|
||||
Flex
|
||||
</td>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture visible %}
|
||||
<td class="is-narrow has-text-success has-background-success-light">
|
||||
Visible
|
||||
</td>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture hidden %}
|
||||
<td class="is-narrow has-text-danger has-background-danger-light">
|
||||
Hidden
|
||||
</td>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture unchanged %}
|
||||
<td class="is-narrow has-text-grey-light">
|
||||
Unchanged
|
||||
</td>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/anchor.html name="Show" %}
|
||||
{% endcapture %} {% capture flex %}
|
||||
<td class="is-narrow has-text-primary has-background-primary-light">Flex</td>
|
||||
{% endcapture %} {% capture visible %}
|
||||
<td class="is-narrow has-text-success has-background-success-light">Visible</td>
|
||||
{% endcapture %} {% capture hidden %}
|
||||
<td class="is-narrow has-text-danger has-background-danger-light">Hidden</td>
|
||||
{% endcapture %} {% capture unchanged %}
|
||||
<td class="is-narrow has-text-grey-light">Unchanged</td>
|
||||
{% endcapture %} {% include docs/elements/anchor.html name="Show" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can use one of the following <code>display</code> classes:
|
||||
</p>
|
||||
<p>You can use one of the following <code>display</code> classes:</p>
|
||||
<ul>
|
||||
<li><code>is-block</code></li>
|
||||
<li><code>is-flex</code></li>
|
||||
@@ -81,96 +60,68 @@ breadcrumb:
|
||||
<td class="is-narrow">
|
||||
<code>is-flex-mobile</code>
|
||||
</td>
|
||||
{{ flex }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ flex }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged
|
||||
}}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-flex-tablet-only</code>
|
||||
</td>
|
||||
{{ unchanged }}
|
||||
{{ flex }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }} {{ flex }} {{ unchanged }} {{ unchanged }} {{ unchanged
|
||||
}}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-flex-desktop-only</code>
|
||||
</td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ flex }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }} {{ unchanged }} {{ flex }} {{ unchanged }} {{ unchanged
|
||||
}}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-flex-widescreen-only</code>
|
||||
</td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ flex }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }} {{ unchanged }} {{ unchanged }} {{ flex }} {{ unchanged
|
||||
}}
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="5">
|
||||
<p>Classes to display <strong>up to</strong> or <strong>from</strong> a specific breakpoint</p>
|
||||
<p>
|
||||
Classes to display <strong>up to</strong> or <strong>from</strong> a
|
||||
specific breakpoint
|
||||
</p>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-flex-touch</code>
|
||||
</td>
|
||||
{{ flex }}
|
||||
{{ flex }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ flex }} {{ flex }} {{ unchanged }} {{ unchanged }} {{ unchanged }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-flex-tablet</code>
|
||||
</td>
|
||||
{{ unchanged }}
|
||||
{{ flex }}
|
||||
{{ flex }}
|
||||
{{ flex }}
|
||||
{{ flex }}
|
||||
{{ unchanged }} {{ flex }} {{ flex }} {{ flex }} {{ flex }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-flex-desktop</code>
|
||||
</td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ flex }}
|
||||
{{ flex }}
|
||||
{{ flex }}
|
||||
{{ unchanged }} {{ unchanged }} {{ flex }} {{ flex }} {{ flex }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-flex-widescreen</code>
|
||||
</td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ flex }}
|
||||
{{ flex }}
|
||||
{{ unchanged }} {{ unchanged }} {{ unchanged }} {{ flex }} {{ flex }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-flex-fullhd</code>
|
||||
</td>
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ unchanged }}
|
||||
{{ flex }}
|
||||
{{ unchanged }} {{ unchanged }} {{ unchanged }} {{ unchanged }} {{ flex
|
||||
}}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -178,11 +129,13 @@ breadcrumb:
|
||||
|
||||
<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>
|
||||
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>
|
||||
|
||||
{% include elements/anchor.html name="Hide" %}
|
||||
{% include docs/elements/anchor.html name="Hide" %}
|
||||
|
||||
<div class="table-container">
|
||||
<table class="table is-bordered">
|
||||
@@ -192,102 +145,69 @@ breadcrumb:
|
||||
<td class="is-narrow">
|
||||
<code>is-hidden-mobile</code>
|
||||
</td>
|
||||
{{ hidden }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ hidden }} {{ visible }} {{ visible }} {{ visible }} {{ visible }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-hidden-tablet-only</code>
|
||||
</td>
|
||||
{{ visible }}
|
||||
{{ hidden }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ visible }} {{ hidden }} {{ visible }} {{ visible }} {{ visible }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-hidden-desktop-only</code>
|
||||
</td>
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ hidden }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ visible }} {{ visible }} {{ hidden }} {{ visible }} {{ visible }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-hidden-widescreen-only</code>
|
||||
</td>
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ hidden }}
|
||||
{{ visible }}
|
||||
{{ visible }} {{ visible }} {{ visible }} {{ hidden }} {{ visible }}
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="5">
|
||||
<p>Classes to hide <strong>up to</strong> or <strong>from</strong> a specific breakpoint</p>
|
||||
<p>
|
||||
Classes to hide <strong>up to</strong> or <strong>from</strong> a
|
||||
specific breakpoint
|
||||
</p>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-hidden-touch</code>
|
||||
</td>
|
||||
{{ hidden }}
|
||||
{{ hidden }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ hidden }} {{ hidden }} {{ visible }} {{ visible }} {{ visible }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-hidden-tablet</code>
|
||||
</td>
|
||||
{{ visible }}
|
||||
{{ hidden }}
|
||||
{{ hidden }}
|
||||
{{ hidden }}
|
||||
{{ hidden }}
|
||||
{{ visible }} {{ hidden }} {{ hidden }} {{ hidden }} {{ hidden }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-hidden-desktop</code>
|
||||
</td>
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ hidden }}
|
||||
{{ hidden }}
|
||||
{{ hidden }}
|
||||
{{ visible }} {{ visible }} {{ hidden }} {{ hidden }} {{ hidden }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-hidden-widescreen</code>
|
||||
</td>
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ hidden }}
|
||||
{{ hidden }}
|
||||
{{ visible }} {{ visible }} {{ visible }} {{ hidden }} {{ hidden }}
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<code>is-hidden-fullhd</code>
|
||||
</td>
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ visible }}
|
||||
{{ hidden }}
|
||||
{{ visible }} {{ visible }} {{ visible }} {{ visible }} {{ hidden }}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Other visibility helpers" %}
|
||||
{% include docs/elements/anchor.html name="Other visibility helpers" %}
|
||||
|
||||
<table class="table is-bordered">
|
||||
<tbody>
|
||||
@@ -301,7 +221,11 @@ breadcrumb:
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-sr-only</code></td>
|
||||
<td>Hide elements <strong>visually</strong> but keep the element available to be announced by a <strong>screen reader</strong></td>
|
||||
<td>
|
||||
Hide elements <strong>visually</strong> but keep the element available
|
||||
to be announced by a
|
||||
<strong>screen reader</strong>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Layout
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: layout
|
||||
hide_tabs: true
|
||||
hide_pagination: true
|
||||
@@ -9,5 +10,4 @@ breadcrumb:
|
||||
- documentation
|
||||
- layout
|
||||
---
|
||||
|
||||
{% include components/links.html category_id='layout' %}
|
||||
{% include docs/components/links.html category_id='layout' %}
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
---
|
||||
title: Container
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
fullwidth: true
|
||||
hide_categories: true
|
||||
doc-tab: layout
|
||||
doc-subtab: container
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- layout
|
||||
- layout-container
|
||||
- home
|
||||
- documentation
|
||||
- layout
|
||||
- layout-container
|
||||
meta:
|
||||
colors: false
|
||||
sizes: true
|
||||
variables: true
|
||||
---
|
||||
|
||||
{% capture container_example %}
|
||||
<div class="container">
|
||||
<div class="notification is-primary">
|
||||
@@ -23,86 +23,81 @@ meta:
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture container_fluid_example %}
|
||||
<div class="container is-fluid">
|
||||
<div class="notification is-primary">
|
||||
This container is <strong>fluid</strong>: it will have a 32px gap on either side, on any
|
||||
viewport size.
|
||||
This container is <strong>fluid</strong>: it will have a 32px gap on either
|
||||
side, on any viewport size.
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture container_widescreen_example %}
|
||||
<div class="container is-widescreen">
|
||||
<div class="notification is-primary">
|
||||
This container is <strong>fullwidth</strong> <em>until</em> the <code>$widescreen</code> breakpoint.
|
||||
This container is <strong>fullwidth</strong> <em>until</em> the
|
||||
<code>$widescreen</code> breakpoint.
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture container_fullhd_example %}
|
||||
<div class="container is-fullhd">
|
||||
<div class="notification is-primary">
|
||||
This container is <strong>fullwidth</strong> <em>until</em> the <code>$fullhd</code> breakpoint.
|
||||
This container is <strong>fullwidth</strong> <em>until</em> the
|
||||
<code>$fullhd</code> breakpoint.
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture container_max_desktop_example %}
|
||||
<div class="container is-max-desktop">
|
||||
<div class="notification is-primary">
|
||||
This container has a <code>max-width</code> of <code>$desktop - $container-offset</code> on widescreen and fullhd.
|
||||
This container has a <code>max-width</code> of
|
||||
<code>$desktop - $container-offset</code> on widescreen and fullhd.
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture container_max_widescreen_example %}
|
||||
<div class="container is-max-widescreen">
|
||||
<div class="notification is-primary">
|
||||
This container has a <code>max-width</code> of <code>$widescreen - $container-offset</code> on fullhd.
|
||||
This container has a <code>max-width</code> of
|
||||
<code>$widescreen - $container-offset</code> on fullhd.
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% assign bp_tablet = site.data.breakpoints.tablet %}
|
||||
{% assign bp_desktop = site.data.breakpoints.desktop %}
|
||||
{% assign bp_widescreen = site.data.breakpoints.widescreen %}
|
||||
{% assign bp_fullhd = site.data.breakpoints.fullhd %}
|
||||
{% assign container_offset = 64 %}
|
||||
|
||||
{% capture thead %}
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="bd-is-empty">
|
||||
<th class="bd-is-empty"></th>
|
||||
{% for breakpoint_hash in site.data.breakpoints %} {% assign breakpoint =
|
||||
breakpoint_hash[1] %} {% if breakpoint.id == 'tablet' %}
|
||||
<th>
|
||||
Below
|
||||
<br />
|
||||
<code>{{ bp_tablet.to }}px</code>
|
||||
</th>
|
||||
{% for breakpoint_hash in site.data.breakpoints %}
|
||||
{% assign breakpoint = breakpoint_hash[1] %}
|
||||
{% if breakpoint.id == 'tablet' %}
|
||||
<th>
|
||||
Below
|
||||
<br>
|
||||
<code>{{ bp_tablet.to }}px</code>
|
||||
</th>
|
||||
{% elsif breakpoint.id != 'mobile' %}
|
||||
<th>
|
||||
{{ breakpoint.name }}
|
||||
<br>
|
||||
{% if breakpoint.id == 'fullhd' %}
|
||||
<code>{{ breakpoint.from }}px</code> and above
|
||||
{% else %}
|
||||
Between <code>{{ breakpoint.from }}px</code> and <code>{{ breakpoint.to }}px</code>
|
||||
{% endif %}
|
||||
</th>
|
||||
{% elsif breakpoint.id != 'mobile' %}
|
||||
<th>
|
||||
{{ breakpoint.name }}
|
||||
<br />
|
||||
{% if breakpoint.id == 'fullhd' %}
|
||||
<code>{{ breakpoint.from }}px</code> and above {% else %} Between
|
||||
<code>{{ breakpoint.from }}px</code> and
|
||||
<code>{{ breakpoint.to }}px</code>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</th>
|
||||
{% endif %} {% endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>container</code> is a simple utility element that allows you to <strong>center</strong> content on larger viewports. It can be used in any context, but mostly as a <strong>direct child</strong> of one of the following:
|
||||
The <code>container</code> is a simple utility element that allows you to <strong>center</strong> content on larger
|
||||
viewports. It can be used in any context, but mostly as a <strong>direct child</strong> of one of the following:
|
||||
</p>
|
||||
<ul>
|
||||
<li><code>navbar</code></li>
|
||||
@@ -113,7 +108,7 @@ meta:
|
||||
</div>
|
||||
|
||||
<!-- -->
|
||||
{% include elements/anchor.html name="Overview" %}
|
||||
{% include docs/elements/anchor.html name="Overview" %}
|
||||
|
||||
<div class="table-container">
|
||||
<table class="table is-bordered">
|
||||
@@ -130,52 +125,67 @@ meta:
|
||||
<tr>
|
||||
<td><code>.container</code></td>
|
||||
<td class="has-text-grey-light has-background-white-ter">Full width</td>
|
||||
<td><code>{{ bp_desktop.from | minus: container_offset }}px</code></td>
|
||||
<td><code>{{ bp_widescreen.from | minus: container_offset }}px</code></td>
|
||||
<td><code>{{ bp_fullhd.from | minus: container_offset }}px</code></td>
|
||||
<td>
|
||||
<code>{{ bp_desktop.from | minus: container_offset }}px</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>{{ bp_widescreen.from | minus: container_offset }}px</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>{{ bp_fullhd.from | minus: container_offset }}px</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.container.is-widescreen</code></td>
|
||||
<td colspan="2" class="has-text-grey-light has-background-white-ter">Full width</td>
|
||||
<td><code>{{ bp_widescreen.from | minus: container_offset }}px</code></td>
|
||||
<td><code>{{ bp_fullhd.from | minus: container_offset }}px</code></td>
|
||||
<td>
|
||||
<code>{{ bp_widescreen.from | minus: container_offset }}px</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>{{ bp_fullhd.from | minus: container_offset }}px</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.container.is-fullhd</code></td>
|
||||
<td colspan="3" class="has-text-grey-light has-background-white-ter">Full width</td>
|
||||
<td><code>{{ bp_fullhd.from | minus: container_offset }}px</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="5">
|
||||
{% include elements/new-tag.html version="0.9.1" %}
|
||||
<td>
|
||||
<code>{{ bp_fullhd.from | minus: container_offset }}px</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.container.is-max-desktop</code></td>
|
||||
<td class="has-text-grey-light has-background-white-ter">Full width</td>
|
||||
<td colspan="3"><code>{{ bp_desktop.from | minus: container_offset }}px</code></td>
|
||||
<td colspan="3">
|
||||
<code>{{ bp_desktop.from | minus: container_offset }}px</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>.container.is-max-widescreen</code></td>
|
||||
<td class="has-text-grey-light has-background-white-ter">Full width</td>
|
||||
<td><code>{{ bp_desktop.from | minus: container_offset }}px</code></td>
|
||||
<td colspan="2"><code>{{ bp_widescreen.from | minus: container_offset }}px</code></td>
|
||||
<td>
|
||||
<code>{{ bp_desktop.from | minus: container_offset }}px</code>
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<code>{{ bp_widescreen.from | minus: container_offset }}px</code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- -->
|
||||
{% include elements/anchor.html name="Default behavior" %}
|
||||
{% include docs/elements/anchor.html name="Default behavior" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
By default, the <code>container</code> will only be activated from the <code>$desktop</code> breakpoint. It will increase its <code>max-width</code> after reaching the <code>$widescreen</code> and <code>$fullhd</code> breakpoints.
|
||||
By default, the <code>container</code> will only be activated from the <code>$desktop</code> breakpoint. It will
|
||||
increase its <code>max-width</code> after reaching the <code>$widescreen</code> and
|
||||
<code>$fullhd</code> breakpoints.
|
||||
</p>
|
||||
<p>
|
||||
The container's <strong>width</strong> for each <strong>breakpoint</strong> is the result
|
||||
of: <code>$device - (2 * $gap)</code>. The <code>$gap</code> variable has a default value of <code>
|
||||
32px</code> but can be modified.
|
||||
The container's <strong>width</strong> for each <strong>breakpoint</strong> is the result of:
|
||||
<code>$device - (2 * $gap)</code>. The <code>$gap</code> variable has a default value of <code> 32px</code> but can
|
||||
be modified.
|
||||
</p>
|
||||
<p>This is how the container will behave:</p>
|
||||
<ul>
|
||||
@@ -183,91 +193,102 @@ meta:
|
||||
<li>on <code>$widescreen</code> it will have a maximum width of <strong>1152px</strong>.</li>
|
||||
<li>on <code>$fullhd</code> it will have a maximum width of <strong>1344px</strong>.</li>
|
||||
</ul>
|
||||
<p>The values <strong>960</strong>, <strong>1152</strong> and <strong>1344</strong> have been chosen because they are divisible by both <strong>12</strong> and <strong>16</strong>.</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-fullwidth">
|
||||
{{container_example}}
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ container_example }}{% endhighlight %}
|
||||
|
||||
<!-- -->
|
||||
{% include elements/anchor.html name="Widescreen or FullHD only" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
With the two modifiers <code>is-widescreen</code> and <code>is-fullhd</code>, you can have a <em>fullwidth</em> container <strong>until</strong> those specific breakpoints.
|
||||
The values <strong>960</strong>, <strong>1152</strong> and <strong>1344</strong> have been chosen because they are
|
||||
divisible by both <strong>12</strong> and <strong>16</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-fullwidth">
|
||||
{{container_widescreen_example}}
|
||||
</div>
|
||||
<div class="bd-example is-fullwidth">{{ container_example }}</div>
|
||||
|
||||
{% highlight html %}{{ container_widescreen_example }}{% endhighlight %}
|
||||
|
||||
<div class="bd-example is-fullwidth">
|
||||
{{ container_fullhd_example }}
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ container_fullhd_example }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- container_example -}}
|
||||
{%- endhighlight %}
|
||||
|
||||
<!-- -->
|
||||
{% include elements/anchor.html name="Desktop and Widescreen maximum widths" %}
|
||||
|
||||
{% include elements/new-tag.html version="0.9.1" %}
|
||||
{% include docs/elements/anchor.html name="Widescreen or FullHD only" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Sometimes, you might want a <strong>narrow</strong> container on larger viewports. That's why Bulma provides 2 modifiers:
|
||||
With the two modifiers <code>is-widescreen</code> and <code>is-fullhd</code>, you can have a
|
||||
<em>fullwidth</em> container <strong>until</strong> those specific breakpoints.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-fullwidth">{{ container_widescreen_example }}</div>
|
||||
|
||||
{% highlight html -%}
|
||||
{{- container_widescreen_example -}}
|
||||
{%- endhighlight %}
|
||||
|
||||
<div class="bd-example is-fullwidth">{{ container_fullhd_example }}</div>
|
||||
|
||||
{% highlight html -%}
|
||||
{{- container_fullhd_example -}}
|
||||
{%- endhighlight %}
|
||||
|
||||
<!-- -->
|
||||
{%
|
||||
include docs/elements/anchor.html name="Desktop and Widescreen maximum
|
||||
widths"
|
||||
%}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Sometimes, you might want a <strong>narrow</strong> container on larger viewports. That's why Bulma provides 2
|
||||
modifiers:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>.container.is-max-desktop</code> will behave like a desktop container
|
||||
</li>
|
||||
<li>
|
||||
<code>.container.is-max-widescreen</code> will behave like a widescreen container
|
||||
</li>
|
||||
<li><code>.container.is-max-desktop</code> will behave like a desktop container</li>
|
||||
<li><code>.container.is-max-widescreen</code> will behave like a widescreen container</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-fullwidth">
|
||||
{{ container_max_desktop_example }}
|
||||
</div>
|
||||
<div class="bd-example is-fullwidth">{{ container_max_desktop_example }}</div>
|
||||
|
||||
{% highlight html %}{{ container_max_desktop_example }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- container_max_desktop_example -}}
|
||||
{%- endhighlight %}
|
||||
|
||||
<div class="bd-example is-fullwidth">
|
||||
{{ container_max_widescreen_example }}
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ container_max_widescreen_example }}{% endhighlight %}
|
||||
{% highlight html -%}
|
||||
{{- container_max_widescreen_example -}}
|
||||
{%- endhighlight %}
|
||||
|
||||
<!-- -->
|
||||
{% include elements/anchor.html name="Absolute maximum width" %}
|
||||
{% include docs/elements/anchor.html name="Absolute maximum width" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
If you want to change the maximum width of <strong>all</strong> containers, you can do so by updating the values of the <code>$container-max-width</code> Sass variable.
|
||||
If you want to change the maximum width of <strong>all</strong> containers, you can do so by updating the values of
|
||||
the <code>$container-max-width</code> Sass variable.
|
||||
</p>
|
||||
<p>
|
||||
By default, the <code>$fullhd</code> breakpoint value is used to calculate the <strong>absolute</strong> maximum width of the <code>container</code>. Simply change it to a smaller value like <code>$widescreen</code>, <code>$desktop</code>, or any value in <strong>pixels</strong>.
|
||||
By default, the <code>$fullhd</code> breakpoint value is used to calculate the <strong>absolute</strong> maximum
|
||||
width of the <code>container</code>. Simply change it to a smaller value like <code>$widescreen</code>,
|
||||
<code>$desktop</code>, or any value in <strong>pixels</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- -->
|
||||
{% include elements/anchor.html name="Fluid container" %}
|
||||
{% include docs/elements/anchor.html name="Fluid container" %}
|
||||
|
||||
<div class="content">
|
||||
<p>If you don't want to have a maximum width but want to keep the 32px margin on the left and
|
||||
right sides, add the <code>is-fluid</code> modifier:</p>
|
||||
<p>
|
||||
If you don't want to have a maximum width but want to keep the 32px margin on the left and right sides, add the
|
||||
<code>is-fluid</code> modifier:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-fullwidth">
|
||||
{{container_fluid_example}}
|
||||
</div>
|
||||
<div class="bd-example is-fullwidth">{{ container_fluid_example }}</div>
|
||||
|
||||
{% highlight html %}{{ container_fluid_example }}{% endhighlight %}
|
||||
|
||||
{% include components/variables.html type='element' data=site.data.variables.elements.container %}
|
||||
{% highlight html -%}
|
||||
{{- container_fluid_example -}}
|
||||
{%- endhighlight %}
|
||||
{%
|
||||
include docs/components/variables.html type='element'
|
||||
data=site.data.variables.elements.container
|
||||
%}
|
||||
|
||||
@@ -1,22 +1,26 @@
|
||||
---
|
||||
title: Footer
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: layout
|
||||
doc-subtab: footer
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- layout
|
||||
- layout-footer
|
||||
- home
|
||||
- documentation
|
||||
- layout
|
||||
- layout-footer
|
||||
---
|
||||
|
||||
{% capture footer_example %}
|
||||
<footer class="footer">
|
||||
<div class="content has-text-centered">
|
||||
<p>
|
||||
<strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>. The source code is licensed
|
||||
<a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
|
||||
is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
|
||||
<strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>.
|
||||
The source code is licensed
|
||||
<a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The
|
||||
website content is licensed
|
||||
<a href="http://creativecommons.org/licenses/by-nc-sa/4.0/"
|
||||
>CC BY NC SA 4.0</a
|
||||
>.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -24,10 +28,12 @@ breadcrumb:
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The Bulma <strong>footer</strong> is a simple container, with lots of bottom padding, making it great as the last element of any webpage.
|
||||
The Bulma <strong>footer</strong> is a simple container, with lots of bottom padding, making it great as the last
|
||||
element of any webpage.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=footer_example horizontal=true more=true %}
|
||||
|
||||
{% include components/variables.html %}
|
||||
{%
|
||||
include docs/elements/snippet.html content=footer_example horizontal=true
|
||||
more=true
|
||||
%}
|
||||
|
||||
@@ -1,88 +1,87 @@
|
||||
---
|
||||
title: Hero
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
fullwidth: true
|
||||
hide_categories: true
|
||||
hide_fortyfour: true
|
||||
doc-tab: layout
|
||||
doc-subtab: hero
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- layout
|
||||
- layout-hero
|
||||
- home
|
||||
- documentation
|
||||
- layout
|
||||
- layout-hero
|
||||
meta:
|
||||
colors: true
|
||||
sizes: true
|
||||
variables: true
|
||||
---
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The hero component allows you to add a <strong>full width banner</strong> to your webpage, which can optionally cover the full height of the page as well.
|
||||
</p>
|
||||
<p>
|
||||
The basic requirement of this component are:
|
||||
The hero component allows you to add a <strong>full width banner</strong> to your webpage, which can optionally
|
||||
cover the full height of the page as well.
|
||||
</p>
|
||||
<p>The basic requirement of this component are:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>hero</code> as the main container
|
||||
<ul>
|
||||
<li>
|
||||
<code>hero-body</code> as a direct child, in which you can put all your content
|
||||
</li>
|
||||
<li><code>hero-body</code> as a direct child, in which you can put all your content</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
For the <a href="#fullheight-hero">fullheight hero</a> to work, you will also need a <code>hero-head</code> and a <code>hero-foot</code>.
|
||||
For the <a href="#fullheight-hero">fullheight hero</a> to work, you will also need a <code>hero-head</code> and a
|
||||
<code>hero-foot</code>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% capture hero_example %}
|
||||
<section class="hero">
|
||||
<div class="hero-body">
|
||||
<p class="title">
|
||||
Hero title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Hero subtitle
|
||||
</p>
|
||||
<p class="title">Hero title</p>
|
||||
<p class="subtitle">Hero subtitle</p>
|
||||
</div>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=hero_example horizontal=true fullwidth=true %}
|
||||
|
||||
{% include elements/anchor.html name="Colors" %}
|
||||
{%
|
||||
include docs/elements/snippet.html content=hero_example
|
||||
horizontal=true fullwidth=true
|
||||
%}
|
||||
{%
|
||||
include docs/elements/anchor.html
|
||||
name="Colors"
|
||||
%}
|
||||
|
||||
<div class="content">
|
||||
As with buttons, you can choose one of the <strong>8 different colors</strong>:
|
||||
As with buttons, you can choose one of the
|
||||
<strong>8 different colors</strong>:
|
||||
</div>
|
||||
|
||||
{% for color in site.data.colors.justColors %}
|
||||
{% capture foobar %}
|
||||
{% capture foobar %}
|
||||
<section class="hero is-{{ color }}">
|
||||
<div class="hero-body">
|
||||
<p class="title">
|
||||
{{ color | capitalize }} hero
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
{{ color | capitalize }} subtitle
|
||||
</p>
|
||||
<p class="title">{{ color | capitalize }} hero</p>
|
||||
<p class="subtitle">{{ color | capitalize }} subtitle</p>
|
||||
</div>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar horizontal=true fullwidth=true %}
|
||||
{%
|
||||
include docs/elements/snippet.html content=foobar
|
||||
horizontal=true fullwidth=true
|
||||
%}
|
||||
{% endfor %}
|
||||
|
||||
<!-- -->
|
||||
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
{% include docs/elements/anchor.html name="Sizes" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can have even more imposing banners by using one of <strong>5 different sizes</strong>:
|
||||
You can have even more imposing banners by using one of
|
||||
<strong>5 different sizes</strong>:
|
||||
</p>
|
||||
<ul>
|
||||
<li><code>is-small</code></li>
|
||||
@@ -96,47 +95,39 @@ meta:
|
||||
{% capture small_hero %}
|
||||
<section class="hero is-small is-primary">
|
||||
<div class="hero-body">
|
||||
<p class="title">
|
||||
Small hero
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Small subtitle
|
||||
</p>
|
||||
<p class="title">Small hero</p>
|
||||
<p class="subtitle">Small subtitle</p>
|
||||
</div>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=small_hero horizontal=true fullwidth=true %}
|
||||
|
||||
{%
|
||||
include docs/elements/snippet.html content=small_hero
|
||||
horizontal=true fullwidth=true
|
||||
%}
|
||||
{% capture medium_hero %}
|
||||
<section class="hero is-medium is-link">
|
||||
<div class="hero-body">
|
||||
<p class="title">
|
||||
Medium hero
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Medium subtitle
|
||||
</p>
|
||||
<p class="title">Medium hero</p>
|
||||
<p class="subtitle">Medium subtitle</p>
|
||||
</div>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=medium_hero horizontal=true fullwidth=true %}
|
||||
|
||||
{%
|
||||
include docs/elements/snippet.html content=medium_hero
|
||||
horizontal=true fullwidth=true
|
||||
%}
|
||||
{% capture large_hero %}
|
||||
<section class="hero is-large is-info">
|
||||
<div class="hero-body">
|
||||
<p class="title">
|
||||
Large hero
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Large subtitle
|
||||
</p>
|
||||
<p class="title">Large hero</p>
|
||||
<p class="subtitle">Large subtitle</p>
|
||||
</div>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=large_hero horizontal=true fullwidth=true %}
|
||||
{%
|
||||
include docs/elements/snippet.html content=large_hero
|
||||
horizontal=true fullwidth=true
|
||||
%}
|
||||
|
||||
<div id="halfheight-hero"></div>
|
||||
|
||||
@@ -144,18 +135,16 @@ meta:
|
||||
<section class="hero is-success is-halfheight">
|
||||
<div class="hero-body">
|
||||
<div class="">
|
||||
<p class="title">
|
||||
Half height hero
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Half height subtitle
|
||||
</p>
|
||||
<p class="title">Half height hero</p>
|
||||
<p class="subtitle">Half height subtitle</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=halfheight_example horizontal=true fullwidth=true %}
|
||||
{%
|
||||
include docs/elements/snippet.html
|
||||
content=halfheight_example horizontal=true fullwidth=true
|
||||
%}
|
||||
|
||||
<div id="fullheight-hero"></div>
|
||||
|
||||
@@ -163,48 +152,51 @@ meta:
|
||||
<section class="hero is-danger is-fullheight">
|
||||
<div class="hero-body">
|
||||
<div class="">
|
||||
<p class="title">
|
||||
Fullheight hero
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Fullheight subtitle
|
||||
</p>
|
||||
<p class="title">Fullheight hero</p>
|
||||
<p class="subtitle">Fullheight subtitle</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=fullheight_example horizontal=true fullwidth=true %}
|
||||
{%
|
||||
include docs/elements/snippet.html
|
||||
content=fullheight_example horizontal=true fullwidth=true
|
||||
%}
|
||||
|
||||
<!-- Fullheight with navbar -->
|
||||
{% include elements/anchor.html name="Fullheight with navbar" %}
|
||||
{% include docs/elements/anchor.html name="Fullheight with navbar" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
If you are using a <a href="{{ site.url }}/documentation/components/navbar/#fixed-navbar">fixed navbar</a>, you can use the <code>is-fullheight-with-navbar</code> modifier on the hero for it to occupy the viewport height minus the navbar height.
|
||||
If you are using a
|
||||
<a href="{{ site.url }}/documentation/components/navbar/#fixed-navbar">fixed navbar</a>, you can use the
|
||||
<code>is-fullheight-with-navbar</code> modifier on the hero for it to occupy the viewport height minus the navbar
|
||||
height.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
{% capture fullheight_with_navbar_example %}
|
||||
{% include examples/navbar-basic.html %}
|
||||
{% capture fullheight_with_navbar_example %} {% include
|
||||
docs/examples/navbar-basic.html %}
|
||||
|
||||
<section class="hero is-link is-fullheight-with-navbar">
|
||||
<div class="hero-body">
|
||||
<p class="title">
|
||||
Fullheight hero with navbar
|
||||
</p>
|
||||
<p class="title">Fullheight hero with navbar</p>
|
||||
</div>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=fullheight_with_navbar_example horizontal=true fullwidth=true %}
|
||||
{%
|
||||
include docs/elements/snippet.html
|
||||
content=fullheight_with_navbar_example horizontal=true fullwidth=true
|
||||
%}
|
||||
|
||||
<!-- Fullheight with 3 parts -->
|
||||
{% include elements/anchor.html name="Fullheight hero in 3 parts" %}
|
||||
{% include docs/elements/anchor.html name="Fullheight hero in 3 parts" %}
|
||||
|
||||
<div class="content">
|
||||
<p>To obtain a hero that will cover the whole height of the viewport, you can split it in <strong>3 vertical parts</strong>:</p>
|
||||
<p>
|
||||
To obtain a hero that will cover the whole height of the viewport, you can split it in
|
||||
<strong>3 vertical parts</strong>:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>hero</code>
|
||||
@@ -225,25 +217,20 @@ meta:
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item">
|
||||
<img src="{{ site.url }}/images/bulma-type-white.png" alt="Logo">
|
||||
<img src="{{ site.url }}/assets/images/bulma-type-white.png" alt="Logo" />
|
||||
</a>
|
||||
<span class="navbar-burger" data-target="navbarMenuHeroA">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
</div>
|
||||
<div id="navbarMenuHeroA" class="navbar-menu">
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item is-active">
|
||||
Home
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
Examples
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
Documentation
|
||||
</a>
|
||||
<a class="navbar-item is-active"> Home </a>
|
||||
<a class="navbar-item"> Examples </a>
|
||||
<a class="navbar-item"> Documentation </a>
|
||||
<span class="navbar-item">
|
||||
<a class="button is-primary is-inverted">
|
||||
<span class="icon">
|
||||
@@ -261,12 +248,8 @@ meta:
|
||||
<!-- Hero content: will be in the middle -->
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<p class="title">
|
||||
Title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Subtitle
|
||||
</p>
|
||||
<p class="title">Title</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -287,7 +270,6 @@ meta:
|
||||
</div>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture heroNavbarB %}
|
||||
<section class="hero is-info is-large">
|
||||
<div class="hero-head">
|
||||
@@ -295,25 +277,20 @@ meta:
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item">
|
||||
<img src="{{ site.url }}/images/bulma-type-white.png" alt="Logo">
|
||||
<img src="{{ site.url }}/assets/images/bulma-type-white.png" alt="Logo" />
|
||||
</a>
|
||||
<span class="navbar-burger" data-target="navbarMenuHeroB">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
</div>
|
||||
<div id="navbarMenuHeroB" class="navbar-menu">
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item is-active">
|
||||
Home
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
Examples
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
Documentation
|
||||
</a>
|
||||
<a class="navbar-item is-active"> Home </a>
|
||||
<a class="navbar-item"> Examples </a>
|
||||
<a class="navbar-item"> Documentation </a>
|
||||
<span class="navbar-item">
|
||||
<a class="button is-info is-inverted">
|
||||
<span class="icon">
|
||||
@@ -330,12 +307,8 @@ meta:
|
||||
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<p class="title">
|
||||
Title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Subtitle
|
||||
</p>
|
||||
<p class="title">Title</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -367,7 +340,6 @@ meta:
|
||||
</div>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture heroNavbarC %}
|
||||
<section class="hero is-success is-fullheight">
|
||||
<!-- Hero head: will stick at the top -->
|
||||
@@ -376,25 +348,20 @@ meta:
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item">
|
||||
<img src="{{ site.url }}/images/bulma-type-white.png" alt="Logo">
|
||||
<img src="{{ site.url }}/assets/images/bulma-type-white.png" alt="Logo" />
|
||||
</a>
|
||||
<span class="navbar-burger" data-target="navbarMenuHeroC">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
</div>
|
||||
<div id="navbarMenuHeroC" class="navbar-menu">
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item is-active">
|
||||
Home
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
Examples
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
Documentation
|
||||
</a>
|
||||
<a class="navbar-item is-active"> Home </a>
|
||||
<a class="navbar-item"> Examples </a>
|
||||
<a class="navbar-item"> Documentation </a>
|
||||
<span class="navbar-item">
|
||||
<a class="button is-success is-inverted">
|
||||
<span class="icon">
|
||||
@@ -412,12 +379,8 @@ meta:
|
||||
<!-- Hero content: will be in the middle -->
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<p class="title">
|
||||
Title
|
||||
</p>
|
||||
<p class="subtitle">
|
||||
Subtitle
|
||||
</p>
|
||||
<p class="title">Title</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -438,9 +401,15 @@ meta:
|
||||
</div>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=heroNavbarA horizontal=true fullwidth=true more=true %}
|
||||
{% include elements/snippet.html content=heroNavbarB horizontal=true fullwidth=true more=true %}
|
||||
{% include elements/snippet.html content=heroNavbarC horizontal=true fullwidth=true more=true %}
|
||||
|
||||
{% include components/variables.html type='component' hide_content=true %}
|
||||
{%
|
||||
include docs/elements/snippet.html content=heroNavbarA
|
||||
horizontal=true fullwidth=true more=true
|
||||
%}
|
||||
{%
|
||||
include docs/elements/snippet.html content=heroNavbarB horizontal=true fullwidth=true
|
||||
more=true
|
||||
%}
|
||||
{%
|
||||
include docs/elements/snippet.html content=heroNavbarC
|
||||
horizontal=true fullwidth=true more=true
|
||||
%}
|
||||
|
||||
@@ -1,34 +1,30 @@
|
||||
---
|
||||
title: Level
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: layout
|
||||
doc-subtab: level
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- layout
|
||||
- layout-level
|
||||
- home
|
||||
- documentation
|
||||
- layout
|
||||
- layout-level
|
||||
---
|
||||
|
||||
{% capture nav_example %}
|
||||
<!-- Main container -->
|
||||
<nav class="level">
|
||||
<!-- Left side -->
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p class="subtitle is-5">
|
||||
<strong>123</strong> posts
|
||||
</p>
|
||||
<p class="subtitle is-5"><strong>123</strong> posts</p>
|
||||
</div>
|
||||
<div class="level-item">
|
||||
<div class="field has-addons">
|
||||
<p class="control">
|
||||
<input class="input" type="text" placeholder="Find a post">
|
||||
<input class="input" type="text" placeholder="Find a post" />
|
||||
</p>
|
||||
<p class="control">
|
||||
<button class="button">
|
||||
Search
|
||||
</button>
|
||||
<button class="button">Search</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -44,7 +40,6 @@ breadcrumb:
|
||||
</div>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture nav_centered_example %}
|
||||
<nav class="level">
|
||||
<div class="level-item has-text-centered">
|
||||
@@ -73,7 +68,6 @@ breadcrumb:
|
||||
</div>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture nav_centered_bis_example %}
|
||||
<nav class="level">
|
||||
<p class="level-item has-text-centered">
|
||||
@@ -83,7 +77,11 @@ breadcrumb:
|
||||
<a class="link is-info">Menu</a>
|
||||
</p>
|
||||
<p class="level-item has-text-centered">
|
||||
<img src="{{ site.url }}/images/bulma-type.png" alt="" style="height: 30px;">
|
||||
<img
|
||||
src="{{ site.url }}/assets/images/bulma-type.png"
|
||||
alt=""
|
||||
style="height: 30px"
|
||||
/>
|
||||
</p>
|
||||
<p class="level-item has-text-centered">
|
||||
<a class="link is-info">Reservations</a>
|
||||
@@ -93,7 +91,6 @@ breadcrumb:
|
||||
</p>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture nav_mobile_example %}
|
||||
<nav class="level is-mobile">
|
||||
<div class="level-item has-text-centered">
|
||||
@@ -129,7 +126,7 @@ breadcrumb:
|
||||
<li>
|
||||
<code>level</code>: main container
|
||||
<ul>
|
||||
<li><code>level-left</code> for the left side
|
||||
<li><code>level-left</code> for the left side</li>
|
||||
<li>
|
||||
<code>level-right</code> for the right side
|
||||
<ul>
|
||||
@@ -139,25 +136,41 @@ breadcrumb:
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>In a <code>level-item</code>, you can then insert almost <em>anything</em> you want: a title, a button, a text input, or just simple text. No matter what elements you put inside a Bulma <code>level</code>, they will always be <strong>vertically centered</strong>.</p>
|
||||
<p>
|
||||
In a <code>level-item</code>, you can then insert almost <em>anything</em> you want: a title, a button, a text
|
||||
input, or just simple text. No matter what elements you put inside a Bulma <code>level</code>, they will always be
|
||||
<strong>vertically centered</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=nav_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/anchor.html name="Centered level" %}
|
||||
{%
|
||||
include docs/elements/snippet.html content=nav_example horizontal=true
|
||||
more=true
|
||||
%}
|
||||
{% include docs/elements/anchor.html name="Centered level" %}
|
||||
|
||||
<div class="content">
|
||||
If you want a <strong>centered level</strong>, you can use as many <code>level-item</code> as you want, as long as they are <strong>direct</strong> children of the <code>level</code> container.
|
||||
If you want a <strong>centered level</strong>, you can use as many <code>level-item</code> as you want, as long as
|
||||
they are <strong>direct</strong> children of the <code>level</code> container.
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=nav_centered_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/snippet.html content=nav_centered_bis_example horizontal=true more=true %}
|
||||
|
||||
{% include elements/anchor.html name="Mobile level" %}
|
||||
{%
|
||||
include docs/elements/snippet.html content=nav_centered_example
|
||||
horizontal=true more=true
|
||||
%}
|
||||
{%
|
||||
include docs/elements/snippet.html
|
||||
content=nav_centered_bis_example horizontal=true more=true
|
||||
%}
|
||||
{% include docs/elements/anchor.html name="Mobile level" %}
|
||||
|
||||
<div class="content">
|
||||
By default, for space concerns, the level is vertical on mobile. If you want the level to be horizontal on mobile as well, add the <code>is-mobile</code> modifier on the <code>level</code> container.
|
||||
By default, for space concerns, the level is vertical on mobile. If you want the level to be horizontal on mobile as
|
||||
well, add the
|
||||
<code>is-mobile</code> modifier on the <code>level</code> container.
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=nav_mobile_example horizontal=true more=true %}
|
||||
{%
|
||||
include docs/elements/snippet.html content=nav_mobile_example horizontal=true
|
||||
more=true
|
||||
%}
|
||||
|
||||
@@ -1,28 +1,30 @@
|
||||
---
|
||||
title: Media Object
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
doc-tab: layout
|
||||
doc-subtab: media-object
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- layout
|
||||
- layout-media
|
||||
- home
|
||||
- documentation
|
||||
- layout
|
||||
- layout-media
|
||||
---
|
||||
|
||||
{% capture media_example %}
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-64x64">
|
||||
<img src="{{site.url}}/images/placeholders/128x128.png">
|
||||
<img src="{{site.url}}/assets/images/placeholders/128x128.png" />
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
|
||||
<br>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
|
||||
<br />
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare
|
||||
magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa
|
||||
sem. Etiam finibus odio quis feugiat facilisis.
|
||||
</p>
|
||||
</div>
|
||||
<nav class="level is-mobile">
|
||||
@@ -44,12 +46,11 @@ breadcrumb:
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture media_bis_example %}
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-64x64">
|
||||
<img src="{{site.url}}/images/placeholders/128x128.png">
|
||||
<img src="{{site.url}}/assets/images/placeholders/128x128.png" />
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
@@ -67,7 +68,7 @@ breadcrumb:
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox"> Press enter to submit
|
||||
<input type="checkbox" /> Press enter to submit
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
@@ -75,21 +76,22 @@ breadcrumb:
|
||||
</div>
|
||||
</article>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture media_nested_example %}
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-64x64">
|
||||
<img src="{{site.url}}/images/placeholders/128x128.png">
|
||||
<img src="{{site.url}}/assets/images/placeholders/128x128.png" />
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>Barbara Middleton</strong>
|
||||
<br>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta eros lacus, nec ultricies elit blandit non. Suspendisse pellentesque mauris sit amet dolor blandit rutrum. Nunc in tempus turpis.
|
||||
<br>
|
||||
<br />
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta eros
|
||||
lacus, nec ultricies elit blandit non. Suspendisse pellentesque mauris
|
||||
sit amet dolor blandit rutrum. Nunc in tempus turpis.
|
||||
<br />
|
||||
<small><a>Like</a> · <a>Reply</a> · 3 hrs</small>
|
||||
</p>
|
||||
</div>
|
||||
@@ -97,26 +99,32 @@ breadcrumb:
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-48x48">
|
||||
<img src="{{site.url}}/images/placeholders/96x96.png">
|
||||
<img src="{{site.url}}/assets/images/placeholders/96x96.png" />
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>Sean Brown</strong>
|
||||
<br>
|
||||
Donec sollicitudin urna eget eros malesuada sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam blandit nisl a nulla sagittis, a lobortis leo feugiat.
|
||||
<br>
|
||||
<br />
|
||||
Donec sollicitudin urna eget eros malesuada sagittis. Pellentesque
|
||||
habitant morbi tristique senectus et netus et malesuada fames ac
|
||||
turpis egestas. Aliquam blandit nisl a nulla sagittis, a lobortis
|
||||
leo feugiat.
|
||||
<br />
|
||||
<small><a>Like</a> · <a>Reply</a> · 2 hrs</small>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<article class="media">
|
||||
Vivamus quis semper metus, non tincidunt dolor. Vivamus in mi eu lorem cursus ullamcorper sit amet nec massa.
|
||||
Vivamus quis semper metus, non tincidunt dolor. Vivamus in mi eu lorem
|
||||
cursus ullamcorper sit amet nec massa.
|
||||
</article>
|
||||
|
||||
<article class="media">
|
||||
Morbi vitae diam et purus tincidunt porttitor vel vitae augue. Praesent malesuada metus sed pharetra euismod. Cras tellus odio, tincidunt iaculis diam non, porta aliquet tortor.
|
||||
Morbi vitae diam et purus tincidunt porttitor vel vitae augue.
|
||||
Praesent malesuada metus sed pharetra euismod. Cras tellus odio,
|
||||
tincidunt iaculis diam non, porta aliquet tortor.
|
||||
</article>
|
||||
</div>
|
||||
</article>
|
||||
@@ -124,16 +132,20 @@ breadcrumb:
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-48x48">
|
||||
<img src="{{site.url}}/images/placeholders/96x96.png">
|
||||
<img src="{{site.url}}/assets/images/placeholders/96x96.png" />
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>Kayli Eunice </strong>
|
||||
<br>
|
||||
Sed convallis scelerisque mauris, non pulvinar nunc mattis vel. Maecenas varius felis sit amet magna vestibulum euismod malesuada cursus libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus lacinia non nisl id feugiat.
|
||||
<br>
|
||||
<br />
|
||||
Sed convallis scelerisque mauris, non pulvinar nunc mattis vel.
|
||||
Maecenas varius felis sit amet magna vestibulum euismod malesuada
|
||||
cursus libero. Vestibulum ante ipsum primis in faucibus orci luctus
|
||||
et ultrices posuere cubilia Curae; Phasellus lacinia non nisl id
|
||||
feugiat.
|
||||
<br />
|
||||
<small><a>Like</a> · <a>Reply</a> · 2 hrs</small>
|
||||
</p>
|
||||
</div>
|
||||
@@ -145,7 +157,7 @@ breadcrumb:
|
||||
<article class="media">
|
||||
<figure class="media-left">
|
||||
<p class="image is-64x64">
|
||||
<img src="{{site.url}}/images/placeholders/128x128.png">
|
||||
<img src="{{site.url}}/assets/images/placeholders/128x128.png" />
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
@@ -164,21 +176,33 @@ breadcrumb:
|
||||
{% endcapture %}
|
||||
|
||||
<div class="content">
|
||||
<p>The <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code">media object</a> is a UI element perfect for repeatable and nestable content.</p>
|
||||
<p>
|
||||
The
|
||||
<a
|
||||
href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code"
|
||||
>media object</a
|
||||
>
|
||||
is a UI element perfect for repeatable and nestable content.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=media_example more=true %}
|
||||
{% include docs/elements/snippet.html content=media_example more=true %}
|
||||
|
||||
<div class="content">
|
||||
<p>You can include <em>any</em> other Bulma element, like inputs, textareas, icons, buttons… or even a <strong>navbar</strong>.</p>
|
||||
<p>
|
||||
You can include <em>any</em> other Bulma element, like inputs, textareas, icons, buttons… or even a
|
||||
<strong>navbar</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=media_bis_example more=true %}
|
||||
|
||||
{% include elements/anchor.html name="Nesting" %}
|
||||
{% include docs/elements/snippet.html content=media_bis_example more=true %}
|
||||
{% include docs/elements/anchor.html name="Nesting" %}
|
||||
|
||||
<div class="content">
|
||||
<p>You can nest media objects up to <strong>3 levels</strong> deep.</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=media_nested_example horizontal=true more=true %}
|
||||
{%
|
||||
include docs/elements/snippet.html content=media_nested_example
|
||||
horizontal=true more=true
|
||||
%}
|
||||
|
||||
@@ -1,59 +1,68 @@
|
||||
---
|
||||
title: Section
|
||||
layout: documentation
|
||||
layout: docs
|
||||
theme: library
|
||||
fullwidth: true
|
||||
doc-tab: layout
|
||||
doc-subtab: section
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- layout
|
||||
- layout-section
|
||||
- home
|
||||
- documentation
|
||||
- layout
|
||||
- layout-section
|
||||
---
|
||||
|
||||
{% capture section_example %}
|
||||
<section class="section">
|
||||
<h1 class="title">Section</h1>
|
||||
<h2 class="subtitle">
|
||||
A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading.
|
||||
A simple container to divide your page into <strong>sections</strong>, like
|
||||
the one you're currently reading.
|
||||
</h2>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture section_medium_example %}
|
||||
<section class="section is-medium">
|
||||
<h1 class="title">Medium section</h1>
|
||||
<h2 class="subtitle">
|
||||
A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading.
|
||||
A simple container to divide your page into <strong>sections</strong>, like
|
||||
the one you're currently reading.
|
||||
</h2>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture section_large_example %}
|
||||
<section class="section is-large">
|
||||
<h1 class="title">Large section</h1>
|
||||
<h2 class="subtitle">
|
||||
A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading.
|
||||
A simple container to divide your page into <strong>sections</strong>, like
|
||||
the one you're currently reading.
|
||||
</h2>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>section</code> components are simple layout elements with responsive padding. They are best used as <strong>direct</strong> children of <code>body</code>.
|
||||
The <code>section</code> components are simple layout elements with responsive padding. They are best used as
|
||||
<strong>direct</strong> children of <code>body</code>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=section_example horizontal=true fullwidth=true %}
|
||||
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
{%
|
||||
include docs/elements/snippet.html content=section_example horizontal=true
|
||||
fullwidth=true
|
||||
%}
|
||||
{% include docs/elements/anchor.html name="Sizes" %}
|
||||
|
||||
<div class="content">
|
||||
<p>You can use the modifiers <code>is-medium</code> and <code>is-large</code> to change the <strong>spacing</strong>.</p>
|
||||
<p>
|
||||
You can use the modifiers <code>is-medium</code> and <code>is-large</code> to change the <strong>spacing</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=section_medium_example horizontal=true fullwidth=true %}
|
||||
|
||||
{% include elements/snippet.html content=section_large_example horizontal=true fullwidth=true %}
|
||||
|
||||
{% include components/variables.html %}
|
||||
{%
|
||||
include docs/elements/snippet.html content=section_medium_example
|
||||
horizontal=true fullwidth=true
|
||||
%}
|
||||
{%
|
||||
include docs/elements/snippet.html
|
||||
content=section_large_example horizontal=true fullwidth=true
|
||||
%}
|
||||
|
||||
@@ -1,907 +0,0 @@
|
||||
---
|
||||
title: Tiles powered by Flexbox
|
||||
layout: documentation
|
||||
doc-tab: layout
|
||||
doc-subtab: tiles
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- layout
|
||||
- layout-tiles
|
||||
---
|
||||
|
||||
{% capture tile_empty %}
|
||||
<div class="tile">
|
||||
<!-- The magical tile element! -->
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tile_default %}
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-vertical is-8">
|
||||
<div class="tile">
|
||||
<div class="tile is-parent is-vertical">
|
||||
<article class="tile is-child notification is-primary">
|
||||
<p class="title">Vertical...</p>
|
||||
<p class="subtitle">Top tile</p>
|
||||
</article>
|
||||
<article class="tile is-child notification is-warning">
|
||||
<p class="title">...tiles</p>
|
||||
<p class="subtitle">Bottom tile</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child notification is-info">
|
||||
<p class="title">Middle tile</p>
|
||||
<p class="subtitle">With an image</p>
|
||||
<figure class="image is-4by3">
|
||||
<img src="{{site.url}}/images/placeholders/640x480.png">
|
||||
</figure>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child notification is-danger">
|
||||
<p class="title">Wide tile</p>
|
||||
<p class="subtitle">Aligned with the right tile</p>
|
||||
<div class="content">
|
||||
<!-- Content -->
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child notification is-success">
|
||||
<div class="content">
|
||||
<p class="title">Tall tile</p>
|
||||
<p class="subtitle">With even more content</p>
|
||||
<div class="content">
|
||||
<!-- Content -->
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tile_ancestor %}
|
||||
<div class="tile is-ancestor">
|
||||
<!-- All other tile elements -->
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tile_horizontal %}
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile">
|
||||
<!-- Add content or other tiles -->
|
||||
</div>
|
||||
<div class="tile">
|
||||
<!-- Add content or other tiles -->
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tile_resize %}
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-4">
|
||||
<!-- 1/3 -->
|
||||
</div>
|
||||
<div class="tile">
|
||||
<!-- This tile will take the rest: 2/3 -->
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tile_vertical %}
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-4 is-vertical">
|
||||
<div class="tile">
|
||||
<!-- Top tile -->
|
||||
</div>
|
||||
<div class="tile">
|
||||
<!-- Bottom tile -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile">
|
||||
<!-- This tile will take up the whole vertical space -->
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tile_123 %}
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-4 is-vertical is-parent">
|
||||
<div class="tile is-child box">
|
||||
<p class="title">One</p>
|
||||
</div>
|
||||
<div class="tile is-child box">
|
||||
<p class="title">Two</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child box">
|
||||
<p class="title">Three</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tile_lorem %}
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-4 is-vertical is-parent">
|
||||
<div class="tile is-child box">
|
||||
<p class="title">One</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
|
||||
</div>
|
||||
<div class="tile is-child box">
|
||||
<p class="title">Two</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child box">
|
||||
<p class="title">Three</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
|
||||
<p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
|
||||
<p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture md_3_levels %}
|
||||
tile is-ancestor
|
||||
|
|
||||
└───tile is-parent
|
||||
|
|
||||
└───tile is-child
|
||||
{% endcapture %}
|
||||
|
||||
{% capture md_nesting %}
|
||||
tile is-ancestor
|
||||
|
|
||||
├───tile is-vertical is-8
|
||||
| |
|
||||
| ├───tile
|
||||
| | |
|
||||
| | ├───tile is-parent is-vertical
|
||||
| | | ├───tile is-child
|
||||
| | | └───tile is-child
|
||||
| | |
|
||||
| | └───tile is-parent
|
||||
| | └───tile is-child
|
||||
| |
|
||||
| └───tile is-parent
|
||||
| └───tile is-child
|
||||
|
|
||||
└───tile is-parent
|
||||
└───tile is-child
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tile_any_content %}
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-vertical is-8">
|
||||
<div class="tile">
|
||||
<div class="tile is-parent is-vertical">
|
||||
<article class="tile is-child box">
|
||||
<!-- Put any content you want -->
|
||||
</article>
|
||||
<article class="tile is-child box">
|
||||
<!-- Put any content you want -->
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<!-- Put any content you want -->
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<!-- Put any content you want -->
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<!-- Put any content you want -->
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tile_3_columns %}
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Hello World</p>
|
||||
<p class="subtitle">What is up?</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Foo</p>
|
||||
<p class="subtitle">Bar</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Third column</p>
|
||||
<p class="subtitle">With some content</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-vertical is-8">
|
||||
<div class="tile">
|
||||
<div class="tile is-parent is-vertical">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Vertical tiles</p>
|
||||
<p class="subtitle">Top box</p>
|
||||
</article>
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Vertical tiles</p>
|
||||
<p class="subtitle">Bottom box</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Middle box</p>
|
||||
<p class="subtitle">With an image</p>
|
||||
<figure class="image is-4by3">
|
||||
<img src="{{site.url}}/images/placeholders/640x480.png">
|
||||
</figure>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Wide column</p>
|
||||
<p class="subtitle">Aligned with the right column</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<div class="content">
|
||||
<p class="title">Tall column</p>
|
||||
<p class="subtitle">With even more content</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
|
||||
<p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
|
||||
<p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Side column</p>
|
||||
<p class="subtitle">With some content</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent is-8">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Main column</p>
|
||||
<p class="subtitle">With some content</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture tile_4_columns %}
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">One</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Two</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Three</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Four</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-vertical is-9">
|
||||
<div class="tile">
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Five</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-8 is-vertical">
|
||||
<div class="tile">
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Six</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Seven</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Eight</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile">
|
||||
<div class="tile is-8 is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Nine</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Ten</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<div class="content">
|
||||
<p class="title">Eleven</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
|
||||
<p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Twelve</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent is-6">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Thirteen</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Fourteen</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="content">
|
||||
<p>To build intricate 2-dimensional layouts, you only need a <strong>single element</strong>: the <code>tile</code>:</p>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ tile_empty }}{% endhighlight %}
|
||||
|
||||
{% include elements/anchor.html name="Example" %}
|
||||
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-vertical is-8">
|
||||
<div class="tile">
|
||||
<div class="tile is-parent is-vertical">
|
||||
<article class="tile is-child notification is-primary">
|
||||
<p class="title">Vertical...</p>
|
||||
<p class="subtitle">Top tile</p>
|
||||
</article>
|
||||
<article class="tile is-child notification is-warning">
|
||||
<p class="title">...tiles</p>
|
||||
<p class="subtitle">Bottom tile</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child notification is-info">
|
||||
<p class="title">Middle tile</p>
|
||||
<p class="subtitle">With an image</p>
|
||||
<figure class="image is-4by3">
|
||||
<img src="{{site.url}}/images/placeholders/640x480.png">
|
||||
</figure>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child notification is-danger">
|
||||
<p class="title">Wide tile</p>
|
||||
<p class="subtitle">Aligned with the right tile</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child notification is-success">
|
||||
<div class="content">
|
||||
<p class="title">Tall tile</p>
|
||||
<p class="subtitle">With even more content</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
|
||||
<p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
|
||||
<p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ tile_default }}{% endhighlight %}
|
||||
|
||||
{% include elements/anchor.html name="Modifiers" %}
|
||||
|
||||
<div class="content">
|
||||
<p>The <code>tile</code> element has <strong>16 modifiers</strong>:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>3 contextual</strong> modifiers
|
||||
<ul>
|
||||
<li><code>is-ancestor</code></li>
|
||||
<li><code>is-parent</code></li>
|
||||
<li><code>is-child</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>1 directional</strong> modifier
|
||||
<ul>
|
||||
<li><code>is-vertical</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>12 horizontal size</strong> modifiers
|
||||
<ul>
|
||||
<li>from <code>is-1</code></li>
|
||||
<li>to <code>is-12</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="How it works: Nesting" %}
|
||||
|
||||
<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>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
<p>Start with an <strong>ancestor</strong> tile that will wrap all other tiles:</p>
|
||||
</div>
|
||||
<div class="column is-two-thirds">
|
||||
{% highlight html %}{{ tile_ancestor }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
<p>Add tile elements that will distribute themselves <strong>horizontally</strong>:</p>
|
||||
</div>
|
||||
<div class="column is-two-thirds">
|
||||
{% highlight html %}{{ tile_horizontal }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
<p>
|
||||
You can <strong>resize</strong> any tile according to a <strong>12 column</strong> grid.
|
||||
<br>
|
||||
For example, <code>is-4</code> will take up 1/3 of the horizontal space:
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-two-thirds">
|
||||
{% highlight html %}{{ tile_resize }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
<p>If you want to stack tiles <strong>vertically</strong>, add <code>is-vertical</code> on the parent tile:</p>
|
||||
</div>
|
||||
<div class="column is-two-thirds">
|
||||
{% highlight html %}{{ tile_vertical }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
<div class="content">
|
||||
<p>As soon as you want to add <strong>content</strong> to a tile, just:</p>
|
||||
<ul>
|
||||
<li>add <em>any</em> class you want, like <code>box</code></li>
|
||||
<li>add the <code>is-child</code> modifier on the tile</li>
|
||||
<li>add the <code>is-parent</code> modifier on the <em>parent</em> tile</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-two-thirds">
|
||||
{% highlight html %}{{ tile_123 }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-4 is-vertical is-parent">
|
||||
<div class="tile is-child box">
|
||||
<p class="title">One</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
|
||||
</div>
|
||||
<div class="tile is-child box">
|
||||
<p class="title">Two</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child box">
|
||||
<p class="title">Three</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
|
||||
<p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
|
||||
<p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ tile_lorem }}{% endhighlight %}
|
||||
|
||||
{% include elements/anchor.html name="Nesting requirements" %}
|
||||
|
||||
<article class="message is-danger">
|
||||
<div class="message-header">
|
||||
3 levels deep at least...
|
||||
</div>
|
||||
<div class="message-body">
|
||||
<div class="content">
|
||||
<p>You need at least <strong>3 levels</strong> of hierarchy:</p>
|
||||
{% highlight markdown %}{{ md_3_levels }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="message is-success">
|
||||
<div class="message-header">
|
||||
...but more levels if you want!
|
||||
</div>
|
||||
<div class="message-body">
|
||||
<div class="content">
|
||||
<p>You can, however, nest tiles deeper than that, and mix it up!</p>
|
||||
{% highlight markdown %}{{ md_nesting }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-vertical is-8">
|
||||
<div class="tile">
|
||||
<div class="tile is-parent is-vertical">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Vertical tiles</p>
|
||||
<p class="subtitle">Top box</p>
|
||||
</article>
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Vertical tiles</p>
|
||||
<p class="subtitle">Bottom box</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Middle box</p>
|
||||
<p class="subtitle">With an image</p>
|
||||
<figure class="image is-4by3">
|
||||
<img src="{{site.url}}/images/placeholders/640x480.png">
|
||||
</figure>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Wide column</p>
|
||||
<p class="subtitle">Aligned with the right column</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<div class="content">
|
||||
<p class="title">Tall column</p>
|
||||
<p class="subtitle">With even more content</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
|
||||
<p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
|
||||
<p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ tile_any_content }}{% endhighlight %}
|
||||
|
||||
{% include elements/anchor.html name="3 columns" %}
|
||||
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Hello World</p>
|
||||
<p class="subtitle">What is up?</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Foo</p>
|
||||
<p class="subtitle">Bar</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Third column</p>
|
||||
<p class="subtitle">With some content</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-vertical is-8">
|
||||
<div class="tile">
|
||||
<div class="tile is-parent is-vertical">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Vertical tiles</p>
|
||||
<p class="subtitle">Top box</p>
|
||||
</article>
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Vertical tiles</p>
|
||||
<p class="subtitle">Bottom box</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Middle box</p>
|
||||
<p class="subtitle">With an image</p>
|
||||
<figure class="image is-4by3">
|
||||
<img src="{{site.url}}/images/placeholders/640x480.png">
|
||||
</figure>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Wide column</p>
|
||||
<p class="subtitle">Aligned with the right column</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<div class="content">
|
||||
<p class="title">Tall column</p>
|
||||
<p class="subtitle">With even more content</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
|
||||
<p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
|
||||
<p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Side column</p>
|
||||
<p class="subtitle">With some content</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent is-8">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Main column</p>
|
||||
<p class="subtitle">With some content</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ tile_3_columns }}{% endhighlight %}
|
||||
|
||||
{% include elements/anchor.html name="4 columns" %}
|
||||
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">One</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Two</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Three</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Four</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-vertical is-9">
|
||||
<div class="tile">
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Five</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-8 is-vertical">
|
||||
<div class="tile">
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Six</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Seven</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Eight</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile">
|
||||
<div class="tile is-8 is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Nine</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Ten</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<div class="content">
|
||||
<p class="title">Eleven</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
|
||||
<p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Twelve</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent is-6">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Thirteen</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Fourteen</p>
|
||||
<p class="subtitle">Subtitle</p>
|
||||
<div class="content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ tile_4_columns }}{% endhighlight %}
|
||||
@@ -1,13 +0,0 @@
|
||||
---
|
||||
title: Modifiers
|
||||
layout: documentation
|
||||
doc-tab: modifiers
|
||||
hide_tabs: true
|
||||
hide_pagination: true
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- modifiers
|
||||
---
|
||||
|
||||
{% include components/links.html category_id='modifiers' %}
|
||||
@@ -1,12 +0,0 @@
|
||||
---
|
||||
title: Color helpers
|
||||
layout: documentation
|
||||
doc-tab: modifiers
|
||||
doc-subtab: color-helpers
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- modifiers
|
||||
- modifiers-color-helpers
|
||||
---
|
||||
<meta http-equiv="refresh" content="0; url={{ site.url }}/documentation/helpers/color-helpers/">
|
||||
@@ -1,12 +0,0 @@
|
||||
---
|
||||
title: Helpers
|
||||
layout: documentation
|
||||
doc-tab: modifiers
|
||||
doc-subtab: helpers
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- modifiers
|
||||
- modifiers-helpers
|
||||
---
|
||||
<meta http-equiv="refresh" content="0; url={{ site.url }}/documentation/helpers/">
|
||||
@@ -1,14 +0,0 @@
|
||||
---
|
||||
title: Responsive helpers
|
||||
layout: documentation
|
||||
hide_categories: true
|
||||
doc-tab: modifiers
|
||||
doc-subtab: responsive-helpers
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- modifiers
|
||||
- modifiers-responsive-helpers
|
||||
---
|
||||
|
||||
<meta http-equiv="refresh" content="0; url={{ site.url }}/documentation/helpers/visibility-helpers/">
|
||||
@@ -1,230 +0,0 @@
|
||||
---
|
||||
title: Modifiers syntax
|
||||
layout: documentation
|
||||
doc-tab: modifiers
|
||||
doc-subtab: syntax
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- modifiers
|
||||
- modifiers-syntax
|
||||
---
|
||||
<meta http-equiv="refresh" content="0; url={{ site.url }}/documentation/overview/modifiers/">
|
||||
|
||||
{% capture button_example %}
|
||||
<a class="button">
|
||||
Button
|
||||
</a>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_primary_example %}
|
||||
<a class="button is-primary">
|
||||
Button
|
||||
</a>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_colors %}
|
||||
<a class="button is-primary">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-link">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-info">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-success">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-warning">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-danger">
|
||||
Button
|
||||
</a>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_sizes %}
|
||||
<a class="button is-small">
|
||||
Button
|
||||
</a>
|
||||
<a class="button">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-medium">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-large">
|
||||
Button
|
||||
</a>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_states %}
|
||||
<a class="button is-primary is-outlined">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-loading">
|
||||
Button
|
||||
</a>
|
||||
<a class="button" disabled>
|
||||
Button
|
||||
</a>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture button_combinations %}
|
||||
<a class="button is-primary is-small" disabled>
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-info is-loading">
|
||||
Button
|
||||
</a>
|
||||
<a class="button is-danger is-outlined is-large">
|
||||
Button
|
||||
</a>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p>Let's start with a simple <strong>button</strong> that uses the <code>"button"</code> CSS class:</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p>
|
||||
{{button_example}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{button_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p>By <strong>adding</strong> the <code>"is-primary"</code> CSS class, you can modify the <strong>color</strong>:</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p>
|
||||
{{button_primary_example}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{button_primary_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>You can use one of the <strong>6 main colors</strong>:</p>
|
||||
<ul>
|
||||
<li><code>is-primary</code></li>
|
||||
<li><code>is-link</code></li>
|
||||
<li><code>is-info</code></li>
|
||||
<li><code>is-success</code></li>
|
||||
<li><code>is-warning</code></li>
|
||||
<li><code>is-danger</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="field">
|
||||
<a class="button is-primary">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-link">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-info">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-success">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-warning">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-danger">Button</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
<div class="bd-highlight-full">
|
||||
{% highlight html %}{{ button_colors }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>You can also alter the <strong>size</strong>:</p>
|
||||
<ul>
|
||||
<li><code>is-small</code></li>
|
||||
<li><code>is-medium</code></li>
|
||||
<li><code>is-large</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="field">
|
||||
<a class="button is-small">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-medium">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-large">Button</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{ button_sizes }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>Or the <strong>style</strong> or <strong>state</strong>:</p>
|
||||
<ul>
|
||||
<li><code>is-outlined</code></li>
|
||||
<li><code>is-loading</code></li>
|
||||
<li><code>[disabled]</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="field">
|
||||
<a class="button is-primary is-outlined">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-loading">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button" disabled>Button</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{ button_states }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
As a result, it's very easy to <strong>combine modifiers:</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="field">
|
||||
<a class="button is-primary is-small" disabled>Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-info is-loading">Button</a>
|
||||
</p>
|
||||
<p class="field">
|
||||
<a class="button is-danger is-outlined is-large">Button</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{ button_combinations }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,13 +0,0 @@
|
||||
---
|
||||
title: Typography helpers
|
||||
layout: documentation
|
||||
doc-tab: modifiers
|
||||
doc-subtab: typography-helpers
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- modifiers
|
||||
- modifiers-typography-helpers
|
||||
---
|
||||
<meta http-equiv="refresh" content="0; url={{ site.url }}/documentation/helpers/typography-helpers/">
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
---
|
||||
title: Overview
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
hide_tabs: true
|
||||
hide_pagination: true
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- overview
|
||||
---
|
||||
|
||||
{% include components/links.html category_id='overview' %}
|
||||
@@ -1,32 +0,0 @@
|
||||
---
|
||||
title: CSS classes
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: classes
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- overview
|
||||
- overview-classes
|
||||
---
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Bulma is a <strong>CSS</strong> framework, meaning that the end result is simply a <strong>single</strong> <code>.css</code> file:
|
||||
<br>
|
||||
<a href="https://github.com/jgthms/bulma/blob/master/css/bulma.css">https://github.com/jgthms<wbr>/bulma<wbr>/blob<wbr>/master<wbr>/css<wbr>/bulma.css</a></p>
|
||||
<p>
|
||||
Because Bulma solely comprises CSS classes, the HTML code you write has <strong>no impact</strong> on the styling of your page. That's why <code>.input</code> exists as a class, so you can choose <em>which</em> <code><input type="text"></code> elements you want to style.
|
||||
</p>
|
||||
<p>
|
||||
Bulma only styles <strong>generic</strong> tags directly <strong>twice</strong>:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/jgthms/bulma/blob/master/sass/base/generic.sass"><code>generic.sass</code></a> to define a basic style for your page
|
||||
</li>
|
||||
<li>
|
||||
the <a href="{{ site.url }}/documentation/elements/content/"><code>.content</code> class </a> to use for <em>any</em> textual content, like WYSIWYG
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -1,125 +0,0 @@
|
||||
---
|
||||
title: Colors
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: colors
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- overview
|
||||
- overview-colors
|
||||
colors:
|
||||
- white
|
||||
- black
|
||||
- light
|
||||
- dark
|
||||
- primary
|
||||
- link
|
||||
- info
|
||||
- success
|
||||
- warning
|
||||
- danger
|
||||
shades:
|
||||
- black-bis
|
||||
- black-ter
|
||||
- grey-darker
|
||||
- grey-dark
|
||||
- grey-light
|
||||
- grey-lighter
|
||||
- white-ter
|
||||
- white-bis
|
||||
---
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Most elements and components have color variations thanks to <strong>modifiers</strong> with syntax <code>.is-$color</code>, like <code>is-primary</code> or <code>is-dark</code>.
|
||||
</p>
|
||||
<p>
|
||||
This is thanks to the <code>$colors</code> <strong>Sass map</strong>, through which Bulma cycles to grab all the colors and their inverts.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Color</th>
|
||||
<th>Variable</th>
|
||||
<th>Value</th>
|
||||
<th>Computed value</th>
|
||||
<th>Invert value</th>
|
||||
<th>Computed invert value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for color in page.colors %}
|
||||
{% assign derivedColor = site.data.colors.derived | where: "id", color | first %}
|
||||
{% assign initialColor = site.data.colors.initial | where: "id", derivedColor.valueId | first %}
|
||||
<tr>
|
||||
<td>
|
||||
<strong>{{ derivedColor.id | capitalize }}</strong>
|
||||
</td>
|
||||
<td>
|
||||
<code>${{ derivedColor.id }}</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>${{ initialColor.id }}</code>
|
||||
</td>
|
||||
<td>
|
||||
{% include elements/color-square.html value=initialColor.value %}
|
||||
</td>
|
||||
{% if derivedColor.invertValue %}
|
||||
<td>
|
||||
<code>{{ derivedColor.invertValue }}</code>
|
||||
</td>
|
||||
<td>
|
||||
{% include elements/color-square.html value=derivedColor.invertValue %}
|
||||
</td>
|
||||
{% elsif derivedColor.invertId %}
|
||||
{% assign invertColor = site.data.colors.initial | where: "id", derivedColor.invertId | first %}
|
||||
<td>
|
||||
<code>${{ derivedColor.invertId }}</code>
|
||||
</td>
|
||||
<td>
|
||||
{% include elements/color-square.html value=invertColor.value %}
|
||||
</td>
|
||||
{% endif %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Bulma also provides a <code>$shades</code> <strong>Sass map</strong>, that only contains shades of grey between black and white.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Color</th>
|
||||
<th>Variable</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for shade in page.shades %}
|
||||
{% assign initial_shade = site.data.colors.initial | where: "id", shade | first %}
|
||||
<tr>
|
||||
<td>
|
||||
<strong>{{ initial_shade.name | capitalize }}</strong>
|
||||
</td>
|
||||
<td>
|
||||
<code>${{ initial_shade.id }}</code>
|
||||
</td>
|
||||
<td>
|
||||
{% include elements/color-square.html value=initial_shade.value %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -1,109 +0,0 @@
|
||||
---
|
||||
title: Customize Bulma with Sass
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: customize
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- overview
|
||||
- overview-customize
|
||||
---
|
||||
|
||||
<meta http-equiv="refresh" content="0; url={{ site.url }}/documentation/customize/">
|
||||
|
||||
{% capture scss_code %}
|
||||
// 1. Import the initial variables
|
||||
@import "../sass/utilities/initial-variables";
|
||||
@import "../sass/utilities/functions";
|
||||
|
||||
// 2. Set your own initial variables
|
||||
// Update blue
|
||||
$blue: #72d0eb;
|
||||
// Add pink and its invert
|
||||
$pink: #ffb3b3;
|
||||
$pink-invert: #fff;
|
||||
// Add a serif family
|
||||
$family-serif: "Merriweather", "Georgia", serif;
|
||||
|
||||
// 3. Set the derived variables
|
||||
// Use the new pink as the primary color
|
||||
$primary: $pink;
|
||||
$primary-invert: $pink-invert;
|
||||
// Use the existing orange as the danger color
|
||||
$danger: $orange;
|
||||
// Use the new serif family
|
||||
$family-primary: $family-serif;
|
||||
|
||||
// 4. Setup your Custom Colors
|
||||
$linkedin: #0077b5;
|
||||
$linkedin-invert: findColorInvert($linkedin);
|
||||
$twitter: #55acee;
|
||||
$twitter-invert: findColorInvert($twitter);
|
||||
$github: #333;
|
||||
$github-invert: findColorInvert($github);
|
||||
|
||||
// 5. Add new color variables to the color map.
|
||||
@import "../sass/utilities/derived-variables";
|
||||
$addColors: (
|
||||
"twitter":($twitter, $twitter-invert),
|
||||
"linkedin": ($linkedin, $linkedin-invert),
|
||||
"github": ($github, $github-invert)
|
||||
);
|
||||
$colors: map-merge($colors, $addColors);
|
||||
|
||||
// 6. Import the rest of Bulma
|
||||
@import "../bulma";
|
||||
{% endcapture %}
|
||||
|
||||
<div class="content">
|
||||
<p>If you're familiar with <a href="http://sass-lang.com/">Sass</a> and want to <strong>customize</strong> Bulma with your own colors and variables, just install Bulma via <strong>npm</strong>:</p>
|
||||
</div>
|
||||
|
||||
<article class="media is-large">
|
||||
<div class="media-left">
|
||||
<p class="title is-5">1</p>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">
|
||||
<strong>Download</strong> the source files:
|
||||
</p>
|
||||
{% highlight bash %}npm install bulma{% endhighlight %}
|
||||
<div class="content">or clone the repository: <a href="https://github.com/jgthms/bulma">https://github.com/jgthms/bulma</a></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="media is-large">
|
||||
<div class="media-left">
|
||||
<p class="title is-5">2</p>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">
|
||||
<strong>Set</strong> your variables
|
||||
</p>
|
||||
<p class="subtitle is-6">
|
||||
Create a file called <code>mystyles.scss</code> and add your own colors, set new fonts, override Bulma's default styles...
|
||||
</p>
|
||||
<div class="bd-highlight-full">
|
||||
{% highlight sass %}{{ scss_code }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="media is-large">
|
||||
<div class="media-left">
|
||||
<p class="title is-5">3</p>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">
|
||||
See the <strong>result</strong>: before and after
|
||||
</p>
|
||||
<p class="subtitle is-6">
|
||||
As <code>$blue</code> has been updated, and since <code>$blue-invert</code> is automatically calculated with the <strong>function</strong> <code>$blue-invert: findColorInvert($blue)</code>, the <code>$blue-invert</code> is now black instead of white</p>
|
||||
</p>
|
||||
<figure>
|
||||
<img width="640" height="640" src="{{site.url}}/images/customize-before.png" alt="Customizing Bulma with Sass">
|
||||
<img width="640" height="640" src="{{site.url}}/images/customize-after.png" alt="Customizing Bulma with Sass">
|
||||
</figure>
|
||||
</div>
|
||||
</article>
|
||||
@@ -1,254 +0,0 @@
|
||||
---
|
||||
title: Functions
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: functions
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- overview
|
||||
- overview-functions
|
||||
---
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Bulma has <strong>custom Sass functions</strong> to help find <strong>related colors</strong> dynamically:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li><code>findColorInvert($color)</code>: returns either 70% transparent black or 100% opaque white depending on the luminance of the color</li>
|
||||
<li><code>findLightColor($color)</code>: returns the current color but with a lightness of at <em>least</em> 96%</li>
|
||||
<li><code>findDarkColor($color)</code>: returns the current color but with a lightness of at <em>most</em> 29%</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
Bulma also has a few utility functions to calculate useful values:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li><code>powerNumber($number, $exp)</code>: calculates the value of a number exposed to another one. Returns a number</li>
|
||||
<li><code>colorLuminance($color)</code>: defines if a color is dark or light. Return a decimal number between 0 and 1 where <= 0.5 is dark and > 0.5 is light</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include elements/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>
|
||||
<ul>
|
||||
<li>if <code>colorLuminance($color) > 0.55</code>, it outputs <code>rgba(#000, 0.7)</code></li>
|
||||
<li>otherwise, it outputs <code>#fff</code></li>
|
||||
</ul>
|
||||
<p>Its purpose is to guarantee a <strong>readable</strong> shade for the <em>text</em> when the input color is used as the <em>background</em>.</p>
|
||||
<div class="table-container">
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>color</th>
|
||||
<th>color luminance</th>
|
||||
<th>findColorInvert()</th>
|
||||
<th>result</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #00d1b2;"></span>
|
||||
<code>#00d1b2</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.52831</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #00d1b2; border-color: #00d1b2; color: #fff;">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #3273dc;"></span>
|
||||
<code>#3273dc</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.23119</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #3273dc; border-color: #3273dc; color: #fff;">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #23d160;"></span>
|
||||
<code>#23d160</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.51067</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #23d160; border-color: #23d160; color: #fff;">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #ffdd57;"></span>
|
||||
<code>#ffdd57</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.76863</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: rgba(0, 0, 0, 0.7);"></span>
|
||||
<code>rgba(0, 0, 0, 0.7)</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #ffdd57; border-color: #ffdd57; color: rgba(0, 0, 0, 0.7);">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #ff3860;"></span>
|
||||
<code>#ff3860</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.27313</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #ff3860; border-color: #ff3860; color: #fff;">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #ffb3b3;"></span>
|
||||
<code>#ffb3b3</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.61796</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
|
||||
<code>rgba(0,0,0,0.7)</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #ffb3b3; border-color: #ffb3b3; color: rgba(0,0,0,0.7);">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #ffbc6b;"></span>
|
||||
<code>#ffbc6b</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.63053</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
|
||||
<code>rgba(0,0,0,0.7)</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: #ffbc6b; border-color: #ffbc6b; color: rgba(0,0,0,0.7);">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="bd-color" style="background: hsl(294, 71%, 79%);"></span>
|
||||
<code>hsl(294, 71%, 79%)</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>0.5529</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
|
||||
<code>rgba(0,0,0,0.7)</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: rgba(0,0,0,0.7);">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p>
|
||||
For colors that have a luminance close to the <code>0.55</code> threshold, it can be useful to <strong>override</strong> the <code>findColorInvert()</code> function, and rather set the invert color <strong>manually.</strong>
|
||||
<br>
|
||||
For example, this shade of <span class="bd-color" style="background: hsl(294, 71%, 79%); float: none; height: 16px; width: 16px; margin-right: 0; vertical-align: middle;"></span> purple has a color luminance of <code>0.5529</code>. It can be preferable to set a color invert of white instead of transparent black:
|
||||
</p>
|
||||
<div class="table-container">
|
||||
<table class="table is-bordered">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>
|
||||
with <code>findColorInvert()</code>
|
||||
</th>
|
||||
<td>
|
||||
<code>$purple-invert: findColorInvert($purple)</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
|
||||
<code>rgba(0,0,0,0.7)</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: rgba(0,0,0,0.7);">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>
|
||||
with manual setting
|
||||
</th>
|
||||
<td>
|
||||
<code>$purple-invert: #fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: #fff;"></span>
|
||||
<code>#fff</code>
|
||||
</td>
|
||||
<td>
|
||||
<a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: #fff;">
|
||||
Button
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="The <code>findLightColor()</code> and <code>findDarkColor()</code> functions" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>findLightColor($color)</code> and <code>findDarkColor($color)</code> functions take a <strong>color</strong> as an input, and output that color's light and dark versions respectively</code>:
|
||||
</p>
|
||||
</div>
|
||||
@@ -1,68 +0,0 @@
|
||||
---
|
||||
title: Mixins
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: mixins
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- overview
|
||||
- overview-mixins
|
||||
---
|
||||
|
||||
<div class="table-container">
|
||||
<table class="table is-bordered">
|
||||
<tr>
|
||||
<td><code>=arrow($color)</code></td>
|
||||
<td>Creates a CSS-only down arrow. Used for the dropdown select.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=block</code></td>
|
||||
<td>Defines a margin-bottom of 1.5rem, except when the element is the last child. Used for almost all block elements.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=clearfix</code></td>
|
||||
<td>Adds a clearfix at the end of the element. Used for the "is-clearfix" helper.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=center($size)</code></td>
|
||||
<td>Positions an element in the exact center of its parent. Used for the spinner in a loading button.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=delete</code></td>
|
||||
<td>Creates a CSS-only cross. Used for the delete element in modals, messages, tags...</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=fa($size, $dimensions)</code></td>
|
||||
<td>Sets the style of a Font Awesome icon container.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=hamburger($dimensions)</code></td>
|
||||
<td>Creates a CSS-only hamburger menu with 3 bars. Used for the "nav-toggle".</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=loader</code></td>
|
||||
<td>Creates a CSS-only loading spinner. Used for the ".loader" element, and for input and button spinners.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=overflow-touch</code></td>
|
||||
<td>Sets the style of a container so that it keeps momentum when scrolling on iOS devices.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=overlay($offset: 0)</code></td>
|
||||
<td>Makes the element overlay its parent container, like the transparent modal background.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=placeholder</code></td>
|
||||
<td>Sets the styles of an input placeholder.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=unselectable</code></td>
|
||||
<td>Turns the element unselectable. Used for buttons to prevent selection when clicking.</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>These mixins are already used throughout Bulma, but you can use them as well to extend your own styles.</p>
|
||||
</div>
|
||||
@@ -1,103 +0,0 @@
|
||||
---
|
||||
title: Modularity
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: modular
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- overview
|
||||
- overview-modular
|
||||
---
|
||||
|
||||
{% capture import %}
|
||||
@import "bulma/sass/utilities/_all.sass"
|
||||
@import "bulma/sass/grid/columns.sass"
|
||||
{% endcapture %}
|
||||
|
||||
{% capture columns %}
|
||||
<div class="columns">
|
||||
<div class="column">1</div>
|
||||
<div class="column">2</div>
|
||||
<div class="column">3</div>
|
||||
<div class="column">4</div>
|
||||
<div class="column">5</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture only_button %}
|
||||
@import "bulma/sass/utilities/_all.sass"
|
||||
@import "bulma/sass/elements/button.sass"
|
||||
{% endcapture %}
|
||||
|
||||
{% capture buttons %}
|
||||
<button class="button">
|
||||
Button
|
||||
</button>
|
||||
|
||||
<button class="button is-primary">
|
||||
Primary button
|
||||
</button>
|
||||
|
||||
<button class="button is-large">
|
||||
Large button
|
||||
</button>
|
||||
|
||||
<button class="button is-loading">
|
||||
Loading button
|
||||
</button>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Bulma consists of <strong>39</strong> <code>.sass</code> files that you can import <strong>individually.</strong>
|
||||
</p>
|
||||
<p>
|
||||
For example, let's say you only want the Bulma <strong>columns.</strong>
|
||||
<br>
|
||||
The file is located in the <code>bulma/sass/grid</code> folder.
|
||||
<br>
|
||||
Simply <strong>import</strong> the utilities dependencies, and then the files you need directly:
|
||||
</p>
|
||||
{% highlight sass %}{{ import }}{% endhighlight %}
|
||||
<p>
|
||||
Now you can use the classes <code>.columns</code> (for the container) and <code>.column</code> directly:
|
||||
</p>
|
||||
{% highlight html %}{{ columns }}{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
|
||||
<p>
|
||||
What if you only want the <strong>button</strong> styles instead?
|
||||
</p>
|
||||
{% highlight sass %}{{ only_button }}{% endhighlight %}
|
||||
<p>
|
||||
You can now use the <code>.button</code> class, and all its modifiers:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>.is-active</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>.is-primary</code>,
|
||||
<code>.is-info</code>,
|
||||
<code>.is-success</code>...
|
||||
</li>
|
||||
<li>
|
||||
<code>.is-small</code>,
|
||||
<code>.is-medium</code>,
|
||||
<code>.is-large</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>.is-outlined</code>,
|
||||
<code>.is-inverted</code>,
|
||||
<code>.is-link</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>.is-loading</code>,
|
||||
<code>[disabled]</code>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{% highlight html %}{{ buttons }}{% endhighlight %}
|
||||
</div>
|
||||
@@ -1,96 +0,0 @@
|
||||
---
|
||||
title: Responsiveness
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: responsiveness
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- overview
|
||||
- overview-responsiveness
|
||||
variables_keys:
|
||||
- $gap
|
||||
- $tablet
|
||||
- $desktop
|
||||
- $widescreen
|
||||
- $fullhd
|
||||
---
|
||||
|
||||
{% capture scss_code %}
|
||||
// Disable the widescreen breakpoint
|
||||
$widescreen-enabled: false
|
||||
|
||||
// Disable the fullhd breakpoint
|
||||
$fullhd-enabled: false
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/anchor.html name="Vertical by default" %}
|
||||
|
||||
<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:
|
||||
</p>
|
||||
<ul>
|
||||
<li><code>columns</code> are stacked vertically</li>
|
||||
<li>the <code>level</code> component will show its children stacked vertically</li>
|
||||
<li>the <code>nav</code> menu will be hidden</li>
|
||||
</ul>
|
||||
<p>You can however enforce the <strong>horizontal</strong> layout for both <code>columns</code> or <code>level</code> by appending the <code>is-mobile</code> modifier.</p>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Breakpoints" %}
|
||||
|
||||
{% assign variables_file_url = "/blob/master/sass/utilities/initial-variables.sass#L56,L64" | prepend: site.data.meta.github %}
|
||||
{% assign mixins_file_url = "/blob/master/sass/utilities/mixins.sass#L81,L129" | prepend: site.data.meta.github %}
|
||||
|
||||
<div class="content">
|
||||
<p>Bulma has <a href="{{ variables_file_url }}" target="_blank">4 breakpoints</a> which defines <strong>5 screen sizes</strong>:</p>
|
||||
<ul>
|
||||
{% for breakpoint_hash in site.data.breakpoints %}
|
||||
{% assign breakpoint = breakpoint_hash[1] %}
|
||||
<li><code>{{ breakpoint.id }}</code>: {% if breakpoint.id == 'mobile' %}up to <code>{{ breakpoint.to }}px</code>{% else %}from <code>{{ breakpoint.from }}px</code>{% endif %}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
<p>To make use of these breakpoints, Bulma provides <a href="{{ site.url }}/documentation/utilities/responsive-mixins/">9 responsive mixins</a>.</p>
|
||||
</div>
|
||||
|
||||
{% include components/breakpoints-table.html %}
|
||||
|
||||
{% assign urm_link = site.data.links.by_id['utilities-responsive-mixins'] %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
To simplify using these breakpoints, Bulma provides <a href="{{ site.url }}{{ urm_link.path }}">easy-to-use responsive mixins</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% assign vernum = site.data.meta.version | downcase | remove: "." | plus: 0 %}
|
||||
|
||||
{% if vernum >= 70 %}
|
||||
|
||||
{% include elements/anchor.html name="Disabling breakpoints" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
By default, the <code>$widescreen</code> and <code>$fullhd</code> breakpoints are <strong>enabled</strong>. You can disable them by setting the corresponding Sass boolean to <code>false</code>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-highlight-full">
|
||||
{% highlight sass %}{{ scss_code }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
|
||||
{% capture custom_message %}
|
||||
These are <a href="{{ derived_variables.file_url }}" target="_blank">variables</a> with a value that <strong>references</strong> another variable.
|
||||
{% endcapture %}
|
||||
|
||||
{% include components/variables.html
|
||||
type='element'
|
||||
variables_keys=page.variables_keys
|
||||
custom_message=custom_message
|
||||
folder='utilities'
|
||||
file='initial-variables'
|
||||
%}
|
||||
@@ -1,244 +0,0 @@
|
||||
---
|
||||
title: Getting started with Bulma
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: start
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- overview
|
||||
- overview-start
|
||||
---
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Bulma is a <strong>CSS library</strong>. This means it provides CSS classes to help you style your HTML code.
|
||||
<br>
|
||||
To use Bulma, you can either use the pre-compiled <code>.css</code> file or install the <code>.sass</code> files so you can customize it to your needs.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-options">
|
||||
<div class="bd-option">
|
||||
<div class="block media is-align-items-center">
|
||||
<div class="media-left">
|
||||
<span class="icon is-flex is-large has-text-link">
|
||||
<i class="fab fa-css3 fa-2x"></i>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="media-content">
|
||||
<p class="title is-4">Get the Bulma <strong class="has-text-link">CSS</strong> file</p>
|
||||
<p class="subtitle">A single <code>.css</code> file that includes all of Bulma</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-option-item">
|
||||
<p class="bd-option-title block has-text-grey-light is-size-5">
|
||||
<span class="button bd-fat-button is-success is-light is-pulled-right">Recommended</span>
|
||||
Option 1. <strong>Use a CDN</strong>
|
||||
</p>
|
||||
|
||||
<p class="block">
|
||||
You can import the CSS file directly from <a href="{{ site.data.meta.jsdelivr }}" target="_blank">jsDelivr</a>:
|
||||
</p>
|
||||
|
||||
{% capture jsdelivr_a %}
|
||||
{% highlight css %}@import "https://cdn.jsdelivr.net/npm/bulma@{{ site.data.meta.version }}/css/bulma.min.css";{% endhighlight %}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture jsdelivr_b %}
|
||||
{% highlight html %}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@{{ site.data.meta.version }}/css/bulma.min.css">{% endhighlight %}
|
||||
{% endcapture %}
|
||||
|
||||
{%
|
||||
include components/tabs.html
|
||||
button_a="CSS @import"
|
||||
button_b="HTML <link>"
|
||||
item_a=jsdelivr_a
|
||||
item_b=jsdelivr_b
|
||||
%}
|
||||
|
||||
<p class="block">
|
||||
The <strong>RTL version</strong> is also available:
|
||||
</p>
|
||||
|
||||
{% capture jsdelivr_rtl_a %}
|
||||
{% highlight css %}@import "https://cdn.jsdelivr.net/npm/bulma@{{ site.data.meta.version }}/css/bulma-rtl.min.css";{% endhighlight %}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture jsdelivr_rtl_b %}
|
||||
{% highlight html %}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@{{ site.data.meta.version }}/css/bulma-rtl.min.css">{% endhighlight %}
|
||||
{% endcapture %}
|
||||
|
||||
{%
|
||||
include components/tabs.html
|
||||
button_a="CSS @import"
|
||||
button_b="HTML <link>"
|
||||
item_a=jsdelivr_rtl_a
|
||||
item_b=jsdelivr_rtl_b
|
||||
%}
|
||||
|
||||
<p class="block">
|
||||
Bulma is also available via <a href="{{ site.data.meta.cdnjs }}" target="_blank">cdnjs</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-option-item">
|
||||
<p class="bd-option-title block has-text-grey-light is-size-5">
|
||||
Option 2. <strong>Download the Github release</strong>
|
||||
</p>
|
||||
|
||||
<div class="block">
|
||||
You can get the latest Bulma release as a <code>.zip</code> from GitHub:
|
||||
</div>
|
||||
|
||||
<a class="button bd-fat-button is-primary is-light" href="{{ site.data.meta.download }}">
|
||||
Download v{{ site.data.meta.version }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-option-or">
|
||||
<p>Or</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-option">
|
||||
<div class="block media is-align-items-center">
|
||||
<div class="media-left">
|
||||
<span class="icon is-flex is-large has-text-sass">
|
||||
<i class="fab fa-sass fa-2x"></i>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="media-content">
|
||||
<p class="title is-4">Get the Bulma <strong class="has-text-sass">Sass</strong> library</p>
|
||||
<p class="subtitle">A collection of <code>.sass</code> files to build your own version of Bulma</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-option-item">
|
||||
<p class="bd-option-title block has-text-grey-light is-size-5">
|
||||
<span class="button bd-fat-button is-success is-light is-pulled-right">Recommended</span>
|
||||
Option 1. <strong>Install the NPM package</strong>
|
||||
</p>
|
||||
|
||||
<p class="block">
|
||||
Bulma is available through <a href="{{ site.data.meta.npm }}" target="_blank">npm</a>:
|
||||
</p>
|
||||
|
||||
{% capture npm_item %}
|
||||
{% highlight bash %}npm install bulma{% endhighlight %}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture yarn_item %}
|
||||
{% highlight bash %}yarn add bulma{% endhighlight %}
|
||||
{% endcapture %}
|
||||
|
||||
{%
|
||||
include components/tabs.html
|
||||
button_a="npm"
|
||||
button_b="yarn"
|
||||
item_a=npm_item
|
||||
item_b=yarn_item
|
||||
%}
|
||||
|
||||
<p class="block">
|
||||
Bulma is also available via <a href="{{ site.data.meta.cdnjs }}" target="_blank">cdnjs</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-option-item">
|
||||
<p class="bd-option-title block has-text-grey-light is-size-5">
|
||||
Option 2. <strong>Clone the GitHub repository</strong>
|
||||
</p>
|
||||
|
||||
<p class="block">
|
||||
Bulma is available on <a href="{{ site.data.meta.github }}" target="_blank">GitHub</a>:
|
||||
</p>
|
||||
|
||||
{% capture git_ssh %}
|
||||
{% highlight bash %}{{ site.data.meta.git_ssh }}{% endhighlight %}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture git_https %}
|
||||
{% highlight bash %}{{ site.data.meta.git_https }}{% endhighlight %}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture git_cli %}
|
||||
{% highlight bash %}{{ site.data.meta.git_cli }}{% endhighlight %}
|
||||
{% endcapture %}
|
||||
|
||||
{%
|
||||
include components/tabs.html
|
||||
button_a="SSH"
|
||||
button_b="HTTPS"
|
||||
button_c="GitHub CLI"
|
||||
item_a=git_ssh
|
||||
item_b=git_https
|
||||
item_c=git_cli
|
||||
%}
|
||||
|
||||
<div class="message is-warning">
|
||||
<div class="message-body">
|
||||
Note that the GitHub repository also includes this documentation, so it’s significantly bigger than the NPM package.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Code requirements" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
For Bulma to work correctly, you need to make your webpage <strong>responsive</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<article class="media is-large">
|
||||
<div class="media-left">
|
||||
<p class="title is-5">1</p>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">
|
||||
Use the <strong>HTML5 doctype</strong>
|
||||
</p>
|
||||
{% highlight html %}<!DOCTYPE html>{% endhighlight %}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="media is-large">
|
||||
<div class="media-left">
|
||||
<p class="title is-5">2</p>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">
|
||||
Add the responsive <strong>viewport</strong> meta tag
|
||||
</p>
|
||||
{% highlight html %}<meta name="viewport" content="width=device-width, initial-scale=1">{% endhighlight %}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{% include elements/anchor.html name="Starter template" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
If you want to get started <strong>right away</strong>, you can use this <strong>HTML starter template</strong>. Just copy/paste this code in a file and save it on your computer.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-example bd-highlight-full">
|
||||
{% highlight html %}{% include snippets/getting-started.html %}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="bulma-start" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
<code><a href="{{ site.url }}/bulma-start/">bulma-start</a></code> is a tiny npm package that includes the <code>npm</code> dependencies you need to build your own website with Bulma.
|
||||
</p>
|
||||
<p>
|
||||
<a class="button is-link" href="{{ site.url }}/bulma-start/">Check it out</a>
|
||||
</p>
|
||||
</div>
|
||||
@@ -1,109 +0,0 @@
|
||||
---
|
||||
title: Variables
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: variables
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- overview
|
||||
- overview-variables
|
||||
---
|
||||
|
||||
<meta http-equiv="refresh" content="0; url={{ site.url }}/documentation/customize/variables/">
|
||||
|
||||
{% assign initial_variables = site.data.variables.utilities.initial-variables %}
|
||||
{% assign initial_vars = initial_variables.by_name %}
|
||||
{% assign derived_variables = site.data.variables.utilities.derived-variables %}
|
||||
{% assign derived_vars = derived_variables.by_name %}
|
||||
|
||||
<div class="content">
|
||||
<p>Bulma has <strong>two</strong> variable files divided into <strong>4</strong> sections:</p>
|
||||
|
||||
<ol>
|
||||
<li>
|
||||
<strong>Initial variables</strong>: where you define variables by <strong>literal value</strong>, like:
|
||||
<ul>
|
||||
<li><strong>colors</strong>: <code>{{ initial_vars['$blue'].name }}: {{ initial_vars['$blue'].value }}</code></li>
|
||||
<li><strong>font sizes</strong>: <code>{{ initial_vars['$size-1'].name }}: {{ initial_vars['$size-1'].value }}</code></li>
|
||||
<li><strong>dimensions</strong>: <code>{{ initial_vars['$gap'].name }}: {{ initial_vars['$gap'].value }}</code></li>
|
||||
<li><strong>other values</strong>: <code>{{ initial_vars['$easing'].name }}: {{ initial_vars['$easing'].value }}</code> or <code>{{ initial_vars['$radius-large'].name }}: {{ initial_vars['$radius-large'].value }}</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Derived variables</strong> where variables are <strong>calculated</strong> from the values set in the previous file. For example, you can have:
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Primary colors</strong> derived from the initial variables:
|
||||
<ul>
|
||||
<li><code>{{ derived_vars['$primary'].name }}: {{ derived_vars['$primary'].value }}</code></li>
|
||||
<li><code>{{ derived_vars['$link'].name }}: {{ derived_vars['$link'].value }}</code></li>
|
||||
<li><code>{{ derived_vars['$info'].name }}: {{ derived_vars['$info'].value }}</code></li>
|
||||
<li><code>{{ derived_vars['$success'].name }}: {{ derived_vars['$success'].value }}</code></li>
|
||||
<li><code>{{ derived_vars['$warning'].name }}: {{ derived_vars['$warning'].value }}</code></li>
|
||||
<li><code>{{ derived_vars['$danger'].name }}: {{ derived_vars['$danger'].value }}</code></li>
|
||||
<li><code>{{ derived_vars['$dark'].name }}: {{ derived_vars['$dark'].value }}</code></li>
|
||||
<li><code>{{ derived_vars['$text'].name }}: {{ derived_vars['$text'].value }}</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>{{ derived_vars['$background'].name }}: {{ derived_vars['$background'].value }}</code>: a general background color</li>
|
||||
<li><code>{{ derived_vars['$link'].name }}: {{ derived_vars['$link'].value }}</code>: the links use the primary color</li>
|
||||
<li><code>{{ derived_vars['$family-primary'].name }}: {{ derived_vars['$family-primary'].value }}</code>: the primary font family is the sans-serif one</li>
|
||||
<li>
|
||||
<strong>Lists and maps</strong> which are collections of already defined variables:
|
||||
<ul>
|
||||
<li><code>{{ derived_vars['$colors'].name }}: {{ derived_vars['$colors'].value }}</code></li>
|
||||
<li><code>{{ derived_vars['$shades'].name }}: {{ derived_vars['$shades'].value }}</code></li>
|
||||
<li><code>{{ derived_vars['$sizes'].name }}: {{ derived_vars['$sizes'].value }}</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<p>
|
||||
To <strong>override</strong> any of these variables, just set them <em>before</em> importing Bulma.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Initial variables" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
These are <a href="https://github.com/jgthms/bulma/blob/master/sass/{{ initial_variables.file_path }}" target="_blank" rel="nofollow">initial variables</a> with a <strong>literal</strong> value.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<tbody>
|
||||
{% for variable_name in initial_variables.list %}
|
||||
{% assign variable = initial_vars[variable_name] %}
|
||||
{% include elements/variable-row.html variable=variable hide_computed =true%}
|
||||
{% endfor %}
|
||||
<tbody>
|
||||
</table>
|
||||
|
||||
{% capture custom_message %}
|
||||
These are <a href="https://github.com/jgthms/bulma/blob/master/sass/{{ derived_variables.file_path }}" target="_blank" rel="nofollow">variables</a> with a value that <strong>references</strong> another variable.
|
||||
{% endcapture %}
|
||||
|
||||
{%
|
||||
include components/variables.html
|
||||
anchor_name = 'Derived variables'
|
||||
data = derived_variables
|
||||
custom_message = custom_message
|
||||
table_class = 'is-bordered'
|
||||
%}
|
||||
|
||||
{% capture custom_message %}
|
||||
You can use the following <a href="{{ site.data.variables.base.generic.file_url }}" target="_blank">generic variables</a> for general <strong>customization</strong>. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
|
||||
{% endcapture %}
|
||||
|
||||
{%
|
||||
include components/variables.html
|
||||
anchor_name = 'Generic variables'
|
||||
tab = 'base'
|
||||
subtab = 'generic'
|
||||
custom_message = custom_message
|
||||
table_class = 'is-bordered'
|
||||
%}
|
||||
@@ -1,15 +1,18 @@
|
||||
---
|
||||
title: Extends
|
||||
layout: documentation
|
||||
doc-tab: utilities
|
||||
title: Bulma Sass Extends
|
||||
layout: docs
|
||||
theme: sass
|
||||
doc-tab: sass
|
||||
doc-subtab: extends
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- utilities
|
||||
- utilities-extends
|
||||
- home
|
||||
- documentation
|
||||
- sass
|
||||
- sass-extends
|
||||
---
|
||||
|
||||
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
In Bulma, a lot of element <strong>share</strong> a set of styles. While mixins allow sharing, they repeat the CSS rules everytime they are used.
|
||||
@@ -25,28 +28,28 @@ breadcrumb:
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
{% include elements/snippet-inline.html content="%control" %}
|
||||
{% include docs/elements/snippet-inline.html content="%control" %}
|
||||
</li>
|
||||
<li>
|
||||
{% include elements/snippet-inline.html content="%unselectable" %}
|
||||
{% include docs/elements/snippet-inline.html content="%unselectable" %}
|
||||
</li>
|
||||
<li>
|
||||
{% include elements/snippet-inline.html content="%arrow" %}
|
||||
{% include docs/elements/snippet-inline.html content="%arrow" %}
|
||||
</li>
|
||||
<li>
|
||||
{% include elements/snippet-inline.html content="%block" %}
|
||||
{% include docs/elements/snippet-inline.html content="%block" %}
|
||||
</li>
|
||||
<li>
|
||||
{% include elements/snippet-inline.html content="%delete" %}
|
||||
{% include docs/elements/snippet-inline.html content="%delete" %}
|
||||
</li>
|
||||
<li>
|
||||
{% include elements/snippet-inline.html content="%loader" %}
|
||||
{% include docs/elements/snippet-inline.html content="%loader" %}
|
||||
</li>
|
||||
<li>
|
||||
{% include elements/snippet-inline.html content="%overlay" %}
|
||||
{% include docs/elements/snippet-inline.html content="%overlay" %}
|
||||
</li>
|
||||
<li>
|
||||
{% include elements/snippet-inline.html content="%reset" %}
|
||||
{% include docs/elements/snippet-inline.html content="%reset" %}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -57,3 +60,17 @@ breadcrumb:
|
||||
Each of these placeholders are simply the <code>@extend</code> version of their <a href="{{ site.url }}{{ mixins_link.path }}">corresponding mixins</a> (here for the <a href="{{ site.url }}{{ controls_link.path }}">control mixin</a>).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include docs/elements/anchor.html name="How to use Bulma extends" %}
|
||||
|
||||
<div class="content">Import the extend rules with <code>@use</code> and use them with <code>@extend</code>:</div>
|
||||
|
||||
{% highlight sass %}
|
||||
@use "bulma/sass/utilities/extends";
|
||||
|
||||
.my-control {
|
||||
@extend %control;
|
||||
background-color: purple;
|
||||
color: white;
|
||||
}
|
||||
{% endhighlight %}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user