Update components with data-names

mrmrs · mrmrs · commit f703981145b8 · 2016-08-31T14:46:13.000+01:00
diff --git a/build.js b/build.js
@@ -1,5 +1,5 @@
-//require('./src/components-build')()
-//console.log('components build complete')
+require('./src/components-build')()
+console.log('components build complete')
 require('./src/table-of-styles-build')()
 console.log('table of styles build complete')
 require('./src/table-of-properties-build')()
diff --git a/components/lists/slab-stat-large/index.html b/components/lists/slab-stat-large/index.html
@@ -24,30 +24,30 @@
 </head>
 <body class="w-100 sans-serif bg-white">
 <main>
-  <article class="pa3 pa5-ns" data-component-name="slab-stat-large">
+  <article class="pa3 pa5-ns" data-name="slab-stat-large">
   <h3 class="f6 ttu tracked">Today</h3>
   <div class="cf">
-    <dl class="fl fn-l w-50 dib-l w-auto-l lh-title mr6-l">
+    <dl class="db dib-l w-auto-l lh-title mr6-l">
       <dd class="f6 fw4 ml0">Closed Issues</dd>
-      <dd class="f3 f2-m f-subheadline-l fw6 ml0">1,024</dd>
+      <dd class="f2 f-subheadline-l fw6 ml0">1,024</dd>
     </dl>
-    <dl class="fl fn-l w-50 dib-l w-auto-l lh-title mr6-l">
+    <dl class="db dib-l w-auto-l lh-title mr6-l">
       <dd class="f6 fw4 ml0">Open Issues</dd>
       <dd class="f3 f2-m f-subheadline-l fw6 ml0">993</dd>
     </dl>
-    <dl class="fl fn-l w-50 dib-l w-auto-l lh-title mr6-l">
+    <dl class="db dib-l w-auto-l lh-title mr6-l">
       <dd class="f6 fw4 ml0">Next Release</dd>
       <dd class="f3 f2-m f-subheadline-l fw6 ml0">10-22</dd>
     </dl>
-    <dl class="fl fn-l w-50 dib-l w-auto-l lh-title mr6-l">
+    <dl class="db dib-l w-auto-l lh-title mr6-l">
       <dd class="f6 fw4 ml0">Days Left</dd>
       <dd class="f3 f2-m f-subheadline-l fw6 ml0">4</dd>
     </dl>
-    <dl class="fl fn-l w-50 dib-l w-auto-l lh-title mr6-l">
+    <dl class="db dib-l w-auto-l lh-title mr6-l">
       <dd class="f6 fw4 ml0">Favorite Cat</dd>
       <dd class="f3 f2-m f-subheadline-l fw6 ml0">All of Them</dd>
     </dl>
-    <dl class="fl fn-l w-50 dib-l w-auto-l lh-title">
+    <dl class="db dib-l w-auto-l lh-title">
       <dd class="f6 fw4 ml0">App Downloads</dd>
       <dd class="f3 f2-m f-subheadline-l fw6 ml0">1,200</dd>
     </dl>
@@ -61,30 +61,30 @@ <h1 class="f4 f3-ns mt4">Slab Stat Large</h1>
 <h2 class="f5">HTML</h2>
 <p class="f5 black-70"></p>
 <pre class="pa3 ba br2 b--black-10 h5 bg-white-20" id="html">
-&lt;article class=&quot;pa3 pa5-ns&quot; data-component-name=&quot;slab-stat-large&quot;&gt;
+&lt;article class=&quot;pa3 pa5-ns&quot; data-name=&quot;slab-stat-large&quot;&gt;
   &lt;h3 class=&quot;f6 ttu tracked&quot;&gt;Today&lt;/h3&gt;
   &lt;div class=&quot;cf&quot;&gt;
-    &lt;dl class=&quot;fl fn-l w-50 dib-l w-auto-l lh-title mr6-l&quot;&gt;
+    &lt;dl class=&quot;db dib-l w-auto-l lh-title mr6-l&quot;&gt;
       &lt;dd class=&quot;f6 fw4 ml0&quot;&gt;Closed Issues&lt;/dd&gt;
-      &lt;dd class=&quot;f3 f2-m f-subheadline-l fw6 ml0&quot;&gt;1,024&lt;/dd&gt;
+      &lt;dd class=&quot;f2 f-subheadline-l fw6 ml0&quot;&gt;1,024&lt;/dd&gt;
     &lt;/dl&gt;
