tachyons-css · gamebox · Apr 9, 2016 · Apr 9, 2016 · Apr 21, 2016
diff --git a/build.js b/build.js
@@ -1,3 +1,3 @@
 require('./src/components-build')()
 require('./src/table-of-styles-build')()
-require('./src/home-build')()
+require('./src/home-and-custom-build')()
diff --git a/components/index.html b/components/index.html
@@ -33,6 +33,9 @@
         class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
       Components
     </a>
+    <a title="Custom Build" href="/custom/"
+        class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
+      Custom Build</a>
     <a title="Tachyons on GitHub" href="http://github.com/mrmrs/tachyons/"
         class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dn dib-ns">
       GitHub

diff --git a/custom/index.html b/custom/index.html
diff --git a/custom/modules.json b/custom/modules.json
@@ -0,0 +1 @@
+[{"name":"tachyons-background-size","version":"3.0.3","size":"139 B"},{"name":"tachyons-base","version":"1.2.3","size":"44 B"},{"name":"tachyons-border-colors","version":"4.0.5","size":"297 B"},{"name":"tachyons-border-radius","version":"3.1.0","size":"191 B"},{"name":"tachyons-border-style","version":"3.0.2","size":"168 B"},{"name":"tachyons-border-widths","version":"2.0.2","size":"185 B"},{"name":"tachyons-borders","version":"2.1.0","size":"228 B"},{"name":"tachyons-box-sizing","version":"3.1.1","size":"156 B"},{"name":"tachyons-clears","version":"2.1.0","size":"187 B"},{"name":"tachyons-colors","version":"5.1.2","size":"22 B"},{"name":"tachyons-coordinates","version":"2.2.0","size":"426 B"},{"name":"tachyons-debug","version":"1.1.2","size":"902 B"},{"name":"tachyons-display","version":"3.0.3","size":"238 B"},{"name":"tachyons-display-verbose","version":"1.0.0","size":"257 B"},{"name":"tachyons-floats","version":"2.0.4","size":"175 B"},{"name":"tachyons-font-family","version":"4.1.1","size":"232 B"},{"name":"tachyons-font-style","version":"3.0.1","size":"132 B"},{"name":"tachyons-font-weight","version":"4.0.3","size":"246 B"},{"name":"tachyons-forms","version":"2.0.1","size":"94 B"},{"name":"tachyons-heights","version":"4.1.3","size":"254 B"},{"name":"tachyons-hovers","version":"2.0.5","size":"149 B"},{"name":"tachyons-images","version":"1.0.3","size":"41 B"},{"name":"tachyons-letter-spacing","version":"2.1.2","size":"162 B"},{"name":"tachyons-line-height","version":"2.0.4","size":"151 B"},{"name":"tachyons-links","version":"3.0.1","size":"111 B"},{"name":"tachyons-lists","version":"2.0.4","size":"46 B"},{"name":"tachyons-max-widths","version":"3.1.1","size":"245 B"},{"name":"tachyons-opacity","version":"1.0.0","size":"103 B"},{"name":"tachyons-outlines","version":"1.0.0","size":"155 B"},{"name":"tachyons-overflow","version":"3.0.1","size":"300 B"},{"name":"tachyons-position","version":"5.0.1","size":"169 B"},{"name":"tachyons-skins","version":"3.1.3","size":"682 B"},{"name":"tachyons-spacing","version":"5.0.6","size":"1.71 KB"},{"name":"tachyons-text-align","version":"2.0.4","size":"146 B"},{"name":"tachyons-text-decoration","version":"3.1.1","size":"162 B"},{"name":"tachyons-text-transform","version":"3.0.5","size":"174 B"},{"name":"tachyons-type-scale","version":"5.0.3","size":"243 B"},{"name":"tachyons-typography","version":"2.2.0","size":"245 B"},{"name":"tachyons-utilities","version":"1.2.1","size":"201 B"},{"name":"tachyons-vertical-align","version":"2.0.3","size":"242 B"},{"name":"tachyons-visibility","version":"1.0.4","size":"156 B"},{"name":"tachyons-white-space","version":"2.0.3","size":"154 B"},{"name":"tachyons-widths","version":"4.0.2","size":"318 B"},{"name":"tachyons-word-break","version":"1.0.1","size":"160 B"}]
diff --git a/docs/table-of-styles/index.html b/docs/table-of-styles/index.html
@@ -37,6 +37,9 @@
         class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
       Components
     </a>
