From de08a5ef2612f7dd051224cce3ae293407f4d5ca Mon Sep 17 00:00:00 2001 From: Donielle Berg Date: Tue, 22 Mar 2016 14:50:22 -0700 Subject: [PATCH 1/4] Make code snippets in src/templates/docs/ consistent * all code tags have class `code` and `font-size: .75rem` * change measure code snippet to have same light gray background as other doc pages --- src/templates/docs/borders/index.html | 2 +- src/templates/docs/debug/index.html | 4 ++-- src/templates/docs/measure/index.html | 2 +- src/templates/docs/position/index.html | 4 ++-- src/templates/docs/spacing/index.html | 2 +- src/templates/docs/text-transform/index.html | 2 +- src/templates/docs/tracking/index.html | 2 +- src/templates/docs/vertical-align/index.html | 2 +- 8 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/templates/docs/borders/index.html b/src/templates/docs/borders/index.html index a0a546dae..c119692af 100644 --- a/src/templates/docs/borders/index.html +++ b/src/templates/docs/borders/index.html @@ -370,7 +370,7 @@

Reference

src/_borders.css 
-
+
 /*
 
    BORDER BASE
diff --git a/src/templates/docs/debug/index.html b/src/templates/docs/debug/index.html
index 89cfd5a37..f2a83ea66 100644
--- a/src/templates/docs/debug/index.html
+++ b/src/templates/docs/debug/index.html
@@ -263,7 +263,7 @@ 
Reference

         src/_debug-children.css
 
 
-
+
   /*
 
     DEBUG CHILDREN
@@ -280,7 +280,7 @@ 
Reference

         src/_debug.css
 
 
-
+
   <%= srcCSS %>
 
 

diff --git a/src/templates/docs/measure/index.html b/src/templates/docs/measure/index.html
index f0378ea6a..48b9a0c7a 100644
--- a/src/templates/docs/measure/index.html
+++ b/src/templates/docs/measure/index.html
@@ -212,7 +212,7 @@ 
Reference

     Choose a Comfortable Measure
   
       
-      

+      

 

         src/_typography.css
 

diff --git a/src/templates/docs/position/index.html b/src/templates/docs/position/index.html
index 28b083bde..f8f1d20e0 100644
--- a/src/templates/docs/position/index.html
+++ b/src/templates/docs/position/index.html
@@ -117,7 +117,7 @@ 
Reference

         src/_position.css
 
 
-
+
 <%= srcCSS %>
 
 

@@ -125,7 +125,7 @@ 
Reference

         src/_coordinates.css
 
 
-
+
 @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);
diff --git a/src/templates/docs/spacing/index.html b/src/templates/docs/spacing/index.html
index fb8d21771..350ab7fb4 100644
--- a/src/templates/docs/spacing/index.html
+++ b/src/templates/docs/spacing/index.html
@@ -195,7 +195,7 @@ 
Reference

         src/_spacing.css
 
 
-
+
 <%= srcCSS  %>
 
 

diff --git a/src/templates/docs/text-transform/index.html b/src/templates/docs/text-transform/index.html
index a8758c01b..e19f0842f 100644
--- a/src/templates/docs/text-transform/index.html
+++ b/src/templates/docs/text-transform/index.html
@@ -58,7 +58,7 @@ 
Uppercase with tracking

         src/_text-transform.css
 
 
-
+
 <%= srcCSS  %>
 
 

diff --git a/src/templates/docs/tracking/index.html b/src/templates/docs/tracking/index.html
index 92abfbb24..d9602cf04 100644
--- a/src/templates/docs/tracking/index.html
+++ b/src/templates/docs/tracking/index.html
@@ -75,7 +75,7 @@ 
Reference

         src/_letter-spacing.css
 
 
-
+
 <%= srcCSS  %>
 
 

diff --git a/src/templates/docs/vertical-align/index.html b/src/templates/docs/vertical-align/index.html
index 90dfc1a7c..91cbf01f9 100644
--- a/src/templates/docs/vertical-align/index.html
+++ b/src/templates/docs/vertical-align/index.html
@@ -112,7 +112,7 @@ 
Reference

               src/_vertical-align.css
       
 
-
+
 <%= srcCSS  %>
 
 


From ee0b6ca830f93c869d7c0cd6b39da5dc9191fd87 Mon Sep 17 00:00:00 2001
From: Donielle Berg 
Date: Tue, 22 Mar 2016 16:00:01 -0700
Subject: [PATCH 2/4] Fix "Previous" and "Next" ordering on Elements &
 Typography docs

---
 src/templates/docs/font-family/index.html    |  2 +-
 src/templates/docs/font-style/index.html     |  4 ++--
 src/templates/docs/forms/index.html          |  4 ++--
 src/templates/docs/images/index.html         |  4 ++--
 src/templates/docs/line-height/index.html    |  2 +-
 src/templates/docs/links/index.html          |  4 ++--
 src/templates/docs/measure/index.html        | 14 +++++------
 src/templates/docs/text-transform/index.html | 25 ++++++++++++++++----
 src/templates/docs/type-scale/index.html     |  4 ++--
 src/templates/docs/vertical-align/index.html |  2 +-
 src/templates/docs/white-space/index.html    |  4 ++--
 11 files changed, 42 insertions(+), 27 deletions(-)

diff --git a/src/templates/docs/font-family/index.html b/src/templates/docs/font-family/index.html
index 9f0dadad1..83861140f 100644
--- a/src/templates/docs/font-family/index.html
+++ b/src/templates/docs/font-family/index.html
@@ -74,7 +74,7 @@ 
Previous

     
     

       
Next

-      Vertical Alignment
+      Font Style
     

   
   

diff --git a/src/templates/docs/font-style/index.html b/src/templates/docs/font-style/index.html
index 232550f9c..f3e181a5d 100644
--- a/src/templates/docs/font-style/index.html
+++ b/src/templates/docs/font-style/index.html
@@ -58,11 +58,11 @@ 
Examples

   

     

       
Previous

-      Tracking
+      Font Family
     

     

       
Next

-      Font Family
+      Vertical Align
     

   

   

diff --git a/src/templates/docs/forms/index.html b/src/templates/docs/forms/index.html
index 4832d6527..7f7d9cf3e 100644
--- a/src/templates/docs/forms/index.html
+++ b/src/templates/docs/forms/index.html
@@ -46,11 +46,11 @@ 
Examples

   

     

       
Previous

-      Position
+      Lists
     

     

       
Next

-      Background Size
+      Type Scale
     

   

   

diff --git a/src/templates/docs/images/index.html b/src/templates/docs/images/index.html
index 8a7cb47f6..2c24e57e0 100644
--- a/src/templates/docs/images/index.html
+++ b/src/templates/docs/images/index.html
@@ -29,11 +29,11 @@ 
Image

   

     

       
Previous

-      Debug
+      Border Radius
     

     

       
Next

-      Type Scale
+      Links
     

   

   

diff --git a/src/templates/docs/line-height/index.html b/src/templates/docs/line-height/index.html
index de9ea6cd2..9dca9af34 100644
--- a/src/templates/docs/line-height/index.html
+++ b/src/templates/docs/line-height/index.html
@@ -78,7 +78,7 @@ 
Solid Leading (1)

   

     

       
Previous

-      Measure
+      Measure
     

     

       
Next

diff --git a/src/templates/docs/links/index.html b/src/templates/docs/links/index.html
index f95a64151..f9f6e11b3 100644
--- a/src/templates/docs/links/index.html
+++ b/src/templates/docs/links/index.html
@@ -54,11 +54,11 @@ 
Examples

   

     

       
Previous

-      Position
+      Images
     

     

       
Next

-      Background Size
+      Lists
     

   

   

diff --git a/src/templates/docs/measure/index.html b/src/templates/docs/measure/index.html
index 48b9a0c7a..9ea4f0776 100644
--- a/src/templates/docs/measure/index.html
+++ b/src/templates/docs/measure/index.html
@@ -198,18 +198,18 @@ 
Truncation

   

   

     

-      
Previous

-      Type-scale
+      
Previous

+      Type-scale
     

     

-      
Next

-      Line-height
+      
Next

+      Line-height
     

   

   

-    
Reference

-    MDN - width
-    Choose a Comfortable Measure
+    
Reference

+    MDN - width
+    Choose a Comfortable Measure
   

       

       

diff --git a/src/templates/docs/text-transform/index.html b/src/templates/docs/text-transform/index.html
index e19f0842f..0b6cc3627 100644
--- a/src/templates/docs/text-transform/index.html
+++ b/src/templates/docs/text-transform/index.html
@@ -52,7 +52,22 @@ 
TEXT Transform none

 .ttn
   
Uppercase with tracking

 .ttu tracked
+

+  

+    
Previous

+    Text Align
+  

+  

+    
Next

+    Text Decoration
+  

+  

+    
Reference

+    MDN - Text Transform
+  

 

+

+
       

 

         src/_text-transform.css
@@ -62,10 +77,10 @@ 
Uppercase with tracking

 <%= srcCSS  %>
 
 

-      

-      <%= navDocs %>
-    
-    <%= siteFooter %>
-    <%= googleAnalytics  %>
+

+<%= navDocs %>
+
+<%= siteFooter %>
+<%= googleAnalytics  %>
   
 
diff --git a/src/templates/docs/type-scale/index.html b/src/templates/docs/type-scale/index.html
index f9f54392f..9ffcaf8dc 100644
--- a/src/templates/docs/type-scale/index.html
+++ b/src/templates/docs/type-scale/index.html
@@ -143,11 +143,11 @@ 
Examples

   

     

       
Previous

-      Images
+      Forms
     

     

       
Next

-      Measure
+      Measure
     

   

   

diff --git a/src/templates/docs/vertical-align/index.html b/src/templates/docs/vertical-align/index.html
index 91cbf01f9..f44e1e21a 100644
--- a/src/templates/docs/vertical-align/index.html
+++ b/src/templates/docs/vertical-align/index.html
@@ -95,7 +95,7 @@ 
Table Alignment

   

     

       
Previous

-      Font Family
+      Font Style
     

     

       
Next

diff --git a/src/templates/docs/white-space/index.html b/src/templates/docs/white-space/index.html
index d539a06a0..c6fc3535e 100644
--- a/src/templates/docs/white-space/index.html
+++ b/src/templates/docs/white-space/index.html
@@ -102,11 +102,11 @@ 
.pre

   

     

       
Previous

-      Text Decoration
+      Text Transform
     

     

       
Next

-      Box Sizing
+      Debug
     

   

   


From c8d7bb82c9ebe0910458381bb6b8852bf6b01c94 Mon Sep 17 00:00:00 2001
From: Donielle Berg 
Date: Tue, 22 Mar 2016 16:30:09 -0700
Subject: [PATCH 3/4] Fix "Previous" and "Next" ordering on Layout & Theming
 Docs

---
 src/templates/docs/border-radius/index.html | 2 +-
 src/templates/docs/box-sizing/index.html    | 2 +-
 src/templates/docs/debug/index.html         | 6 +++++-
 src/templates/docs/display/index.html       | 2 +-
 src/templates/docs/hovers/index.html        | 2 +-
 src/templates/docs/position/index.html      | 2 +-
 src/templates/docs/skins/index.html         | 4 ++--
 src/templates/docs/white-space/index.html   | 4 ++--
 8 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/templates/docs/border-radius/index.html b/src/templates/docs/border-radius/index.html
index 8a314ea77..4088660cd 100644
--- a/src/templates/docs/border-radius/index.html
+++ b/src/templates/docs/border-radius/index.html
@@ -69,7 +69,7 @@ 
Previous

     

     

       
Next

-      Debugging
+      Images
     

   

   

diff --git a/src/templates/docs/box-sizing/index.html b/src/templates/docs/box-sizing/index.html
index 620d3de83..4fb63eef5 100644
--- a/src/templates/docs/box-sizing/index.html
+++ b/src/templates/docs/box-sizing/index.html
@@ -66,7 +66,7 @@ 
Border Box with no padding or border

   

     

       
Previous

-      White Space
+      Debugging
     

     

       
Next

diff --git a/src/templates/docs/debug/index.html b/src/templates/docs/debug/index.html
index f2a83ea66..b3f3aba41 100644
--- a/src/templates/docs/debug/index.html
+++ b/src/templates/docs/debug/index.html
@@ -249,8 +249,12 @@ 
Debug All

   

 

   

+    

+      
Previous

+      White Space
+    

     
Next

-    Images
+    Box Sizing
   

   

     
Reference

diff --git a/src/templates/docs/display/index.html b/src/templates/docs/display/index.html
index 7381aab1c..fb018797e 100644
--- a/src/templates/docs/display/index.html
+++ b/src/templates/docs/display/index.html
@@ -137,7 +137,7 @@ 
Display None

   

     

       
Previous

-      Floats
+      Clearfix
     

     

       
Next

diff --git a/src/templates/docs/hovers/index.html b/src/templates/docs/hovers/index.html
index a2df48175..fa2f0e5e0 100644
--- a/src/templates/docs/hovers/index.html
+++ b/src/templates/docs/hovers/index.html
@@ -64,7 +64,7 @@ 
Reveal Children on Hover

   

     

       
Previous

-      Position
+      Skins
     

     

       
Next

diff --git a/src/templates/docs/position/index.html b/src/templates/docs/position/index.html
index f8f1d20e0..c292c7515 100644
--- a/src/templates/docs/position/index.html
+++ b/src/templates/docs/position/index.html
@@ -100,7 +100,7 @@ 
Previous

     

     

       
Next

-      Hovers
+      Skins
     

   

   

diff --git a/src/templates/docs/skins/index.html b/src/templates/docs/skins/index.html
index ea528fd17..a46840be1 100644
--- a/src/templates/docs/skins/index.html
+++ b/src/templates/docs/skins/index.html
@@ -72,11 +72,11 @@ 
Combinations

   

     

       
Previous

-      Borders
+      Position
     

     

       
Next

-      Debugging
+      Hovers
     

   

   

diff --git a/src/templates/docs/white-space/index.html b/src/templates/docs/white-space/index.html
index c6fc3535e..32b77a62c 100644
--- a/src/templates/docs/white-space/index.html
+++ b/src/templates/docs/white-space/index.html
@@ -102,11 +102,11 @@ 
.pre

   

     

       
Previous

-      Text Transform
+      Text Decoration
     

     

       
Next

-      Debug
+      Debugging
     

   

   


From ceb0da3329490f92125c68f4d9917d8492d005ce Mon Sep 17 00:00:00 2001
From: Donielle Berg 
Date: Tue, 22 Mar 2016 21:24:51 -0700
Subject: [PATCH 4/4] Clean up Debug index.html code and add missing modules to
 script.sh

* added to script.sh: debug, font-style, and forms
* removed extra closing tags and added proper indentation for
src/templates/docs/debug/index.html file
---
 script.sh                           |   3 +
 src/templates/docs/debug/index.html | 464 ++++++++++++++--------------
 2 files changed, 233 insertions(+), 234 deletions(-)

diff --git a/script.sh b/script.sh
index d7115d73f..ce7a59b22 100644
--- a/script.sh
+++ b/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"
diff --git a/src/templates/docs/debug/index.html b/src/templates/docs/debug/index.html
index b3f3aba41..3bf21f25a 100644
--- a/src/templates/docs/debug/index.html
+++ b/src/templates/docs/debug/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 %>

+          

         

         

           Tachyons comes with two convenient modules to help debug layout issues you might be having.
@@ -55,244 +55,240 @@ 
<%= name %>

           To use it, uncomment out that line and then run node run build from the root of the project.
         

       

-    

-

-  
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% 

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

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

-    
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% 

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

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

+          
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%
+            

+            

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

+            

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

+            

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

+          

+          

+            

+              This is a form legend
+              
+            

+            

+          

+        

+        
Debug All

+        

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

-      

-      

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

-      

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

-      

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

-      

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

-    

-    

-      

-        This is a form legend
-        
-      

-      

-    

-  

-  
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% 

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

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

-    
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%
-      

-      

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

-      

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

-      

-        This is a floated element set to width: 25%
+          .debug-all body {        outline: 1px solid  #2980B9!important; }
+          .debug-all article {     outline: 1px solid  #3498DB!important; }
+          .debug-all nav {         outline: 1px solid  #0088C3!important; }
+          .debug-all aside {       outline: 1px solid  #33A0CE!important; }
+          .debug-all section {     outline: 1px solid  #66B8DA!important; }
+          .debug-all header {      outline: 1px solid  #99CFE7!important; }
+          .debug-all footer {      outline: 1px solid  #CCE7F3!important; }
+          .debug-all h1 {          outline: 1px solid  #162544!important; }
+          .debug-all h2 {          outline: 1px solid  #314E6E!important; }
+          .debug-all h3 {          outline: 1px solid  #3E5E85!important; }
+          .debug-all h4 {          outline: 1px solid  #449BAF!important; }
+          .debug-all h5 {          outline: 1px solid  #C7D1CB!important; }
+          .debug-all h6 {          outline: 1px solid  #4371D0!important; }
+          .debug-all main {        outline: 1px solid  #2F4F90!important; }
+          .debug-all address {     outline: 1px solid  #1A2C51!important; }
+          .debug-all div {         outline: 1px solid  #036CDB!important; }
+          .debug-all p {           outline: 1px solid  #AC050B!important; }
+          .debug-all hr {          outline: 1px solid  #FF063F!important; }
+          .debug-all pre {         outline: 1px solid  #850440!important; }
+          .debug-all blockquote {  outline: 1px solid  #F1B8E7!important; }
+          .debug-all ol {          outline: 1px solid  #FF050C!important; }
+          .debug-all ul {          outline: 1px solid  #D90416!important; }
+          .debug-all li {          outline: 1px solid  #D90416!important; }
+          .debug-all dl {          outline: 1px solid  #FD3427!important; }
+          .debug-all dt {          outline: 1px solid  #FF0043!important; }
+          .debug-all dd {          outline: 1px solid  #E80174!important; }
+          .debug-all figure {      outline: 1px solid  #FF00BB!important; }
+          .debug-all figcaption {  outline: 1px solid  #BF0032!important; }
+          .debug-all table {       outline: 1px solid  #00CC99!important; }
+          .debug-all caption {     outline: 1px solid  #37FFC4!important; }
+          .debug-all thead {       outline: 1px solid  #98DACA!important; }
+          .debug-all tbody {       outline: 1px solid  #64A7A0!important; }
+          .debug-all tfoot {       outline: 1px solid  #22746B!important; }
+          .debug-all tr {          outline: 1px solid  #86C0B2!important; }
+          .debug-all th {          outline: 1px solid  #A1E7D6!important; }
+          .debug-all td {          outline: 1px solid  #3F5A54!important; }
+          .debug-all col {         outline: 1px solid  #6C9A8F!important; }
+          .debug-all colgroup {    outline: 1px solid  #6C9A9D!important; }
+          .debug-all button {      outline: 1px solid  #DA8301!important; }
+          .debug-all datalist {    outline: 1px solid  #C06000!important; }
+          .debug-all fieldset {    outline: 1px solid  #D95100!important; }
+          .debug-all form {        outline: 1px solid  #D23600!important; }
+          .debug-all input {       outline: 1px solid  #FCA600!important; }
+          .debug-all keygen {      outline: 1px solid  #B31E00!important; }
+          .debug-all label {       outline: 1px solid  #EE8900!important; }
+          .debug-all legend {      outline: 1px solid  #DE6D00!important; }
+          .debug-all meter {       outline: 1px solid  #E8630C!important; }
+          .debug-all optgroup {    outline: 1px solid  #B33600!important; }
+          .debug-all option {      outline: 1px solid  #FF8A00!important; }
+          .debug-all output {      outline: 1px solid  #FF9619!important; }
+          .debug-all progress {    outline: 1px solid  #E57C00!important; }
+          .debug-all select {      outline: 1px solid  #E26E0F!important; }
+          .debug-all textarea {    outline: 1px solid  #CC5400!important; }
+          .debug-all details {     outline: 1px solid  #33848F!important; }
+          .debug-all summary {     outline: 1px solid  #60A1A6!important; }
+          .debug-all command {     outline: 1px solid  #438DA1!important; }
+          .debug-all menu {        outline: 1px solid  #449DA6!important; }
+          .debug-all del {         outline: 1px solid  #BF0000!important; }
+          .debug-all ins {         outline: 1px solid  #400000!important; }
+          .debug-all img     {     outline: 1px solid #22746B!important; }
+          .debug-all iframe  {     outline: 1px solid #64A7A0!important; }
+          .debug-all embed   {     outline: 1px solid #98DACA!important; }
+          .debug-all object  {     outline: 1px solid #00CC99!important; }
+          .debug-all param   {     outline: 1px solid #37FFC4!important; }
+          .debug-all video   {     outline: 1px solid #6EE866!important; }
+          .debug-all audio   {     outline: 1px solid #027353!important; }
+          .debug-all source  {     outline: 1px solid #012426!important; }
+          .debug-all canvas  {     outline: 1px solid #A2F570!important; }
+          .debug-all track   {     outline: 1px solid #59A600!important; }
+          .debug-all map     {     outline: 1px solid #7BE500!important; }
+          .debug-all area    {     outline: 1px solid #305900!important; }
+          .debug-all a {           outline: 1px solid #FF62AB!important; }
+          .debug-all em {          outline: 1px solid #800B41!important; }
+          .debug-all strong {      outline: 1px solid #FF1583!important; }
+          .debug-all i {           outline: 1px solid #803156!important; }
+          .debug-all b {           outline: 1px solid #CC1169!important; }
+          .debug-all u {           outline: 1px solid #FF0430!important; }
+          .debug-all s {           outline: 1px solid #F805E3!important; }
+          .debug-all small {       outline: 1px solid #D107B2!important; }
+          .debug-all abbr {        outline: 1px solid #4A0263!important; }
+          .debug-all q {           outline: 1px solid #240018!important; }
+          .debug-all cite {        outline: 1px solid #64003C!important; }
+          .debug-all dfn {         outline: 1px solid #B4005A!important; }
+          .debug-all sub {         outline: 1px solid #DBA0C8!important; }
+          .debug-all sup {         outline: 1px solid #CC0256!important; }
+          .debug-all time {        outline: 1px solid #D6606D!important; }
+          .debug-all code {        outline: 1px solid #E04251!important; }
+          .debug-all kbd {         outline: 1px solid #5E001F!important; }
+          .debug-all samp {        outline: 1px solid #9C0033!important; }
+          .debug-all var {         outline: 1px solid #D90047!important; }
+          .debug-all mark {        outline: 1px solid #FF0053!important; }
+          .debug-all bdi {         outline: 1px solid #BF3668!important; }
+          .debug-all bdo {         outline: 1px solid #6F1400!important; }
+          .debug-all ruby {        outline: 1px solid #FF7B93!important; }
+          .debug-all rt {          outline: 1px solid #FF2F54!important; }
+          .debug-all rp {          outline: 1px solid #803E49!important; }
+          .debug-all span {        outline: 1px solid #CC2643!important; }
+          .debug-all br {          outline: 1px solid #DB687D!important; }
+          .debug-all wbr {         outline: 1px solid #DB175B!important; }
+        
+        

+          

+            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% 

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

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

+          
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%
+            

+            

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

+            

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

+            

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

+          

+          

+            

+              This is a form legend
+              
+            

+            

+          

+        

+        

+          

+            
Previous

+            White Space
+          

+          

+            
Next

+            Box Sizing
+          

+        

+        

+          
Reference

+          MDN - Outline
+        

       

-    

-    

-      

-        This is a form legend
-        
-      

-      

-    

-  

-
-

       

-

-        src/_debug-children.css
-

+        

+          src/_debug-children.css
+        

 
 
-  /*
-
-    DEBUG CHILDREN
+/*
 
-  */
+  DEBUG CHILDREN
 
-  .debug * { outline: 1px solid gold; }
+*/
 
+.debug * { outline: 1px solid gold; }
 
 

       

       

-

-        src/_debug.css
-

-
-
-  <%= srcCSS %>
-
-

+        

+          src/_debug.css
+        

+        
+          
+            <%= srcCSS %>
+          
+        

       

       <%= navDocs  %>
     

     <%= siteFooter  %>
     <%= googleAnalytics  %>
-