Add typography helpers

docs/_includes/color/black-bis.html

@@ -0,0 +1,2 @@
+<span class="color" style="background: hsl(0, 0%, 7%);"></span>
+hsl(0, 0%, 7%)

docs/_includes/color/black-ter.html

@@ -0,0 +1,2 @@
+<span class="color" style="background: hsl(0, 0%, 14%);"></span>
+hsl(0, 0%, 14%)

docs/_includes/color/black.html

@@ -0,0 +1,2 @@
+<span class="color" style="background: hsl(0, 0%, 4%);"></span>
+hsl(0, 0%, 4%)

docs/_includes/color/blue.html

@@ -0,0 +1,2 @@
+<span class="color" style="background: hsl(217, 71%,  53%);"></span>
+hsl(217, 71%,  53%)

docs/_includes/color/green.html

@@ -0,0 +1,2 @@
+<span class="color" style="background: hsl(141, 71%,  48%);"></span>
+hsl(141, 71%,  48%)

docs/_includes/color/grey-dark.html

@@ -0,0 +1,2 @@
+<span class="color" style="background: hsl(0, 0%, 29%);"></span>
+hsl(0, 0%, 29%)

docs/_includes/color/grey-darker.html

@@ -0,0 +1,2 @@
+<span class="color" style="background:  hsl(0, 0%, 21%);"></span>
+ hsl(0, 0%, 21%)

docs/_includes/color/grey-light.html

@@ -0,0 +1,2 @@
+<span class="color" style="background: hsl(0, 0%, 71%);"></span>
+hsl(0, 0%, 71%)

docs/_includes/color/grey-lighter.html

@@ -0,0 +1,2 @@
+<span class="color" style="background: hsl(0, 0%, 86%);"></span>
+hsl(0, 0%, 86%)

docs/_includes/color/grey.html

@@ -0,0 +1,2 @@
+<span class="color" style="background: hsl(0, 0%, 48%);"></span>
+hsl(0, 0%, 48%)

docs/_includes/color/orange.html

@@ -0,0 +1,2 @@
+<span class="color" style="background: hsl(14,  100%, 53%);"></span>
+hsl(14,  100%, 53%)

docs/_includes/color/purple.html

@@ -0,0 +1,2 @@
+<span class="color" style="background: hsl(271, 100%, 71%);"></span>
+hsl(271, 100%, 71%)

docs/_includes/color/red.html

@@ -0,0 +1,2 @@
+<span class="color" style="background: hsl(348, 100%, 61%);"></span>
+hsl(348, 100%, 61%)

docs/_includes/color/turquoise.html

@@ -0,0 +1,2 @@
+<span class="color" style="background: hsl(171, 100%, 41%);"></span>
+hsl(171, 100%, 41%)

docs/_includes/color/white-bis.html

@@ -0,0 +1,2 @@
+<span class="color" style="background: hsl(0, 0%, 98%);"></span>
+hsl(0, 0%, 98%)

docs/_includes/color/white-ter.html

@@ -0,0 +1,2 @@
+<span class="color" style="background: hsl(0, 0%, 96%);"></span>
+hsl(0, 0%, 96%)

docs/_includes/color/white.html

@@ -0,0 +1,2 @@
+<span class="color" style="background: hsl(0, 0%, 100%);"></span>
+hsl(0, 0%, 100%)

docs/_includes/color/yellow.html

@@ -0,0 +1,2 @@
+<span class="color" style="background: hsl(48,  100%, 67%);"></span>
+hsl(48,  100%, 67%)

docs/_includes/subnav-modifiers.html

@@ -10,6 +10,12 @@
       <a class="navbar-item is-tab {% if page.doc-subtab == 'responsive-helpers' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/responsive-helpers/">
         Responsive helpers
       </a>
+      <a class="navbar-item is-tab {% if page.doc-subtab == 'typography-helpers' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/typography-helpers/">
+        Typography helpers
+        <span class="tag is-success" style="margin-left: 1em;">
+          New!
+        </span>
+      </a>
     </div>
   </div>
 </nav>

docs/documentation/modifiers/responsive-helpers.html

@@ -4,6 +4,60 @@ doc-tab: modifiers
 doc-subtab: responsive-helpers
 ---
 
