Skip to content

Commit 775b196

Browse files
author
mrmrs
committed
First pass at designing custom build page.
1 parent f1cbf9d commit 775b196

File tree

7 files changed

+434
-326
lines changed

7 files changed

+434
-326
lines changed

‎components/index.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,10 @@
3333
class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
3434
Components
3535
</a>
36-
<a title="Custom Build" href="/custom/"
36+
<a title="Tachyons Customizer" href="/custom/"
3737
class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
38-
Custom Build</a>
38+
Customizer
39+
</a>
3940
<a title="Tachyons on GitHub" href="http://github.com/mrmrs/tachyons/"
4041
class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dn dib-ns">
4142
GitHub

‎custom/index.html

Lines changed: 375 additions & 280 deletions
Large diffs are not rendered by default.

‎docs/table-of-styles/index.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,10 @@
3737
class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
3838
Components
3939
</a>
40-
<a title="Custom Build" href="/custom/"
40+
<a title="Tachyons Customizer" href="/custom/"
4141
class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
42-
Custom Build</a>
42+
Customizer
43+
</a>
4344
<a title="Tachyons on GitHub" href="http://github.com/mrmrs/tachyons/"
4445
class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dn dib-ns">
4546
GitHub

‎index.html

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,10 @@
3535
class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
3636
Components
3737
</a>
38-
<a title="Custom Build" href="/custom/"
38+
<a title="Tachyons Customizer" href="/custom/"
3939
class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
40-
Custom Build</a>
40+
Customizer
41+
</a>
4142
<a title="Tachyons on GitHub" href="http://github.com/mrmrs/tachyons/"
4243
class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dn dib-ns">
4344
GitHub
@@ -334,7 +335,7 @@ <h1><a href="#npm" class="link near-black">NPM</a></h1>
334335
<div class="mb3 fl w-100 w-50-m w-33-l">
335336
<a class="db f4 link mb1 dim near-black b" href="http://npmjs.com/package/tachyons-background-size">tachyons-background-size</a>
336337
<div>
337-
<span class="fw4 pr2">v3.0.3</span>
338+
<span class="fw4 pr2">v3.0.2</span>
338339
<span>139 B</span>
339340
<a class="link dim near-black dib ml2 f6" href="http://github.com/tachyons-css/tachyons-background-size">View on GitHub</a>
340341
</div>
@@ -370,7 +371,7 @@ <h1><a href="#npm" class="link near-black">NPM</a></h1>
370371
<div class="mb3 fl w-100 w-50-m w-33-l">
371372
<a class="db f4 link mb1 dim near-black b" href="http://npmjs.com/package/tachyons-border-style">tachyons-border-style</a>
372373
<div>
373-
<span class="fw4 pr2">v3.0.2</span>
374+
<span class="fw4 pr2">v3.0.1</span>
374375
<span>168 B</span>
375376
<a class="link dim near-black dib ml2 f6" href="http://github.com/tachyons-css/tachyons-border-style">View on GitHub</a>
376377
</div>
@@ -388,8 +389,8 @@ <h1><a href="#npm" class="link near-black">NPM</a></h1>
388389
<div class="mb3 fl w-100 w-50-m w-33-l">
389390
<a class="db f4 link mb1 dim near-black b" href="http://npmjs.com/package/tachyons-borders">tachyons-borders</a>
390391
<div>
391-
<span class="fw4 pr2">v2.1.0</span>
392-
<span>228 B</span>
392+
<span class="fw4 pr2">v2.0.3</span>
393+
<span>208 B</span>
393394
<a class="link dim near-black dib ml2 f6" href="http://github.com/tachyons-css/tachyons-borders">View on GitHub</a>
394395
</div>
395396
</div>
@@ -406,8 +407,8 @@ <h1><a href="#npm" class="link near-black">NPM</a></h1>
406407
<div class="mb3 fl w-100 w-50-m w-33-l">
407408
<a class="db f4 link mb1 dim near-black b" href="http://npmjs.com/package/tachyons-clears">tachyons-clears</a>
408409
<div>
409-
<span class="fw4 pr2">v2.1.0</span>
410-
<span>187 B</span>
410+
<span class="fw4 pr2">v2.0.4</span>
411+
<span>92 B</span>
411412
<a class="link dim near-black dib ml2 f6" href="http://github.com/tachyons-css/tachyons-clears">View on GitHub</a>
412413
</div>
413414
</div>
@@ -505,8 +506,8 @@ <h1><a href="#npm" class="link near-black">NPM</a></h1>
505506
<div class="mb3 fl w-100 w-50-m w-33-l">
506507
<a class="db f4 link mb1 dim near-black b" href="http://npmjs.com/package/tachyons-heights">tachyons-heights</a>
507508
<div>
508-
<span class="fw4 pr2">v4.1.3</span>
509-
<span>254 B</span>
509+
<span class="fw4 pr2">v4.1.0</span>
510+
<span>234 B</span>
510511
<a class="link dim near-black dib ml2 f6" href="http://github.com/tachyons-css/tachyons-heights">View on GitHub</a>
511512
</div>
512513
</div>
@@ -613,17 +614,17 @@ <h1><a href="#npm" class="link near-black">NPM</a></h1>
613614
<div class="mb3 fl w-100 w-50-m w-33-l">
614615
<a class="db f4 link mb1 dim near-black b" href="http://npmjs.com/package/tachyons-skins">tachyons-skins</a>
615616
<div>
616-
<span class="fw4 pr2">v3.1.3</span>
617-
<span>682 B</span>
617+
<span class="fw4 pr2">v3.1.1</span>
618+
<span>672 B</span>
618619
<a class="link dim near-black dib ml2 f6" href="http://github.com/tachyons-css/tachyons-skins">View on GitHub</a>
619620
</div>
620621
</div>
621622

