Explain functions

diff --git a/docs/_includes/blog-hero.html b/docs/_includes/blog-hero.html
index b1a5e4994b2a978ce62d22a0fc4b7ad7d0192aaa..0dc4fd6ef815f7ba7ee2ef9f3b5513a4de906a4f 100644 (file)
--- a/docs/_includes/blog-hero.html
+++ b/docs/_includes/blog-hero.html
@@ -1,10 +1,8 @@
-<section class="hero is-primary">
-  <div class="hero-head">
-    <div class="container">
-      {% include header.html %}
-    </div>
-  </div>
+<div class="container">
+  {% include header.html %}
+</div>
 
+<section class="hero is-primary">
   <div class="hero-body">
     <div class="container">
       <div class="columns is-vcentered">

diff --git a/docs/_includes/subnav-overview.html b/docs/_includes/subnav-overview.html
index 376707ce9a246d8ebd659ced9b0ffdab4b7afd38..92b30702babd6bd65bc02f4e88d8c243e107aaae 100644 (file)
--- a/docs/_includes/subnav-overview.html
+++ b/docs/_includes/subnav-overview.html
@@ -4,17 +4,20 @@
       <a class="nav-item is-tab {% if page.doc-subtab == 'start' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/start/">
         Start
       </a>
+      <a class="nav-item is-tab {% if page.doc-subtab == 'classes' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/classes/">
+        Classes
+      </a>
+      <a class="nav-item is-tab {% if page.doc-subtab == 'modular' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/modular/">
+        Modular
+      </a>
       <a class="nav-item is-tab {% if page.doc-subtab == 'variables' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/variables/">
         Variables
       </a>
       <a class="nav-item is-tab {% if page.doc-subtab == 'responsiveness' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/responsiveness/">
         Responsiveness
       </a>
-      <a class="nav-item is-tab {% if page.doc-subtab == 'modular' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/modular/">
-        Modular
-      </a>
-      <a class="nav-item is-tab {% if page.doc-subtab == 'classes' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/classes/">
-        Classes
+      <a class="nav-item is-tab {% if page.doc-subtab == 'functions' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/functions/">
+        Functions
       </a>
     </div>
   </div>