+{% capture thead %}
+<thead>
+  <tr>
+    <th>
+      Class
+    </th>
+    <th>
+      Mobile<br>
+      Up to <code>768px</code>
+    </th>
+    <th>
+      Tablet<br>
+      Between <code>769px</code> and <code>1007px</code>
+    </th>
+    <th>
+      Desktop<br>
+      Between <code>1008px</code> and <code>1199px</code>
+    </th>
+    <th>
+      Widescreen<br>
+      Between <code>1200px</code> and <code>1391px</code>
+    </th>
+    <th>
+      FullHD<br>
+      Above <code>1392px</code>
+    </th>
+  </tr>
+</thead>
+{% endcapture %}
+
+{% capture flex %}
+<td class="is-narrow">
+  <p class="notification is-success">flex</p>
+</td>
+{% endcapture %}
+
+{% capture visible %}
+<td class="is-narrow">
+  <p class="notification is-success">visible</p>
+</td>
+{% endcapture %}
+
+{% capture hidden %}
+<td class="is-narrow">
+  <p class="notification">hidden</p>
+</td>
+{% endcapture %}
+
+{% capture unchanged %}
+<td class="is-narrow">
+  <p class="notification">unchanged</p>
+</td>
+{% endcapture %}
+
 {% include subnav-modifiers.html %}
 
 <section class="section">
@@ -30,100 +84,50 @@ doc-subtab: responsive-helpers
     </div>
 
     <table class="table is-bordered">
-      <thead>
-        <tr>
-          <th>
-            Class
-          </th>
-          <th>
-            Mobile<br>
-            Up to <code>768px</code>
-          </th>
-          <th>
-            Tablet<br>
-            Between <code>769px</code> and <code>979px</code>
-          </th>
-          <th>
-            Desktop<br>
-            Between <code>980px</code> and <code>1179px</code>
-          </th>
-          <th>
-            Widescreen<br>
-            Above <code>1180px</code>
-          </th>
-        </tr>
-      </thead>
+      {{ thead }}
       <tbody>
         <tr>
           <td class="is-narrow">
             <code>is-flex-mobile</code>
           </td>
-          <td class="is-narrow">
-            <p class="notification is-success">flex</p>
-          </td>
-          <td class="is-narrow">
-            <p class="notification">unchanged</p>
-          </td>
-          <td class="is-narrow">
-            <p class="notification">unchanged</p>
-          </td>
-          <td class="is-narrow">
-            <p class="notification">unchanged</p>
-          </td>
+          {{ flex }}
+          {{ unchanged }}
+          {{ unchanged }}
+          {{ unchanged }}
+          {{ unchanged }}
         </tr>
         <tr>
           <td class="is-narrow">
             <code>is-flex-tablet-only</code>
           </td>
-          <td class="is-narrow">
-            <p class="notification">unchanged</p>
-          </td>
-          <td class="is-narrow">
-            <p class="notification is-success">flex</p>
-          </td>
-          <td class="is-narrow">
-            <p class="notification">unchanged</p>
-          </td>
-          <td class="is-narrow">
-            <p class="notification">unchanged</p>
-          </td>
+          {{ unchanged }}
+          {{ flex }}
+          {{ unchanged }}
+          {{ unchanged }}
+          {{ unchanged }}
         </tr>
         <tr>
           <td class="is-narrow">
             <code>is-flex-desktop-only</code>
           </td>
-          <td class="is-narrow">
-            <p class="notification">unchanged</p>
-          </td>
-          <td class="is-narrow">
-            <p class="notification">unchanged</p>
-          </td>
-          <td class="is-narrow">
-            <p class="notification is-success">flex</p>
-          </td>
-          <td class="is-narrow">
-            <p class="notification">unchanged</p>
-          </td>
+          {{ unchanged }}
+          {{ unchanged }}
+          {{ flex }}
+          {{ unchanged }}
+          {{ unchanged }}
         </tr>
         <tr>
           <td class="is-narrow">
-            <code>is-flex-widescreen</code>
-          </td>
-          <td class="is-narrow">
-            <p class="notification">unchanged</p>
-          </td>
-          <td class="is-narrow">
-            <p class="notification">unchanged</p>
-          </td>
-          <td class="is-narrow">
-            <p class="notification">unchanged</p>
-          </td>
-          <td class="is-narrow">
-            <p class="notification is-success">flex</p>
+            <code>is-flex-widescreen-only</code>
           </td>
+          {{ unchanged }}
+          {{ unchanged }}
+          {{ unchanged }}
+          {{ flex }}
+          {{ unchanged }}
         </tr>
         <tr>
-          <th colspan="4">
+          <th colspan="5">
             <p>Classes to display <strong>up to</strong> or <strong>from</strong> a specific breakpoint</p>
           </th>
         </tr>
