From 1b3929a4db0b7ad33f506cd188f63818e4a1066d Mon Sep 17 00:00:00 2001 From: Donielle Berg Date: Sat, 19 Mar 2016 19:04:03 -0700 Subject: [PATCH 1/8] Add alt text to images in Components & Docs Changed files in `src/` this time. --- src/components/articles/title-text-image.html | 2 +- src/components/collections/product-card.html | 2 +- src/components/headers/circle-avatar-title-subtitle.html | 2 +- src/components/headers/rounded-avatar-title-subtitle.html | 2 +- src/components/layout/four-column-collapse-two.html | 8 ++++---- src/templates/docs/floats/index.html | 2 +- src/templates/docs/images/index.html | 8 ++++---- 7 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/components/articles/title-text-image.html b/src/components/articles/title-text-image.html index b54402146..94b7dbcb8 100644 --- a/src/components/articles/title-text-image.html +++ b/src/components/articles/title-text-image.html @@ -3,7 +3,7 @@ }}}

Title Text with Image

- + outer space

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 diff --git a/src/components/collections/product-card.html b/src/components/collections/product-card.html index a414a5bb6..67a35a333 100644 --- a/src/components/collections/product-card.html +++ b/src/components/collections/product-card.html @@ -2,7 +2,7 @@ "bodyClass" : "bg-white" }}}

- + kitty
diff --git a/src/components/headers/circle-avatar-title-subtitle.html b/src/components/headers/circle-avatar-title-subtitle.html index df22f87fc..b63c91975 100644 --- a/src/components/headers/circle-avatar-title-subtitle.html +++ b/src/components/headers/circle-avatar-title-subtitle.html @@ -2,7 +2,7 @@ "bodyClass" : "bg-white" }}}
- + avatar

Jasper Whitehouse

Los Angeles

diff --git a/src/components/headers/rounded-avatar-title-subtitle.html b/src/components/headers/rounded-avatar-title-subtitle.html index 7e44d367e..22914c0c9 100644 --- a/src/components/headers/rounded-avatar-title-subtitle.html +++ b/src/components/headers/rounded-avatar-title-subtitle.html @@ -2,7 +2,7 @@ "bodyClass" : "bg-white" }}}
- + avatar

Jasper Whitehouse

Los Angeles

diff --git a/src/components/layout/four-column-collapse-two.html b/src/components/layout/four-column-collapse-two.html index 920329f0a..8f9c43284 100644 --- a/src/components/layout/four-column-collapse-two.html +++ b/src/components/layout/four-column-collapse-two.html @@ -2,10 +2,10 @@ "bodyClass" : "bg-white" }}}
-
-
-
-
+
night sky over house
+
night sky over water
+
bay bridge at night
+
night sky over land
diff --git a/src/templates/docs/floats/index.html b/src/templates/docs/floats/index.html index af755eeed..08b1ffe15 100644 --- a/src/templates/docs/floats/index.html +++ b/src/templates/docs/floats/index.html @@ -62,7 +62,7 @@

Float None

Float With Images

Originally floats were used to wrap text around images as in the example below.

- + example 1

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 diff --git a/src/templates/docs/images/index.html b/src/templates/docs/images/index.html index 8a7cb47f6..6a18f5ef8 100644 --- a/src/templates/docs/images/index.html +++ b/src/templates/docs/images/index.html @@ -20,12 +20,12 @@

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"> - + <img src="/img/over-canvas.jpg" class="w-100" alt="night sky over land"> + night sky over land

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"> - + <img src="/img/under-canvas.jpg" class="mw-100" alt="night sky over water"> + night sky over water

Previous

