Title Text with Image

Module CSS Stats

Size (Gzipped)

-

293

+

177

Selectors

-

29

+

7

Declarations

-

29

+

7

CSS

Title

Module CSS Stats

Size (Gzipped)

-

222

+

143

Selectors

-

17

+

4

Declarations

-

17

+

4

CSS

Module CSS Stats

Size (Gzipped)

-

573

+

335

Selectors

-

66

+

18

Declarations

-

73

+

22

CSS

CSS

CSS

Module CSS Stats

Size (Gzipped)

-

437

+

247

Selectors

-

47

+

10

Declarations

-

50

+

13

CSS

CSS

Column Two

Module CSS Stats

Size (Gzipped)

-

307

+

204

Selectors

-

19

+

7

Declarations

-

23

+

8

HTML

CSS

.cf:before, .cf:after {
-    content: " ";
-    display: table;
-}
-
-.cf:after {
-    clear: both;
-}
-
-.cf {
+  
.cf {
     *zoom: 1;
 }
 
@@ -94,52 +85,9 @@ 
CSS
 }
 
 @media screen and (min-width: 48em) {
-    .fl-ns {
-        float: left;
-        display: inline;
-    }
-
     .w-50-ns {
         width: 50%;
     }
-
-    .w-100-ns {
-        width: 100%;
-    }
-
-    .tc-ns {
-        text-align: center;
-    }
-}
-
-@media screen and (min-width: 48em) and (max-width: 64em) {
-    .fl-m {
-        float: left;
-        display: inline;
-    }
-
-    .w-100-m {
-        width: 100%;
-    }
-
-    .tc-m {
-        text-align: center;
-    }
-}
-
-@media screen and (min-width: 64em) {
-    .fl-l {
-        float: left;
-        display: inline;
-    }
-
-    .w-100-l {
-        width: 100%;
-    }
-
-    .tc-l {
-        text-align: center;
-    }
 }
 
   
diff --git a/components/layout/two-column/index.html b/components/layout/two-column/index.html
index d36d6d6d5..8cf79d016 100644
--- a/components/layout/two-column/index.html
+++ b/components/layout/two-column/index.html
@@ -31,15 +31,15 @@ 
Column Two
   
Module CSS Stats
   

     
Size (Gzipped)
-    
294
+    
161
   
   

     
Selectors
-    
18
+    
6
   
   

     
Declarations
-    
22
+    
7
   
 
 
@@ -59,16 +59,7 @@ 
HTML
 
 

CSS

.cf:before, .cf:after {
-    content: " ";
-    display: table;
-}
-
-.cf:after {
-    clear: both;
-}
-
-.cf {
+  
.cf {
     *zoom: 1;
 }
 
@@ -93,51 +84,6 @@ 
CSS
     text-align: center;
 }
 
-@media screen and (min-width: 48em) {
-    .fl-ns {
-        float: left;
-        display: inline;
-    }
-
-    .w-50-ns {
-        width: 50%;
-    }
-
-    .tc-ns {
-        text-align: center;
-    }
-}
-
-@media screen and (min-width: 48em) and (max-width: 64em) {
-    .fl-m {
-        float: left;
-        display: inline;
-    }
-
-    .w-50-m {
-        width: 50%;
-    }
-
-    .tc-m {
-        text-align: center;
-    }
-}
-
-@media screen and (min-width: 64em) {
-    .fl-l {
-        float: left;
-        display: inline;
-    }
-
-    .w-50-l {
-        width: 50%;
-    }
-
-    .tc-l {
-        text-align: center;
-    }
-}
-
   
 
   
Modules
diff --git a/components/nav/large-title-link-list/index.html b/components/nav/large-title-link-list/index.html
index 11c6a28fc..be204236e 100644
--- a/components/nav/large-title-link-list/index.html
+++ b/components/nav/large-title-link-list/index.html
@@ -30,15 +30,15 @@
   
Module CSS Stats
   

     
Size (Gzipped)
-    
1842
+    
313
   
   

     
Selectors
-    
266
+    
18
   
   

     
Declarations
-    
288
+    
20
   
 
 
@@ -57,268 +57,7 @@ 
HTML
 
 

CSS

