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

docs/documentation/layout/container.html

@@ -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 %}