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

Add fullheight Section, Add more color helpers, Add tablet Container, Add list of checkboxes and radios

Browse Source
This commit is contained in:
Jeremy Thomas
2024-07-07 17:59:24 +01:00
parent 2ed62be159
commit ab4a7b7d18
27 changed files with 490 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
docs/documentation/form/checkbox.html
View File

@@ -14,59 +14,106 @@ meta:
sizes: false
variables: false
---
{% capture checkbox_example %}
<label class="checkbox">
<input type="checkbox" />
Remember me
</label>
{% endcapture %}
{% capture checkbox_link_example %}
{% endcapture %} {% capture checkbox_link_example %}
<label class="checkbox">
<input type="checkbox" />
I agree to the <a href="#">terms and conditions</a>
</label>
{% endcapture %}
{% capture checkbox_disabled_example %}
{% endcapture %} {% capture checkbox_disabled_example %}
<label class="checkbox" disabled>
<input type="checkbox" disabled />
Save my preferences
</label>
{% endcapture %} {% capture list_of_checkboxes %}
<div class="checkboxes">
<label class="checkbox">
<input type="checkbox" />
Monday
</label>
<label class="checkbox">
<input type="checkbox" />
Tuesday
</label>
<label class="checkbox">
<input type="checkbox" />
Wednesday
</label>
<label class="checkbox">
<input type="checkbox" />
Thursday
</label>
<label class="checkbox">
<input type="checkbox" />
Friday
</label>
<label class="checkbox">
<input type="checkbox" checked />
Saturday
</label>
<label class="checkbox">
<input type="checkbox" checked />
Sunday
</label>
</div>
{% endcapture %}
<div class="content">
<p>
The <code>checkbox</code> class is a simple wrapper around the <code>&lt;input type="checkbox"&gt;</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>&lt;input type="checkbox"&gt;</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 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 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 bd-highlight-full">
{% highlight html -%}
{{- checkbox_disabled_example -}}
{%- endhighlight %}
{% highlight html -%} {{- checkbox_disabled_example -}} {%- endhighlight %}
</div>
</div>
{% include docs/elements/anchor.html name="List of Checkboxes" %}
<div class="content">
<p>
If you want to list several checkbox elements, wrap them in a
<code>&lt;div class="checkboxes"&gt;</code> element:
</p>
</div>
<div class="block">{{- list_of_checkboxes -}}</div>
{% highlight html -%} {{- list_of_checkboxes -}} {%- endhighlight %}

61
docs/documentation/form/radio.html
View File

@@ -14,6 +14,7 @@ meta:
sizes: false
variables: false
---
{% capture radio_example %}
<div class="control">
<label class="radio">
@@ -25,8 +26,7 @@ meta:
No
</label>
</div>
{% endcapture %}
{% capture radio_default_example %}
{% endcapture %} {% capture radio_default_example %}
<div class="control">
<label class="radio">
<input type="radio" name="foobar" />
@@ -37,8 +37,7 @@ meta:
Bar
</label>
</div>
{% endcapture %}
{% capture radio_disabled_example %}
{% endcapture %} {% capture radio_disabled_example %}
<div class="control">
<label class="radio">
<input type="radio" name="rsvp" />
@@ -53,30 +52,46 @@ meta:
Maybe
</label>
</div>
{% endcapture %} {% capture list_of_radios %}
<div class="radios">
<label class="radio">
<input type="radio" name="rsvp" />
Going
</label>
<label class="radio">
<input type="radio" name="rsvp" />
Not going
</label>
<label class="radio" disabled>
<input type="radio" name="rsvp" disabled />
Maybe
</label>
</div>
{% endcapture %}
<div class="content">
<p>
The <code>radio</code> class is a simple wrapper around the <code>&lt;input type="radio"&gt;</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>&lt;input type="radio"&gt;</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.
Make sure the linked radio buttons have the <strong>same value</strong> for
their <code>name</code> HTML attribute.
</p>
</div>
<div class="columns">
<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
You can check a radio button by <strong>default</strong> by adding the
<code>checked</code> HTML attribute to the
<code>&lt;input&gt;</code> element.
</p>
</div>
@@ -84,15 +99,14 @@ meta:
<div class="columns">
<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
You can <strong>disable</strong> a radio button by adding the
<code>disabled</code> HTML attribute to both the
<code>&lt;label&gt;</code> and the <code>&lt;input&gt;</code>.
</p>
</div>
@@ -100,8 +114,19 @@ meta:
<div class="columns">
<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>
{% include docs/elements/anchor.html name="List of Radio Buttons" %}
<div class="content">
<p>
If you want to list several radio buttons, wrap them in a
<code>&lt;div class="radios"&gt;</code> element:
</p>
</div>
<div class="block">{{- list_of_radios -}}</div>
{% highlight html -%} {{- list_of_radios -}} {%- endhighlight %}

