Custom build page by Gamebox

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')()

components/index.html

@@ -33,6 +33,10 @@
         class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
       Components
     </a>
+    <a title="Tachyons Customizer" href="/custom/"
+        class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
+        Customizer
+    </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

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"}]

docs/table-of-styles/index.html

@@ -37,6 +37,10 @@
         class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
       Components
     </a>
+    <a title="Tachyons Customizer" href="/custom/"
+        class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
+        Customizer
+    </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

index.html

@@ -35,6 +35,10 @@
         class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
       Components
     </a>
+    <a title="Tachyons Customizer" href="/custom/"
+        class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
+        Customizer
+    </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
@@ -198,6 +202,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>
@@ -605,6 +611,15 @@ <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.1</span>
+              <span>672 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>

js/custom.js

@@ -0,0 +1,107 @@
+'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;
+    showSubmit = false;
+    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.removeClass('blue')
+      })
+      submit.text('Select Modules')
+      submit.attr('disabled', true)
+    } else {
+      pkgs.each(function(p) {
+        var pkg = $(p)
+        applyConditionalClass(pkg, selectedModules[pkg.attr('data-package')], 'blue');
+      })
+      submit.text('Compile Selected Modules')
+      submit.removeAttr('disabled')
+    }
+
+    applyConditionalClass(submit, showSubmit, 'db')
+    applyConditionalClass(submit, !showSubmit, 'dn')
+
+    applyConditionalClass(download, showDownload, 'dib')
+    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)
+
+})()

package.json

@@ -132,6 +132,10 @@
       "name": "lachlan campbell",
       "url": "http://lachlanjc.me",
       "email": "[email protected]"
+    },
+    {
+      "name": "anthony bullard",
+      "email": "[email protected]"
     }
   ]
 }

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)
 }

src/templates/custom.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>
+      TACHYONS - Customizer
+    </title>
+    <meta name="description" content="Simple CSS">
+    <%= head %>
+    <style>
+      .bn { border-style: solid; border-width: 0}
+      .bg-blue { background-color: #0074D9; }
+      .blue { color: #0074D9; }
+      .blue-hover:hover { color: #0074D9; }
+    </style>
+  </head>
+  <body class="w-100 sans-serif">
+    <%= siteHeader %>
+    <main class="w-100">
+      <section class="ph3 ph5-ns bg-white cf pt3 pb4" id="npm">
+        <div class="fl w-100">
+          <div class="">
+            <h1>Tachyons Customizer</h1>
+            <p class="f5 lh-copy mt0 mb4 measure">
+              Select what you need. Leave the rest.
+            </p>
+          </div>
+        </div>
+        <% modules.map(renderModule) %>
+        <% function renderModule (module) { %>
+          <div class="mb3 fl w-100 w-50-m w-33-l">
+            <a
+              class="dib f5 link mb1 near-black blue-hover b pkg"
+              data-package="<%= module.name %>"
+              data-css="<%= module.css %>">
+                <%= module.name %>
+                <span class="fw4 pl2 f6 dark-gray">v<%= module.version %></span>
+            </a>
+          </div>
+        <% } %>
+      </section>
+      <div class="ph3 ph5-ns mb5">
+        <div>
+          <button class="submit dib f5 pv2 ph3 br1 link mb3 dim bg-blue white bn pa0" href="" disabled>Select Modules</button>
+          <a href="" class="download dn f5 link mb3 br1 pv2 ph3 dim bg-dark-gray white">
+            Download
+          </a>
+        </div>
+        <button class="reset dn f6 link underline blue mb3 dim bg-white bn">
+          Clear Selections
+        </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>

src/templates/header.html

@@ -16,6 +16,10 @@
         class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
       Components
     </a>
+    <a title="Tachyons Customizer" href="/custom/"
+        class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
+        Customizer
+    </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

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>