.border-box {
-    box-sizing: border-box;
-}
-
-.bg-cv {
-    background-size: cover;
-}
-
-.bg-cn {
-    background-size: contain;
-}
-
-.ba {
-    border-style: solid;
-    border-width: 1px;
-}
-
-.bt {
-    border-top-style: solid;
-    border-top-width: 1px;
-}
-
-.br {
-    border-right-style: solid;
-    border-right-width: 1px;
-}
-
-.bb {
-    border-bottom-style: solid;
-    border-bottom-width: 1px;
-}
-
-.bl {
-    border-left-style: solid;
-    border-left-width: 1px;
-}
-
-.b--black {
-    border-color: #111;
-}
-
-.b--near-black {
-    border-color: #111;
-}
-
-.b--dark-gray {
-    border-color: #333;
-}
-
-.b--mid-gray {
-    border-color: #555;
-}
-
-.b--gray {
-    border-color: #777;
-}
-
-.b--silver {
-    border-color: #999;
-}
-
-.b--light-silver {
-    border-color: #aaa;
-}
-
-.b--light-gray {
-    border-color: #eee;
-}
-
-.b--near-white {
-    border-color: #f4f4f4;
-}
-
-.b--white {
-    border-color: #fff;
-}
-
-.b--white-90 {
-    border-color: rgba(255, 255, 255, .9);
-}
-
-.b--white-80 {
-    border-color: rgba(255, 255, 255, .8);
-}
-
-.b--white-70 {
-    border-color: rgba(255, 255, 255, .7);
-}
-
-.b--white-60 {
-    border-color: rgba(255, 255, 255, .6);
-}
-
-.b--white-50 {
-    border-color: rgba(255, 255, 255, .5);
-}
-
-.b--white-40 {
-    border-color: rgba(255, 255, 255, .4);
-}
-
-.b--white-30 {
-    border-color: rgba(255, 255, 255, .3);
-}
-
-.b--white-20 {
-    border-color: rgba(255, 255, 255, .2);
-}
-
-.b--white-10 {
-    border-color: rgba(255, 255, 255, .1);
-}
-
-.b--white-05 {
-    border-color: rgba(255, 255, 255, .05);
-}
-
-.b--white-025 {
-    border-color: rgba(255, 255, 255, .025);
-}
-
-.b--white-0125 {
-    border-color: rgba(255, 255, 255, .0125);
-}
-
-.b--black-90 {
-    border-color: rgba(0, 0, 0, .9);
-}
-
-.b--black-80 {
-    border-color: rgba(0, 0, 0, .8);
-}
-
-.b--black-70 {
-    border-color: rgba(0, 0, 0, .7);
-}
-
-.b--black-60 {
-    border-color: rgba(0, 0, 0, .6);
-}
-
-.b--black-50 {
-    border-color: rgba(0, 0, 0, .5);
-}
-
-.b--black-40 {
-    border-color: rgba(0, 0, 0, .4);
-}
-
-.b--black-30 {
-    border-color: rgba(0, 0, 0, .3);
-}
-
-.b--black-20 {
-    border-color: rgba(0, 0, 0, .2);
-}
-
-.b--black-10 {
-    border-color: rgba(0, 0, 0, .1);
-}
-
-.b--black-05 {
-    border-color: rgba(0, 0, 0, .05);
-}
-
-.b--black-025 {
-    border-color: rgba(0, 0, 0, .025);
-}
-
-.b--black-0125 {
-    border-color: rgba(0, 0, 0, .0125);
-}
-
-.b--transparent {
-    border-color: transprent;
-}
-
-.br0 {
-    border-radius: 0;
-}
-
-.br1 {
-    border-radius: .125rem;
-}
-
-.br2 {
-    border-radius: .25rem;
-}
-
-.br3 {
-    border-radius: .5rem;
-}
-
-.br4 {
-    border-radius: 1rem;
-}
-
-.br-100 {
-    border-radius: 100%;
-}
-
-.b--none {
-    border-style: none;
-}
-
-.b--dotted {
-    border-style: dotted;
-}
-
-.b--dashed {
-    border-style: dashed;
-}
-
-.b--solid {
-    border-style: solid;
-}
-
-.bw0 {
-    border-width: 0;
-}
-
-.bw1 {
-    border-width: .125rem;
-}
-
-.bw2 {
-    border-width: .25rem;
-}
-
-.bw3 {
-    border-width: .5rem;
-}
-
-.bw4 {
-    border-width: 1rem;
-}
-
-.bw5 {
-    border-width: 2rem;
-}
-
-.bottom-0 {
-    bottom: 0;
-}
-
-.bottom-1 {
-    bottom: 1rem;
-}
-
-.bottom-2 {
-    bottom: 2rem;
-}
-
-.bottom--1 {
-    bottom: -1rem;
-}
-
-.bottom--2 {
-    bottom: -2rem;
-}
-
-.db {
+  
.db {
     display: block;
 }
 
@@ -326,10 +65,6 @@ 
CSS
     display: inline-block;
 }
 
-.bodoni {
-    font-family: "Bodoni MT", serif;
-}
-
 .b {
     font-weight: bold;
 }
@@ -339,138 +74,6 @@ 
CSS
     transition: color .15s ease-in;
 }
 
-.link:link, .link:visited {
-    transition: color .15s ease-in;
-}
-
-.link:hover {
-    transition: color .15s ease-in;
-}
-
-.link:active {
-    transition: color .15s ease-in;
-}
-
-.link:focus {
-    transition: color .15s ease-in;
-}
-
-.black-90 {
-    color: rgba(0, 0, 0, .9);
-}
-
-.black-80 {
-    color: rgba(0, 0, 0, .8);
-}
-
-.black-70 {
-    color: rgba(0, 0, 0, .7);
-}
-
-.black-60 {
-    color: rgba(0, 0, 0, .6);
-}
-
-.black-50 {
-    color: rgba(0, 0, 0, .5);
-}
-
-.black-40 {
-    color: rgba(0, 0, 0, .4);
-}
-
-.black-30 {
-    color: rgba(0, 0, 0, .3);
-}
-
-.black-20 {
-    color: rgba(0, 0, 0, .2);
-}
-
-.black-10 {
-    color: rgba(0, 0, 0, .1);
-}
-
-.black-05 {
-    color: rgba(0, 0, 0, .05);
-}
-
-.bg-black-90 {
-    background-color: rgba(0, 0, 0, .9);
-}
-
-.bg-black-80 {
-    background-color: rgba(0, 0, 0, .8);
-}
-
-.bg-black-70 {
-    background-color: rgba(0, 0, 0, .7);
-}
-
-.bg-black-60 {
-    background-color: rgba(0, 0, 0, .6);
-}
-
-.bg-black-50 {
-    background-color: rgba(0, 0, 0, .5);
-}
-
-.bg-black-40 {
-    background-color: rgba(0, 0, 0, .4);
-}
-
-.bg-black-30 {
-    background-color: rgba(0, 0, 0, .3);
-}
-
-.bg-black-20 {
-    background-color: rgba(0, 0, 0, .2);
-}
-
-.bg-black-10 {
-    background-color: rgba(0, 0, 0, .1);
-}
-
-.bg-black-05 {
-    background-color: rgba(0, 0, 0, .05);
-}
-
-.bg-white-90 {
-    background-color: rgba(255, 255, 255, .9);
-}
-
-.bg-white-80 {
-    background-color: rgba(255, 255, 255, .8);
-}
-
-.bg-white-70 {
-    background-color: rgba(255, 255, 255, .7);
-}
-
-.bg-white-60 {
-    background-color: rgba(255, 255, 255, .6);
-}
-
-.bg-white-50 {
-    background-color: rgba(255, 255, 255, .5);
-}
-
-.bg-white-40 {
-    background-color: rgba(255, 255, 255, .4);
-}
-
-.bg-white-30 {
-    background-color: rgba(255, 255, 255, .3);
-}
-
-.bg-white-20 {
-    background-color: rgba(255, 255, 255, .2);
-}
-
-.bg-white-10 {
-    background-color: rgba(255, 255, 255, .1);
-}
-
 .black {
     color: #111;
 }