+    <a title="Custom Build" href="/custom/"
+        class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
+      Custom Build</a>
     <a title="Tachyons on GitHub" href="http://github.com/mrmrs/tachyons/"
         class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dn dib-ns">
       GitHub

diff --git a/index.html b/index.html
@@ -329,7 +329,7 @@ <h1><a href="#npm" class="link near-black">NPM</a></h1>
           <div class="mb3 fl w-100 w-50-m w-33-l">
             <a class="db f4 link mb1 dim near-black b" href="http://npmjs.com/package/tachyons-background-size">tachyons-background-size</a>
             <div>
-              <span class="fw4 pr2">v3.0.2</span>
+              <span class="fw4 pr2">v3.0.3</span>
               <span>139 B</span>
               <a class="link dim near-black dib ml2 f6" href="http://github.com/tachyons-css/tachyons-background-size">View on GitHub</a>
             </div>
@@ -365,7 +365,7 @@ <h1><a href="#npm" class="link near-black">NPM</a></h1>
           <div class="mb3 fl w-100 w-50-m w-33-l">
             <a class="db f4 link mb1 dim near-black b" href="http://npmjs.com/package/tachyons-border-style">tachyons-border-style</a>
             <div>
-              <span class="fw4 pr2">v3.0.1</span>
+              <span class="fw4 pr2">v3.0.2</span>
               <span>168 B</span>
               <a class="link dim near-black dib ml2 f6" href="http://github.com/tachyons-css/tachyons-border-style">View on GitHub</a>
             </div>
@@ -383,8 +383,8 @@ <h1><a href="#npm" class="link near-black">NPM</a></h1>
           <div class="mb3 fl w-100 w-50-m w-33-l">
             <a class="db f4 link mb1 dim near-black b" href="http://npmjs.com/package/tachyons-borders">tachyons-borders</a>
             <div>
-              <span class="fw4 pr2">v2.0.3</span>
-              <span>208 B</span>
+              <span class="fw4 pr2">v2.1.0</span>
+              <span>228 B</span>
               <a class="link dim near-black dib ml2 f6" href="http://github.com/tachyons-css/tachyons-borders">View on GitHub</a>
             </div>
           </div>
@@ -401,8 +401,8 @@ <h1><a href="#npm" class="link near-black">NPM</a></h1>
           <div class="mb3 fl w-100 w-50-m w-33-l">
             <a class="db f4 link mb1 dim near-black b" href="http://npmjs.com/package/tachyons-clears">tachyons-clears</a>
             <div>
-              <span class="fw4 pr2">v2.0.4</span>
-              <span>92 B</span>
+              <span class="fw4 pr2">v2.1.0</span>
+              <span>187 B</span>
               <a class="link dim near-black dib ml2 f6" href="http://github.com/tachyons-css/tachyons-clears">View on GitHub</a>
             </div>
           </div>
@@ -500,8 +500,8 @@ <h1><a href="#npm" class="link near-black">NPM</a></h1>
           <div class="mb3 fl w-100 w-50-m w-33-l">
             <a class="db f4 link mb1 dim near-black b" href="http://npmjs.com/package/tachyons-heights">tachyons-heights</a>
             <div>
-              <span class="fw4 pr2">v4.1.0</span>
-              <span>234 B</span>
+              <span class="fw4 pr2">v4.1.3</span>
+              <span>254 B</span>
               <a class="link dim near-black dib ml2 f6" href="http://github.com/tachyons-css/tachyons-heights">View on GitHub</a>
             </div>
           </div>
@@ -605,11 +605,20 @@ <h1><a href="#npm" class="link near-black">NPM</a></h1>
             </div>
           </div>
 
+          <div class="mb3 fl w-100 w-50-m w-33-l">
+            <a class="db f4 link mb1 dim near-black b" href="http://npmjs.com/package/tachyons-skins">tachyons-skins</a>
+            <div>
+              <span class="fw4 pr2">v3.1.3</span>
+              <span>682 B</span>
+              <a class="link dim near-black dib ml2 f6" href="http://github.com/tachyons-css/tachyons-skins">View on GitHub</a>
+            </div>
+          </div>
+
           <div class="mb3 fl w-100 w-50-m w-33-l">
             <a class="db f4 link mb1 dim near-black b" href="http://npmjs.com/package/tachyons-spacing">tachyons-spacing</a>
             <div>
-              <span class="fw4 pr2">v5.0.4</span>
-              <span>1.7 KB</span>
+              <span class="fw4 pr2">v5.0.6</span>
+              <span>1.71 KB</span>
               <a class="link dim near-black dib ml2 f6" href="http://github.com/tachyons-css/tachyons-spacing">View on GitHub</a>
             </div>
           </div>