622623
<div class="mb3 fl w-100 w-50-m w-33-l">
623624
<a class="db f4 link mb1 dim near-black b" href="http://npmjs.com/package/tachyons-spacing">tachyons-spacing</a>
624625
<div>
625-
<span class="fw4 pr2">v5.0.6</span>
626-
<span>1.71 KB</span>
626+
<span class="fw4 pr2">v5.0.4</span>
627+
<span>1.7 KB</span>
627628
<a class="link dim near-black dib ml2 f6" href="http://github.com/tachyons-css/tachyons-spacing">View on GitHub</a>
628629
</div>
629630
</div>
@@ -667,8 +668,8 @@ <h1><a href="#npm" class="link near-black">NPM</a></h1>
667668
<div class="mb3 fl w-100 w-50-m w-33-l">
668669
<a class="db f4 link mb1 dim near-black b" href="http://npmjs.com/package/tachyons-typography">tachyons-typography</a>
669670
<div>
670-
<span class="fw4 pr2">v2.2.0</span>
671-
<span>245 B</span>
671+
<span class="fw4 pr2">v2.1.1</span>
672+
<span>226 B</span>
672673
<a class="link dim near-black dib ml2 f6" href="http://github.com/tachyons-css/tachyons-typography">View on GitHub</a>
673674
</div>
674675
</div>

‎js/custom.js

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040

4141
buildUrl = URL.createObjectURL(new Blob([file], {type: 'text/css'}))
4242
showDownload = true;
43+
showSubmit = false;
4344
updateView()
4445
}
4546

@@ -68,23 +69,23 @@
6869
if(numModules === 0) {
6970
pkgs.each(function(p) {
7071
var pkg = $(p)
71-
pkg.parent().removeClass('o-40')
72+
pkg.removeClass('blue')
7273
})
73-
submit.text('Select Modules To Build')
74+
submit.text('Select Modules')
7475
submit.attr('disabled', true)
7576
} else {
7677
pkgs.each(function(p) {
7778
var pkg = $(p)
78-
applyConditionalClass(pkg.parent(), selectedModules[pkg.attr('data-package')], 'o-40');
79+
applyConditionalClass(pkg, selectedModules[pkg.attr('data-package')], 'blue');
7980
})
80-
submit.text('Build ' + numModules + ' Modules')
81+
submit.text('Compile Selected Modules')
8182
submit.removeAttr('disabled')
8283
}
8384

8485
applyConditionalClass(submit, showSubmit, 'db')
8586
applyConditionalClass(submit, !showSubmit, 'dn')
8687