@@ -479,134 +82,6 @@ 
CSS
     color: #777;
 }
 
-.bg-black {
-    background-color: #111;
-}
-
-.bg-near-black {
-    background-color: #111;
-}
-
-.bg-dark-gray {
-    background-color: #333;
-}
-
-.bg-mid-gray {
-    background-color: #555;
-}
-
-.bg-gray {
-    background-color: #777;
-}
-
-.bg-silver {
-    background-color: #999;
-}
-
-.bg-light-silver {
-    background-color: #aaa;
-}
-
-.bg-light-gray {
-    background-color: #eee;
-}
-
-.bg-near-white {
-    background-color: #f4f4f4;
-}
-
-.bg-white {
-    background-color: #fff;
-}
-
-.bg-focus-black:focus {
-    background-color: #111;
-}
-
-.bg-focus-near-black:focus {
-    background-color: #111;
-}
-
-.bg-focus-dark-gray:focus {
-    background-color: #333;
-}
-
-.bg-focus-mid-gray:focus {
-    background-color: #555;
-}
-
-.bg-focus-gray:focus {
-    background-color: #777;
-}
-
-.bg-focus-silver:focus {
-    background-color: #999;
-}
-
-.bg-focus-light-silver:focus {
-    background-color: #aaa;
-}
-
-.bg-focus-moon-gray:focus {
-    background-color: #ccc;
-}
-
-.bg-focus-light-gray:focus {
-    background-color: #eee;
-}
-
-.bg-focus-near-white:focus {
-    background-color: #f4f4f4;
-}
-
-.bg-focus-white:focus {
-    background-color: #fff;
-}
-
-.bg-hover-black:hover {
-    background-color: #111;
-}
-
-.bg-hover-near-black:hover {
-    background-color: #111;
-}
-
-.bg-hover-dark-gray:hover {
-    background-color: #333;
-}
-
-.bg-hover-mid-gray:hover {
-    background-color: #555;
-}
-
-.bg-hover-gray:hover {
-    background-color: #777;
-}
-
-.bg-hover-silver:hover {
-    background-color: #999;
-}
-
-.bg-hover-light-silver:hover {
-    background-color: #aaa;
-}
-
-.bg-hover-moon-gray:hover {
-    background-color: #ccc;
-}
-
-.bg-hover-light-gray:hover {
-    background-color: #eee;
-}
-
-.bg-hover-near-white:hover {
-    background-color: #f4f4f4;
-}
-
-.bg-hover-white:hover {
-    background-color: #fff;
-}
-
 .pa3 {
     padding: 1rem;
 }
@@ -640,507 +115,22 @@ 
CSS
     transition: opacity .15s ease-in;
 }
 