@@ -131,52 +135,51 @@ doc-subtab: responsive-helpers
           <td class="is-narrow">
             <code>is-flex-touch</code>
           </td>
-          <td class="is-narrow">
-            <p class="notification is-success">flex</p>
-          </td>
-          <td class="is-narrow">
-            <p class="notification is-success">flex</p>
-          </td>
-          <td class="is-narrow">
-            <p class="notification">unchanged</p>
-          </td>
-          <td class="is-narrow">
-            <p class="notification">unchanged</p>
-          </td>
+          {{ flex }}
+          {{ flex }}
+          {{ unchanged }}
+          {{ unchanged }}
+          {{ unchanged }}
         </tr>
         <tr>
           <td class="is-narrow">
             <code>is-flex-tablet</code>
           </td>
-          <td class="is-narrow">
-            <p class="notification">unchanged</p>
-          </td>
-          <td class="is-narrow">
-            <p class="notification is-success">flex</p>
-          </td>
-          <td class="is-narrow">
-            <p class="notification is-success">flex</p>
-          </td>
-          <td class="is-narrow">
-            <p class="notification is-success">flex</p>
-          </td>
+          {{ unchanged }}
+          {{ flex }}
+          {{ flex }}
+          {{ flex }}
+          {{ flex }}
         </tr>
         <tr>
           <td class="is-narrow">
             <code>is-flex-desktop</code>
           </td>
+          {{ unchanged }}
+          {{ unchanged }}
+          {{ flex }}
+          {{ flex }}
+          {{ flex }}
+        </tr>
+        <tr>
           <td class="is-narrow">
-            <p class="notification">unchanged</p>
-          </td>
-          <td class="is-narrow">
-            <p class="notification">unchanged</p>
-          </td>
-          <td class="is-narrow">
-            <p class="notification is-success">flex</p>
+            <code>is-flex-widescreen</code>
           </td>
+          {{ unchanged }}
+          {{ unchanged }}
+          {{ unchanged }}
+          {{ flex }}
+          {{ flex }}
+        </tr>
+        <tr>
           <td class="is-narrow">
-            <p class="notification is-success">flex</p>
+            <code>is-flex-fullhd</code>
           </td>
+          {{ unchanged }}
+          {{ unchanged }}
+          {{ unchanged }}
+          {{ unchanged }}
+          {{ flex }}
         </tr>
       </tbody>
     </table>
@@ -189,100 +192,50 @@ doc-subtab: responsive-helpers
     <h3 class="title">Hide</h3>
 
     <table class="table is-bordered">
-      <thead>
-        <tr>
-          <th>
-            Class
-          </th>
-          <th>
-            Mobile<br>
-            Up to <code>768px</code>
-          </th>
-          <th>
-            Tablet<br>
-            Between <code>769px</code> and <code>999px</code>
-          </th>
-          <th>
-            Desktop<br>
-            Between <code>1000px</code> and <code>1239px</code>
-          </th>
-          <th>
-            Widescreen<br>
-            Above <code>1240px</code>
-          </th>
-        </tr>
-      </thead>
+      {{ thead }}
       <tbody>
         <tr>
           <td class="is-narrow">
             <code>is-hidden-mobile</code>
           </td>
-          <td class="is-narrow">
-            <p class="notification">hidden</p>
-          </td>
-          <td class="is-narrow">
-            <p class="notification is-success">visible</p>
-          </td>
-          <td class="is-narrow">
-            <p class="notification is-success">visible</p>
-          </td>
-          <td class="is-narrow">
-            <p class="notification is-success">visible</p>
-          </td>
+          {{ hidden }}
+          {{ visible }}
+          {{ visible }}
+          {{ visible }}
+          {{ visible }}
         </tr>
         <tr>
           <td class="is-narrow">
             <code>is-hidden-tablet-only</code>
           </td>
-          <td class="is-narrow">
-            <p class="notification is-success">visible</p>
-          </td>
-          <td class="is-narrow">
-            <p class="notification">hidden</p>
-          </td>
-          <td class="is-narrow">
-            <p class="notification is-success">visible</p>
-          </td>
-          <td class="is-narrow">
-            <p class="notification is-success">visible</p>
-          </td>
+          {{ visible }}
+          {{ hidden }}
+          {{ visible }}
+          {{ visible }}
+          {{ visible }}
         </tr>
         <tr>
           <td class="is-narrow">
             <code>is-hidden-desktop-only</code>
           </td>
