Update the referenced source code for each module.

Author: mrmrs

docs/elements/tables/index.html

@@ -132,7 +132,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
     border-spacing: 0;
 }
 
-.striped--moon-gray:nth-child(odd) {
+.striped--light-silver:nth-child(odd) {
   background-color: var(--light-silver);
 }
 

docs/layout/heights/index.html

@@ -188,6 +188,30 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
 
    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 */

docs/layout/max-widths/index.html

@@ -247,6 +247,30 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
 
    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 */

docs/layout/position/index.html

@@ -160,9 +160,14 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
 <code class="code" style="font-size: .75rem;">
 /*
 
-    POSITIONING
+   POSITIONING
 
- */
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
 
 .static { position: static; }
 .relative  { position: relative; }

docs/layout/spacing/index.html

@@ -238,8 +238,6 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
 <pre class="ph3 ph5-ns">
 <code class="code" style="font-size: .75rem;">
 /* Variables */
-
-/* Spacing Scale - based on a ratio of 1:2 */
 :root {
   --spacing-none: 0;
   --spacing-extra-small: .25rem;
@@ -251,39 +249,38 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
   --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:
-
-   p = padding
-   m = margin
-
-   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
+
+   Base:
+
+     p = padding
+     m = margin
+
+   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
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
 
 */
 

docs/themes/border-radius/index.html

@@ -140,8 +140,10 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
      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

docs/themes/borders/index.html

@@ -558,15 +558,23 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
 <code class="code" style="font-size: .75rem;">
 /*
 
-   BORDER BASE
+    BORDERS
+
+    Base:
+      b = border
 
-   Legend
+    Modifiers:
+      a = all
+      t = top
+      r = right
+      b = bottom
+      l = left
+      n = none
 
-   a = all
-   t = top
-   r = right
-   b = bottom
-   l = left
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
 
 */
 

docs/themes/hovers/index.html

@@ -133,6 +133,12 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
 
   HOVER EFFECTS
 
+    - Dim
+    - Hide Child
+    - Underline text
+    - Grow
+    - Pointer
+    - Shadow
 
 */
 

docs/themes/opacity/index.html

@@ -131,7 +131,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
 <code class="code" style="font-size: .75rem;">
 /*
 
-  Opacity
+    OPACITY
 
 */
 

docs/themes/skins/index.html

@@ -4995,6 +4995,8 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
 
    SKINS
 
+   Classes for setting foreground and background colors on elements.
+
 */
 
 

docs/typography/font-style/index.html

@@ -121,6 +121,11 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
 
    FONT STYLE
 
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
 */
 
 .i         { font-style: italic; }

docs/typography/font-weight/index.html

@@ -132,6 +132,25 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
 
    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; }

docs/typography/line-height/index.html

@@ -140,6 +140,11 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
 
    LINE HEIGHT / LEADING
 
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
 */
 
   .lh-solid { line-height: 1; }

docs/typography/measure/index.html

@@ -263,6 +263,11 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
 
    TYPOGRAPHY
 
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
 */
 
 

docs/typography/scale/index.html

@@ -189,9 +189,30 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
 
    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;
@@ -201,7 +222,9 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
   font-size: 5rem;
 }
 
+
 /* Type Scale */
+
 .f1 { font-size: 3rem; }
 .f2 { font-size: 2.25rem; }
 .f3 { font-size: 1.5rem; }

docs/typography/text-align/index.html

@@ -121,6 +121,19 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
 
   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; }

docs/typography/text-decoration/index.html

@@ -117,6 +117,11 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
 
    TEXT DECORATION
 
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
 */
 
 .strike       { text-decoration: line-through; }

docs/typography/text-transform/index.html

@@ -119,6 +119,20 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
 
    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; }