@@ -653,8 +662,8 @@ <h1><a href="#npm" class="link near-black">NPM</a></h1>
           <div class="mb3 fl w-100 w-50-m w-33-l">
             <a class="db f4 link mb1 dim near-black b" href="http://npmjs.com/package/tachyons-typography">tachyons-typography</a>
             <div>
-              <span class="fw4 pr2">v2.1.1</span>
-              <span>226 B</span>
+              <span class="fw4 pr2">v2.2.0</span>
+              <span>245 B</span>
               <a class="link dim near-black dib ml2 f6" href="http://github.com/tachyons-css/tachyons-typography">View on GitHub</a>
             </div>
           </div>

diff --git a/js/custom.js b/js/custom.js
@@ -0,0 +1,106 @@
+'use strict';
+(function () {
+  var selectedModules = {};
+  var showSubmit = true;
+  var showDownload = false;
+  var showReset = false;
+  var buildUrl;
+
+  var toggleClass = function (el, class_) {
+    if(el.hasClass(class_)){
+      el.removeClass(class_)
+    }
+    else {
+      el.addClass(class_)
+    }
+  }
+
+  var pkgClickHandler = function (evt) {
+    evt.preventDefault();
+    var el = $(evt.target)
+    var name = el.attr('data-package')
+    if(selectedModules[name]) {
+      selectedModules[name] = undefined
+      if(_.pairs(selectedModules).length === 0) {
+        showReset = false
+      }
+    } else {
+      var css = el.attr('data-css')
+      selectedModules[name] = css
+      showReset = true
+    }
+    updateView()
+  }
+
+  var submitClickHandler = function (evt) {
+    var file = _.reduce(selectedModules, function (file, module) {
+      file += module
+      return file
+    }, '')
+
+    buildUrl = URL.createObjectURL(new Blob([file], {type: 'text/css'}))
+    showDownload = true;
+    updateView()
+  }
+
+  var resetClickHandler = function (evt) {
+    selectedModules = {}
+    showSubmit = true
+    showDownload = false
+    showReset = false
+    updateView()
+  }
+
+  var applyConditionalClass = function (el, condition, class_) {
+    if((condition && !el.hasClass(class_)) ||
+       (!condition && el.hasClass(class_))) {
+      toggleClass(el, class_)
+    }
+  }
+
+  var updateView = function() {
+    var pkgs = $('.pkg')
+    var download = $('.download')
+    var submit = $('.submit')
+    var reset = $('.reset')
+
+    var numModules = _.pairs(selectedModules).length
+    if(numModules === 0) {
+      pkgs.each(function(p) {
+        var pkg = $(p)
+        pkg.parent().removeClass('o-40')
+      })
+      submit.text('Select Modules To Build')
+      submit.attr('disabled', true)
+    } else {
+      pkgs.each(function(p) {
+        var pkg = $(p)
+        applyConditionalClass(pkg.parent(), selectedModules[pkg.attr('data-package')], 'o-40');
+      })
+      submit.text('Build ' + numModules + ' Modules')
+      submit.removeAttr('disabled')
+    }
+
+    applyConditionalClass(submit, showSubmit, 'db')
+    applyConditionalClass(submit, !showSubmit, 'dn')
+
+    applyConditionalClass(download, showDownload, 'db')
+    applyConditionalClass(download, !showDownload, 'dn')
+
+    applyConditionalClass(reset, showReset, 'db')
+    applyConditionalClass(reset, !showReset, 'dn')
+
+    if(showDownload) {
+      download.attr('href', buildUrl)
+    }
+  }
+
+  $('.reset').on('click', resetClickHandler)
+
+  $('.pkg').each(function(v) {
+    $(v).on('click', pkgClickHandler)
+  })
+
+  $('.submit').on('click', submitClickHandler)
+
+})()
diff --git a/package.json b/package.json
@@ -132,6 +132,10 @@
       "name": "lachlan campbell",
       "url": "http://lachlanjc.me",
       "email": "[email protected]"
+    },
+    {
+      "name": "anthony bullard",
+      "email": "[email protected]"
     }
   ]
 }
diff --git a/src/home-build.js → src/home-and-custom-build.js b/src/home-build.js → src/home-and-custom-build.js
@@ -5,36 +5,43 @@ var camelize = require('camelize')
 var cssstats = require('cssstats')
 var tachyonsModules = require('tachyons-modules')
 