-.dim:hover, .dim:focus {
-    opacity: .5;
-    transition: opacity .15s ease-in;
-}
-
-.dim:active {
-    opacity: .8;
-    transition: opacity .15s ease-out;
-}
-
 @media screen and (min-width: 48em) {
-    .bg-cv-ns {
-        background-size: cover;
-    }
-
-    .bg-cn-ns {
-        background-size: contain;
-    }
-
-    .ba-ns {
-        border-style: solid;
-        border-width: 1px;
-    }
-
-    .bt-ns {
-        border-top-style: solid;
-        border-top-width: 1px;
-    }
-
-    .br-ns {
-        border-right-style: solid;
-        border-right-width: 1px;
-    }
-
-    .bb-ns {
-        border-bottom-style: solid;
-        border-bottom-width: 1px;
-    }
-
-    .bl-ns {
-        border-left-style: solid;
-        border-left-width: 1px;
-    }
-
-    .br0-ns {
-        border-radius: 0;
-    }
-
-    .br1-ns {
-        border-radius: .125rem;
-    }
-
-    .br2-ns {
-        border-radius: .25rem;
-    }
-
-    .br3-ns {
-        border-radius: .5rem;
-    }
-
-    .br4-ns {
-        border-radius: 1rem;
-    }
-
-    .br-100-ns {
-        border-radius: 100%;
-    }
-
-    .b--none-ns {
-        border-style: none;
-    }
-
-    .b--dotted-ns {
-        border-style: dotted;
-    }
-
-    .b--dashed-ns {
-        border-style: dashed;
-    }
-
-    .b--solid-ns {
-        border-style: solid;
-    }
-
-    .bw0-ns {
-        border-width: 0;
-    }
-
-    .bw1-ns {
-        border-width: .125rem;
-    }
-
-    .bw2-ns {
-        border-width: .25rem;
-    }
-
-    .bw3-ns {
-        border-width: .5rem;
-    }
-
-    .bw4-ns {
-        border-width: 1rem;
-    }
-
-    .bw5-ns {
-        border-width: 2rem;
-    }
-
-    .bottom-0-ns {
-        bottom: 0;
-    }
-
-    .bottom-1-ns {
-        bottom: 1rem;
-    }
-
-    .bottom-2-ns {
-        bottom: 2rem;
-    }
-
-    .bottom--1-ns {
-        bottom: -1rem;
-    }
-
-    .bottom--2-ns {
-        bottom: -2rem;
-    }
-
-    .db-ns {
-        display: block;
-    }
-
-    .dib-ns {
-        display: inline-block;
-    }
-
-    .b-ns {
-        font-weight: bold;
-    }
-
-    .pa3-ns {
-        padding: 1rem;
-    }
-
     .pa4-ns {
         padding: 2rem;
     }
 
-    .pb3-ns {
-        padding-bottom: 1rem;
-    }
-
-    .mr3-ns {
-        margin-right: 1rem;
-    }
-
-    .mb3-ns {
-        margin-bottom: 1rem;
-    }
-
     .mb4-ns {
         margin-bottom: 2rem;
     }
 
-    .tc-ns {
-        text-align: center;
-    }
-
     .f-headline-ns {
         font-size: 6rem;
     }
 
-    .f1-ns {
-        font-size: 3rem;
-    }
-
     .f5-ns {
         font-size: 1rem;
     }
-
-    .f6-ns {
-        font-size: .875rem;
-    }
-}
-
-@media screen and (min-width: 48em) and (max-width: 64em) {
-    .bg-cv-m {
-        background-size: cover;
-    }
-
-    .bg-cn-m {
-        background-size: contain;
-    }
-
-    .ba-m {
-        border-style: solid;
-        border-width: 1px;
-    }
-
-    .bt-m {
-        border-top-style: solid;
-        border-top-width: 1px;
-    }
-
-    .br-m {
-        border-right-style: solid;
-        border-right-width: 1px;
-    }
-
-    .bb-m {
-        border-bottom-style: solid;
-        border-bottom-width: 1px;
-    }
-
-    .bl-m {
-        border-left-style: solid;
-        border-left-width: 1px;
-    }
-
-    .br0-m {
-        border-radius: 0;
-    }
-
-    .br1-m {
-        border-radius: .125rem;
-    }
-
-    .br2-m {
-        border-radius: .25rem;
-    }
-
-    .br3-m {
-        border-radius: .5rem;
-    }
-
-    .br4-m {
-        border-radius: 1rem;
-    }
-
-    .br-100-m {
-        border-radius: 100%;
-    }
-
-    .b--none-m {
-        border-style: none;
-    }
-
-    .b--dotted-m {
-        border-style: dotted;
-    }
-
-    .b--dashed-m {
-        border-style: dashed;
-    }
-
-    .b--solid-m {
-        border-style: solid;
-    }
-
-    .bw0-m {
-        border-width: 0;
-    }
-
-    .bw1-m {
-        border-width: .125rem;
-    }
-
-    .bw2-m {
-        border-width: .25rem;
-    }
-
-    .bw3-m {
-        border-width: .5rem;
-    }
-
-    .bw4-m {
-        border-width: 1rem;
-    }
-
-    .bw5-m {
-        border-width: 2rem;
-    }
-
-    .bottom-0-m {
-        bottom: 0;
-    }
-
-    .bottom-1-m {
-        bottom: 1rem;
-    }
-
-    .bottom-2-m {
-        bottom: 2rem;
-    }
-
-    .bottom--1-m {
-        bottom: -1rem;
-    }
-
-    .bottom--2-m {
-        bottom: -2rem;
-    }
-
-    .db-m {
-        display: block;
-    }
-
-    .dib-m {
-        display: inline-block;
-    }
-
-    .b-m {
-        font-weight: bold;
-    }
-
-    .pa3-m {
-        padding: 1rem;
-    }
-
-    .pb3-m {
-        padding-bottom: 1rem;
-    }
-
-    .mr3-m {
-        margin-right: 1rem;
-    }
-
-    .mb3-m {
-        margin-bottom: 1rem;
-    }
-
-    .tc-m {
-        text-align: center;
-    }
-
-    .f1-m {
-        font-size: 3rem;
-    }
-
-    .f6-m {
-        font-size: .875rem;
-    }
-}
-
-@media screen and (min-width: 64em) {
-    .bg-cv-l {
-        background-size: cover;
-    }
-
-    .bg-cn-l {
-        background-size: contain;
-    }
-
-    .ba-l {
-        border-style: solid;
-        border-width: 1px;
-    }
-
-    .bt-l {
-        border-top-style: solid;
-        border-top-width: 1px;
-    }
-
-    .br-l {
-        border-right-style: solid;
-        border-right-width: 1px;
-    }
-
-    .bb-l {
-        border-bottom-style: solid;
-        border-bottom-width: 1px;
-    }
-
-    .bl-l {
-        border-left-style: solid;
-        border-left-width: 1px;
-    }
-
-    .br0-l {
-        border-radius: 0;
-    }
-
-    .br1-l {
-        border-radius: .125rem;
-    }
-
-    .br2-l {
-        border-radius: .25rem;
-    }
-
-    .br3-l {
-        border-radius: .5rem;
-    }
-
-    .br4-l {
-        border-radius: 1rem;
-    }
-
-    .br-100-l {
-        border-radius: 100%;
-    }
-
-    .b--none-l {
-        border-style: none;
-    }
-
-    .b--dotted-l {
-        border-style: dotted;
-    }
-
-    .b--dashed-l {
-        border-style: dashed;
-    }
-
-    .b--solid-l {
-        border-style: solid;
-    }
-
-    .bw0-l {
-        border-width: 0;
-    }
-
-    .bw1-l {
-        border-width: .125rem;
-    }
-
-    .bw2-l {
-        border-width: .25rem;
-    }
-
-    .bw3-l {
-        border-width: .5rem;
-    }
-
-    .bw4-l {
-        border-width: 1rem;
-    }
-
-    .bw5-l {
-        border-width: 2rem;
-    }
-
-    .bottom-0-l {
-        bottom: 0;
-    }
-
-    .bottom-1-l {
-        bottom: 1rem;
-    }
-
-    .bottom-2-l {
-        bottom: 2rem;
-    }
-
-    .bottom--1-l {
-        bottom: -1rem;
-    }
-
-    .bottom--2-l {
-        bottom: -2rem;
-    }
-
-    .db-l {
-        display: block;
-    }
-
-    .dib-l {
-        display: inline-block;
-    }
-
-    .b-l {
-        font-weight: bold;
-    }
-
-    .pa3-l {
-        padding: 1rem;
-    }
-
-    .pb3-l {
-        padding-bottom: 1rem;
-    }
-
-    .mr3-l {
-        margin-right: 1rem;
-    }
-
-    .mb3-l {
-        margin-bottom: 1rem;
-    }
-
-    .tc-l {
-        text-align: center;
-    }
-
-    .f1-l {
-        font-size: 3rem;
-    }
-
-    .f6-l {
-        font-size: .875rem;
-    }
 }
 
   
@@ -1148,26 +138,8 @@ 
CSS
   
