Add more code comments for better and more consistent docs.

src/_border-colors.css

@@ -2,6 +2,15 @@
 
    BORDER COLORS
 
+   Border colors can be used to extend the base
+   border classes ba,bt,bb,br,bl found in the _borders.css file.
+
+   The base border class by default will set the color of the border
+   to that of the current text color. These classes are for the cases
+   where you desire for the text and border colors to be different.
+
+   b = border
+
 */
 
 .b--black {        border-color: var(--black); }

src/_border-radius.css

@@ -11,8 +11,10 @@
      2    = 2nd step in scale
      3    = 3rd step in scale
      4    = 4th step in scale
-     -100 = 100%
 
+   Literal values:
+     -100 = 100%
+     -pill = 9999px
 
    Media Query Extensions:
      -ns = not-small

src/_border-style.css

@@ -2,14 +2,16 @@
 
    BORDER STYLES
 
+   Depends on base border module in _borders.css
+
    Base:
-     bs = border-style
+     b = border-style
 
    Modifiers:
-     none   = none
-     dotted = dotted
-     dashed = dashed
-     solid  = solid
+     --none   = none
+     --dotted = dotted
+     --dashed = dashed
+     --solid  = solid
 
    Media Query Extensions:
      -ns = not-small

src/_border-widths.css

@@ -27,6 +27,7 @@
 .bw4 { border-width: 1rem; }
 .bw5 { border-width: 2rem; }
 
+/* Resets */
 .bt-0 { border-top-width: 0; }
 .br-0 { border-right-width: 0; }
 .bb-0 { border-bottom-width: 0; }

src/_borders.css

@@ -1,14 +1,22 @@
 /*
 
-   BORDER BASE
+    BORDERS
 
-   Legend
+    Base:
+      b = border
 
-   a = all
-   t = top
-   r = right
-   b = bottom
-   l = left
+    Modifiers:
+      a = all
+      t = top
+      r = right
+      b = bottom
+      l = left
+      n = none
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
 
 */
 

src/_colors.css

@@ -6,6 +6,8 @@
    Grayscale
    - Solids
    - Transparencies
+   Colors
+
 */
 
 :root {

src/_coordinates.css

@@ -4,6 +4,24 @@
 
    Use in combination with the position module.
 
+   Base:
+     top
+     bottom
+     right
+     left
+
+   Modifiers:
+     -0  = literal value 0
+     -1  = literal value 1
+     -2  = literal value 2
+     --1 = literal value -1
+     --2 = literal value -2
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
 */
 
 .top-0    { top:    0; }

src/_font-style.css

@@ -2,6 +2,11 @@
 
    FONT STYLE
 
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
 */
 
 .i         { font-style: italic; }

src/_font-weight.css

@@ -2,6 +2,25 @@
 
    FONT WEIGHT
 
+   Base
+     fw = font-weight
+
+   Modifiers:
+     1 = literal value 100
+     2 = literal value 200
+     3 = literal value 300
+     4 = literal value 400
+     5 = literal value 500
+     6 = literal value 600
+     7 = literal value 700
+     8 = literal value 800
+     9 = literal value 900
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
 */
 
 .normal { font-weight: normal; }

src/_heights.css

@@ -2,6 +2,30 @@
 
    HEIGHTS
 
+   Base:
+     h = height
+     vh = vertical screen height
+
+   Modifiers
+     1 = 1st step in height scale
+     2 = 2nd step in height scale
+     3 = 3rd step in height scale
+     4 = 4th step in height scale
+     5 = 5th step in height scale
+
+     -25   = literal value 25%
+     -50   = literal value 50%
+     -75   = literal value 75%
+     -100  = literal value 100%
+
+     -auto = string value of auto
+     -inherit = string value of inherit
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
 */
 
 /* Height Scale */

src/_hovers.css

@@ -2,6 +2,12 @@
 
   HOVER EFFECTS
 
+    - Dim
+    - Hide Child
+    - Underline text
+    - Grow
+    - Pointer
+    - Shadow
 
 */
 

src/_letter-spacing.css

@@ -2,6 +2,11 @@
 
    LETTER SPACING
 
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
 */
 
 .tracked       { letter-spacing:  .1em; }

src/_line-height.css

@@ -2,6 +2,11 @@
 
    LINE HEIGHT / LEADING
 
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
 */
 
   .lh-solid { line-height: 1; }

src/_max-widths.css

@@ -2,6 +2,30 @@
 
    MAX WIDTHS
 
+   Base:
+     mw = max-width
+
+   Modifiers
+     1 = 1st step in width scale
+     2 = 2nd step in width scale
+     3 = 3rd step in width scale
+     4 = 4th step in width scale
+     5 = 5th step in width scale
+     6 = 6st step in width scale
+     7 = 7nd step in width scale
+     8 = 8rd step in width scale
+     9 = 9th step in width scale
+
+     -100 = literal value 100%
+
+     -none  = string value none
+
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
 */
 
 /* Max Width Percentages */

src/_opacity.css

@@ -1,6 +1,6 @@
 /*
 
-  Opacity
+    OPACITY
 
 */
 

src/_outlines.css

@@ -1,6 +1,11 @@
 /*
 
-  OUTLINES
+   OUTLINES
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
 
 */
 

src/_overflow.css

@@ -2,6 +2,11 @@
 
     OVERFLOW
 
+    Media Query Extensions:
+      -ns = not-small
+      -m  = medium
+      -l  = large
+
  */
 
 .overflow-visible { overflow: visible; }

src/_position.css

@@ -1,8 +1,13 @@
 /*
 
-    POSITIONING
+   POSITIONING
 
- */
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
 
 .static { position: static; }
 .relative  { position: relative; }

src/_skins.css

@@ -2,6 +2,8 @@
 
    SKINS
 
+   Classes for setting foreground and background colors on elements.
+
 */
 
 

src/_spacing.css

@@ -1,6 +1,4 @@
 /* Variables */
-
-/* Spacing Scale - based on a ratio of 1:2 */
 :root {
   --spacing-none: 0;
   --spacing-extra-small: .25rem;
@@ -12,39 +10,38 @@
   --spacing-extra-extra-extra-large: 16rem;
 }
 
-/* Media Queries */
-
-@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);
-
 /*
    SPACING
 
    An eight step powers of two scale ranging from 0 to 16rem.
-   Namespaces are composable and thus highly grockable - check the legend below
 
-   Legend:
+   Base:
 
-   p = padding
-   m = margin
+     p = padding
+     m = margin
 
-   a = all
-   h = horizontal
-   v = vertical
-   t = top
-   r = right
-   b = bottom
-   l = left
+   Modifiers:
+     a = all
+     h = horizontal
+     v = vertical
+     t = top
+     r = right
+     b = bottom
+     l = left
 
-   0 = none
-   1 = 1st step in spacing scale
-   2 = 2nd step in spacing scale
-   3 = 3rd step in spacing scale
-   4 = 4th step in spacing scale
-   5 = 5th step in spacing scale
-   6 = 6th step in spacing scale
-   7 = 7th step in spacing scale
+     0 = none
+     1 = 1st step in spacing scale
+     2 = 2nd step in spacing scale
+     3 = 3rd step in spacing scale
+     4 = 4th step in spacing scale
+     5 = 5th step in spacing scale
+     6 = 6th step in spacing scale
+     7 = 7th step in spacing scale
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
 
 */
 