From de08a5ef2612f7dd051224cce3ae293407f4d5ca Mon Sep 17 00:00:00 2001 From: Donielle Berg Date: Tue, 22 Mar 2016 14:50:22 -0700 Subject: [PATCH 2/8] 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 3/8] 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 4/8] 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 bc5e600a78398583e6c0628d06eb14034204bfdd Mon Sep 17 00:00:00 2001 From: Donielle Berg Date: Tue, 22 Mar 2016 17:09:24 -0700 Subject: [PATCH 5/8] Add focus classes to Example Links Docs page --- src/templates/docs/links/index.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/templates/docs/links/index.html b/src/templates/docs/links/index.html index f95a64151..7ddcf1c31 100644 --- a/src/templates/docs/links/index.html +++ b/src/templates/docs/links/index.html @@ -45,11 +45,11 @@

<%= name %>

Examples

- Black link - Near-black link - Dark-gray link - Mid-gray link - Gray link + Black link + Near-black link + Dark-gray link + Mid-gray link + Gray link

From ceb0da3329490f92125c68f4d9917d8492d005ce Mon Sep 17 00:00:00 2001 From: Donielle Berg Date: Tue, 22 Mar 2016 21:24:51 -0700 Subject: [PATCH 6/8] 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 %> - From df26d32fe97ff2db3a18ddab67af49ed7e473143 Mon Sep 17 00:00:00 2001 From: Donielle Berg Date: Tue, 22 Mar 2016 22:32:21 -0700 Subject: [PATCH 7/8] Add proper indentation and remove accidental trailing s from Module Declarations on Doc pages --- docs/debug/index.html | 586 +++--- docs/elements/forms/index.html | 124 +- docs/elements/images/index.html | 94 +- docs/elements/links/index.html | 123 +- docs/elements/lists/index.html | 136 +- docs/layout/box-sizing/index.html | 132 +- docs/layout/clearfix/index.html | 153 +- docs/layout/display/index.html | 275 +-- docs/layout/floats/index.html | 148 +- docs/layout/heights/index.html | 223 +-- docs/layout/max-widths/index.html | 259 +-- docs/layout/position/index.html | 205 +- docs/layout/spacing/index.html | 377 ++-- docs/layout/widths/index.html | 254 +-- docs/themes/background-size/index.html | 132 +- docs/themes/border-radius/index.html | 154 +- docs/themes/borders/index.html | 733 ++++---- docs/themes/hovers/index.html | 149 +- docs/themes/skins/index.html | 1664 +++++++++-------- docs/typography/font-family/index.html | 146 +- docs/typography/font-style/index.html | 214 ++- docs/typography/font-weight/index.html | 138 +- docs/typography/line-height/index.html | 161 +- docs/typography/measure/index.html | 172 +- docs/typography/scale/index.html | 265 ++- docs/typography/text-align/index.html | 147 +- docs/typography/text-decoration/index.html | 126 +- docs/typography/text-transform/index.html | 117 +- docs/typography/tracking/index.html | 126 +- docs/typography/vertical-align/index.html | 206 +- docs/typography/white-space/index.html | 176 +- src/css/_clearfix.css | 6 +- src/templates/docs/background-size/index.html | 96 +- src/templates/docs/border-radius/index.html | 118 +- src/templates/docs/borders/index.html | 691 ++++--- src/templates/docs/box-sizing/index.html | 96 +- src/templates/docs/clearfix/index.html | 107 +- src/templates/docs/debug/index.html | 2 +- src/templates/docs/display/index.html | 239 ++- src/templates/docs/floats/index.html | 112 +- src/templates/docs/font-family/index.html | 110 +- src/templates/docs/font-style/index.html | 98 +- src/templates/docs/font-weight/index.html | 102 +- src/templates/docs/forms/index.html | 82 +- src/templates/docs/heights/index.html | 183 +- src/templates/docs/hovers/index.html | 113 +- src/templates/docs/images/index.html | 58 +- src/templates/docs/line-height/index.html | 125 +- src/templates/docs/links/index.html | 87 +- src/templates/docs/lists/index.html | 100 +- src/templates/docs/max-widths/index.html | 223 ++- src/templates/docs/measure/index.html | 134 +- src/templates/docs/opacity/index.html | 136 +- src/templates/docs/position/index.html | 165 +- src/templates/docs/skins/index.html | 132 +- src/templates/docs/spacing/index.html | 339 ++-- src/templates/docs/text-align/index.html | 111 +- src/templates/docs/text-decoration/index.html | 90 +- src/templates/docs/text-transform/index.html | 100 +- src/templates/docs/tracking/index.html | 86 +- src/templates/docs/type-scale/index.html | 229 ++- src/templates/docs/vertical-align/index.html | 168 +- src/templates/docs/white-space/index.html | 140 +- src/templates/docs/widths/index.html | 218 +-- 64 files changed, 6434 insertions(+), 6277 deletions(-) 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
-
-
-