87-
applyConditionalClass(download, showDownload, 'db')
88+
applyConditionalClass(download, showDownload, 'dib')
8889
applyConditionalClass(download, !showDownload, 'dn')
8990

9091
applyConditionalClass(reset, showReset, 'db')

‎src/templates/custom.html

Lines changed: 27 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,44 +2,52 @@
22
<html lang="en">
33
<head>
44
<title>
5-
TACHYONS - Custom Build
5+
TACHYONS - Customizer
66
</title>
77
<meta name="description" content="Simple CSS">
88
<%= head %>
9+
<style>
10+
.bn { border-style: solid; border-width: 0}
11+
.bg-blue { background-color: #0074D9; }
12+
.blue { color: #0074D9; }
13+
.blue-hover:hover { color: #0074D9; }
14+
</style>
915
</head>
1016
<body class="w-100 sans-serif">
1117
<%= siteHeader %>
12-
<style>.bn { border-style: solid; border-width: 0}</style>
1318
<main class="w-100">
14-
<section class="ph3 ph5-ns bg-white cf pt5 pt6-ns pb4 pb5-ns" id="npm">
19+
<section class="ph3 ph5-ns bg-white cf pt3 pb4" id="npm">
1520
<div class="fl w-100">
1621
<div class="">
17-
<h1>Select the Modules You Need</h1>
18-
<p class="f5 f3-ns lh-copy mt0 mb4 measure">
19-
The main tachyons repo is just a group of of encapsulated css modules available on npm and github.
20-
You can grab the entire toolkit, or just a few selected modules.
21-
Mix and match them to suit your project's specific needs. Since tachyons modules are very focused on doing one thing well,
22-
most of them are extremely small (well under a kilobyte) so you
23-
can start using some or all of them without adding bloat to your css.
22+
<h1>Tachyons Customizer</h1>
23+
<p class="f5 lh-copy mt0 mb4 measure">
24+
Select what you need. Leave the rest.
2425
</p>
2526
</div>
2627
</div>
2728
<% modules.map(renderModule) %>
28-
2929
<% function renderModule (module) { %>
3030
<div class="mb3 fl w-100 w-50-m w-33-l">
31-
<a class="db f4 link mb1 dim near-black b pkg" data-package="<%= module.name %>" data-css="<%= module.css %>" href=""><%= module.name %></a>
32-
<div>
33-
<span class="fw4 pr2">v<%= module.version %></span>
34-
<span><%= module.size %></span>
35-
</div>
31+
<a
32+
class="dib f5 link mb1 near-black blue-hover b pkg"
33+
data-package="<%= module.name %>"
34+
data-css="<%= module.css %>">
35+
<%= module.name %>
36+
<span class="fw4 pl2 f6 dark-gray">v<%= module.version %></span>
37+
</a>
3638
</div>
3739
<% } %>
3840
</section>
3941
<div class="ph3 ph5-ns mb5">
40-
<button class="submit db f2 link mb3 dim near-black b bg-white bn pa0" href="" disabled>Select Modules</button>
41-
<a href="" class="download dn f2 link mb3 dim near-black b">Right click here and select Save As...</a>
42-
<button class="reset dn f4 link mb3 dim near-black b bg-white bn">Reset Selection</button>
42+
<div>
43+
<button class="submit dib f5 pv2 ph3 br1 link mb3 dim bg-blue white bn pa0" href="" disabled>Select Modules</button>
44+
<a href="" class="download dn f5 link mb3 br1 pv2 ph3 dim bg-dark-gray white">
45+
Download
46+
</a>
47+
</div>
48+
<button class="reset dn f6 link underline blue mb3 dim bg-white bn">
49+
Clear Selections
50+
</button>
4351
</div>
4452
</main>
4553
<%= siteFooter %>

‎src/templates/header.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,10 @@
1616
class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
1717
Components
1818
</a>
19-
<a title="Custom Build" href="/custom/"
19+
<a title="Tachyons Customizer" href="/custom/"
2020
class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
21-
Custom Build</a>
21+
Customizer
22+
</a>
2223
<a title="Tachyons on GitHub" href="http://github.com/mrmrs/tachyons/"
2324
class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dn dib-ns">
2425
GitHub

0 commit comments

Comments
 (0)