Examples

Debug Children

- Note how in the below example there is white space rendered in between the - elements because they are set to inline-block -

This element is set to inline-block and width: 25%

- Note how in the below example the elements are flush with no - white-space rendered between the elements. -

- This is a floated element set to width: 25% -

- -

Debug All

- The largest difference here between the two methods is that every element on the page is - outlined in a different color. -

- Note how in the below example there is white space rendered in between the - elements because they are set to inline-block -

This element is set to inline-block and width: 25%

- Note how in the below example the elements are flush with no - white-space rendered between the elements. +

Examples

Debug Children

+ Note how in the below example there is white space rendered in between the + elements because they are set to inline-block +

This element is set to inline-block and width: 25%

+ Note how in the below example the elements are flush with no + white-space rendered between the elements. +

+ This is a floated element set to width: 25% +

+ +

Debug All

+ The largest difference here between the two methods is that every element on the page is + outlined in a different color.

+ +

+ Note how in the below example there is white space rendered in between the + elements because they are set to inline-block +

This element is set to inline-block and width: 25%

+ Note how in the below example the elements are flush with no + white-space rendered between the elements. +

+ This is a floated element set to width: 25% +

+ +

+ White Space +

+ Box Sizing +

Reference

+ MDN - Outline +

- This is a floated element set to width: 25% -

- -

- Images -

Reference

- MDN - Outline -