-    &lt;dl class=&quot;fl fn-l w-50 dib-l w-auto-l lh-title mr6-l&quot;&gt;
+    &lt;dl class=&quot;db dib-l w-auto-l lh-title mr6-l&quot;&gt;
       &lt;dd class=&quot;f6 fw4 ml0&quot;&gt;Open Issues&lt;/dd&gt;
       &lt;dd class=&quot;f3 f2-m f-subheadline-l fw6 ml0&quot;&gt;993&lt;/dd&gt;
     &lt;/dl&gt;
-    &lt;dl class=&quot;fl fn-l w-50 dib-l w-auto-l lh-title mr6-l&quot;&gt;
+    &lt;dl class=&quot;db dib-l w-auto-l lh-title mr6-l&quot;&gt;
       &lt;dd class=&quot;f6 fw4 ml0&quot;&gt;Next Release&lt;/dd&gt;
       &lt;dd class=&quot;f3 f2-m f-subheadline-l fw6 ml0&quot;&gt;10-22&lt;/dd&gt;
     &lt;/dl&gt;
-    &lt;dl class=&quot;fl fn-l w-50 dib-l w-auto-l lh-title mr6-l&quot;&gt;
+    &lt;dl class=&quot;db dib-l w-auto-l lh-title mr6-l&quot;&gt;
       &lt;dd class=&quot;f6 fw4 ml0&quot;&gt;Days Left&lt;/dd&gt;
       &lt;dd class=&quot;f3 f2-m f-subheadline-l fw6 ml0&quot;&gt;4&lt;/dd&gt;
     &lt;/dl&gt;
-    &lt;dl class=&quot;fl fn-l w-50 dib-l w-auto-l lh-title mr6-l&quot;&gt;
+    &lt;dl class=&quot;db dib-l w-auto-l lh-title mr6-l&quot;&gt;
       &lt;dd class=&quot;f6 fw4 ml0&quot;&gt;Favorite Cat&lt;/dd&gt;
       &lt;dd class=&quot;f3 f2-m f-subheadline-l fw6 ml0&quot;&gt;All of Them&lt;/dd&gt;
     &lt;/dl&gt;
-    &lt;dl class=&quot;fl fn-l w-50 dib-l w-auto-l lh-title&quot;&gt;
+    &lt;dl class=&quot;db dib-l w-auto-l lh-title&quot;&gt;
       &lt;dd class=&quot;f6 fw4 ml0&quot;&gt;App Downloads&lt;/dd&gt;
       &lt;dd class=&quot;f3 f2-m f-subheadline-l fw6 ml0&quot;&gt;1,200&lt;/dd&gt;
     &lt;/dl&gt;
@@ -108,9 +108,8 @@ <h2 class="f5">css</h2>
     *zoom: 1;
 }
 
-.fl {
-    float: left;
-    _display: inline;
+.db {
+    display: block;
 }
 
 .fw4 {
@@ -129,10 +128,6 @@ <h2 class="f5">css</h2>
     line-height: 1.3;
 }
 
-.w-50 {
-    width: 50%;
-}
-
 .pa3 {
     padding: 1rem;
 }
@@ -145,6 +140,10 @@ <h2 class="f5">css</h2>
     text-transform: uppercase;
 }
 
+.f2 {
+    font-size: 2.25rem;
+}
+
 .f3 {
     font-size: 1.5rem;
 }
@@ -170,10 +169,6 @@ <h2 class="f5">css</h2>
         display: inline-block;
     }
 
-    .fn-l {
-        float: none;
-    }
-
     .w-auto-l {
         width: auto;
     }
@@ -195,16 +190,16 @@ <h2 class="f5">css</h2>
     <h2 class="f5 mb3 mt4">Css stats for this component</h2>
     <dl class="dib mr4 mt0">
       <dt class="db f6">Gzipped Size</dt>
-      <dd class="ml0 b f3 f2-ns">399<small class="f6">B</small>
+      <dd class="ml0 b f3 f2-ns">373<small class="f6">B</small>
       </dd>
     </dl>
     <dl class="dib mr4 mt0">
       <dt class="db f6">Selectors</dt>
-      <dd class="ml0 b f3 f2-ns">22</dd>
+      <dd class="ml0 b f3 f2-ns">21</dd>
     </dl>
     <dl class="dib mt0">
       <dt class="db f6">Declarations</dt>
