@ulu/frontend 0.1.0-beta.39 → 0.1.0-beta.40

package/docs-dev/sass/core/typography/index.html

@@ -286,6 +286,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/counter-list/">
+          
+    
+    <span class="nav-tree__text">
+      Counter List
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/css-icons/">
@@ -1335,6 +1350,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/counter-list/">
+          
+    
+    <span class="nav-tree__text">
+      Counter-list
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/css-icon/">
@@ -2802,6 +2832,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/counter-list/">
+          
+    
+    <span class="nav-tree__text">
+      Counter List
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/demos/css-icons/">
@@ -3851,6 +3896,21 @@
         </li>
       
 
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/sass/components/counter-list/">
+          
+    
+    <span class="nav-tree__text">
+      Counter-list
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
+
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/css-icon/">
@@ -5106,18 +5166,6 @@
 <div class="toc">
                 <ol>
                     
-                    <li><a href="#variables">Variables</a>
-            
-                <ol>
-                    
-                    <li><a href="#variable-config">$config</a>
-            		</li>
-
-                    <li><a href="#variable-sizes">$sizes</a>
-            		</li>
-                </ol>
-            		</li>
-
                     <li><a href="#mixins">Mixins</a>
             
                 <ol>
@@ -5178,6 +5226,18 @@
 
                     <li><a href="#function-get-size-value">get-size-value()</a>
             		</li>
+                </ol>
+            		</li>
+
+                    <li><a href="#variables">Variables</a>
+            
+                <ol>
+                    
+                    <li><a href="#variable-config">$config</a>
+            		</li>
+
+                    <li><a href="#variable-sizes">$sizes</a>
+            		</li>
                 </ol>
             		</li>
                 </ol>
@@ -5195,310 +5255,57 @@
 <div class="type-large">
 <p>Manages typography settings, sizes and provides typography related utilities</p>
 </div>
-<h2 id="variables" tabindex="-1">Variables</h2>
+<h2 id="mixins" tabindex="-1">Mixins</h2>
 <div class="sassdoc-item-header">
-<h3 id="variable-config" tabindex="-1">$config</h3>
+<h3 id="mixin-set" tabindex="-1">set()</h3>
   <div class="sassdoc-item-header__labels">
-    <span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
+    <span class="tag tag--primary"><strong>Mixin</strong></span>
   </div>
 </div>