-          <td class="is-narrow">
-            <p class="notification is-success">visible</p>
-          </td>
-          <td class="is-narrow">
-            <p class="notification is-success">visible</p>
-          </td>
-          <td class="is-narrow">
-            <p class="notification">hidden</p>
-          </td>
-          <td class="is-narrow">
-            <p class="notification is-success">visible</p>
-          </td>
+          {{ visible }}
+          {{ visible }}
+          {{ hidden }}
+          {{ visible }}
+          {{ visible }}
         </tr>
         <tr>
           <td class="is-narrow">
-            <code>is-hidden-widescreen</code>
-          </td>
-          <td class="is-narrow">
-            <p class="notification is-success">visible</p>
-          </td>
-          <td class="is-narrow">
-            <p class="notification is-success">visible</p>
-          </td>
-          <td class="is-narrow">
-            <p class="notification is-success">visible</p>
-          </td>
-          <td class="is-narrow">
-            <p class="notification">hidden</p>
+            <code>is-hidden-widescreen-only</code>
           </td>
+          {{ visible }}
+          {{ visible }}
+          {{ visible }}
+          {{ hidden }}
+          {{ visible }}
         </tr>
         <tr>
-          <th colspan="4">
+          <th colspan="5">
             <p>Classes to hide <strong>up to</strong> or <strong>from</strong> a specific breakpoint</p>
           </th>
         </tr>
@@ -290,52 +243,51 @@ doc-subtab: responsive-helpers
           <td class="is-narrow">
             <code>is-hidden-touch</code>
           </td>
-          <td class="is-narrow">
-            <p class="notification">hidden</p>
-          </td>
-          <td class="is-narrow">
-            <p class="notification">hidden</p>
-          </td>
-          <td class="is-narrow">
-            <p class="notification is-success">visible</p>
-          </td>
-          <td class="is-narrow">
-            <p class="notification is-success">visible</p>
-          </td>
+          {{ hidden }}
+          {{ hidden }}
+          {{ visible }}
+          {{ visible }}
+          {{ visible }}
         </tr>
         <tr>
           <td class="is-narrow">
             <code>is-hidden-tablet</code>
           </td>
-          <td class="is-narrow">
-            <p class="notification is-success">visible</p>
-          </td>
-          <td class="is-narrow">
-            <p class="notification">hidden</p>
-          </td>
-          <td class="is-narrow">
-            <p class="notification">hidden</p>
-          </td>
-          <td class="is-narrow">
-            <p class="notification">hidden</p>
-          </td>
+          {{ visible }}
+          {{ hidden }}
+          {{ hidden }}
+          {{ hidden }}
+          {{ hidden }}
         </tr>
         <tr>
           <td class="is-narrow">
             <code>is-hidden-desktop</code>
           </td>
+          {{ visible }}
+          {{ visible }}
+          {{ hidden }}
+          {{ hidden }}
+          {{ hidden }}
+        </tr>
+        <tr>
           <td class="is-narrow">
-            <p class="notification is-success">visible</p>
-          </td>
-          <td class="is-narrow">
-            <p class="notification is-success">visible</p>
-          </td>
-          <td class="is-narrow">
-            <p class="notification">hidden</p>
+            <code>is-hidden-widescreen</code>
           </td>
+          {{ visible }}
+          {{ visible }}
+          {{ visible }}
+          {{ hidden }}
+          {{ hidden }}
+        </tr>
+        <tr>
           <td class="is-narrow">
-            <p class="notification">hidden</p>
+            <code>is-hidden-fullhd</code>
           </td>
+          {{ visible }}
+          {{ visible }}
+          {{ visible }}
+          {{ visible }}
+          {{ hidden }}
         </tr>
       </tbody>
     </table>

docs/documentation/modifiers/typography-helpers.html