-      <dd class="ml0 b f3 f2-ns">23</dd>
+      <dd class="ml0 b f3 f2-ns">21</dd>
     </dl>
   </div>
   <div class="fl w-100">
@@ -213,23 +208,21 @@ <h2 class="f5 mt4">Modules referenced</h2>
       
     <li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-clears">tachyons-clears</a></li>
   
-    <li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-floats">tachyons-floats</a></li>
+    <li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-display">tachyons-display</a></li>
   
     <li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-font-weight">tachyons-font-weight</a></li>
   
     <li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-letter-spacing">tachyons-letter-spacing</a></li>
   
     <li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-line-height">tachyons-line-height</a></li>
   
-    <li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-widths">tachyons-widths</a></li>
-  
     <li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-spacing">tachyons-spacing</a></li>
   
     <li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-text-transform">tachyons-text-transform</a></li>
   
     <li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-type-scale">tachyons-type-scale</a></li>
   
-    <li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-display">tachyons-display</a></li>
+    <li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-widths">tachyons-widths</a></li>
   
     </ul>
   </div>
@@ -239,7 +232,7 @@ <h2 class="f5 mt4">Modules referenced</h2>
 
 
   <h4 class="mt5">Install via npm <small class="fw2 f6 db mt1">Only installs the needed tachyons-modules for this component</small></h4>
-  <code class="f6">npm i --save tachyons-clears tachyons-floats tachyons-font-weight tachyons-letter-spacing tachyons-line-height tachyons-widths tachyons-spacing tachyons-text-transform tachyons-type-scale tachyons-display</code>
+  <code class="f6">npm i --save tachyons-clears tachyons-display tachyons-font-weight tachyons-letter-spacing tachyons-line-height tachyons-spacing tachyons-text-transform tachyons-type-scale tachyons-widths</code>
   <section class="bt b--black-10 mt5 pv4">
     <h1 class="f6 b ttu">Other Components</h1>
 
diff --git a/components/lists/slab-stat-small/index.html b/components/lists/slab-stat-small/index.html
@@ -24,7 +24,7 @@
 </head>
 <body class="w-100 sans-serif bg-white">
 <main>
-  <article class="pa3 pa5-ns" data-component-name="slab-stat-small">
+  <article class="pa3 pa5-ns" data-name="slab-stat-small">
   <h3 class="f6 ttu tracked">Today</h3>
   <div class="cf">
     <dl class="fl fn-l w-50 dib-l w-auto-l lh-title mr5-l">
@@ -61,7 +61,7 @@ <h1 class="f4 f3-ns mt4">Slab Stat Small</h1>
 <h2 class="f5">HTML</h2>
 <p class="f5 black-70"></p>
 <pre class="pa3 ba br2 b--black-10 h5 bg-white-20" id="html">
-&lt;article class=&quot;pa3 pa5-ns&quot; data-component-name=&quot;slab-stat-small&quot;&gt;
+&lt;article class=&quot;pa3 pa5-ns&quot; data-name=&quot;slab-stat-small&quot;&gt;
   &lt;h3 class=&quot;f6 ttu tracked&quot;&gt;Today&lt;/h3&gt;
   &lt;div class=&quot;cf&quot;&gt;
     &lt;dl class=&quot;fl fn-l w-50 dib-l w-auto-l lh-title mr5-l&quot;&gt;
diff --git a/components/lists/slab-stat/index.html b/components/lists/slab-stat/index.html
@@ -24,7 +24,7 @@
 </head>
 <body class="w-100 sans-serif bg-white">
 <main>
-  <article class="pa3 pa5-ns">
+  <article class="pa3 pa5-ns" data-name="slab-stat">
   <h1>Today</h1>
   <dl class="dib mr5">
     <dd class="f6 f5-ns b ml0">Closed Issues</dd>
@@ -59,7 +59,7 @@ <h1 class="f4 f3-ns mt4">Slab Stat</h1>
 <h2 class="f5">HTML</h2>
 <p class="f5 black-70"></p>
 <pre class="pa3 ba br2 b--black-10 h5 bg-white-20" id="html">