Modules
   

     
-    
tachyons-box-sizing
-  
-    
tachyons-background-size
-  
-    
tachyons-borders
-  
-    
tachyons-border-colors
-  
-    
tachyons-border-radius
-  
-    
tachyons-border-style
-  
-    
tachyons-border-widths
-  
-    
tachyons-coordinates
-  
     
tachyons-display
   
-    
tachyons-font-family
-  
     
tachyons-font-weight
   
     
tachyons-links
@@ -1188,7 +160,7 @@ 
Modules
   
 
   
Install these modules via npm
-  npm i --save tachyons-box-sizing tachyons-background-size tachyons-borders tachyons-border-colors tachyons-border-radius tachyons-border-style tachyons-border-widths tachyons-coordinates tachyons-display tachyons-font-family tachyons-font-weight tachyons-links tachyons-skins tachyons-spacing tachyons-text-align tachyons-type-scale tachyons-hovers
+  npm i --save tachyons-display tachyons-font-weight tachyons-links tachyons-skins tachyons-spacing tachyons-text-align tachyons-type-scale tachyons-hovers
   
   

     
Other Components
diff --git a/components/nav/title-link-list/index.html b/components/nav/title-link-list/index.html
index 32b2dbe26..b9086c42e 100644
--- a/components/nav/title-link-list/index.html
+++ b/components/nav/title-link-list/index.html
@@ -28,15 +28,15 @@
   
Module CSS Stats
   

     
Size (Gzipped)
-    
1715
+    
258
   
   

     
Selectors
-    
244
+    
11
   
   

     
Declarations
-    
266
+    
13
   
 
 
@@ -53,275 +53,10 @@ 
HTML
 
 

CSS

.border-box {
-    box-sizing: border-box;
-}
-
-.bg-cv {
-    background-size: cover;
-}
-
-.bg-cn {
-    background-size: contain;
-}
-
-.ba {
-    border-style: solid;
-    border-width: 1px;
-}
-
-.bt {
-    border-top-style: solid;
-    border-top-width: 1px;
-}
-
-.br {
-    border-right-style: solid;
-    border-right-width: 1px;
-}
-
-.bb {
-    border-bottom-style: solid;
-    border-bottom-width: 1px;
-}
-
-.bl {
-    border-left-style: solid;
-    border-left-width: 1px;
-}
-
-.b--black {
-    border-color: #111;
-}
-
-.b--near-black {
-    border-color: #111;
-}
-
-.b--dark-gray {
-    border-color: #333;
-}
-
-.b--mid-gray {
-    border-color: #555;
-}
-
-.b--gray {
-    border-color: #777;
-}
-
-.b--silver {
-    border-color: #999;
-}
-
-.b--light-silver {
-    border-color: #aaa;
-}
-
-.b--light-gray {
-    border-color: #eee;
-}
-
-.b--near-white {
-    border-color: #f4f4f4;
-}
-
-.b--white {
-    border-color: #fff;
-}
-
-.b--white-90 {
-    border-color: rgba(255, 255, 255, .9);
-}
-
-.b--white-80 {
-    border-color: rgba(255, 255, 255, .8);
-}
-
-.b--white-70 {
-    border-color: rgba(255, 255, 255, .7);
-}
-
-.b--white-60 {
-    border-color: rgba(255, 255, 255, .6);
-}
-
-.b--white-50 {
-    border-color: rgba(255, 255, 255, .5);
-}
-
-.b--white-40 {
-    border-color: rgba(255, 255, 255, .4);
-}
-
-.b--white-30 {
-    border-color: rgba(255, 255, 255, .3);
-}
-
-.b--white-20 {
-    border-color: rgba(255, 255, 255, .2);
-}
-
-.b--white-10 {
-    border-color: rgba(255, 255, 255, .1);
-}
-
-.b--white-05 {
-    border-color: rgba(255, 255, 255, .05);
-}
-
-.b--white-025 {
-    border-color: rgba(255, 255, 255, .025);
-}
-
-.b--white-0125 {
-    border-color: rgba(255, 255, 255, .0125);
-}
-
-.b--black-90 {
-    border-color: rgba(0, 0, 0, .9);
-}
-
-.b--black-80 {
-    border-color: rgba(0, 0, 0, .8);
-}
-
-.b--black-70 {
-    border-color: rgba(0, 0, 0, .7);
-}
-
-.b--black-60 {
-    border-color: rgba(0, 0, 0, .6);
-}
-
-.b--black-50 {
-    border-color: rgba(0, 0, 0, .5);
-}
-
-.b--black-40 {
-    border-color: rgba(0, 0, 0, .4);
-}
-
-.b--black-30 {
-    border-color: rgba(0, 0, 0, .3);
-}
-
-.b--black-20 {
-    border-color: rgba(0, 0, 0, .2);
-}
-
-.b--black-10 {
-    border-color: rgba(0, 0, 0, .1);
-}
-
-.b--black-05 {
-    border-color: rgba(0, 0, 0, .05);
-}
-
-.b--black-025 {
-    border-color: rgba(0, 0, 0, .025);
-}
-
-.b--black-0125 {
-    border-color: rgba(0, 0, 0, .0125);
-}
-
-.b--transparent {
-    border-color: transprent;
-}
-
-.br0 {
-    border-radius: 0;
-}
-
-.br1 {
-    border-radius: .125rem;
-}
-
-.br2 {
-    border-radius: .25rem;
-}
-
-.br3 {
-    border-radius: .5rem;
-}
-
-.br4 {
-    border-radius: 1rem;
-}
-
-.br-100 {
-    border-radius: 100%;
-}
-
-.b--none {
-    border-style: none;
-}
-
-.b--dotted {
-    border-style: dotted;
-}
-
-.b--dashed {
-    border-style: dashed;
-}
-
-.b--solid {
-    border-style: solid;
-}
-
-.bw0 {
-    border-width: 0;
-}
-
-.bw1 {
-    border-width: .125rem;
-}
-
-.bw2 {
-    border-width: .25rem;
-}
-
-.bw3 {
-    border-width: .5rem;
-}
-
-.bw4 {
-    border-width: 1rem;
-}
-
-.bw5 {
-    border-width: 2rem;
-}
-
-.bottom-0 {
-    bottom: 0;
-}
-
-.bottom-1 {
-    bottom: 1rem;
-}
-
-.bottom-2 {
-    bottom: 2rem;
-}
-
-.bottom--1 {
-    bottom: -1rem;
-}
-
-.bottom--2 {
-    bottom: -2rem;
-}
-
-.dib {
+  
.dib {
     display: inline-block;
 }
 
-.bodoni {
-    font-family: "Bodoni MT", serif;
-}
-
 .b {
     font-weight: bold;
 }
@@ -331,138 +66,6 @@ 
CSS
     transition: color .15s ease-in;
 }
 
