Documentation

script.sh

@@ -6,11 +6,14 @@ repos=(
   "src/modules/borders.js"
   "src/modules/box-sizing.js"
   "src/modules/clearfix.js"
+  "src/modules/debug.js"
   "src/modules/display.js"
   "src/modules/docs.js"
   "src/modules/floats.js"
   "src/modules/font-family.js"
+  "src/modules/font-style.js"
   "src/modules/font-weight.js"
+  "src/modules/forms.js"
   "src/modules/heights.js"
   "src/modules/hovers.js"
   "src/modules/images.js"

src/templates/docs/border-radius/index.html

@@ -69,7 +69,7 @@ <h1 class="f4 ttu tracked fw6">Previous</h1>
     </div>
     <div class="dib">
       <h1 class="f4 ttu tracked fw6">Next</h1>
-      <a href="/docs/debug/" class="link fw6 blue dim">Debugging</a>
+      <a href="/docs/elements/images/" class="link fw6 blue dim">Images</a>
     </div>
   </div>
   <div class="mt5">

src/templates/docs/borders/index.html

@@ -370,7 +370,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
         <kbd class="yellow">src/_borders.css</kbd>
 </header>
 <pre class="ph3 ph5-ns">
-<code class="small">
+<code class="code" style="font-size: .75rem;">
 /*
 
    BORDER BASE

src/templates/docs/box-sizing/index.html

@@ -66,7 +66,7 @@ <h3 class="f5 book pt4 caps">Border Box with no padding or border</h3>
   <div class="mt5 cf">
     <div class="dib mr4">
       <h1 class="f4 ttu tracked fw6">Previous</h1>
-      <a href="/docs/typography/white-space/" class="link fw6 blue dim">White Space</a>
+      <a href="/docs/debug/" class="link fw6 blue dim">Debugging</a>
     </div>
     <div class="dib">
       <h1 class="f4 ttu tracked fw6">Next</h1>

src/templates/docs/display/index.html

@@ -137,7 +137,7 @@ <h3 class="f5 book pt4 caps">Display None</h3>
   <div class="mt5 cf">
     <div class="dib mr4">
       <h1 class="f4 ttu tracked fw6">Previous</h1>
-      <a href="/docs/layout/floats/" class="link fw6 blue dim">Floats</a>
+      <a href="/docs/layout/clearfix/" class="link fw6 blue dim">Clearfix</a>
     </div>
     <div class="dib">
       <h1 class="f4 ttu tracked fw6">Next</h1>

src/templates/docs/font-family/index.html

@@ -74,7 +74,7 @@ <h1 class="f4 ttu tracked fw6">Previous</h1>
     </div>
     <div class="dib">
       <h1 class="f4 ttu tracked fw6">Next</h1>
-      <a href="/docs/typography/vertical-align/" class="link fw6 blue dim">Vertical Alignment</a>
+      <a href="/docs/typography/font-style/" class="link fw6 blue dim">Font Style</a>
     </div>
   </div>
   <div class="mt5">

src/templates/docs/font-style/index.html

@@ -58,11 +58,11 @@ <h2 class="f3 bold">Examples</h2>
   <div class="mt5 cf">
     <div class="dib mr4">
       <h1 class="f4 ttu tracked fw6">Previous</h1>
-      <a href="/docs/typography/tracking/" class="link fw6 blue dim">Tracking</a>
+      <a href="/docs/typography/font-family/" class="link fw6 blue dim">Font Family</a>
     </div>
     <div class="dib">
       <h1 class="f4 ttu tracked fw6">Next</h1>
-      <a href="/docs/typography/font-family/" class="link fw6 blue dim">Font Family</a>
+      <a href="/docs/typography/vertical-align/" class="link fw6 blue dim">Vertical Align</a>
     </div>
   </div>
   <div class="mt5">

src/templates/docs/forms/index.html

@@ -46,11 +46,11 @@ <h2 class="f3 bold">Examples</h2>
   <div class="mt5 cf">
     <div class="dib mr4">
       <h1 class="f4 ttu tracked fw6">Previous</h1>
-      <a href="/docs/layout/position/" class="link fw6 blue dim">Position</a>
+      <a href="/docs/elements/lists/" class="link fw6 blue dim">Lists</a>
     </div>
     <div class="dib">
       <h1 class="f4 ttu tracked fw6">Next</h1>
-      <a href="/docs/themes/background-size/" class="link fw6 blue dim">Background Size</a>
+      <a href="/docs/typography/scale/" class="link fw6 blue dim">Type Scale</a>
     </div>
   </div>
   <div class="mt5">

src/templates/docs/hovers/index.html

@@ -64,7 +64,7 @@ <h3 class="f5 book pt4 caps">Reveal Children on Hover</h3>
   <div class="mt5 cf">
     <div class="dib mr4">
       <h1 class="f4 ttu tracked fw6">Previous</h1>
-      <a href="/docs/layout/position/" class="link fw6 blue dim">Position</a>
+      <a href="/docs/themes/skins/" class="link fw6 blue dim">Skins</a>
     </div>
     <div class="dib">
       <h1 class="f4 ttu tracked fw6">Next</h1>

src/templates/docs/images/index.html

@@ -29,11 +29,11 @@ <h3 class="f5 book pt4 caps">Image</h3>
   <div class="mt5 cf">
     <div class="dib mr4">
       <h1 class="f4 ttu tracked fw6">Previous</h1>
-      <a href="/docs/debug/" class="link fw6 blue dim">Debug</a>
+      <a href="/docs/themes/border-radius/" class="link fw6 blue dim">Border Radius</a>
     </div>
     <div class="dib">
       <h1 class="f4 ttu tracked fw6">Next</h1>
-      <a href="/docs/typography/scale/" class="link fw6 blue dim">Type Scale</a>
+      <a href="/docs/elements/links/" class="link fw6 blue dim">Links</a>
     </div>
   </div>
   <div class="mt5">

src/templates/docs/line-height/index.html

@@ -78,7 +78,7 @@ <h3 class="f5 book ptxl ttu">Solid Leading (1)</h3>
   <div class="mt5 cf">
     <div class="dib mr4">
       <h1 class="f4 ttu tracked fw6">Previous</h1>
-      <a href="/docs/typography/measure/garamond/" class="link fw6 blue dim">Measure</a>
+      <a href="/docs/typography/measure/" class="link fw6 blue dim">Measure</a>
     </div>
     <div class="dib">
       <h1 class="f4 ttu tracked fw6">Next</h1>

src/templates/docs/links/index.html

@@ -54,11 +54,11 @@ <h2 class="f3 bold">Examples</h2>
   <div class="mt5 cf">
     <div class="dib mr4">
       <h1 class="f4 ttu tracked fw6">Previous</h1>
-      <a href="/docs/layout/position/" class="link fw6 blue dim">Position</a>
+      <a href="/docs/elements/images/" class="link fw6 blue dim">Images</a>
     </div>
     <div class="dib">
       <h1 class="f4 ttu tracked fw6">Next</h1>
-      <a href="/docs/themes/background-size/" class="link fw6 blue dim">Background Size</a>
+      <a href="/docs/elements/lists/" class="link fw6 blue dim">Lists</a>
     </div>
   </div>
   <div class="mt5">

src/templates/docs/measure/index.html

@@ -198,21 +198,21 @@ <h1>Truncation</h1>
   </p>
   <div class="mt5 cf sans-serif">
     <div class="dib mrl">
-      <h1 class="f4 ttu tracked semibold">Previous</h1>
-      <a href="/docs/typography/scale" class="link semibold blue dim">Type-scale</a>
+      <h1 class="f4 ttu tracked fw6">Previous</h1>
+      <a href="/docs/typography/scale" class="link fw6 blue dim">Type-scale</a>
     </div>
     <div class="dib">
-      <h1 class="f4 ttu tracked semibold">Next</h1>
-      <a href="/docs/typography/line-height/" class="link semibold blue dim">Line-height</a>
+      <h1 class="f4 ttu tracked fw6">Next</h1>
+      <a href="/docs/typography/line-height/" class="link fw6 blue dim">Line-height</a>
     </div>
   </div>
   <div class="mt5 pb4 sans-serif">
-    <h1 class="f4 ttu tracked semibold">Reference</h1>
-    <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/width" class="db link semibold blue dim">MDN - width</a>
-    <a href="http://webtypography.net/2.1.2" class="link semibold blue dim">Choose a Comfortable Measure</a>
+    <h1 class="f4 ttu tracked fw6">Reference</h1>
+    <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/width" class="db link fw6 blue dim">MDN - width</a>
+    <a href="http://webtypography.net/2.1.2" class="link fw6 blue dim">Choose a Comfortable Measure</a>
   </div>
       </div>
-      <section class="bg-dark-gray white pt4 pbxl">
+      <section class="bg-near-white black-70 pt4 pb5">
 <header class="ph3 ph5-ns pt4">
         <kbd class="yellow">src/_typography.css</kbd>
 </header>

src/templates/docs/position/index.html

@@ -100,7 +100,7 @@ <h1 class="f4 ttu tracked fw6">Previous</h1>
     </div>
     <div class="dib">
       <h1 class="f4 ttu tracked fw6">Next</h1>
-      <a href="/docs/themes/hovers" class="link fw6 blue dim">Hovers</a>
+      <a href="/docs/themes/skins/" class="link fw6 blue dim">Skins</a>
     </div>
   </div>
   <div class="mt5">
@@ -117,15 +117,15 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
         <kbd class="yellow">src/_position.css</kbd>
 </header>
 <pre class="ph3 ph5-ns">
-<code class="f6" style="font-size: .75rem;">
+<code class="code" style="font-size: .75rem;">
 <%= srcCSS %>
 </code>
 </pre>
 <header class="ph3 ph5-ns pt4">
         <kbd class="yellow">src/_coordinates.css</kbd>
 </header>
 <pre class="ph3 ph5-ns">
-<code class="f6" style="font-size: .75rem;">
+<code class="code" style="font-size: .75rem;">
 @custom-media --breakpoint-not-small screen and (min-width: 48em);
 @custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
 @custom-media --breakpoint-large screen and (min-width: 64em);

src/templates/docs/skins/index.html

@@ -72,11 +72,11 @@ <h2>Combinations</h2>
   <div class="mt5 cf">
     <div class="dib mr4">
       <h1 class="f4 ttu tracked fw6">Previous</h1>
-      <a href="/docs/themes/borders/" class="link fw6 blue dim">Borders</a>
+      <a href="/docs/layout/position/" class="link fw6 blue dim">Position</a>
     </div>
     <div class="dib">
       <h1 class="f4 ttu tracked fw6">Next</h1>
-      <a href="/docs/debug/" class="link fw6 blue dim">Debugging</a>
+      <a href="/docs/themes/hovers/" class="link fw6 blue dim">Hovers</a>
     </div>
   </div>
   <div class="mt5">

src/templates/docs/spacing/index.html

@@ -195,7 +195,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
         <kbd class="yellow">src/_spacing.css</kbd>
 </header>
 <pre class="ph3 ph5-ns">
-<code class="small">
+<code class="code" style="font-size: .75rem;">
 <%= srcCSS  %>
 </code>
 </pre>

src/templates/docs/text-transform/index.html

@@ -52,20 +52,35 @@ <h3 class="fw4 ttn mbn">TEXT Transform none</h3>
 <code class="code">.ttn</code>
   <h3 class="fw4 ttu tracked mbn">Uppercase with tracking</h3>
 <code class="code">.ttu tracked</code>
+<div class="mt5 cf">
+  <div class="dib mr4">
+    <h1 class="f4 ttu tracked fw6">Previous</h1>
+    <a href="/docs/typography/text-align/" class="link fw6 blue dim">Text Align</a>
+  </div>
+  <div class="dib">
+    <h1 class="f4 ttu tracked fw6">Next</h1>
+    <a href="/docs/typography/text-decoration/" class="link fw6 blue dim">Text Decoration</a>
+  </div>
+  <div class="mt5">
+    <h1 class="f4 ttu tracked fw6">Reference</h1>
+    <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform" class="link fw6 blue dim">MDN - Text Transform</a>
+  </div>
 </div>
+</div>
+
       <section class="bg-near-white black-70 pt4 pb5">
 <header class="ph3 ph5-ns pt4">
         <kbd class="yellow">src/_text-transform.css</kbd>
 </header>
 <pre class="ph3 ph5-ns">
-<code class="code" style="font-size: 12px;">
+<code class="code" style="font-size: .75rem;">
 <%= srcCSS  %>
 </code>
 </pre>
-      </section>
-      <%= navDocs %>
-    </main>
-    <%= siteFooter %>
-    <%= googleAnalytics  %>
+</section>
+<%= navDocs %>
+</main>
+<%= siteFooter %>
+<%= googleAnalytics  %>
   </body>
 </html>

src/templates/docs/tracking/index.html

@@ -75,7 +75,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
         <kbd class="yellow">src/_letter-spacing.css</kbd>
 </header>
 <pre class="ph3 ph5-ns">
-<code class="code" style="font-size: 12px;">
+<code class="code" style="font-size: .75rem;">
 <%= srcCSS  %>
 </code>
 </pre>

src/templates/docs/type-scale/index.html

@@ -143,11 +143,11 @@ <h2 class="f3 b mb5 mt5 mt6-ns">Examples</h2>
   <div class="mt5 cf">
     <div class="dib mr4">
       <h1 class="f4 ttu tracked fw6">Previous</h1>
-      <a href="/docs/general/images/" class="link fw6 blue dim">Images</a>
+      <a href="/docs/elements/forms/" class="link fw6 blue dim">Forms</a>
     </div>
     <div class="dib">
       <h1 class="f4 ttu tracked fw6">Next</h1>
-      <a href="/docs/typography/measure/garamond/" class="link fw6 blue dim">Measure</a>
+      <a href="/docs/typography/measure/" class="link fw6 blue dim">Measure</a>
     </div>
   </div>
   <div class="mt5">

src/templates/docs/vertical-align/index.html

@@ -95,7 +95,7 @@ <h3 class="f5 book sans-serif pt4 caps">Table Alignment</h3>
   <div class="mt5 cf">
     <div class="dib mr4">
       <h1 class="f4 ttu tracked fw6">Previous</h1>
-      <a href="/docs/typography/font-family/" class="link fw6 blue dim">Font Family</a>
+      <a href="/docs/typography/font-style/" class="link fw6 blue dim">Font Style</a>
     </div>
     <div class="dib">
       <h1 class="f4 ttu tracked fw6">Next</h1>
@@ -112,7 +112,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
               <kbd class="yellow">src/_vertical-align.css</kbd>
       </header>
 <pre class="ph3 ph5-ns">
-<code class="code" style="font-size: .7rem;">
+<code class="code" style="font-size: .75rem;">
 <%= srcCSS  %>
 </code>
 </pre>

src/templates/docs/white-space/index.html

@@ -106,7 +106,7 @@ <h1 class="f4 ttu tracked fw6">Previous</h1>
     </div>
     <div class="dib mr4">
       <h1 class="f4 ttu tracked fw6">Next</h1>
-      <a href="/docs/layout/box-sizing/" class="link fw6 blue dim">Box Sizing</a>
+      <a href="/docs/debug/" class="link fw6 blue dim">Debugging</a>
     </div>
   </div>
   <div class="mt5">