92
docs/documentation/helpers/color-helpers.html
View File

@@ -217,6 +217,33 @@ breadcrumb:
</tbody>
</table>
<p class="block">
You can also <strong>inherit</strong> the color, or use the
<strong>current</strong> one:
</p>
<table class="table is-bordered">
<thead>
<tr>
<th>Class</th>
<th>Value</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>has-text-current</code></td>
<td>{% include docs/color/current.html %}</td>
<td class="has-text-current">Hello Bulma</td>
</tr>
<tr>
<td><code>has-text-inherit</code></td>
<td>{% include docs/color/inherit.html %}</td>
<td class="has-text-inherit">Hello Bulma</td>
</tr>
</tbody>
</table>
{% assign vernum = site.data.meta.version | downcase | remove: '.' | plus: 0 %}
{% include docs/elements/anchor.html name="Background color" %}
@@ -238,52 +265,52 @@ breadcrumb:
<tr>
<td><code>has-background-white</code></td>
<td>{% include docs/color/white.html %}</td>
<td class="has-background-white" style="width: 3rem;"></td>
<td class="has-background-white" style="width: 3rem"></td>
</tr>
<tr>
<td><code>has-background-black</code></td>
<td>{% include docs/color/black.html %}</td>
<td class="has-background-black" style="width: 3rem;"></td>
<td class="has-background-black" style="width: 3rem"></td>
</tr>
<tr>
<td><code>has-background-light</code></td>
<td>{% include docs/color/white-ter.html %}</td>
<td class="has-background-light" style="width: 3rem;"></td>
<td class="has-background-light" style="width: 3rem"></td>
</tr>
<tr>
<td><code>has-background-dark</code></td>
<td>{% include docs/color/grey-darker.html %}</td>
<td class="has-background-dark" style="width: 3rem;"></td>
<td class="has-background-dark" style="width: 3rem"></td>
</tr>
<tr>
<td><code>has-background-primary</code></td>
<td>{% include docs/color/turquoise.html %}</td>
<td class="has-background-primary" style="width: 3rem;"></td>
<td class="has-background-primary" style="width: 3rem"></td>
</tr>
<tr>
<td><code>has-background-link</code></td>
<td>{% include docs/color/blue.html %}</td>
<td class="has-background-link" style="width: 3rem;"></td>
<td class="has-background-link" style="width: 3rem"></td>
</tr>
<tr>
<td><code>has-background-info</code></td>
<td>{% include docs/color/cyan.html %}</td>
<td class="has-background-info" style="width: 3rem;"></td>
<td class="has-background-info" style="width: 3rem"></td>
</tr>
<tr>
<td><code>has-background-success</code></td>
<td>{% include docs/color/green.html %}</td>
<td class="has-background-success" style="width: 3rem;"></td>
<td class="has-background-success" style="width: 3rem"></td>
</tr>
<tr>
<td><code>has-background-warning</code></td>
<td>{% include docs/color/yellow.html %}</td>
<td class="has-background-warning" style="width: 3rem;"></td>
<td class="has-background-warning" style="width: 3rem"></td>
</tr>
<tr>
<td><code>has-background-danger</code></td>
<td>{% include docs/color/red.html %}</td>
<td class="has-background-danger" style="width: 3rem;"></td>
<td class="has-background-danger" style="width: 3rem"></td>
</tr>
</tbody>
</table>
@@ -299,47 +326,47 @@ breadcrumb:
<tr>
<td><code>has-background-black-bis</code></td>
<td>{% include docs/color/black-bis.html %}</td>
<td class="has-background-black-bis" style="width: 3rem;"></td>
<td class="has-background-black-bis" style="width: 3rem"></td>
</tr>
<tr>
<td><code>has-background-black-ter</code></td>
<td>{% include docs/color/black-ter.html %}</td>
<td class="has-background-black-ter" style="width: 3rem;"></td>
<td class="has-background-black-ter" style="width: 3rem"></td>
</tr>
<tr>
<td><code>has-background-grey-darker</code></td>
<td>{% include docs/color/grey-darker.html %}</td>
<td class="has-background-grey-darker" style="width: 3rem;"></td>
<td class="has-background-grey-darker" style="width: 3rem"></td>
</tr>
<tr>
<td><code>has-background-grey-dark</code></td>
<td>{% include docs/color/grey-dark.html %}</td>
<td class="has-background-grey-dark" style="width: 3rem;"></td>
<td class="has-background-grey-dark" style="width: 3rem"></td>
</tr>
<tr>
<td><code>has-background-grey</code></td>
<td>{% include docs/color/grey.html %}</td>
<td class="has-background-grey" style="width: 3rem;"></td>
<td class="has-background-grey" style="width: 3rem"></td>
</tr>
<tr>
<td><code>has-background-grey-light</code></td>
<td>{% include docs/color/grey-light.html %}</td>
<td class="has-background-grey-light" style="width: 3rem;"></td>
<td class="has-background-grey-light" style="width: 3rem"></td>
</tr>
<tr>
<td><code>has-background-grey-lighter</code></td>
<td>{% include docs/color/grey-lighter.html %}</td>
<td class="has-background-grey-lighter" style="width: 3rem;"></td>
<td class="has-background-grey-lighter" style="width: 3rem"></td>
</tr>
<tr>
<td><code>has-background-white-ter</code></td>
<td>{% include docs/color/white-ter.html %}</td>
<td class="has-background-white-ter" style="width: 3rem;"></td>
<td class="has-background-white-ter" style="width: 3rem"></td>
</tr>
<tr>
<td><code>has-background-white-bis</code></td>
<td>{% include docs/color/white-bis.html %}</td>
<td class="has-background-white-bis" style="width: 3rem;"></td>
<td class="has-background-white-bis" style="width: 3rem"></td>
</tr>
</tbody>
</table>
@@ -421,3 +448,30 @@ breadcrumb:
</tr>
</tbody>
</table>
<p class="block">
You can also <strong>inherit</strong> the background color, or use the
<strong>current color</strong> as background one:
</p>
<table class="table is-bordered">
<thead>
<tr>
<th>Class</th>
<th>Value</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>has-background-current</code></td>
<td>{% include docs/color/current.html %}</td>
<td class="has-background-current">Hello Bulma</td>
</tr>
<tr>
<td><code>has-background-inherit</code></td>
<td>{% include docs/color/inherit.html %}</td>
<td class="has-background-inherit">Hello Bulma</td>
</tr>
</tbody>
</table>