-.link:link, .link:visited {
-    transition: color .15s ease-in;
-}
-
-.link:hover {
-    transition: color .15s ease-in;
-}
-
-.link:active {
-    transition: color .15s ease-in;
-}
-
-.link:focus {
-    transition: color .15s ease-in;
-}
-
-.black-90 {
-    color: rgba(0, 0, 0, .9);
-}
-
-.black-80 {
-    color: rgba(0, 0, 0, .8);
-}
-
-.black-70 {
-    color: rgba(0, 0, 0, .7);
-}
-
-.black-60 {
-    color: rgba(0, 0, 0, .6);
-}
-
-.black-50 {
-    color: rgba(0, 0, 0, .5);
-}
-
-.black-40 {
-    color: rgba(0, 0, 0, .4);
-}
-
-.black-30 {
-    color: rgba(0, 0, 0, .3);
-}
-
-.black-20 {
-    color: rgba(0, 0, 0, .2);
-}
-
-.black-10 {
-    color: rgba(0, 0, 0, .1);
-}
-
-.black-05 {
-    color: rgba(0, 0, 0, .05);
-}
-
-.bg-black-90 {
-    background-color: rgba(0, 0, 0, .9);
-}
-
-.bg-black-80 {
-    background-color: rgba(0, 0, 0, .8);
-}
-
-.bg-black-70 {
-    background-color: rgba(0, 0, 0, .7);
-}
-
-.bg-black-60 {
-    background-color: rgba(0, 0, 0, .6);
-}
-
-.bg-black-50 {
-    background-color: rgba(0, 0, 0, .5);
-}
-
-.bg-black-40 {
-    background-color: rgba(0, 0, 0, .4);
-}
-
-.bg-black-30 {
-    background-color: rgba(0, 0, 0, .3);
-}
-
-.bg-black-20 {
-    background-color: rgba(0, 0, 0, .2);
-}
-
-.bg-black-10 {
-    background-color: rgba(0, 0, 0, .1);
-}
-
-.bg-black-05 {
-    background-color: rgba(0, 0, 0, .05);
-}
-
-.bg-white-90 {
-    background-color: rgba(255, 255, 255, .9);
-}
-
-.bg-white-80 {
-    background-color: rgba(255, 255, 255, .8);
-}
-
-.bg-white-70 {
-    background-color: rgba(255, 255, 255, .7);
-}
-
-.bg-white-60 {
-    background-color: rgba(255, 255, 255, .6);
-}
-
-.bg-white-50 {
-    background-color: rgba(255, 255, 255, .5);
-}
-
-.bg-white-40 {
-    background-color: rgba(255, 255, 255, .4);
-}
-
-.bg-white-30 {
-    background-color: rgba(255, 255, 255, .3);
-}
-
-.bg-white-20 {
-    background-color: rgba(255, 255, 255, .2);
-}
-
-.bg-white-10 {
-    background-color: rgba(255, 255, 255, .1);
-}
-
 .black {
     color: #111;
 }
@@ -471,134 +74,6 @@ 
CSS
     color: #777;
 }
 
-.bg-black {
-    background-color: #111;
-}
-
-.bg-near-black {
-    background-color: #111;
-}
-
-.bg-dark-gray {
-    background-color: #333;
-}
-
-.bg-mid-gray {
-    background-color: #555;
-}
-
-.bg-gray {
-    background-color: #777;
-}
-
-.bg-silver {
-    background-color: #999;
-}
-
-.bg-light-silver {
-    background-color: #aaa;
-}
-
-.bg-light-gray {
-    background-color: #eee;
-}
-
-.bg-near-white {
-    background-color: #f4f4f4;
-}
-
-.bg-white {
-    background-color: #fff;
-}
-
-.bg-focus-black:focus {
-    background-color: #111;
-}
-
-.bg-focus-near-black:focus {
-    background-color: #111;
-}
-
-.bg-focus-dark-gray:focus {
-    background-color: #333;
-}
-
-.bg-focus-mid-gray:focus {
-    background-color: #555;
-}
-
-.bg-focus-gray:focus {
-    background-color: #777;
-}
-
-.bg-focus-silver:focus {
-    background-color: #999;
-}
-
-.bg-focus-light-silver:focus {
-    background-color: #aaa;
-}
-
-.bg-focus-moon-gray:focus {
-    background-color: #ccc;
-}
-
-.bg-focus-light-gray:focus {
-    background-color: #eee;
-}
-
-.bg-focus-near-white:focus {
-    background-color: #f4f4f4;
-}
-
-.bg-focus-white:focus {
-    background-color: #fff;
-}
-
-.bg-hover-black:hover {
-    background-color: #111;
-}
-
-.bg-hover-near-black:hover {
-    background-color: #111;
-}
-
-.bg-hover-dark-gray:hover {
-    background-color: #333;
-}
-
-.bg-hover-mid-gray:hover {
-    background-color: #555;
-}
-
-.bg-hover-gray:hover {
-    background-color: #777;
-}
-
-.bg-hover-silver:hover {
-    background-color: #999;
-}
-
-.bg-hover-light-silver:hover {
-    background-color: #aaa;
-}
-
-.bg-hover-moon-gray:hover {
-    background-color: #ccc;
-}
-
-.bg-hover-light-gray:hover {
-    background-color: #eee;
-}
-
-.bg-hover-near-white:hover {
-    background-color: #f4f4f4;
-}
-
-.bg-hover-white:hover {
-    background-color: #fff;
-}
-
 .pa3 {
     padding: 1rem;
 }