diff --git a/docs/documentation/overview/functions.html b/docs/documentation/overview/functions.html
new file mode 100644 (file)
index 0000000..107b799
--- /dev/null
+++ b/docs/documentation/overview/functions.html
@@ -0,0 +1,27 @@
+---
+layout: documentation
+doc-tab: overview
+doc-subtab: functions
+---
+
+{% include subnav-overview.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Functions</h1>
+    <h2 class="subtitle">Utility functions to calculate colors and other values</h2>
+
+    <hr>
+
+    <div class="content">
+      <p>Bulma uses 5 custom functions to help define the values and colors dynamically:</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>
+        <li><code>findColorInvert($color)</code>: returns either 70% transparent black or 100% opaque white depending on the luminance of the color.</li>
+        <li><code>removeUnit($number)</code>: removes the unit of a Sass number. So "10px" becomes "10" and "3.5rem" returns "3.5". Used for string concatenation.</li>
+        <li><code>roundToEvenNumber($number)</code>: rounds a number to the closest but lower even one. So 23 becomes 22, and 7.5 returns 6.</li>
+      </ul>
+    </div>
+  </div>
+</section>

diff --git a/docs/documentation/overview/responsiveness.html b/docs/documentation/overview/responsiveness.html
index 4bad19e5ccd827b393e5552ded681673fb97e157..ffa57fc58986638c3cf4ba42be80f8fec4facd5e 100644 (file)
--- a/docs/documentation/overview/responsiveness.html
+++ b/docs/documentation/overview/responsiveness.html
@@ -19,8 +19,8 @@ doc-subtab: responsiveness
       <ul>
         <li><code>mobile</code>: up to <code>768px</code></li>
         <li><code>tablet</code>: from <code>769px</code></li>
-        <li><code>desktop</code>: from <code>980px</code></li>
-        <li><code>widescreen</code>: from <code>1180px</code></li>
+        <li><code>desktop</code>: from <code>1000px</code></li>
+        <li><code>widescreen</code>: from <code>1192px</code></li>
       </ul>
       <p>Bulma uses 7 responsive mixins:</p>
       <ul>
@@ -34,23 +34,23 @@ doc-subtab: responsiveness
         </li>
         <li>
           <code>=tablet-only</code><br>
-          from <code>769px</code> and until <code>979px</code>
+          from <code>769px</code> and until <code>999px</code>
         </li>
         <li>
           <code>=touch</code><br>
-          until <code>979px</code>
+          until <code>999px</code>
         </li>
         <li>
           <code>=desktop</code><br>
-          from <code>980px</code>
+          from <code>1000px</code>
         </li>
         <li>
           <code>=desktop-only</code><br>
-          from <code>980px</code> and until <code>1179px</code>
+          from <code>1000px</code> and until <code>1191px</code>
         </li>
         <li>
           <code>=widescreen</code><br>
-          from <code>1180px</code>
+          from <code>1192px</code>
         </li>
       </ul>
       <p>How Bulma works is that <strong>everything is mobile-first</strong> by default, and responsive mixins act as <em>minimum viewport widths</em> where some alternative styles are applied.</p>
@@ -65,15 +65,15 @@ doc-subtab: responsiveness
           </th>
           <th>
             Tablet<br>
-            Between <code>769px</code> and <code>979px</code>
+            Between <code>769px</code> and <code>999px</code>
           </th>
           <th>
             Desktop<br>
-            Between <code>980px</code> and <code>1179px</code>
+            Between <code>1000px</code> and <code>1191px</code>
           </th>
           <th>
             Widescreen<br>
-            <code>1180px</code> and above
+            <code>1192px</code> and above
           </th>
         </tr>
       </thead>

diff --git a/docs/documentation/overview/variables.html b/docs/documentation/overview/variables.html
index a901d7bec2e442cf98395add068f01f236e8564c..8992dcd22b5abf11a678293433b374b807d240a4 100644 (file)
--- a/docs/documentation/overview/variables.html
+++ b/docs/documentation/overview/variables.html
@@ -20,9 +20,9 @@ doc-subtab: variables
           <strong>Initial variables</strong>: where you define variables by <strong>direct value</strong>, like:
           <ul>
             <li><strong>colors</strong>: <code>$blue: #42afe3</code></li>
-            <li><strong>font families</strong>: <code>$family-sans-serif: "Helvetica Neue", "Helvetica", "Arial", sans-serif</code></li>
-            <li><strong>font sizes</strong>: <code>$size-1: 48px</code></li>
-            <li><strong>other values</strong>: <code>$nav-height: 50px</code> or <code>$easing: ease-out</code></li>
+            <li><strong>font families</strong>: <code>$family-monospace: "Inconsolata", "Consolas", "Monaco", monospace</code></li>
+            <li><strong>font sizes</strong>: <code>$size-1: 3.5rem</code></li>
+            <li><strong>other values</strong>: <code>$easing: ease-out</code> or <code>$radius-large: 5px</code></li>
           </ul>
         </li>
         <li>
@@ -40,7 +40,7 @@ doc-subtab: variables
         <li>
           <strong>Generated variables</strong> where variables are <strong>calculated</strong> from the values set in the previous file. For example, you can have:
           <ul>
-            <li><code>$body-background: $white</code>: the page's main background</li>
+            <li><code>$background: $white-ter</code>: the main background color</li>
             <li><code>$link: $primary</code>: the links use the primary color</li>
             <li><code>$family-primary: $family-sans-serif</code>: the primary font family is the sans-serif one</li>
           </ul>
@@ -174,23 +174,23 @@ doc-subtab: variables
       </tr>
       <tr>
         <td><code>$size-1</code></td>
-        <td>48px</td>
+        <td>3.5rem</td>
       </tr>
       <tr>
         <td><code>$size-2</code></td>
-        <td>40px</td>
+        <td>2.75rem</td>
       </tr>
       <tr>
         <td><code>$size-3</code></td>
-        <td>28px</td>
+        <td>2rem</td>
       </tr>
       <tr>
         <td><code>$size-4</code></td>
-        <td>24px</td>
+        <td>1.5rem</td>
       </tr>
       <tr>
         <td><code>$size-5</code></td>
-        <td>18px</td>
+        <td>1.25rem</td>
       </tr>
       <tr>
         <td><code>$size-6</code></td>
@@ -198,23 +198,23 @@ doc-subtab: variables
       </tr>
       <tr>
         <td><code>$size-7</code></td>
-        <td>11px</td>
+        <td>0.75rem</td>
       </tr>
       <tr>
-        <td><code>$weight-normal</code></td>
-        <td>400</td>
+        <td><code>$weight-light</code></td>
+        <td>300</td>
       </tr>
       <tr>
-        <td><code>$weight-bold</code></td>
-        <td>700</td>
+        <td><code>$weight-normal</code></td>
+        <td>400</td>
       </tr>
       <tr>
-        <td><code>$weight-title-normal</code></td>
-        <td>300</td>
+        <td><code>$weight-semibold</code></td>
+        <td>500</td>
       </tr>
       <tr>
-        <td><code>$weight-title-bold</code></td>
-        <td>500</td>
+        <td><code>$weight-bold</code></td>
+        <td>700</td>
       </tr>
 
       <tr><th colspan="2">Breakpoints</th></tr>
@@ -224,11 +224,11 @@ doc-subtab: variables
       </tr>
       <tr>
         <td><code>$desktop</code></td>
-        <td>980px</td>
+        <td>1000px (960px + 40px container)</td>
       </tr>
       <tr>
         <td><code>$widescreen</code></td>
-        <td>1180px</td>
+        <td>1192px (1152px+ 40px container)</td>
       </tr>
 
       <tr><th colspan="2">Miscellaneous</th></tr>
@@ -268,15 +268,11 @@ doc-subtab: variables
       </tr>
       <tr>
         <td><code>$light</code></td>
-        <td>$grey-lighter</td>
+        <td>$white-ter</td>
       </tr>
       <tr>
         <td><code>$dark</code></td>
-        <td>$grey-dark</td>
-      </tr>
-      <tr>
-        <td><code>$text</code></td>
-        <td>$grey-dark</td>
+        <td>$grey-darker</td>
       </tr>
 
       <tr><th colspan="2">3. Generated variables</th></tr>
@@ -330,6 +326,10 @@ doc-subtab: variables
       </tr>
 
       <tr><th colspan="2">Text colors</th></tr>
+      <tr>
+        <td><code>$text</code></td>
+        <td>$grey-dark</td>
+      </tr>
       <tr>
         <td><code>$text-invert</code></td>
         <td>findColorInvert($text)</td>
@@ -378,59 +378,25 @@ doc-subtab: variables
         <td><code>$link-hover</code></td>
         <td>$grey-darker</td>
       </tr>
-      <tr>
-        <td><code>$link-hover-background</code></td>
-        <td>$grey-lighter</td>
-      </tr>
       <tr>
         <td><code>$link-hover-border</code></td>
         <td>$grey-darker</td>
       </tr>
       <tr>
-        <td><code>$link-active</code></td>
-        <td>$grey-darker</td>
-      </tr>
-      <tr>
-        <td><code>$link-active-border</code></td>
+        <td><code>$link-focus</code></td>
         <td>$grey-darker</td>
       </tr>
-
-      <tr><th colspan="2">Control colors</th></tr>
-      <tr>
-        <td><code>$control</code></td>
-        <td>$text-strong</td>
-      </tr>
-      <tr>
-        <td><code>$control-background</code></td>
-        <td>$text-invert</td>
-      </tr>
-      <tr>
-        <td><code>$control-border</code></td>
-        <td>$border</td>
-      </tr>
-      <tr>
-        <td><code>$control-hover</code></td>
-        <td>$link-hover</td>
-      </tr>
-      <tr>
-        <td><code>$control-hover-border</code></td>
-        <td>$border-hover</td>
-      </tr>
-      <tr>
-        <td><code>$control-active</code></td>
-        <td>$link</td>
-      </tr>
       <tr>
-        <td><code>$control-active-background</code></td>
-        <td>$link</td>
+        <td><code>$link-focus-border</code></td>
+        <td>$primary</td>
       </tr>
       <tr>
-        <td><code>$control-active-background-invert</code></td>
-        <td>$link-invert</td>
+        <td><code>$link-active</code></td>
+        <td>$grey-darker</td>
       </tr>
       <tr>
-        <td><code>$control-active-border</code></td>
-        <td>$link</td>
+        <td><code>$link-active-border</code></td>
+        <td>$grey-dark</td>
       </tr>
 
       <tr><th colspan="2">Typography</th></tr>
@@ -448,7 +414,7 @@ doc-subtab: variables
       </tr>
       <tr>
         <td><code>$size-normal</code></td>
-        <td>$size-6</td>
+        <td>1rem</td>
       </tr>
       <tr>
         <td><code>$size-medium</code></td>
@@ -456,7 +422,7 @@ doc-subtab: variables
       </tr>
       <tr>
         <td><code>$size-large</code></td>
-        <td>$size-3</td>
+        <td>$size-4</td>
       </tr>
 
       <tr><th colspan="2">4. Lists and maps</th></tr>

diff --git a/docs/images/blog/metro-ui-css-grid-tiles.png b/docs/images/blog/metro-ui-css-grid-tiles.png
index 1c3baf01e1d5aab2124fa72db079194e88bbbf72..764ff9ace07056117701da8ec454148b1e1aab35 100644 (file)
Binary files a/docs/images/blog/metro-ui-css-grid-tiles.png and b/docs/images/blog/metro-ui-css-grid-tiles.png differ

diff --git a/docs/index.html b/docs/index.html
index 6ccc1696b6bb39da616cda67f7831809a91deed8..b866c81af3af56af6f27d1ecfd022942aecc6a9d 100644 (file)
--- a/docs/index.html
+++ b/docs/index.html
@@ -486,7 +486,7 @@ route: index
     <h4 class="subtitle is-4">Buttons, form controls, menus, tabs, titles, notifications, etc.</h4>
 
     <div class="columns">
-      <div class="column is-one-quarter">
+      <div class="column is-one-third">
         <div class="card">
           <div class="card-image">
             <figure class="image is-4by3">