157
docs/documentation/layout/container.html
View File

@@ -16,59 +16,60 @@ meta:
sizes: true
variables: true
---
{% capture container_example %}
<div class="container">
<div class="notification is-primary">
This container is <strong>centered</strong> on desktop and larger viewports.
</div>
</div>
{% endcapture %}
{% capture container_fluid_example %}
{% 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.
</div>
</div>
{% endcapture %}
{% capture container_widescreen_example %}
{% 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.
</div>
</div>
{% endcapture %}
{% capture container_fullhd_example %}
{% 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.
</div>
</div>
{% endcapture %}
{% capture container_max_desktop_example %}
{% endcapture %} {% capture container_max_tablet_example %}
<div class="container is-max-tablet">
<div class="notification is-primary">
This container has a <code>max-width</code> of
<code>$tablet - $container-offset</code>.
</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.
</div>
</div>
{% endcapture %}
{% capture container_max_widescreen_example %}
{% 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.
</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 %}
{% 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>
@@ -96,8 +97,10 @@ meta:
<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>
@@ -137,7 +140,9 @@ meta:
</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 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>
@@ -147,7 +152,9 @@ meta:
</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 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>
@@ -178,97 +185,114 @@ meta:
<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
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>
<li>on <code>$desktop</code> it will have a maximum width of <strong>960px</strong>.</li>
<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>
<li>
on <code>$desktop</code> it will have a maximum width of
<strong>960px</strong>.
</li>
<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>.
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 %}
{% highlight html -%} {{- container_example -}} {%- endhighlight %}
<!-- -->
{% include docs/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.
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 %}
{% 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_fullhd_example -}} {%- endhighlight %}
<!-- -->
{%
include docs/elements/anchor.html name="Desktop and Widescreen maximum
widths"
%}
{% include docs/elements/anchor.html name="Tablet, 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:
Sometimes, you might want a <strong>narrow</strong> container on larger
viewports. That's why Bulma provides 3 modifier classes:
</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-tablet</code> will behave like a tablet 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_tablet_example }}</div>
{% highlight html -%} {{- container_max_tablet_example -}} {%- endhighlight %}
<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 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>,
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>
@@ -278,17 +302,14 @@ meta:
<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
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>
{% highlight html -%}
{{- container_fluid_example -}}
{%- endhighlight %}
{%
include docs/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 %}