@@ -616,439 +91,14 @@ 
CSS
     transition: opacity .15s ease-in;
 }
 
-.dim:hover, .dim:focus {
-    opacity: .5;
-    transition: opacity .15s ease-in;
-}
-
-.dim:active {
-    opacity: .8;
-    transition: opacity .15s ease-out;
-}
-
 @media screen and (min-width: 48em) {
-    .bg-cv-ns {
-        background-size: cover;
-    }
-
-    .bg-cn-ns {
-        background-size: contain;
-    }
-
-    .ba-ns {
-        border-style: solid;
-        border-width: 1px;
-    }
-
-    .bt-ns {
-        border-top-style: solid;
-        border-top-width: 1px;
-    }
-
-    .br-ns {
-        border-right-style: solid;
-        border-right-width: 1px;
-    }
-
-    .bb-ns {
-        border-bottom-style: solid;
-        border-bottom-width: 1px;
-    }
-
-    .bl-ns {
-        border-left-style: solid;
-        border-left-width: 1px;
-    }
-
-    .br0-ns {
-        border-radius: 0;
-    }
-
-    .br1-ns {
-        border-radius: .125rem;
-    }
-
-    .br2-ns {
-        border-radius: .25rem;
-    }
-
-    .br3-ns {
-        border-radius: .5rem;
-    }
-
-    .br4-ns {
-        border-radius: 1rem;
-    }
-
-    .br-100-ns {
-        border-radius: 100%;
-    }
-
-    .b--none-ns {
-        border-style: none;
-    }
-
-    .b--dotted-ns {
-        border-style: dotted;
-    }
-
-    .b--dashed-ns {
-        border-style: dashed;
-    }
-
-    .b--solid-ns {
-        border-style: solid;
-    }
-
-    .bw0-ns {
-        border-width: 0;
-    }
-
-    .bw1-ns {
-        border-width: .125rem;
-    }
-
-    .bw2-ns {
-        border-width: .25rem;
-    }
-
-    .bw3-ns {
-        border-width: .5rem;
-    }
-
-    .bw4-ns {
-        border-width: 1rem;
-    }
-
-    .bw5-ns {
-        border-width: 2rem;
-    }
-
-    .bottom-0-ns {
-        bottom: 0;
-    }
-
-    .bottom-1-ns {
-        bottom: 1rem;
-    }
-
-    .bottom-2-ns {
-        bottom: 2rem;
-    }
-
-    .bottom--1-ns {
-        bottom: -1rem;
-    }
-
-    .bottom--2-ns {
-        bottom: -2rem;
-    }
-
-    .dib-ns {
-        display: inline-block;
-    }
-
-    .b-ns {
-        font-weight: bold;
-    }
-
-    .pa3-ns {
-        padding: 1rem;
-    }
-
     .pa4-ns {
         padding: 2rem;
     }
 
-    .mr3-ns {
-        margin-right: 1rem;
-    }
-
     .f5-ns {
         font-size: 1rem;
     }
-
-    .f6-ns {
-        font-size: .875rem;
-    }
-}
-
-@media screen and (min-width: 48em) and (max-width: 64em) {
-    .bg-cv-m {
-        background-size: cover;
-    }
-
-    .bg-cn-m {
-        background-size: contain;
-    }
-
-    .ba-m {
-        border-style: solid;
-        border-width: 1px;
-    }
-
-    .bt-m {
-        border-top-style: solid;
-        border-top-width: 1px;
-    }
-
-    .br-m {
-        border-right-style: solid;
-        border-right-width: 1px;
-    }
-
-    .bb-m {
-        border-bottom-style: solid;
-        border-bottom-width: 1px;
-    }
-
-    .bl-m {
-        border-left-style: solid;
-        border-left-width: 1px;
-    }
-
-    .br0-m {
-        border-radius: 0;
-    }
-
-    .br1-m {
-        border-radius: .125rem;
-    }
-
-    .br2-m {
-        border-radius: .25rem;
-    }
-
-    .br3-m {
-        border-radius: .5rem;
-    }
-
-    .br4-m {
-        border-radius: 1rem;
-    }
-
-    .br-100-m {
-        border-radius: 100%;
-    }
-
-    .b--none-m {
-        border-style: none;
-    }
-
-    .b--dotted-m {
-        border-style: dotted;
-    }
-
-    .b--dashed-m {
-        border-style: dashed;
-    }
-
-    .b--solid-m {
-        border-style: solid;
-    }
-
-    .bw0-m {
-        border-width: 0;
-    }
-
-    .bw1-m {
-        border-width: .125rem;
-    }
-
-    .bw2-m {
-        border-width: .25rem;
-    }
-
-    .bw3-m {
-        border-width: .5rem;
-    }
-
-    .bw4-m {
-        border-width: 1rem;
-    }
-
-    .bw5-m {
-        border-width: 2rem;
-    }
-
-    .bottom-0-m {
-        bottom: 0;
-    }
-
-    .bottom-1-m {
-        bottom: 1rem;
-    }
-
-    .bottom-2-m {
-        bottom: 2rem;
-    }
-
-    .bottom--1-m {
-        bottom: -1rem;
-    }
-
-    .bottom--2-m {
-        bottom: -2rem;
-    }
-
-    .dib-m {
-        display: inline-block;
-    }
-
-    .b-m {
-        font-weight: bold;
-    }
-
-    .pa3-m {
-        padding: 1rem;
-    }
-
-    .mr3-m {
-        margin-right: 1rem;
-    }
-
-    .f6-m {
-        font-size: .875rem;
-    }
-}
-
-@media screen and (min-width: 64em) {
-    .bg-cv-l {
-        background-size: cover;
-    }
-
-    .bg-cn-l {
-        background-size: contain;
-    }
-
-    .ba-l {
-        border-style: solid;
-        border-width: 1px;
-    }
-
-    .bt-l {
-        border-top-style: solid;
-        border-top-width: 1px;
-    }
-
-    .br-l {
-        border-right-style: solid;
-        border-right-width: 1px;
-    }
-
-    .bb-l {
-        border-bottom-style: solid;
-        border-bottom-width: 1px;
-    }
-
-    .bl-l {
-        border-left-style: solid;
-        border-left-width: 1px;
-    }
-
-    .br0-l {
-        border-radius: 0;
-    }
-
-    .br1-l {
-        border-radius: .125rem;
-    }
-
-    .br2-l {
-        border-radius: .25rem;
-    }
-
-    .br3-l {
-        border-radius: .5rem;
-    }
-
-    .br4-l {
-        border-radius: 1rem;
-    }
-
-    .br-100-l {
-        border-radius: 100%;
-    }
-
-    .b--none-l {
-        border-style: none;
-    }
-
-    .b--dotted-l {
-        border-style: dotted;
-    }
-
-    .b--dashed-l {
-        border-style: dashed;
-    }
-
-    .b--solid-l {
-        border-style: solid;
-    }
-
-    .bw0-l {
-        border-width: 0;
-    }
-
-    .bw1-l {
-        border-width: .125rem;
-    }
-
-    .bw2-l {
-        border-width: .25rem;
-    }
-
-    .bw3-l {
-        border-width: .5rem;
-    }
-
-    .bw4-l {
-        border-width: 1rem;
-    }
-
-    .bw5-l {
-        border-width: 2rem;
-    }
-
-    .bottom-0-l {
-        bottom: 0;
-    }
-
-    .bottom-1-l {
-        bottom: 1rem;
-    }
-
-    .bottom-2-l {
-        bottom: 2rem;
-    }
-
-    .bottom--1-l {
-        bottom: -1rem;
-    }
-
-    .bottom--2-l {
-        bottom: -2rem;
-    }
-
-    .dib-l {
-        display: inline-block;
-    }
-
-    .b-l {
-        font-weight: bold;
-    }
-
-    .pa3-l {
-        padding: 1rem;
-    }
-
-    .mr3-l {
-        margin-right: 1rem;
-    }
-
-    .f6-l {
-        font-size: .875rem;
-    }
 }
 
   
