[refs #3] Add docs content for tools layer

_docs/tools/clearfix.md

@@ -10,4 +10,13 @@ filename: "_tools.clearfix.scss"
 
 {% include file-info.html %}
 
-Clearfix mixin
+A clearfix mixin to prevent collapsing of two (or more) floated elements.
+
+Further reading:   
+[http://www.cssmojo.com/the-very-latest-clearfix-reloaded/](http://www.cssmojo.com/the-very-latest-clearfix-reloaded/)
+
+## Mixins
+
+    .usage {
+      @include inuit-clearfix();
+    }

_docs/tools/font-size.md

@@ -10,4 +10,71 @@ filename: "_tools.font-size.scss"
 
 {% include file-info.html %}
 
-Font-size mixin
+Create a fully formed type style (sizing and vertical rhythm) by passing in a
+single value, e.g.:
+
+    .usage {
+      @include inuit-font-size(12px);
+    }
+
+This will generate a rem-based font-size, a `px` fallback for older browsers, as well as a unitless line-height
+which will place the element on your baseline, e.g.:
+
+    // CSS
+    .usage {
+      font-size: 12px;
+      font-size: 0.75rem;
+      line-height: 2;
+    }
+
+If you do not want to generate a line-height automatically, you
+simply pass in your own value as a second paramater:
+
+    .usage {
+      @include inuit-font-size(12px, 1.5);
+    }
+
+This will yield:
+
+    // CSS
+    .usage {
+      font-size: 12px;
+      font-size: 0.75rem;
+      line-height: 1.5;
+    }
+
+This parameter can be any integer, `inherit`, or `normal`. If you don't want
+a line-height at all, pass in a second paramater of `false` or `"none"`:
+
+    .usage {
+      @include inuit-font-size(12px, false);
+    }
+
+This will yield:
+
+    // CSS
+    .usage {
+      font-size: 12px;
+      font-size: 0.75rem;
+    }
+
+There may be situations where the generated declarations of the mixin need to carry an `!important` (e.g. when you are using the mixin in the utilities layer). In this case you can just pass `$important: true` as last parameter in the mixin call:
+
+    .usage {
+      @include inuit-font-size(12px, $important: true);
+    }
+
+    // CSS
+    .usage {
+      font-size: 12px !important;
+      font-size: 0.75rem !important;
+      line-height: 2 !important;
+    }
+
+
+
+## Mixins
+
+    .usage {
+      @include inuit-font-size(<px-value>, [line-height], [$important: true]);
+    }

_docs/tools/hidden.md

@@ -10,4 +10,10 @@ filename: "_tools.hidden.scss"
 
 {% include file-info.html %}
 
-Mixin to hide elements accessibility-friendly
+Mixin to quickly apply accessible hiding to elements.
+
+## Mixins
+
+    .usage {
+      @include inuit-hidden-visually();
+    }

_includes/nav-docs.html

@@ -38,7 +38,7 @@
   </li>
 
   <li class="c-nav-secondary__item">
-    <a href="/docs/tools" class="c-nav-secondary__link">Tools</a>
+    <a href="/docs/tools/clearfix/" class="c-nav-secondary__link">Tools</a>
 
     <ul class="c-nav-secondary  c-nav-secondary--sub">
       <li class="c-nav-secondary__item">
@@ -50,9 +50,6 @@
       <li class="c-nav-secondary__item">
         <a href="/docs/tools/hidden/" class="c-nav-secondary__link">Hidden</a>
       </li>
-      <li class="c-nav-secondary__item">
-        <a href="/docs/tools/rem/" class="c-nav-secondary__link">Rem</a>
-      </li>
     </ul>
 
   </li>