@@ -0,0 +1,269 @@
+---
+layout: documentation
+doc-tab: modifiers
+doc-subtab: typography-helpers
+---
+
+{% capture thead %}
+<thead>
+  <tr>
+    <th>
+      Class
+    </th>
+    <th>
+      Mobile<br>
+      Up to <code>768px</code>
+    </th>
+    <th>
+      Tablet<br>
+      Between <code>769px</code> and <code>1007px</code>
+    </th>
+    <th>
+      Desktop<br>
+      Between <code>1008px</code> and <code>1199px</code>
+    </th>
+    <th>
+      Widescreen<br>
+      Between <code>1200px</code> and <code>1391px</code>
+    </th>
+    <th>
+      FullHD<br>
+      Above <code>1392px</code>
+    </th>
+  </tr>
+</thead>
+{% endcapture %}
+
+{% capture size1 %}
+<td class="is-narrow">
+  <p class="notification is-success"><code>3rem</code></p>
+</td>
+{% endcapture %}
+
+{% capture unchanged %}
+<td class="is-narrow">
+  <p class="notification">unchanged</p>
+</td>
+{% endcapture %}
+
+{% include subnav-modifiers.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Typography helpers</h1>
+    <h2 class="subtitle">
+      Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width
+    </h2>
+
+    <hr>
+
+    <h3 class="title">Size</h3>
+
+    <div class="content">
+      <p>
+        There are <strong>7 sizes</strong> to choose from:
+      </p>
+    </div>
+
+    <table class="table is-bordered">
+      <thead>
+        <tr>
+          <th>
+            Class
+          </th>
+          <th>
+            Font-size
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td><code>is-size-1</code></td>
+          <td><code>3rem</code></td>
+        </tr>
+        <tr>
+          <td><code>is-size-2</code></td>
+          <td><code>2.5rem</code></td>
+        </tr>
+        <tr>
+          <td><code>is-size-3</code></td>
+          <td><code>2rem</code></td>
+        </tr>
+        <tr>
+          <td><code>is-size-4</code></td>
+          <td><code>1.5rem</code></td>
+        </tr>
+        <tr>
+          <td><code>is-size-5</code></td>
+          <td><code>1.25rem</code></td>
+        </tr>
+        <tr>
+          <td><code>is-size-6</code></td>
+          <td><code>1rem</code></td>
+        </tr>
+        <tr>
+          <td><code>is-size-7</code></td>
+          <td><code>0.75rem</code></td>
+        </tr>
+      </tbody>
+    </table>
+
+    <hr>
+
+    <h3 class="title">
+      Responsive size
+    </h3>
+
+    <div class="content">
+      <p>
+        You can choose a <strong>specific</strong> size for <em>each</em> viewport width. You simply needed 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>
+
+    <table class="table is-bordered">
+      {{ thead }}
+      <tbody>
+        <tr>
+          <td><code>is-size-1-mobile</code></td>
+          {{ size1 }}
+          {{ unchanged }}
+          {{ unchanged }}
+          {{ unchanged }}
+          {{ unchanged }}
+        </tr>
+        <tr>
+          <td><code>is-size-1-tablet</code></td>
+          {{ unchanged }}
+          {{ size1 }}
+          {{ unchanged }}
+          {{ unchanged }}
+          {{ unchanged }}
+        </tr>
+        <tr>
+          <td><code>is-size-1-touch</code></td>
+          {{ size1 }}
+          {{ size1 }}
+          {{ unchanged }}
+          {{ unchanged }}
+          {{ unchanged }}
+        </tr>
+        <tr>
+          <td><code>is-size-1-desktop</code></td>
+          {{ unchanged }}
+          {{ unchanged }}
+          {{ size1 }}
+          {{ size1 }}
+          {{ size1 }}
+        </tr>
+        <tr>
+          <td><code>is-size-1-widescreen</code></td>
+          {{ unchanged }}
+          {{ unchanged }}
+          {{ unchanged }}
+          {{ size1 }}
+          {{ size1 }}
+        </tr>
+        <tr>
+          <td><code>is-size-1-fullhd</code></td>
+          {{ unchanged }}
+          {{ unchanged }}
+          {{ unchanged }}
+          {{ unchanged }}
+          {{ size1 }}
+        </tr>
+      </tbody>
+    </table>
+
+    <div class="content">
+      <p>
+        You can use the same logic for each of the <strong>7 sizes</strong>.
+      </p>
+    </div>
+
+    <hr>
+
+    <h3 class="title">
+      Colors
+    </h3>
+
+    <div class="content">
+      <p>
+        You can set any element to one of the <strong>9 colors</strong> or <strong>9 shades of grey</strong>:
+      </p>
+    </div>
+
+    <table class="table is-bordered">
+      <thead>
+        <tr>
+          <th>
+            Class
+          </th>
+          <th>
+            Color
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr><td><code>.has-text-white</code></td><td>{% include color/white.html %}</td></tr>
+        <tr><td><code>.has-text-black</code></td><td>{% include color/black.html %}</td></tr>
+        <tr><td><code>.has-text-light</code></td><td>{% include color/white-ter.html %}</td></tr>
+        <tr><td><code>.has-text-dark</code></td><td>{% include color/grey-darker.html %}</td></tr>
+        <tr><td><code>.has-text-primary</code></td><td>{% include color/turquoise.html %}</td></tr>
+        <tr><td><code>.has-text-info</code></td><td>{% include color/blue.html %}</td></tr>
+        <tr><td><code>.has-text-success</code></td><td>{% include color/green.html %}</td></tr>
+        <tr><td><code>.has-text-warning</code></td><td>{% include color/yellow.html %}</td></tr>
+        <tr><td><code>.has-text-danger</code></td><td>{% include color/red.html %}</td></tr>
+        <tr><td><code>.has-text-black-bis</code></td><td>{% include color/black-bis.html %}</td></tr>
+        <tr><td><code>.has-text-black-ter</code></td><td>{% include color/black-ter.html %}</td></tr>
+        <tr><td><code>.has-text-grey-darker</code></td><td>{% include color/grey-darker.html %}</td></tr>
+        <tr><td><code>.has-text-grey-dark</code></td><td>{% include color/grey-dark.html %}</td></tr>
+        <tr><td><code>.has-text-grey</code></td><td>{% include color/grey.html %}</td></tr>
+        <tr><td><code>.has-text-grey-light</code></td><td>{% include color/grey-light.html %}</td></tr>
+        <tr><td><code>.has-text-grey-lighter</code></td><td>{% include color/grey-lighter.html %}</td></tr>
+        <tr><td><code>.has-text-white-ter</code></td><td>{% include color/white-ter.html %}</td></tr>
+        <tr><td><code>.has-text-white-bis</code></td><td>{% include color/white-bis.html %}</td></tr>
+      </tbody>
+    </table>
+
+    <hr>
+
+    <h3 class="title">Alignment</h3>
+
+    <div class="content">
+      <p>
+        You can align the text with the use of one of <strong>3 alignment helpers</strong>:
+      </p>
+    </div>
+
+    <table class="table is-bordered">
+      <thead>
+        <tr>
+          <th>
+            Class
+          </th>
+          <th>
+            Color
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+        <td><code>.has-text-centered</code></td>
+        <td>Makes the text <strong>centered</strong></td>
+        </tr>
+        <tr>
+        <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>
+        </tr>
+      </tbody>
+    </table>
+
+  </div>
+</section>

sass/base/helpers.sass

@@ -1,32 +1,3 @@
-// Display
-
-$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
-
-@each $display in $displays
-  .is-#{$display}
-    display: #{$display}
-  +mobile
-    .is-#{$display}-mobile
-      display: #{$display} !important
-  +tablet
-    .is-#{$display}-tablet
-      display: #{$display} !important
-  +tablet-only
-    .is-#{$display}-tablet-only
-      display: #{$display} !important
-  +touch
-    .is-#{$display}-touch
-      display: #{$display} !important
-  +desktop
-    .is-#{$display}-desktop
-      display: #{$display} !important
-  +desktop-only
-    .is-#{$display}-desktop-only
-      display: #{$display} !important
-  +widescreen
-    .is-#{$display}-widescreen
-      display: #{$display} !important
-
 // Float
 
 .is-clearfix
@@ -48,7 +19,7 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
 .is-overlay
   +overlay
 
-// Text
+// Typography
 
 @each $size in $sizes
   $i: index($sizes, $size)
@@ -97,6 +68,39 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
 
 // Visibility
 
+$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
+
+@each $display in $displays
+  .is-#{$display}
+    display: #{$display}
+  +mobile
+    .is-#{$display}-mobile
+      display: #{$display} !important
+  +tablet
+    .is-#{$display}-tablet
+      display: #{$display} !important
+  +tablet-only
+    .is-#{$display}-tablet-only
+      display: #{$display} !important
+  +touch
+    .is-#{$display}-touch
+      display: #{$display} !important
+  +desktop
+    .is-#{$display}-desktop
+      display: #{$display} !important
+  +desktop-only
+    .is-#{$display}-desktop-only
+      display: #{$display} !important
+  +widescreen
+    .is-#{$display}-widescreen
+      display: #{$display} !important
+  +widescreen-only
+    .is-#{$display}-widescreen-only
+      display: #{$display} !important
+  +fullhd
+    .is-#{$display}-fullhd
+      display: #{$display} !important
+
 .is-hidden
   display: none !important
 
@@ -128,6 +132,14 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
   .is-hidden-widescreen
     display: none !important
 
++widescreen-only
+  .is-hidden-widescreen-only
+    display: none !important
+
++fullhd
+  .is-hidden-fullhd
+    display: none !important
+
 // Other
 
 .is-marginless