src/_tables.css

@@ -9,7 +9,7 @@
     border-spacing: 0;
 }
 
-.striped--moon-gray:nth-child(odd) {
+.striped--light-silver:nth-child(odd) {
   background-color: var(--light-silver);
 }
 

src/_text-align.css

@@ -2,6 +2,19 @@
 
   TEXT ALIGN
 
+  Base
+    t = text-align
+
+  Modifiers
+    l = left
+    r = right
+    c = center
+
+  Media Query Extensions:
+    -ns = not-small
+    -m  = medium
+    -l  = large
+
 */
 
 .tl  { text-align: left; }

src/_text-decoration.css

@@ -2,6 +2,11 @@
 
    TEXT DECORATION
 
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
 */
 
 .strike       { text-decoration: line-through; }

src/_text-transform.css

@@ -2,6 +2,20 @@
 
    TEXT TRANSFORM
 
+   Base:
+     tt = text-transform
+
+   Modifiers
+     c = capitalize
+     l = lowercase
+     u = uppercase
+     n = none
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
 */
 
 .ttc { text-transform: capitalize; }

src/_type-scale.css

@@ -2,9 +2,30 @@
 
    TYPE SCALE
 
+   Base:
+    f = font-size
+
+   Modifiers
+     1 = 1st step in size scale
+     2 = 2nd step in size scale
+     3 = 3rd step in size scale
+     4 = 4th step in size scale
+     5 = 5th step in size scale
+     6 = 6th step in size scale
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
 */
 
-/* For Hero Titles */
+/*
+ * For Hero/Marketing Titles
+ *
+ * These generally are too large for mobile
+ * so be careful using them on smaller screens.
+ * */
+
 .f-6,
 .f-headline {
   font-size: 6rem;
@@ -14,7 +35,9 @@
   font-size: 5rem;
 }
 
+
 /* Type Scale */
+
 .f1 { font-size: 3rem; }
 .f2 { font-size: 2.25rem; }
 .f3 { font-size: 1.5rem; }

src/_typography.css

@@ -2,6 +2,11 @@
 
    TYPOGRAPHY
 
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
 */
 
 

src/_vertical-align.css

@@ -2,6 +2,11 @@
 
    VERTICAL ALIGN
 
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
 */
 
 .v-base     { vertical-align: baseline; }

src/_visibility.css

@@ -2,6 +2,11 @@
 
    VISIBILITY
 
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
 */
 
 

src/_white-space.css

@@ -2,6 +2,11 @@
 
    WHITE SPACE
 
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
 */
 
 

src/_word-break.css

@@ -2,6 +2,14 @@
 
   WORD BREAK
 
+   Base:
+     word = word-break
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
 */
 
 .word-normal { word-break: normal; }

src/_z-index.css

@@ -1,12 +1,30 @@
 /*
 
-  Tachyons
-  z-index
+  Z-INDEX
 
-  DOCUMENTATION
+  Base
+    z = z-index
+
+  Modifiers
+    -0 = literal value 0
+    -1 = literal value 1
+    -2 = literal value 2
+    -3 = literal value 3
+    -4 = literal value 4
+    -5 = literal value 5
+    -999 = literal value 999
+    -9999 = literal value 9999
+
+    -max = largest accepted z-index value as integer
+
+    -inherit = string value inherit
+    -initial = string value initial
+    -unset = string value unset
 
   MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index
   Spec: http://www.w3.org/TR/CSS2/zindex.html
+  Articles:
+    https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
 
   Tips on extending:
   There might be a time worth using negative z-index values.