Examples

-
- input-reset - -
-
-
-

Previous

- Position -
-
-

Next

- Background Size -
-
-
-

Reference

- MDN - Hover - MDN - Focus -
-
+
+

Examples

+
+ input-reset + +
+
+
+

Previous

+ Lists +
+
+

Next

+ Type Scale +
+
+
+

Reference

+ MDN - Hover + MDN - Focus +
+
-
- src/_links.css -
+
+ src/_links.css + 
 
 /*
@@ -132,7 +132,7 @@ 
Elements

       

         
Typography

         Type Scale
-        Measure
+        Measure
         Line Height / Leading
         Tracking
         Font Weights
@@ -170,29 +170,39 @@ 
Theming

 
 
     
-    

-

-  
Examples

-  

-    Black link
-    Near-black link
-    Dark-gray link
-    Mid-gray link
-    Gray link
-  

-  

-    

-      
Previous

-      Position
-    

-    

-      
Next

-      Background Size
-    

-  

-  

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

+      

 
 
 /*
@@ -198,22 +193,32 @@ 
Theming

     
     Tweet
   
+  

+    
+      Home
+    
+    
+      Docs
+    
+    
+      Components
+    
+  

   

     
     
   

-
-  

-    
+  

+    
       Join our Slack Channel
     
-    
+    
       Open an Issue
     
-    
+    
       GitHub
     
-  

+  

   

     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/docs/elements/lists/index.html b/docs/elements/lists/index.html
index 9baa59700..8d1d29905 100644
--- a/docs/elements/lists/index.html
+++ b/docs/elements/lists/index.html
@@ -20,31 +20,27 @@
     

   

     

-      
+      
         Tachyons
         

-          v4.0.0-beta.7
+          v4.0.0-beta.12
         

       
     

     

 
       
+         class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
         Docs
       
       
+         class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
         Components
       
       
+         class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dn dib-ns">
         GitHub
       
-      
-        Npm
-      
     

   

 

@@ -55,62 +51,62 @@ 
tachyons-lists

         v2.0.4
         46 B
         

-            

-              
Declarations 

-              
1

-            

-            

-              
Selectors 

-              
1

-            

-            

-              
Max. Specificity Score 

-              
10

-            

-            

-              
Size of Avg. Rule 

-              
1

-            

+          

+            
Declarations 

+            
1

+          

+          

+            
Selectors 

+            
1

+          

+          

+            
Max. Specificity Score 

+            
10

+          

+          

+            
Size of Avg. Rule 

+            
1

+          

         

         

           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"> -
    -
  1. One
    2. -
  2. Two
    3. -
  3. Three
    4. -
  4. Four
    5. -
-
-
-

Previous

- Links -
-
-

Next

- Forms -
-
-
-

Reference

- MDN - List Style Type -
-
+
+

Examples

+ <ul class="list pl0"> +
    +
  • Apples
    • +
  • Oranges
    • +
  • Banana
    • +
  • Golf balls
    • +
+ <ol class="list pl0"> +
    +
  1. One
    2. +
  2. Two
    3. +
  3. Three
    4. +
  4. Four
    5. +
+
+
+

Previous

+ Links +
+
+

Next

+ Forms +
+
+
+

Reference

+ MDN - List Style Type +
+
-
- src/_lists.css -
+
+ src/_lists.css + 
 
 /*
@@ -180,22 +176,32 @@ 
Theming

     
     Tweet
   
+  

+    
+      Home
+    
+    
+      Docs
+    
+    
+      Components
+    
+  

   

     
     
   

-
-  

-    
+  

+    
       Join our Slack Channel
     
-    
+    
       Open an Issue
     
-    
+    
       GitHub
     
-  

+  

   

     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/docs/layout/box-sizing/index.html b/docs/layout/box-sizing/index.html
index 11c5698d7..5ab537128 100644
--- a/docs/layout/box-sizing/index.html
+++ b/docs/layout/box-sizing/index.html
@@ -20,31 +20,27 @@
     

   

     

-      
+      
         Tachyons
         

-          v4.0.0-beta.7
+          v4.0.0-beta.12
         

       
     

     

 
       
+         class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
         Docs
       
       
+         class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
         Components
       
       
+         class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dn dib-ns">
         GitHub
       
-      
-        Npm
-      
     

   

 

@@ -55,22 +51,22 @@ 
tachyons-box-sizing

         v3.1.1
         156 B
         

-            

-              
Declarations 

-              
1

-            

-            

-              
Selectors 

-              
26

-            

-            

-              
Max. Specificity Score 

-              
11

-            

-            

-              
Size of Avg. Rule 

-              
1

-            

+          

+            
Declarations 

+            
1

+          

+          

+            
Selectors 

+            
26

+          

+          

+            
Max. Specificity Score 

+            
11

+          

+          

+            
Size of Avg. Rule 

+            
1

+          

         

         

           The box model has been known to trip up a few people. This module should make things a bit easier.
@@ -89,39 +85,39 @@ 
tachyons-box-sizing

           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

-      White Space
-    

-    

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

 
 
 /*
@@ -217,22 +213,32 @@ 
Theming

     
     Tweet
   
+  

+    
+      Home
+    
+    
+      Docs
+    
+    
+      Components
+    
+  

   

     
     
   

-
-  

-    
+  

+    
       Join our Slack Channel
     
-    
+    
       Open an Issue
     
-    
+    
       GitHub
     
-  

+  

   

     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/docs/layout/clearfix/index.html b/docs/layout/clearfix/index.html
index 71c1fa954..88d894ed2 100644
--- a/docs/layout/clearfix/index.html
+++ b/docs/layout/clearfix/index.html
@@ -20,31 +20,27 @@
     

   

     

-      
+      
         Tachyons
         

-          v4.0.0-beta.7
+          v4.0.0-beta.12
         

       
     

     

 
       
+         class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
         Docs
       
       
+         class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
         Components
       
       
+         class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dn dib-ns">
         GitHub
       
-      
-        Npm
-      
     

   

 

@@ -52,25 +48,25 @@
     

       

         
tachyons-clears

-        v2.0.4
-        92 B
+        v2.1.0
+        187 B
         

-            

-              
Declarations 

-              
4

-            

-            

-              
Selectors 

-              
4

-            

-            

-              
Max. Specificity Score 

-              
11

-            

-            

-              
Size of Avg. Rule 

-              
1.3333333333333333

-            

+          

+            
Declarations 

+            
16

+          

+          

+            
Selectors 

+            
16

+          

+          

+            
Max. Specificity Score 

+            
11

+          

+          

+            
Size of Avg. Rule 

+            
1.0666666666666667

+          

         

         

           When floats are used for layouts - they need a clearfix solution. This helps prevent
@@ -78,44 +74,44 @@ 
tachyons-clears

           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
+        

 
 
 /*
@@ -128,9 +124,9 @@ 
Reference

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

@@ -184,29 +180,39 @@ 
Theming

 
 
     

-