-var pkgs = []
-var modulesCount = 0
 
 module.exports = function () {
+  var homePagePkgs = []
+  var customBuildPkgs = []
+  var modulesCount = 0
   tachyonsModules().then(function (moduleList) {
     // TODO: Missing tachyons-skins
     moduleList = moduleList
-    moduleCount = moduleList.length
 
     moduleList.forEach(function (module) {
       var pkg = require(module.name + '/package.json')
       var css = fs.readFileSync('node_modules/' + module.name + '/css/' + module.name + '.min.css', 'utf8')
       var stats = cssstats(css)
       var size = filesize(stats.gzipSize)
-      pkgs.push({
+      homePagePkgs.push({
         pkg: pkg,
         stats: stats,
         size: size
       })
+
+      customBuildPkgs.push({
+        name: pkg.name,
+        version: pkg.version,
+        size: size,
+        css: css
+      })
     })
 
-    return renderHomePage(pkgs)
+    return render(homePagePkgs, customBuildPkgs, moduleList.length)
   }).catch(function (e) {
-    console.log('Home Page Build Failed:')
+    console.log('Rendering Failed:')
     console.log(e)
     throw e
   })
 }
 
-function renderHomePage (modules) {
+function render (indexModules, customModules, modulesCount) {
   var tachyons = require('../package.json')
 
   var css = fs.readFileSync('./css/tachyons.css', 'utf8')
@@ -47,18 +54,29 @@ function renderHomePage (modules) {
   var head = fs.readFileSync('./src/templates/head.html', 'utf8')
   var siteFooter = fs.readFileSync('./src/templates/footer.html', 'utf8')
   var siteHeader = fs.readFileSync('./src/templates/header.html', 'utf8')
+  var custom = fs.readFileSync('./src/templates/custom.html', 'utf8')
 
   var tpl = _.template(template)
-  var html = tpl({
+  var index = tpl({
     size: size,
     version: tachyons.version,
     modulesCount: modulesCount,
     siteFooter: siteFooter,
     siteHeader: siteHeader,
     head: head,
-    modules: modules
+    modules: indexModules
+  })
+
+  var custom_tpl = _.template(custom)
+  var custom_build = custom_tpl({
+    siteFooter: siteFooter,
+    siteHeader: siteHeader,
+    head: head,
+    modules: customModules
   })
 
-  fs.writeFileSync('./index.html', html)
+
+  fs.writeFileSync('./index.html', index)
+  fs.writeFileSync('./custom/index.html', custom_build)
   console.log(size)
 }
diff --git a/src/templates/custom.html b/src/templates/custom.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>
+      TACHYONS - Custom Build
+    </title>
+    <meta name="description" content="Simple CSS">
+    <%= head %>
+  </head>
+  <body class="w-100 sans-serif">
+    <%= siteHeader %>
+    <style>.bn { border-style: solid; border-width: 0}</style>
+    <main class="w-100">
+      <section class="ph3 ph5-ns bg-white cf pt5 pt6-ns pb4 pb5-ns" id="npm">
+        <div class="fl w-100">
+          <div class="">
+            <h1>Select the Modules You Need</h1>
+            <p class="f5 f3-ns lh-copy mt0 mb4 measure">
+              The main tachyons repo is just a group of of encapsulated css modules available on npm and github.
+              You can grab the entire toolkit, or just a few selected modules.
+              Mix and match them to suit your project's specific needs. Since tachyons modules are very focused on doing one thing well,
+              most of them are extremely small (well under a kilobyte) so you
+              can start using some or all of them without adding bloat to your css.
+            </p>
+          </div>
+        </div>
+        <% modules.map(renderModule) %>
+
+        <% function renderModule (module) { %>
+          <div class="mb3 fl w-100 w-50-m w-33-l">
+            <a class="db f4 link mb1 dim near-black b pkg" data-package="<%= module.name %>" data-css="<%= module.css %>" href=""><%= module.name %></a>
+            <div>
+              <span class="fw4 pr2">v<%= module.version %></span>
+              <span><%= module.size %></span>
+            </div>
+          </div>
+        <% } %>
+      </section>
+      <div class="ph3 ph5-ns mb5">
+        <button class="submit db f2 link mb3 dim near-black b bg-white bn pa0" href="" disabled>Select Modules</button>
+        <a href="" class="download dn f2 link mb3 dim near-black b">Right click here and select Save As...</a>
+        <button class="reset dn f4 link mb3 dim near-black b bg-white bn">Reset Selection</button>
+      </div>
+    </main>
+    <%= siteFooter %>
+
+    <script src="/node_modules/lodash/index.js"></script>
+    <script src="https://cdn.jsdelivr.net/cash/1.0.0/cash.min.js"></script>
+    <script src="/js/custom.js"></script>
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+ga('create', 'UA-55773803-1', 'auto');
+ga('send', 'pageview');
+
+    </script>
+  </body>
+</html>
diff --git a/src/templates/header.html b/src/templates/header.html
@@ -16,6 +16,9 @@
         class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
       Components
     </a>
+    <a title="Custom Build" href="/custom/"
+        class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
+      Custom Build</a>
     <a title="Tachyons on GitHub" href="http://github.com/mrmrs/tachyons/"
         class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dn dib-ns">
       GitHub

diff --git a/src/templates/index.html b/src/templates/index.html
@@ -165,6 +165,8 @@ <h2 class="f4 f3-ns fw6 mb0">
                   needs of your product. It's just css. It isn't precious.
                   Don't be afraid to change: class names, media queries,
                   breakpoints, or values.
+                  <a href="/custom/" class="link dn
+                    dim f6 db mid-gray">Start with a custom build.</a>
                 </p>
                 </article>
               </div>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		[{"name":"tachyons-background-size","version":"3.0.3","size":"139 B"},{"name":"tachyons-base","version":"1.2.3","size":"44 B"},{"name":"tachyons-border-colors","version":"4.0.5","size":"297 B"},{"name":"tachyons-border-radius","version":"3.1.0","size":"191 B"},{"name":"tachyons-border-style","version":"3.0.2","size":"168 B"},{"name":"tachyons-border-widths","version":"2.0.2","size":"185 B"},{"name":"tachyons-borders","version":"2.1.0","size":"228 B"},{"name":"tachyons-box-sizing","version":"3.1.1","size":"156 B"},{"name":"tachyons-clears","version":"2.1.0","size":"187 B"},{"name":"tachyons-colors","version":"5.1.2","size":"22 B"},{"name":"tachyons-coordinates","version":"2.2.0","size":"426 B"},{"name":"tachyons-debug","version":"1.1.2","size":"902 B"},{"name":"tachyons-display","version":"3.0.3","size":"238 B"},{"name":"tachyons-display-verbose","version":"1.0.0","size":"257 B"},{"name":"tachyons-floats","version":"2.0.4","size":"175 B"},{"name":"tachyons-font-family","version":"4.1.1","size":"232 B"},{"name":"tachyons-font-style","version":"3.0.1","size":"132 B"},{"name":"tachyons-font-weight","version":"4.0.3","size":"246 B"},{"name":"tachyons-forms","version":"2.0.1","size":"94 B"},{"name":"tachyons-heights","version":"4.1.3","size":"254 B"},{"name":"tachyons-hovers","version":"2.0.5","size":"149 B"},{"name":"tachyons-images","version":"1.0.3","size":"41 B"},{"name":"tachyons-letter-spacing","version":"2.1.2","size":"162 B"},{"name":"tachyons-line-height","version":"2.0.4","size":"151 B"},{"name":"tachyons-links","version":"3.0.1","size":"111 B"},{"name":"tachyons-lists","version":"2.0.4","size":"46 B"},{"name":"tachyons-max-widths","version":"3.1.1","size":"245 B"},{"name":"tachyons-opacity","version":"1.0.0","size":"103 B"},{"name":"tachyons-outlines","version":"1.0.0","size":"155 B"},{"name":"tachyons-overflow","version":"3.0.1","size":"300 B"},{"name":"tachyons-position","version":"5.0.1","size":"169 B"},{"name":"tachyons-skins","version":"3.1.3","size":"682 B"},{"name":"tachyons-spacing","version":"5.0.6","size":"1.71 KB"},{"name":"tachyons-text-align","version":"2.0.4","size":"146 B"},{"name":"tachyons-text-decoration","version":"3.1.1","size":"162 B"},{"name":"tachyons-text-transform","version":"3.0.5","size":"174 B"},{"name":"tachyons-type-scale","version":"5.0.3","size":"243 B"},{"name":"tachyons-typography","version":"2.2.0","size":"245 B"},{"name":"tachyons-utilities","version":"1.2.1","size":"201 B"},{"name":"tachyons-vertical-align","version":"2.0.3","size":"242 B"},{"name":"tachyons-visibility","version":"1.0.4","size":"156 B"},{"name":"tachyons-white-space","version":"2.0.3","size":"154 B"},{"name":"tachyons-widths","version":"4.0.2","size":"318 B"},{"name":"tachyons-word-break","version":"1.0.1","size":"160 B"}]