@@ -1056,26 +106,8 @@ 
CSS
   
Modules
   

     
-    
tachyons-box-sizing
-  
-    
tachyons-background-size
-  
-    
tachyons-borders
-  
-    
tachyons-border-colors
-  
-    
tachyons-border-radius
-  
-    
tachyons-border-style
-  
-    
tachyons-border-widths
-  
-    
tachyons-coordinates
-  
     
tachyons-display
   
-    
tachyons-font-family
-  
     
tachyons-font-weight
   
     
tachyons-links
@@ -1094,7 +126,7 @@ 
Modules
   
 
   
Install these modules via npm
-  npm i --save tachyons-box-sizing tachyons-background-size tachyons-borders tachyons-border-colors tachyons-border-radius tachyons-border-style tachyons-border-widths tachyons-coordinates tachyons-display tachyons-font-family tachyons-font-weight tachyons-links tachyons-skins tachyons-spacing tachyons-type-scale tachyons-hovers
+  npm i --save tachyons-display tachyons-font-weight tachyons-links tachyons-skins tachyons-spacing tachyons-type-scale tachyons-hovers
   
   

     
Other Components
diff --git a/package.json b/package.json
index fd8d0195c..bee7a5ef5 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,6 @@
     "url": "https://github.com/tachyons-css/tachyons-css.github.io/issues"
   },
   "dependencies": {
-    "escape-html": "^1.0.3",
     "tachyons-background-size": "^3.0.2",
     "tachyons-base": "^1.2.2",
     "tachyons-border-colors": "^4.0.4",
@@ -71,6 +70,7 @@
     "css-mqpacker": "^4.0.0",
     "css-parse": "^2.0.0",
     "cssstats": "^2.0.1",
+    "escape-html": "^1.0.3",
     "filesize": "^3.1.3",
     "get-classes-from-html": "^1.0.1",
     "glob": "^5.0.15",
@@ -92,8 +92,9 @@
     "postcss-custom-media": "^5.0.0",
     "postcss-custom-properties": "^5.0.0",
     "postcss-discard-comments": "^2.0.1",
+    "postcss-discard-empty": "^2.0.1",
     "postcss-import": "^7.0.0",
-    "postcss-select": "^1.0.0",
+    "postcss-select": "^2.0.0",
     "remove-html-extension": "0.0.1",
     "s3": "^4.4.0",
     "tachyons": "^3.0.1",
diff --git a/src/components-build.js b/src/components-build.js
index 56b935d0d..f7b048ace 100644
--- a/src/components-build.js
+++ b/src/components-build.js
@@ -13,11 +13,12 @@ var select = require('postcss-select')
 var atImport = require('postcss-import')
 var conditionals = require('postcss-conditionals')
 var removeComments = require('postcss-discard-comments')
+var perfectionist = require('perfectionist')
+var removeEmpty = require('postcss-discard-empty')
 var cssVariables = require('postcss-css-variables')
 var customMedia = require('postcss-custom-media')
 var mqPacker = require('css-mqpacker')
 var cssstats = require('cssstats')
-var perfectionist = require('perfectionist')
 
 var tachyonsCss = fs.readFileSync('src/css/tachyons.css', 'utf8')
 var footer = fs.readFileSync('src/templates/footer.html', 'utf8')
@@ -88,7 +89,7 @@ module.exports = function () {
 
       frontMatter.componentCss = postcss([
         atImport(), cssVariables(), conditionals(), customMedia(), select(frontMatter.classes),
-        removeComments({ removeAll: true }), mqPacker(), getModules(), perfectionist()
+        removeComments({ removeAll: true }), mqPacker(), removeEmpty(), getModules(), perfectionist()
       ]).process(tachyonsCss, {
         from: 'src/css/tachyons.css'
       }).css