-- + + src/_debug.css + + + + body { outline: 1px solid #2980B9!important; } article { outline: 1px solid #3498DB!important; } nav { outline: 1px solid #0088C3!important; } @@ -433,76 +439,91 @@ Reference wbr { outline: 1px solid #DB175B!important; } - - + +

Have a question? Need help? Feel free to open an issue on GitHub or ask a question in our slack channel. We're here to try and help make designing in diff --git a/src/css/_clearfix.css b/src/css/_clearfix.css index 56c9669df..420fffa91 100644 --- a/src/css/_clearfix.css +++ b/src/css/_clearfix.css @@ -8,6 +8,6 @@ Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */ .cf:before, -.cf:after { content: " "; display: table; } -.cf:after { clear: both; } -.cf { *zoom: 1; } +.cf:after { content: " "; display: table; } +.cf:after { clear: both; } +.cf { *zoom: 1; } diff --git a/src/templates/docs/background-size/index.html b/src/templates/docs/background-size/index.html index 1650b4727..1efed6552 100644 --- a/src/templates/docs/background-size/index.html +++ b/src/templates/docs/background-size/index.html @@ -5,34 +5,32 @@ <%= name %> / Theming / Docs / TACHYONS - <%= head %> - <%= siteHeader %> -

<%= name %>

v<%= moduleVersion %> <%= moduleSize %>

Declarations: <%= moduleObj.declarations.total %>

Selectors: <%= moduleObj.selectors.total %>

Max. Specificity Score: <%= moduleObj.selectors.specificity.max %>

Size of Avg. Rule: <%= moduleObj.rules.size.average %>

Declarations: <%= moduleObj.declarations.total %>

Selectors: <%= moduleObj.selectors.total %>

Max. Specificity Score: <%= moduleObj.selectors.specificity.max %>

Size of Avg. Rule: <%= moduleObj.rules.size.average %>

Background-size affects how background images fill their containing elements. @@ -40,38 +38,36 @@

<%= name %>

setting contain or cover.

Examples

- .bg-cn { background-size: contain } -

contain will make sure that the entire image is displayed within the element, regardless of the elements dimensions.

- -

- .bg-cv { background-size: cover } -

cover will make sure the entire element is covered - but won't guarantee that the entire image will be shown.

- -

- Hovers -

- Borders -

Reference

- MDN - Background Size -

Examples

+ .bg-cn { background-size: contain } +

contain will make sure that the entire image is displayed within the element, regardless of the elements dimensions.

+ .bg-cv { background-size: cover } +

cover will make sure the entire element is covered - but won't guarantee that the entire image will be shown.

+ Hovers +

+ Borders +

Reference

+ MDN - Background Size +

- src/_background-size.css -

+        
+          src/_background-size.css
+        
+ 
 <%= srcCSS  %>
 
diff --git a/src/templates/docs/border-radius/index.html b/src/templates/docs/border-radius/index.html
index 4088660cd..bf7fb3630 100644
--- a/src/templates/docs/border-radius/index.html
+++ b/src/templates/docs/border-radius/index.html
@@ -9,28 +9,28 @@
   
   
     <%= siteHeader %>
-    
+    
       
         <%= name %>
         v<%= moduleVersion %>
         <%= moduleSize %>
         
-            
-              Declarations 
-              <%= moduleObj.declarations.total %>
-            
-            
-              Selectors 
-              <%= moduleObj.selectors.total %>
-            
-            
-              Max. Specificity Score 
-              <%= moduleObj.selectors.specificity.max %>
-            
-            
-              Size of Avg. Rule 
-              <%= moduleObj.rules.size.average %>
-            
+          
+            Declarations 
+            <%= moduleObj.declarations.total %>
+          
+          
+            Selectors 
+            <%= moduleObj.selectors.total %>
+          
+          
+            Max. Specificity Score 
+            <%= moduleObj.selectors.specificity.max %>
+          
+          
+            Size of Avg. Rule 
+            <%= moduleObj.rules.size.average %>
+          
         
         
           There is a four step scale for border radius in addition to a utility
@@ -38,49 +38,49 @@ 
<%= name %>
           height and width will produce a circle.
         
       
-
-  Examples
-  Border Radius
-  
-    .br0
-  
-  
-    .br1
-  
-  
-    .br2
-  
-  
-    .br4
-  
-  
-    .br5
-  
-  Combine .br-100 with a fixed height and width to make a circle
-  
-    
-      .br-100
-    
-  
-  
-    
-      Previous
-      Borders
-    
-    
-      Next
-      Images
-    
-  
-  
-    Reference
-    MDN - Border Radius
-  
-
+      
+        Examples
+        Border Radius
+        
+          .br0
+        
+        
+          .br1
+        
+        
+          .br2
+        
+        
+          .br4
+        
+        
+          .br5
+        
+        Combine .br-100 with a fixed height and width to make a circle
+        
+          
+            .br-100
+          
+        
+        
+          
+            Previous
+            Borders
+          
+          
+            Next
+            Images
+          
+        
+        
+          Reference
+          MDN - Border Radius
+        
+      
       
-
-        src/_border-radius.css
-
+        
+          src/_border-radius.css
+        
  
 <%= srcCSS  %>
diff --git a/src/templates/docs/borders/index.html b/src/templates/docs/borders/index.html
index c119692af..7e4d37d88 100644
--- a/src/templates/docs/borders/index.html
+++ b/src/templates/docs/borders/index.html
@@ -15,22 +15,22 @@ <%= name %>
         v<%= moduleVersion %>
         <%= moduleSize %>
         
-            
-              Declarations 
-              <%= moduleObj.declarations.total %>
-            
-            
-              Selectors 
-              <%= moduleObj.selectors.total %>
-            
-            
-              Max. Specificity Score 
-              <%= moduleObj.selectors.specificity.max %>
-            
-            
-              Size of Avg. Rule 
-              <%= moduleObj.rules.size.average %>
-            
+          
+            Declarations 
+            <%= moduleObj.declarations.total %>
+          
+          
+            Selectors 
+            <%= moduleObj.selectors.total %>
+          
+          
+            Max. Specificity Score 
+            <%= moduleObj.selectors.specificity.max %>
+          
+          
+            Size of Avg. Rule 
+            <%= moduleObj.rules.size.average %>
+          
         
         
           There is a base border module that can be extended with the
@@ -40,335 +40,328 @@ 
<%= name %>
           on ie. top, right, bottom, left.
         
       
-
-  Examples
-  
-    Border Base
-      Border
-      
-        <div class="ba"> </div>
-      
-      
-      
-      Border Top
-      
-        <div class="bt"> </div>
-      
-      
-      
-      Border Right
-      
-        <div class="br"> </div>
-      
-      
-      
-      Border Bottom
-      
-        <div class="bb"> </div>
-      
-      
-      
-      Border Left
-      
-        <div class="bl"> </div>
-      
-      
-      
-  
-  
-    Border Styles
-    Dashed
-    
-      <div class="ba b--dashed"> </div>
-    
-    
-
-    
-    Dotted
-    
-      <div class="ba b--dotted"> </div>
-    
-    
-
-    
-    Solid (default)
-    
-      <div class="ba"> </div>
-    
-    
-
-    
-  
-  
-    Border Widths
-    Solid (default)
-    
-      <div class="ba bw1"> </div>
-    
-    
-    
-    
-      <div class="ba bw2"> </div>
-    
-    
-    
-    
-      <div class="ba bw3"> </div>
-    
-    
-    
-    
-      <div class="ba bw4"> </div>
-    
-    
-    
-    
-      <div class="ba bw5"> </div>
-    
-    
-    
-    Dotted
-    
-      <div class="ba b--dotted bw1"> </div>
-    
-    
-    
-    
-      <div class="ba b--dotted bw2"> </div>
-    
-    
-    
-    
-      <div class="ba b--dotted bw3"> </div>
-    
-    
-    
-    
-      <div class="ba b--dotted bw4"> </div>
-    
-    
-    
-    
-      <div class="ba b--dotted bw5"> </div>
-    
-    
-    
-    Dashed
-    
-      <div class="ba b--dashed bw1"> </div>
-    
-    
-    
-    
-      <div class="ba b--dashed bw2"> </div>
-    
-    
-    
-    
-      <div class="ba b--dashed bw3"> </div>
-    
-    
-    
-    
-      <div class="ba b--dashed bw4"> </div>
-    
-    
-    
-    
-      <div class="ba b--dashed bw5"> </div>
-    
-    
-    
-    Border Colors
-    
-      <div class="ba b--black"> </div>
-    
-    
-    
-    
-      <div class="ba b--near-black"> </div>
-    
-    
-    
-    
-      <div class="ba b--dark-gray"> </div>
-    
-    
-    
-    
-      <div class="ba b--mid-gray"> </div>
-    
-    
-    
-    
-      <div class="ba b--gray"> </div>
-    
-    
-    
-    
-      <div class="ba b--silver"> </div>
-    
-    
-    
-    
-      <div class="ba b--light-silver"> </div>
-    
-    
-    
-    
-      <div class="ba b--light-gray"> </div>
-    
-    
-    
-    
-      <div class="ba b--near-white"> </div>
-    
-    
-    
-    
-      
-        <div class="ba b--white"> </div>
-      
-      
-      
-      
-        <div class="ba b--white-90"> </div>
-      
-      
-      
-      
-        <div class="ba b--white-80"> </div>
-      
-      
-      
-      
-        <div class="ba b--white-70"> </div>
-      
-      
-      
-      
-        <div class="ba b--white-60"> </div>
-      
-      
-      
-      
-        <div class="ba b--white-50"> </div>
-      
-      
-      
-      
-        <div class="ba b--white-40"> </div>
-      
-      
-      
-      
-        <div class="ba b--white-30"> </div>
-      
-      
-      
-      
-        <div class="ba b--white-20"> </div>
-      
-      
-      
-      
-        <div class="ba b--white-10"> </div>
-      
-      
-      
-      
-        <div class="ba b--white-05"> </div>
-      
-      
-      
-      
-        <div class="ba b--white-025"> </div>
-      
-      
-      
-    
-      
-        <div class="ba b--black"> </div>
-      
-      
-      
-      
-        <div class="ba b--black-90"> </div>
-      
-      
-      
-      
-        <div class="ba b--black-80"> </div>
-      
-      
-      
-      
-        <div class="ba b--black-70"> </div>
-      
-      
-      
-      
-        <div class="ba b--black-60"> </div>
-      
-      
-      
-      
-        <div class="ba b--black-50"> </div>
-      
-      
-      
-      
-        <div class="ba b--black-40"> </div>
-      
-      
-      
-      
-        <div class="ba b--black-30"> </div>
-      
-      
-      
-      
-        <div class="ba b--black-20"> </div>
-      
-      
-      
-      
-        <div class="ba b--black-10"> </div>
-      
-      
-      
-      
-        <div class="ba b--black-05"> </div>
-      
-      
-      
-      
-        <div class="ba b--black-025"> </div>
-      
-      
+      
+        Examples
+        
+          Border Base
+          Border
+          
+            <div class="ba"> </div>
+          
+          
+
+          Border Top
+          
+            <div class="bt"> </div>
+          
+          
+
+          Border Right
+          
+            <div class="br"> </div>
+          
+          
+
+          Border Bottom
+          
+            <div class="bb"> </div>
+          
+          
+
+          Border Left
+          
+            <div class="bl"> </div>
+          
+          
+        
+        
+          Border Styles
+          Dashed
+          
+            <div class="ba b--dashed"> </div>
+          
+          
+
+          Dotted
+          
+            <div class="ba b--dotted"> </div>
+          
+          
+
+          Solid (default)
+          
+            <div class="ba"> </div>
+          
+          
+        
+        
+          Border Widths
+          Solid (default)
+          
+            <div class="ba bw1"> </div>
+          
+          
+
+          
+            <div class="ba bw2"> </div>
+          
+          
+
+          
+            <div class="ba bw3"> </div>
+          
+          
+
+          
+            <div class="ba bw4"> </div>
+          
+          
+
+          
+            <div class="ba bw5"> </div>
+          
+          
+
+          Dotted
+          
+            <div class="ba b--dotted bw1"> </div>
+          
+          
+
+          
+            <div class="ba b--dotted bw2"> </div>
+          
+          
+
+          
+            <div class="ba b--dotted bw3"> </div>
+          
+          
+
+          
+            <div class="ba b--dotted bw4"> </div>
+          
+          
+
+          
+            <div class="ba b--dotted bw5"> </div>
+          
+          
+
+          Dashed
+          
+            <div class="ba b--dashed bw1"> </div>
+          
+          
+
+          
+            <div class="ba b--dashed bw2"> </div>
+          
+          
+
+          
+            <div class="ba b--dashed bw3"> </div>
+          
+          
+
+          
+            <div class="ba b--dashed bw4"> </div>
+          
+          
+
+          
+            <div class="ba b--dashed bw5"> </div>
+          
+          
+
+          Border Colors
+          
+            <div class="ba b--black"> </div>
+          
+          
+
+          
+            <div class="ba b--near-black"> </div>
+          
+          
+
+          
+            <div class="ba b--dark-gray"> </div>
+          
+          
+
+          
+            <div class="ba b--mid-gray"> </div>
+          
+          
+
+          
+            <div class="ba b--gray"> </div>
+          
+          
+
+          
+            <div class="ba b--silver"> </div>
+          
+          
+
+          
+            <div class="ba b--light-silver"> </div>
+          
+          
+
+          
+            <div class="ba b--light-gray"> </div>
+          
+          
+
+          
+            <div class="ba b--near-white"> </div>
+          
+          
+
+          
+            
+              <div class="ba b--white"> </div>
+            
+            
+
+            
+              <div class="ba b--white-90"> </div>
+            
+            
+
+            
+              <div class="ba b--white-80"> </div>
+            
+            
+
+            
+              <div class="ba b--white-70"> </div>
+            
+            
+
+            
+              <div class="ba b--white-60"> </div>
+            
+            
+
+            
+              <div class="ba b--white-50"> </div>
+            
+            
+
+            
+              <div class="ba b--white-40"> </div>
+            
+            
+
+            
+              <div class="ba b--white-30"> </div>
+            
+            
+
+            
+              <div class="ba b--white-20"> </div>
+            
+            
+
+            
+              <div class="ba b--white-10"> </div>
+            
+            
+
+            
+              <div class="ba b--white-05"> </div>
+            
+            
+
+            
+              <div class="ba b--white-025"> </div>
+            
+            
+          
+          
+            <div class="ba b--black"> </div>
+          
+          
+
+          
+            <div class="ba b--black-90"> </div>
+          
+          
+
+          
+            <div class="ba b--black-80"> </div>
+          
+          
+
+          
+            <div class="ba b--black-70"> </div>
+          
+          
+
+          
+            <div class="ba b--black-60"> </div>
+          
+          
+
+          
+            <div class="ba b--black-50"> </div>
+          
+          
+
+          
+            <div class="ba b--black-40"> </div>
+          
+          
+
+          
+            <div class="ba b--black-30"> </div>
+          
+          
+
+          
+            <div class="ba b--black-20"> </div>
+          
+          
+
+          
+            <div class="ba b--black-10"> </div>
+          
+          
+
+          
+            <div class="ba b--black-05"> </div>
+          
+          
+
+          
+            <div class="ba b--black-025"> </div>
+          
+          
+        
+        
+          
+            Previous
+            Background Size
+          
+          
+            Next
+            Border Radius
+          
+        
+        
+          Reference
+          MDN - Border
+          MDN - Border Style
+          MDN - Border Width
+        
       
-  
-  
-    
-      Previous
-      Background Size
-    
-    
-      Next
-      Border Radius
-    
-  
-  
-    Reference
-    MDN - Border
-    MDN - Border Style
-    MDN - Border Width
-  
-
-
-
+      
+      
         src/_borders.css
-
+      
  
 /*
@@ -461,9 +454,9 @@ Reference
 }
 
 
-
-  src/_border-style.css
-
+  
+    src/_border-style.css
+  
  
 @custom-media --breakpoint-not-small screen and (min-width: 48em);
@@ -517,9 +510,9 @@ Reference
 }
 
 
-
-        src/_border-widths.css
-
+  
+    src/_border-widths.css
+  
  
 <%= srcCSS  %>
diff --git a/src/templates/docs/box-sizing/index.html b/src/templates/docs/box-sizing/index.html
index 4fb63eef5..bd595967a 100644
--- a/src/templates/docs/box-sizing/index.html
+++ b/src/templates/docs/box-sizing/index.html
@@ -15,22 +15,22 @@ <%= name %>
         v<%= moduleVersion %>
         <%= moduleSize %>
         
-            
-              Declarations 
-              <%= moduleObj.declarations.total %>
-            
-            
-              Selectors 
-              <%= moduleObj.selectors.total %>
-            
-            
-              Max. Specificity Score 
-              <%= moduleObj.selectors.specificity.max %>
-            
-            
-              Size of Avg. Rule 
-              <%= moduleObj.rules.size.average %>
-            
+          
+            Declarations 
+            <%= moduleObj.declarations.total %>
+          
+          
+            Selectors 
+            <%= moduleObj.selectors.total %>
+          
+          
+            Max. Specificity Score 
+            <%= moduleObj.selectors.specificity.max %>
+          
+          
+            Size of Avg. Rule 
+            <%= moduleObj.rules.size.average %>
+          
         
         
           The box model has been known to trip up a few people. This module should make things a bit easier.
@@ -49,39 +49,39 @@ 
<%= name %>
           The benefit of border-box as opposed to content-box (which is the default per the css spec) is that when you declare a width, that is the width of the element, regardless of how much border or padding you add to the element.
         
       
-
-  Examples
-  Default Content Box
-  
-     This element has a thick border, a max-width class of mw5, and extra large horizontal padding and medium vertical padding.
-  
-  Border Box
-  
-     This element has a thick border, a max-width class of mw5, and extra large horizontal padding and medium vertical padding.
-  
-  Border Box with no padding or border
-  
-     This element has no border, a max-width class of mw5 and no padding. Notice which example it has the same width as.
-  
-  
-    
-      Previous
-      Debugging
-    
-    
-      Next
-      Spacing
-    
-  
-  
-    Reference
-    MDN - Box Sizing
-  
-
+      
+        Examples
+        Default Content Box
+        
+          This element has a thick border, a max-width class of mw5, and extra large horizontal padding and medium vertical padding.
+        
+        Border Box
+        
+          This element has a thick border, a max-width class of mw5, and extra large horizontal padding and medium vertical padding.
+        
+        Border Box with no padding or border
+        
+          This element has no border, a max-width class of mw5 and no padding. Notice which example it has the same width as.
+        
+        
+          
+            Previous
+            Debugging
+          
+          
+            Next
+            Spacing
+          
+        
+        
+          Reference
+          MDN - Box Sizing
+        
+      
       
-
-        src/_box-sizing.css
-
+        
+          src/_box-sizing.css
+        
  
 <%= srcCSS  %>
diff --git a/src/templates/docs/clearfix/index.html b/src/templates/docs/clearfix/index.html
index 41a0bb1b7..014df505b 100644
--- a/src/templates/docs/clearfix/index.html
+++ b/src/templates/docs/clearfix/index.html
@@ -15,22 +15,22 @@ <%= name %>
         v<%= moduleVersion %>
         <%= moduleSize %>
         
-            
-              Declarations 
-              <%= moduleObj.declarations.total %>
-            
-            
-              Selectors 
-              <%= moduleObj.selectors.total %>
-            
-            
-              Max. Specificity Score 
-              <%= moduleObj.selectors.specificity.max %>
-            
-            
-              Size of Avg. Rule 
-              <%= moduleObj.rules.size.average %>
-            
+          
+            Declarations 
+            <%= moduleObj.declarations.total %>
+          
+          
+            Selectors 
+            <%= moduleObj.selectors.total %>
+          
+          
+            Max. Specificity Score 
+            <%= moduleObj.selectors.specificity.max %>
+          
+          
+            Size of Avg. Rule 
+            <%= moduleObj.rules.size.average %>
+          
         
         
           When floats are used for layouts - they need a clearfix solution. This helps prevent
@@ -38,44 +38,44 @@ 
<%= name %>
           surrounding elements.
         
       
-
-  Examples
-  Cleared Floats
-  
-    This example shows two floated elements wrapped in an element with a 4px solid red border.
-    In the top version where the floats are cleared, the red element wraps around the elements.
-    In the second example - the parent element is collapsed and the two floated elements sit outside of it.
-    It should be noted you don't have to clear floated elements that are inside another floated element.
-  
-  
-    
-    
-  
-  UnCleared Floats
-  
-    
-    
-  
+      
+        Examples
+        Cleared Floats
+        
+          This example shows two floated elements wrapped in an element with a 4px solid red border.
+          In the top version where the floats are cleared, the red element wraps around the elements.
+          In the second example - the parent element is collapsed and the two floated elements sit outside of it.
+          It should be noted you don't have to clear floated elements that are inside another floated element.
+        
+        
+          
+          
+        
+        UnCleared Floats
+        
+          
+          
+        
 
-  
-    
-      Previous
-      Floats
-    
-    
-      Next
-      Display
-    
-  
-  
-    Reference
-    MDN - Clears
-  
-
+        
+          
+            Previous
+            Floats
+          
+          
+            Next
+            Display
+          
+        
+        
+          Reference
+          MDN - Clears
+        
+      
       
-
-        src/_clearfix.css
-
+        
+          src/_clearfix.css
+        
  
 <%= srcCSS  %>
@@ -84,8 +84,7 @@ Reference
       

       <%= navDocs %>
     

-      <%= siteFooter %>
+    <%= siteFooter %>
     <%= googleAnalytics  %>
-
   
 
diff --git a/src/templates/docs/debug/index.html b/src/templates/docs/debug/index.html
index 3bf21f25a..0b77afae9 100644
--- a/src/templates/docs/debug/index.html
+++ b/src/templates/docs/debug/index.html
@@ -17,7 +17,7 @@ <%= name %>
         
           
             Declarations 
-            <%= moduleObj.declarations.total %>
+            <%= moduleObj.declarations.total %>
           
           
             Selectors 
diff --git a/src/templates/docs/display/index.html b/src/templates/docs/display/index.html
index fb018797e..1f6d5eb4d 100644
--- a/src/templates/docs/display/index.html
+++ b/src/templates/docs/display/index.html
@@ -8,7 +8,6 @@
     <%= head  %>
   
   
-
     <%= siteHeader %>
     
       
@@ -16,22 +15,22 @@ <%= name %>
         v<%= moduleVersion %>
         <%= moduleSize %>
         
-            
-              Declarations 
-              <%= moduleObj.declarations.total %>
-            
-            
-              Selectors 
-              <%= moduleObj.selectors.total %>
-            
-            
-              Max. Specificity Score 
-              <%= moduleObj.selectors.specificity.max %>
-            
-            
-              Size of Avg. Rule 
-              <%= moduleObj.rules.size.average %>
-            
+          
+            Declarations 
+            <%= moduleObj.declarations.total %>
+          
+          
+            Selectors 
+            <%= moduleObj.selectors.total %>
+          
+          
+            Max. Specificity Score 
+            <%= moduleObj.selectors.specificity.max %>
+          
+          
+            Size of Avg. Rule 
+            <%= moduleObj.rules.size.average %>
+          
         
         
           Single purpose classes for setting the display of an element at any breakpoint.
@@ -45,114 +44,114 @@ 
<%= name %>

@@ -16,22 +15,22 @@

<%= name %>

v<%= moduleVersion %> <%= moduleSize %>

Declarations: <%= moduleObj.declarations.total %>

Selectors: <%= moduleObj.selectors.total %>

Max. Specificity Score: <%= moduleObj.selectors.specificity.max %>

Size of Avg. Rule: <%= moduleObj.rules.size.average %>

Declarations: <%= moduleObj.declarations.total %>

Selectors: <%= moduleObj.selectors.total %>

Max. Specificity Score: <%= moduleObj.selectors.specificity.max %>

Size of Avg. Rule: <%= moduleObj.rules.size.average %>

There are two classes for adding hover effects to elements. One dims @@ -40,47 +39,47 @@

<%= name %>

users that something can be interacted with.

Examples

- Skins -

- Background Size -

Reference

- MDN - Hover - MDN - Focus -

Examples

Dim Text

+ This link will dim on hover + This link will dim on hover + This link will dim on hover + This link will dim on hover + This link will dim on hover +

Dim Card

+ + KITTTTTTTY + Dim any element and its children + +

Reveal Children on Hover

+ + Reveal children elements on hover + +

+ Skins +

+ Background Size +

Reference

+ MDN - Hover + MDN - Focus +

- src/_hovers.css -

+ src/_hovers.css +

 
 <%= srcCSS  %>
diff --git a/src/templates/docs/images/index.html b/src/templates/docs/images/index.html
index 2c24e57e0..e1d654c8d 100644
--- a/src/templates/docs/images/index.html
+++ b/src/templates/docs/images/index.html
@@ -8,40 +8,40 @@
     <%= head  %>
   
   
-
     <%= siteHeader %>
     
       
         images
       
-
-  Examples
-  Image
-  
-    This photo is more than 3000 pixels wide. The width is set to 100% to ensure it doesn't bleed off the viewport and always fills its container. In some situations, this will make the image stretch to be larger than it's actual width. To avoid the image stretching past it's width, set max-width instead.
-  
-  <img src="/img/over-canvas.jpg" class="w-100">
-  
-  The image below is 720 pixels wide, it will fill it's container until the container is wider than 720 pixels.
-
-  <img src="/img/under-canvas.jpg" class="mw-100">
-  
-  

-    
-      Previous
-      Border Radius
-    
-    
-      Next
-      Links
-    
-  
-  
-    Reference
-    MDN - Images HTML
-    MDN - Images CSS
-  
-
+      
+        Examples
+        Image
+        
+          This photo is more than 3000 pixels wide. The width is set to 100% to ensure it doesn't bleed off the viewport and always fills its container. In some situations, this will make the image stretch to be larger than it's actual width. To avoid the image stretching past it's width, set max-width instead.
+        
+        <img src="/img/over-canvas.jpg" class="w-100">
+        
+        
+          The image below is 720 pixels wide, it will fill it's container until the container is wider than 720 pixels.
+        
+        <img src="/img/under-canvas.jpg" class="mw-100">
+        
+        
+          
+            Previous
+            Border Radius
+          
+          
+            Next
+            Links
+          
+        
+        
+          Reference
+          MDN - Images HTML
+          MDN - Images CSS
+        
+      
       <%= navDocs %>
     
     <%= siteFooter %>
diff --git a/src/templates/docs/line-height/index.html b/src/templates/docs/line-height/index.html
index 9dca9af34..c06c26993 100644
--- a/src/templates/docs/line-height/index.html
+++ b/src/templates/docs/line-height/index.html
@@ -8,7 +8,6 @@
     <%= head  %>
   
   
-
     <%= siteHeader %>
     
       
@@ -16,22 +15,22 @@ <%= name %>
         v<%= moduleVersion %>
         <%= moduleSize %>
         
-            
-              Declarations 
-              <%= moduleObj.declarations.total %>
-            
-            
-              Selectors 
-              <%= moduleObj.selectors.total %>
-            
-            
-              Max. Specificity Score 
-              <%= moduleObj.selectors.specificity.max %>
-            
-            
-              Size of Avg. Rule 
-              <%= moduleObj.rules.size.average %>
-            
+          
+            Declarations 
+            <%= moduleObj.declarations.total %>
+          
+          
+            Selectors 
+            <%= moduleObj.selectors.total %>
+          
+          
+            Max. Specificity Score 
+            <%= moduleObj.selectors.specificity.max %>
+          
+          
+            Size of Avg. Rule 
+            <%= moduleObj.rules.size.average %>
+          
         
         
           line-height is a css property


@@ -47,53 +46,53 @@ 
<%= name %>
           set of values can help make your text a little easier to digest.
         
       
-
-  Examples
-  No applied line-height (default)
-  
-    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
-    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
-    vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
-    no sea takimata sanctus est Lorem ipsum dolor sit amet.
-  
-  Prose Leading (1.6)
-  
-    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
-    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
-    vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
-    no sea takimata sanctus est Lorem ipsum dolor sit amet.
-  
-  No Applied Title Leading (Default)
-  
-    Lorem ipsum dolor sit amet, consetetur sadipscing elitr
-  
-  Title Leading (1.3)
-  
-    Lorem ipsum dolor sit amet, consetetur sadipscing elitr
-  
-  Solid Leading (1)
-  
-    Lorem ipsum dolor sit amet, consetetur sadipscing elitr
-  
-  
-    
-      Previous
-      Measure
-    
-    
-      Next
-      Tracking
-    
-  
-  
-    Reference
-    MDN - Line Height
-  
-
+      
+        Examples
+        No applied line-height (default)
+        
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+          tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
+          vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+          no sea takimata sanctus est Lorem ipsum dolor sit amet.
+        
+        Prose Leading (1.6)
+        
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+          tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
+          vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+          no sea takimata sanctus est Lorem ipsum dolor sit amet.
+        
+        No Applied Title Leading (Default)
+        
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr
+        
+        Title Leading (1.3)
+        
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr
+        
+        Solid Leading (1)
+        
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr
+        
+        
+          
+            Previous
+            Measure
+          
+          
+            Next
+            Tracking
+          
+        
+        
+          Reference
+          MDN - Line Height
+        
+      
       
-
-        src/_line-height.css
-
+        
+          src/_line-height.css
+        
  
 <%= srcCSS %>
diff --git a/src/templates/docs/links/index.html b/src/templates/docs/links/index.html
index f9f6e11b3..98ec4e58e 100644
--- a/src/templates/docs/links/index.html
+++ b/src/templates/docs/links/index.html
@@ -8,7 +8,6 @@
     <%= head  %>
   
   
-
     <%= siteHeader %>
     
       
@@ -16,22 +15,22 @@ <%= name %>
         v<%= moduleVersion %>
         <%= moduleSize %>
         
-            
-              Declarations 
-              <%= moduleObj.declarations.total %>
-            
-            
-              Selectors 
-              <%= moduleObj.selectors.total %>
-            
-            
-              Max. Specificity Score 
-              <%= moduleObj.selectors.specificity.max %>
-            
-            
-              Size of Avg. Rule 
-              <%= moduleObj.rules.size.average %>
-            
+          
+            Declarations 
+            <%= moduleObj.declarations.total %>
+          
+          
+            Selectors 
+            <%= moduleObj.selectors.total %>
+          
+          
+            Max. Specificity Score 
+            <%= moduleObj.selectors.specificity.max %>
+          
+          
+            Size of Avg. Rule 
+            <%= moduleObj.rules.size.average %>
+          
         
         
           Tachyons has some basic link styling utilities - but the framework
@@ -42,35 +41,35 @@ 
<%= name %>
           underline style on links.
         
       
-
-  Examples
-  
-    Black link
-    Near-black link
-    Dark-gray link
-    Mid-gray link
-    Gray link
-  
-  
-    
-      Previous
-      Images
-    
-    
-      Next
-      Lists
-    
-  
-  
-    Reference
-    MDN - Hover
-    MDN - Focus
-  
-
+      
+        Examples
+        
+          Black link
+          Near-black link
+          Dark-gray link
+          Mid-gray link
+          Gray link
+        
+        
+          
+            Previous
+            Images
+          
+          
+            Next
+            Lists
+          
+        
+        
+          Reference
+          MDN - Hover
+          MDN - Focus
+        
+      
       
-
+      
         src/_links.css
-
+      
  
 <%= srcCSS  %>
diff --git a/src/templates/docs/lists/index.html b/src/templates/docs/lists/index.html
index 115bfe77c..e021e7b55 100644
--- a/src/templates/docs/lists/index.html
+++ b/src/templates/docs/lists/index.html
@@ -15,62 +15,62 @@ <%= name %>
         v<%= moduleVersion %>
         <%= moduleSize %>
         
-            
-              Declarations 
-              <%= moduleObj.declarations.total %>
-            
-            
-              Selectors 
-              <%= moduleObj.selectors.total %>
-            
-            
-              Max. Specificity Score 
-              <%= moduleObj.selectors.specificity.max %>
-            
-            
-              Size of Avg. Rule 
-              <%= moduleObj.rules.size.average %>
-            
+          
+            Declarations 
+            <%= moduleObj.declarations.total %>
+          
+          
+            Selectors 
+            <%= moduleObj.selectors.total %>
+          
+          
+            Max. Specificity Score 
+            <%= moduleObj.selectors.specificity.max %>
+          
+          
+            Size of Avg. Rule 
+            <%= moduleObj.rules.size.average %>
+          
         
         
           A simple reset for list-style-type to remove the default bullets.
         
       
-
-  Examples
-  <ul class="list pl0">
-  
-    Apples
-    Oranges
-    Banana
-    Golf balls
-  
-  <ol class="list pl0">
-  
-    One
-    Two
-    Three
-    Four
-  
-  
-    
-      Previous
-      Links
-    
-    
-      Next
-      Forms
-    
-  
-  
-    Reference
-    MDN - List Style Type
-  
-
+      
+        Examples
+        <ul class="list pl0">
+        
+          Apples
+          Oranges
+          Banana
+          Golf balls
+        
+        <ol class="list pl0">
+        
+          One
+          Two
+          Three
+          Four
+        
+        
+          
+            Previous
+            Links
+          
+          
+            Next
+            Forms
+          
+        
+        
+          Reference
+          MDN - List Style Type
+        
+      
       
-
-        src/_lists.css
-
+        
+          src/_lists.css
+        
  
 <%= srcCSS  %>
diff --git a/src/templates/docs/max-widths/index.html b/src/templates/docs/max-widths/index.html
index a4daec4ee..c5ad13448 100644
--- a/src/templates/docs/max-widths/index.html
+++ b/src/templates/docs/max-widths/index.html
@@ -8,7 +8,6 @@
     <%= head  %>
   
   
-
     <%= siteHeader %>
     
       
@@ -16,32 +15,33 @@ <%= name %>
         v<%= moduleVersion %>
         <%= moduleSize %>
         
-            
-              Declarations 
-              <%= moduleObj.declarations.total %>
-            
-            
-              Selectors 
-              <%= moduleObj.selectors.total %>
-            
-            
-              Max. Specificity Score 
-              <%= moduleObj.selectors.specificity.max %>
-            
-            
-              Size of Avg. Rule 
-              <%= moduleObj.rules.size.average %>
-            
+          
+            Declarations 
+            <%= moduleObj.declarations.total %>
+          
+          
+            Selectors 
+            <%= moduleObj.selectors.total %>
+          
+          
+            Max. Specificity Score 
+            <%= moduleObj.selectors.specificity.max %>
+          
+          
+            Size of Avg. Rule 
+            <%= moduleObj.rules.size.average %>
+          
         
         
           The max-widths module contains both a ten-step scale based on powers of two
           as well as a series of percentage values that can prove useful. Max widths can be combined with widths
           to ensure that your content doesn't get too wide on larger monitors. Max-widths can also help keep embedded media
           within the canvas. As they are fluid across ranges of screen widths, max-widths are extremely useful when trying to keep a design
-responsive.
+          responsive.
         
         
           Class name structure is as follows:
+        
  Base:
   mw = width
@@ -74,104 +74,103 @@ <%= name %>
   -m  = medium
   -l  = large
 
-        
       
-
-  Examples
-  Max Width Scale
-
-  
-    
-    
-  
-  
-    
-    
-  
-  
-    
-    
-  
-  
-    
-    
-  
-  
-    
-    
-  
-  
-    
-    
-  
-
-      .mw1
-    
-      
-Lorem
-      
-    

-      .mw2
-    
-      
-        Lorem
-      
-    

-      .mw3
-    
-      
-        Lorem ipsum dolor sit amet, consetetur sadipscing
-      
-    

-      .mw4
-    
-      
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
-      
-    

-      .mw5
-    
-      
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
-        tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
-        vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
-        no sea takimata sanctus est Lorem ipsum dolor sit amet.
-      
-    

-      .mw6
-    
-      
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
-        tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
-        vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
-        no sea takimata sanctus est Lorem ipsum dolor sit amet.
+      
+        Examples
+        Max Width Scale
+        
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+          
+            
+            
+          
+        
+              .mw1
+            
+              
+                Lorem
+              
+            

+              .mw2
+            
+              
+                Lorem
+              
+            

+              .mw3
+            
+              
+                Lorem ipsum dolor sit amet, consetetur sadipscing
+              
+            

+              .mw4
+            
+              
+                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
+              
+            

+              .mw5
+            
+              
+                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+                tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
+                vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+                no sea takimata sanctus est Lorem ipsum dolor sit amet.
+              
+            

+              .mw6
+            
+              
+                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+                tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
+                vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+                no sea takimata sanctus est Lorem ipsum dolor sit amet.
+              
+            
+        Max Width Percentages
+        
+          
+            mw-100
+          
+        
+        
+          
+            Previous
+            Widths
+          
+          
+            Next
+            Heights
+          
+        
+        
+          Reference
+          MDN - Max Width
+        
       
-    
-  Max Width Percentages
-  
-    
-      mw-100
-    
-  
-  
-    
-      Previous
-      Widths
-    
-    
-      Next
-      Heights
-    
-  
-  
-    Reference
-    MDN - Max Width
-  
-
       
-
+      
         src/_max-widths.css
-
+      
  
 <%= srcCSS  %>
diff --git a/src/templates/docs/measure/index.html b/src/templates/docs/measure/index.html
index 9ea4f0776..ea9cbab55 100644
--- a/src/templates/docs/measure/index.html
+++ b/src/templates/docs/measure/index.html
@@ -17,7 +17,7 @@ <%= name %>
         
           
             Declarations 
-            <%= moduleObj.declarations.total %>
+            <%= moduleObj.declarations.total %>
           
           
             Selectors 
@@ -51,13 +51,13 @@ 6rem/96px at 30em
           
             Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.
           
-
+

- `.h1` -
- `.h2` -
- `.h3` -
- `.h4` -
- `.h5` -

+ `.h1` +
+ `.h2` +
+ `.h3` +
+ `.h4` +
+ `.h5` +

- `.w1` -
- `.w2` -
- `.w3` -
- `.w4` -
- `.w5` -

+ `.w1` +
+ `.w2` +
+ `.w3` +
+ `.w4` +
+ `.w5` +

tachyons-debug

tachyons-debug

Examples

Debug Children

Debug All

Examples

Debug Children

Debug All

Previous

Next

Reference

Next

Reference

Reference

General

Elements

Typography

Layout

Theming

Previous

Next

Previous

Next

Theming

tachyons-box-sizing

tachyons-box-sizing

Examples

Default Content Box

Border Box

Border Box with no padding or border

Previous

Next

Reference

Examples

Default Content Box

Border Box

Border Box with no padding or border

Previous

Next

Reference

Theming

tachyons-clears

tachyons-clears

Examples

Cleared Floats

UnCleared Floats

Examples

Cleared Floats

UnCleared Floats

Previous

Next

Reference

Previous

Next

Reference

Reference

Theming

tachyons-heights

tachyons-heights

Examples

Height Scale

Height Percentages

Previous

Next