diff --git a/docs/debug/index.html b/docs/debug/index.html index 746fdedfe..d9dc9ed4f 100644 --- a/docs/debug/index.html +++ b/docs/debug/index.html @@ -1,41 +1,46 @@ - - Debugging / Docs / TACHYONS - - - + + + + + + +
- + Tachyons
- v4.0.0-beta-3 + v4.0.0-beta.12
+ class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib"> Docs + + Components + + class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dn dib-ns"> GitHub - - Npm -
@@ -43,25 +48,25 @@

tachyons-debug

- v1.1.1 + v1.1.2 902 B
-
-
Declarations
-
98
-
-
-
Selectors
-
99
-
-
-
Max. Specificity Score
-
1
-
-
-
Size of Avg. Rule
-
1
-
+
+
Declarations
+
98
+
+
+
Selectors
+
99
+
+
+
Max. Specificity Score
+
1
+
+
+
Size of Avg. Rule
+
1
+

Tachyons comes with two convenient modules to help debug layout issues you might be having. @@ -86,233 +91,234 @@

tachyons-debug

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

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

+

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.

+ +
+

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

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

+          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; }
 
 
-
-

+          
+
-

General

- Debugging - Images +

Elements

+ Images + Links + Lists + Forms
-
-