-&lt;article class=&quot;pa3 pa5-ns&quot;&gt;
+&lt;article class=&quot;pa3 pa5-ns&quot; data-name=&quot;slab-stat&quot;&gt;
   &lt;h1&gt;Today&lt;/h1&gt;
   &lt;dl class=&quot;dib mr5&quot;&gt;
     &lt;dd class=&quot;f6 f5-ns b ml0&quot;&gt;Closed Issues&lt;/dd&gt;
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tachyons-css.github.io",
-  "version": "4.1.2",
+  "version": "4.1.3",
   "description": "Documentation for Tachyons -- a performant, mobile-first, and 100% responsive modular css framework.",
   "main": "index.html",
   "scripts": {
@@ -13,6 +13,7 @@
     "doc:watch": "watch 'npm run doc' src/templates/docs",
     "doc:lib": "watch 'npm run doc' lib",
     "doc:images": "watch 'node src/modules/images.js' src/templates/docs/images",
+    "doc:bgsize": "watch 'node src/modules/background-size.js' src/templates/docs/background-size",
     "build:all": "node build.js && bash script.sh"
   },
   "repository": "tachyons-css/tachyons-css.github.io",
diff --git a/src/components/lists/slab-stat-large.html b/src/components/lists/slab-stat-large.html
@@ -1,30 +1,30 @@
 {{{
   "bodyClass" : "bg-white"
 }}}
-<article class="pa3 pa5-ns" data-component-name="slab-stat-large">
+<article class="pa3 pa5-ns" data-name="slab-stat-large">
   <h3 class="f6 ttu tracked">Today</h3>
   <div class="cf">
-    <dl class="fl fn-l w-50 dib-l w-auto-l lh-title mr6-l">
+    <dl class="db dib-l w-auto-l lh-title mr6-l">
       <dd class="f6 fw4 ml0">Closed Issues</dd>
-      <dd class="f3 f2-m f-subheadline-l fw6 ml0">1,024</dd>
+      <dd class="f2 f-subheadline-l fw6 ml0">1,024</dd>
     </dl>
-    <dl class="fl fn-l w-50 dib-l w-auto-l lh-title mr6-l">
+    <dl class="db dib-l w-auto-l lh-title mr6-l">
       <dd class="f6 fw4 ml0">Open Issues</dd>
       <dd class="f3 f2-m f-subheadline-l fw6 ml0">993</dd>
     </dl>
-    <dl class="fl fn-l w-50 dib-l w-auto-l lh-title mr6-l">
+    <dl class="db dib-l w-auto-l lh-title mr6-l">
       <dd class="f6 fw4 ml0">Next Release</dd>
       <dd class="f3 f2-m f-subheadline-l fw6 ml0">10-22</dd>
     </dl>
-    <dl class="fl fn-l w-50 dib-l w-auto-l lh-title mr6-l">
+    <dl class="db dib-l w-auto-l lh-title mr6-l">
       <dd class="f6 fw4 ml0">Days Left</dd>
       <dd class="f3 f2-m f-subheadline-l fw6 ml0">4</dd>
     </dl>
-    <dl class="fl fn-l w-50 dib-l w-auto-l lh-title mr6-l">
+    <dl class="db dib-l w-auto-l lh-title mr6-l">
       <dd class="f6 fw4 ml0">Favorite Cat</dd>
       <dd class="f3 f2-m f-subheadline-l fw6 ml0">All of Them</dd>
     </dl>
-    <dl class="fl fn-l w-50 dib-l w-auto-l lh-title">
+    <dl class="db dib-l w-auto-l lh-title">
       <dd class="f6 fw4 ml0">App Downloads</dd>
       <dd class="f3 f2-m f-subheadline-l fw6 ml0">1,200</dd>
     </dl>
diff --git a/src/components/lists/slab-stat-small.html b/src/components/lists/slab-stat-small.html
@@ -1,7 +1,7 @@
 {{{
   "bodyClass" : "bg-white"
 }}}
-<article class="pa3 pa5-ns" data-component-name="slab-stat-small">
+<article class="pa3 pa5-ns" data-name="slab-stat-small">
   <h3 class="f6 ttu tracked">Today</h3>
   <div class="cf">
     <dl class="fl fn-l w-50 dib-l w-auto-l lh-title mr5-l">
diff --git a/src/components/lists/slab-stat.html b/src/components/lists/slab-stat.html
@@ -1,7 +1,7 @@
 {{{
   "bodyClass" : "bg-white"
 }}}
-<article class="pa3 pa5-ns">
+<article class="pa3 pa5-ns" data-name="slab-stat">
   <h1>Today</h1>
   <dl class="dib mr5">
     <dd class="f6 f5-ns b ml0">Closed Issues</dd>