-<p>Module Settings</p>
-<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$config</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
-  <span class="pjs-token pjs-string">"letter-spacing-uppercase"</span><span class="pjs-token pjs-punctuation">:</span> 0.04em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"margin-bottom"</span><span class="pjs-token pjs-punctuation">:</span>            1em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"margin-top"</span><span class="pjs-token pjs-punctuation">:</span>               <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"responsive-change"</span><span class="pjs-token pjs-punctuation">:</span>        0.05vw<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"scale-steps"</span><span class="pjs-token pjs-punctuation">:</span>              5<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"size-ratio"</span><span class="pjs-token pjs-punctuation">:</span>               1.8<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"size-line-height-ratio"</span><span class="pjs-token pjs-punctuation">:</span>   0.97<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"font-family"</span><span class="pjs-token pjs-punctuation">:</span>              <span class="pjs-token pjs-punctuation">(</span>ui-sans-serif<span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-string">"Open Sans"</span><span class="pjs-token pjs-punctuation">,</span> Helvetica<span class="pjs-token pjs-punctuation">,</span> Arial<span class="pjs-token pjs-punctuation">,</span> sans-serif<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"font-family-monospace"</span><span class="pjs-token pjs-punctuation">:</span>    <span class="pjs-token pjs-punctuation">(</span>Menlo<span class="pjs-token pjs-punctuation">,</span> Consolas<span class="pjs-token pjs-punctuation">,</span> Monaco<span class="pjs-token pjs-punctuation">,</span> monospace<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"font-family-sans"</span><span class="pjs-token pjs-punctuation">:</span>         <span class="pjs-token pjs-punctuation">(</span>ui-sans-serif<span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-string">"Open Sans"</span><span class="pjs-token pjs-punctuation">,</span> Helvetica<span class="pjs-token pjs-punctuation">,</span> Arial<span class="pjs-token pjs-punctuation">,</span> sans-serif<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"font-family-serif"</span><span class="pjs-token pjs-punctuation">:</span>        <span class="pjs-token pjs-punctuation">(</span>Cambria<span class="pjs-token pjs-punctuation">,</span> Georgia<span class="pjs-token pjs-punctuation">,</span> serif<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"font-size"</span><span class="pjs-token pjs-punctuation">:</span>                16px<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"font-weight"</span><span class="pjs-token pjs-punctuation">:</span>              inherit<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"font-weight-bold"</span><span class="pjs-token pjs-punctuation">:</span>         bold<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"font-weight-light"</span><span class="pjs-token pjs-punctuation">:</span>        300<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"font-weight-normal"</span><span class="pjs-token pjs-punctuation">:</span>       normal<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"font-weight-semibold"</span><span class="pjs-token pjs-punctuation">:</span>     600<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"line-height"</span><span class="pjs-token pjs-punctuation">:</span>              1.5<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"line-height-dense"</span><span class="pjs-token pjs-punctuation">:</span>        1.3<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"line-height-densest"</span><span class="pjs-token pjs-punctuation">:</span>      1.1<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"line-height-spaced"</span><span class="pjs-token pjs-punctuation">:</span>       1.75<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"max-width"</span><span class="pjs-token pjs-punctuation">:</span>                60em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"max-width-large"</span><span class="pjs-token pjs-punctuation">:</span>          75em<span class="pjs-token pjs-punctuation">,</span>
-  <span class="pjs-token pjs-string">"max-width-small"</span><span class="pjs-token pjs-punctuation">:</span>          45em<span class="pjs-token pjs-punctuation">,</span>
-<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
+<p>Change modules $config</p>
 <details>
   <summary>File Information</summary>
 <ul>
 <li><strong>File:</strong> _typography.scss</li>
 <li><strong>Group:</strong> typography</li>
-<li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 15-37</li>
-<li><strong>Lines (code):</strong> 39-64</li>
+<li><strong>Type:</strong> mixin</li>
+<li><strong>Lines (comments):</strong> 66-68</li>
+<li><strong>Lines (code):</strong> 70-72</li>
 </ul>
 </details>
-<h4 id="map-properties" tabindex="-1">Map Properties</h4>
+<h4 id="parameters" tabindex="-1">Parameters</h4>
 <table>
 <thead>
 <tr>
 <th style="text-align:left">Name</th>
 <th style="text-align:left">Type</th>
-<th style="text-align:left">Default</th>
 <th style="text-align:left">Description</th>
 </tr>
 </thead>
 <tbody>
 <tr>
-<td style="text-align:left">letter-spacing-uppercase</td>
-<td style="text-align:left">Dimension</td>
-<td style="text-align:left">0.04em</td>
-<td style="text-align:left"></td>
-</tr>
-<tr>
-<td style="text-align:left">margin-bottom</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left">1em</td>
-<td style="text-align:left">Default margin for typography (like paragraphs)</td>
-</tr>
-<tr>
-<td style="text-align:left">margin-top</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left">null</td>
-<td style="text-align:left">Default margin for typography (like paragraphs)</td>
-</tr>
-<tr>
-<td style="text-align:left">responsive-change</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left">0.05vw</td>
-<td style="text-align:left">Amount to scale typography by browser's width (use viewport units)</td>
-</tr>
-<tr>
-<td style="text-align:left">scale-steps</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left">5</td>
-<td style="text-align:left"></td>
-</tr>
-<tr>
-<td style="text-align:left">size-ratio</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left">1.8</td>
-<td style="text-align:left">Font size scale when using preset sizes, ratio mixin)</td>
-</tr>
-<tr>
-<td style="text-align:left">size-line-height-ratio</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left">0.97</td>
-<td style="text-align:left">Default line height scaling (when using preset sizes, ratio mixin). Can shrink line-height as size increase if desirable</td>
-</tr>
-<tr>
-<td style="text-align:left">font-family</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left">(ui-sans-serif, &quot;Open Sans&quot;, Helvetica, Arial, sans-serif)</td>
-<td style="text-align:left">Default font family</td>
-</tr>
-<tr>
-<td style="text-align:left">font-family-monospace</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left">(Menlo, Consolas, Monaco, monospace)</td>
-<td style="text-align:left">Base font-family for monospace</td>
-</tr>
-<tr>
-<td style="text-align:left">font-family-sans</td>
-<td style="text-align:left">CssValue</td>
-<td style="text-align:left">(ui-sans-serif, &quot;Open Sans&quot;, Helvetica, Arial, sans-serif)</td>
-<td style="text-align:left"></td>
-</tr>
-<tr>
-<td style="text-align:left">font-family-serif</td>
-<td style="text-align:left">CssValue</td>
-<td style="text-align:left">(Cambria, Georgia, serif</td>
-<td style="text-align:left"></td>
-</tr>
-<tr>
-<td style="text-align:left">font-size</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left">16px</td>
-<td style="text-align:left">Default font size (use pixels, converted, is used for rem base)</td>
-</tr>
-<tr>
-<td style="text-align:left">font-weight</td>
-<td style="text-align:left">CssValue</td>
-<td style="text-align:left">inherit</td>
-<td style="text-align:left"></td>
-</tr>
-<tr>
-<td style="text-align:left">font-weight-bold</td>
-<td style="text-align:left">CssValue</td>
-<td style="text-align:left">bold</td>
-<td style="text-align:left"></td>
-</tr>
-<tr>
-<td style="text-align:left">font-weight-light</td>
-<td style="text-align:left">CssValue</td>
-<td style="text-align:left">300</td>
-<td style="text-align:left"></td>
-</tr>
-<tr>
-<td style="text-align:left">font-weight-normal</td>
-<td style="text-align:left">CssValue</td>
-<td style="text-align:left">normal</td>
-<td style="text-align:left"></td>
-</tr>
-<tr>
-<td style="text-align:left">font-weight-semibold</td>
-<td style="text-align:left">CssValue</td>
-<td style="text-align:left">600</td>
-<td style="text-align:left"></td>
-</tr>
-<tr>
-<td style="text-align:left">line-height</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left">1.5</td>
-<td style="text-align:left">Default line height</td>
-</tr>
-<tr>
-<td style="text-align:left">line-height-dense</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left">1.3</td>
-<td style="text-align:left">Default dense line height</td>
+<td style="text-align:left">$changes</td>
+<td style="text-align:left"><code>Map</code></td>
+<td style="text-align:left">Map of changes</td>
 </tr>
 <tr>
-<td style="text-align:left">line-height-densest</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left">1.1</td>
+<td style="text-align:left">@include ulu.typography-set(( &quot;font-size&quot; : 14px ));</td>
 <td style="text-align:left"></td>
-</tr>
-<tr>
-<td style="text-align:left">line-height-spaced</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left">1.75</td>
 <td style="text-align:left"></td>
 </tr>
 </tbody>
 </table>
+<h4 id="require" tabindex="-1">Require</h4>
+<ul>
+<li><a href="/frontend/sass/core/breakpoint/#variable-config">$config</a></li>
+</ul>
 <div class="sassdoc-item-header">
-<h3 id="variable-sizes" tabindex="-1">$sizes</h3>
+<h3 id="mixin-word-break" tabindex="-1">word-break()</h3>
   <div class="sassdoc-item-header__labels">
-    <span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
+    <span class="tag tag--primary"><strong>Mixin</strong></span>
   </div>
 </div>
-<p>Default size presets</p>
-<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$sizes</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-function">get-default-sizes</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
-<details>
-  <summary>File Information</summary>
-<ul>
-<li><strong>File:</strong> _typography.scss</li>
-<li><strong>Group:</strong> typography</li>
-<li><strong>Type:</strong> variable</li>
-<li><strong>Lines (comments):</strong> 181-190</li>
-<li><strong>Lines (code):</strong> 192-192</li>
-</ul>
-</details>
-<h4 id="map-properties-1" tabindex="-1">Map Properties</h4>
-<table>
-<thead>
-<tr>
-<th style="text-align:left">Name</th>
-<th style="text-align:left">Type</th>
-<th style="text-align:left">Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td style="text-align:left">$size.name</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left">Name of size</td>
-</tr>
-<tr>
-<td style="text-align:left">$size.name.font-size</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left">Font size in rems or pixels</td>
-</tr>
-<tr>
-<td style="text-align:left">$size.name.line-height</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left">Line height (unitless)</td>
-</tr>
-<tr>
-<td style="text-align:left">$size.name.responsive</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left">Apply responsive sizes</td>
-</tr>
-<tr>
-<td style="text-align:left">$size.name.breakpoints</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left">Map of breakpoints where each key is breakpoint with map of changes (ie. font-size, etc)</td>
-</tr>
-<tr>
-<td style="text-align:left">$size.name.breakpoints.breakpoint.direction</td>
-<td style="text-align:left">Number</td>
-<td style="text-align:left">Direction the breakpoint should be applied to (ie. min/max)</td>
-</tr>
-<tr>
-<td style="text-align:left">$size.name.base-class</td>
-<td style="text-align:left">Boolean</td>
-<td style="text-align:left">This style should be included in the base (top can be overridden)</td>
-</tr>
-<tr>
-<td style="text-align:left">$size.name.helper-class</td>
-<td style="text-align:left">Boolean</td>
-<td style="text-align:left">This style should be included in the helpers (overrides)</td>
-</tr>
-</tbody>
-</table>
-<h2 id="mixins" tabindex="-1">Mixins</h2>
-<div class="sassdoc-item-header">
-<h3 id="mixin-set" tabindex="-1">set()</h3>
-  <div class="sassdoc-item-header__labels">
-    <span class="tag tag--primary"><strong>Mixin</strong></span>
-  </div>
-</div>
-<p>Change modules $config</p>
-<details>
-  <summary>File Information</summary>
-<ul>
-<li><strong>File:</strong> _typography.scss</li>
-<li><strong>Group:</strong> typography</li>
-<li><strong>Type:</strong> mixin</li>
-<li><strong>Lines (comments):</strong> 66-68</li>
-<li><strong>Lines (code):</strong> 70-72</li>
-</ul>
-</details>
-<h4 id="parameters" tabindex="-1">Parameters</h4>
-<table>
-<thead>
-<tr>
-<th style="text-align:left">Name</th>
-<th style="text-align:left">Type</th>
-<th style="text-align:left">Description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td style="text-align:left">$changes</td>
-<td style="text-align:left"><code>Map</code></td>
-<td style="text-align:left">Map of changes</td>
-</tr>
-<tr>
-<td style="text-align:left">@include ulu.typography-set(( &quot;font-size&quot; : 14px ));</td>
-<td style="text-align:left"></td>
-<td style="text-align:left"></td>
-</tr>
-</tbody>
-</table>
-<h4 id="require" tabindex="-1">Require</h4>
-<ul>
-<li><a href="/frontend/sass/core/breakpoint/#variable-config">$config</a></li>
-</ul>
-<div class="sassdoc-item-header">
-<h3 id="mixin-word-break" tabindex="-1">word-break()</h3>
-  <div class="sassdoc-item-header__labels">
-    <span class="tag tag--primary"><strong>Mixin</strong></span>
-  </div>
-</div>
-<p>Output CSS Break word strategy</p>
+<p>Output CSS Break word strategy</p>
 <details>
   <summary>File Information</summary>
 <ul>
@@ -6286,6 +6093,259 @@
 <ul>
 <li><a href="/frontend/sass/core/breakpoint/#function-get">get()</a></li>
 </ul>
+<h2 id="variables" tabindex="-1">Variables</h2>
+<div class="sassdoc-item-header">
+<h3 id="variable-config" tabindex="-1">$config</h3>
+  <div class="sassdoc-item-header__labels">
+    <span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
+  </div>
+</div>
+<p>Module Settings</p>
+<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$config</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
+  <span class="pjs-token pjs-string">"letter-spacing-uppercase"</span><span class="pjs-token pjs-punctuation">:</span> 0.04em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"margin-bottom"</span><span class="pjs-token pjs-punctuation">:</span>            1em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"margin-top"</span><span class="pjs-token pjs-punctuation">:</span>               <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"responsive-change"</span><span class="pjs-token pjs-punctuation">:</span>        0.05vw<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"scale-steps"</span><span class="pjs-token pjs-punctuation">:</span>              5<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"size-ratio"</span><span class="pjs-token pjs-punctuation">:</span>               1.8<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"size-line-height-ratio"</span><span class="pjs-token pjs-punctuation">:</span>   0.97<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"font-family"</span><span class="pjs-token pjs-punctuation">:</span>              <span class="pjs-token pjs-punctuation">(</span>ui-sans-serif<span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-string">"Open Sans"</span><span class="pjs-token pjs-punctuation">,</span> Helvetica<span class="pjs-token pjs-punctuation">,</span> Arial<span class="pjs-token pjs-punctuation">,</span> sans-serif<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"font-family-monospace"</span><span class="pjs-token pjs-punctuation">:</span>    <span class="pjs-token pjs-punctuation">(</span>Menlo<span class="pjs-token pjs-punctuation">,</span> Consolas<span class="pjs-token pjs-punctuation">,</span> Monaco<span class="pjs-token pjs-punctuation">,</span> monospace<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"font-family-sans"</span><span class="pjs-token pjs-punctuation">:</span>         <span class="pjs-token pjs-punctuation">(</span>ui-sans-serif<span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-string">"Open Sans"</span><span class="pjs-token pjs-punctuation">,</span> Helvetica<span class="pjs-token pjs-punctuation">,</span> Arial<span class="pjs-token pjs-punctuation">,</span> sans-serif<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"font-family-serif"</span><span class="pjs-token pjs-punctuation">:</span>        <span class="pjs-token pjs-punctuation">(</span>Cambria<span class="pjs-token pjs-punctuation">,</span> Georgia<span class="pjs-token pjs-punctuation">,</span> serif<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"font-size"</span><span class="pjs-token pjs-punctuation">:</span>                16px<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"font-weight"</span><span class="pjs-token pjs-punctuation">:</span>              inherit<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"font-weight-bold"</span><span class="pjs-token pjs-punctuation">:</span>         bold<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"font-weight-light"</span><span class="pjs-token pjs-punctuation">:</span>        300<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"font-weight-normal"</span><span class="pjs-token pjs-punctuation">:</span>       normal<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"font-weight-semibold"</span><span class="pjs-token pjs-punctuation">:</span>     600<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"line-height"</span><span class="pjs-token pjs-punctuation">:</span>              1.5<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"line-height-dense"</span><span class="pjs-token pjs-punctuation">:</span>        1.3<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"line-height-densest"</span><span class="pjs-token pjs-punctuation">:</span>      1.1<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"line-height-spaced"</span><span class="pjs-token pjs-punctuation">:</span>       1.75<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"max-width"</span><span class="pjs-token pjs-punctuation">:</span>                60em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"max-width-large"</span><span class="pjs-token pjs-punctuation">:</span>          75em<span class="pjs-token pjs-punctuation">,</span>
+  <span class="pjs-token pjs-string">"max-width-small"</span><span class="pjs-token pjs-punctuation">:</span>          45em<span class="pjs-token pjs-punctuation">,</span>
+<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
+<details>
+  <summary>File Information</summary>
+<ul>
+<li><strong>File:</strong> _typography.scss</li>
+<li><strong>Group:</strong> typography</li>
+<li><strong>Type:</strong> variable</li>
+<li><strong>Lines (comments):</strong> 15-37</li>
+<li><strong>Lines (code):</strong> 39-64</li>
+</ul>
+</details>
+<h4 id="map-properties" tabindex="-1">Map Properties</h4>
+<table>
+<thead>
+<tr>
+<th style="text-align:left">Name</th>
+<th style="text-align:left">Type</th>
+<th style="text-align:left">Default</th>
+<th style="text-align:left">Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td style="text-align:left">letter-spacing-uppercase</td>
+<td style="text-align:left">Dimension</td>
+<td style="text-align:left">0.04em</td>
+<td style="text-align:left"></td>
+</tr>
+<tr>
+<td style="text-align:left">margin-bottom</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">1em</td>
+<td style="text-align:left">Default margin for typography (like paragraphs)</td>
+</tr>
+<tr>
+<td style="text-align:left">margin-top</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">null</td>
+<td style="text-align:left">Default margin for typography (like paragraphs)</td>
+</tr>
+<tr>
+<td style="text-align:left">responsive-change</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">0.05vw</td>
+<td style="text-align:left">Amount to scale typography by browser's width (use viewport units)</td>
+</tr>
+<tr>
+<td style="text-align:left">scale-steps</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">5</td>
+<td style="text-align:left"></td>
+</tr>
+<tr>
+<td style="text-align:left">size-ratio</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">1.8</td>
+<td style="text-align:left">Font size scale when using preset sizes, ratio mixin)</td>
+</tr>
+<tr>
+<td style="text-align:left">size-line-height-ratio</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">0.97</td>
+<td style="text-align:left">Default line height scaling (when using preset sizes, ratio mixin). Can shrink line-height as size increase if desirable</td>
+</tr>
+<tr>
+<td style="text-align:left">font-family</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">(ui-sans-serif, &quot;Open Sans&quot;, Helvetica, Arial, sans-serif)</td>
+<td style="text-align:left">Default font family</td>
+</tr>
+<tr>
+<td style="text-align:left">font-family-monospace</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">(Menlo, Consolas, Monaco, monospace)</td>
+<td style="text-align:left">Base font-family for monospace</td>
+</tr>
+<tr>
+<td style="text-align:left">font-family-sans</td>
+<td style="text-align:left">CssValue</td>
+<td style="text-align:left">(ui-sans-serif, &quot;Open Sans&quot;, Helvetica, Arial, sans-serif)</td>
+<td style="text-align:left"></td>
+</tr>
+<tr>
+<td style="text-align:left">font-family-serif</td>
+<td style="text-align:left">CssValue</td>
+<td style="text-align:left">(Cambria, Georgia, serif</td>
+<td style="text-align:left"></td>
+</tr>
+<tr>
+<td style="text-align:left">font-size</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">16px</td>
+<td style="text-align:left">Default font size (use pixels, converted, is used for rem base)</td>
+</tr>
+<tr>
+<td style="text-align:left">font-weight</td>
+<td style="text-align:left">CssValue</td>
+<td style="text-align:left">inherit</td>
+<td style="text-align:left"></td>
+</tr>
+<tr>
+<td style="text-align:left">font-weight-bold</td>
+<td style="text-align:left">CssValue</td>
+<td style="text-align:left">bold</td>
+<td style="text-align:left"></td>
+</tr>
+<tr>
+<td style="text-align:left">font-weight-light</td>
+<td style="text-align:left">CssValue</td>
+<td style="text-align:left">300</td>
+<td style="text-align:left"></td>
+</tr>
+<tr>
+<td style="text-align:left">font-weight-normal</td>
+<td style="text-align:left">CssValue</td>
+<td style="text-align:left">normal</td>
+<td style="text-align:left"></td>
+</tr>
+<tr>
+<td style="text-align:left">font-weight-semibold</td>
+<td style="text-align:left">CssValue</td>
+<td style="text-align:left">600</td>
+<td style="text-align:left"></td>
+</tr>
+<tr>
+<td style="text-align:left">line-height</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">1.5</td>
+<td style="text-align:left">Default line height</td>
+</tr>
+<tr>
+<td style="text-align:left">line-height-dense</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">1.3</td>
+<td style="text-align:left">Default dense line height</td>
+</tr>
+<tr>
+<td style="text-align:left">line-height-densest</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">1.1</td>
+<td style="text-align:left"></td>
+</tr>
+<tr>
+<td style="text-align:left">line-height-spaced</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">1.75</td>
+<td style="text-align:left"></td>
+</tr>
+</tbody>
+</table>
+<div class="sassdoc-item-header">
+<h3 id="variable-sizes" tabindex="-1">$sizes</h3>
+  <div class="sassdoc-item-header__labels">
+    <span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
+  </div>
+</div>
+<p>Default size presets</p>
+<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$sizes</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-function">get-default-sizes</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
+<details>
+  <summary>File Information</summary>
+<ul>
+<li><strong>File:</strong> _typography.scss</li>
+<li><strong>Group:</strong> typography</li>
+<li><strong>Type:</strong> variable</li>
+<li><strong>Lines (comments):</strong> 181-190</li>
+<li><strong>Lines (code):</strong> 192-192</li>
+</ul>
+</details>
+<h4 id="map-properties-1" tabindex="-1">Map Properties</h4>
+<table>
+<thead>
+<tr>
+<th style="text-align:left">Name</th>
+<th style="text-align:left">Type</th>
+<th style="text-align:left">Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td style="text-align:left">$size.name</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">Name of size</td>
+</tr>
+<tr>
+<td style="text-align:left">$size.name.font-size</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">Font size in rems or pixels</td>
+</tr>
+<tr>
+<td style="text-align:left">$size.name.line-height</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">Line height (unitless)</td>
+</tr>
+<tr>
+<td style="text-align:left">$size.name.responsive</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">Apply responsive sizes</td>
+</tr>
+<tr>
+<td style="text-align:left">$size.name.breakpoints</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">Map of breakpoints where each key is breakpoint with map of changes (ie. font-size, etc)</td>
+</tr>
+<tr>
+<td style="text-align:left">$size.name.breakpoints.breakpoint.direction</td>
+<td style="text-align:left">Number</td>
+<td style="text-align:left">Direction the breakpoint should be applied to (ie. min/max)</td>
+</tr>
+<tr>
+<td style="text-align:left">$size.name.base-class</td>
+<td style="text-align:left">Boolean</td>
+<td style="text-align:left">This style should be included in the base (top can be overridden)</td>
+</tr>
+<tr>
+<td style="text-align:left">$size.name.helper-class</td>
+<td style="text-align:left">Boolean</td>
+<td style="text-align:left">This style should be included in the helpers (overrides)</td>
+</tr>
+</tbody>
+</table>
 
     </div>
   </div>