Skip to content

Commit 054b518

Browse files
johnojohno
committed
Begin adding flex docs
1 parent 58ef143 commit 054b518

File tree

3 files changed

+291
-0
lines changed

3 files changed

+291
-0
lines changed

‎script.sh

+1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ repos=(
1414
"src/modules/debug.js"
1515
"src/modules/display.js"
1616
"src/modules/docs.js"
17+
"src/modules/flexbox.js"
1718
"src/modules/floats.js"
1819
"src/modules/font-family.js"
1920
"src/modules/font-style.js"

‎src/modules/flexbox.js

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
var _ = require('lodash')
2+
var fs = require('fs')
3+
var gzip = require('gzip-size')
4+
var filesize = require('filesize')
5+
var postcss = require('postcss')
6+
7+
var cssstats = require('cssstats')
8+
9+
var module = require('tachyons-flexbox/package.json')
10+
var moduleCss = fs.readFileSync('./node_modules/tachyons-flexbox/css/tachyons-flexbox.min.css', 'utf8')
11+
var moduleObj = cssstats(moduleCss)
12+
var moduleSize = filesize(moduleObj.gzipSize)
13+
var moduleName = module.name
14+
15+
var srccss = fs.readFileSync('./src/css/_flexbox.css', 'utf8')
16+
var navDocs = fs.readFileSync('./src/templates/nav_docs.html', 'utf8')
17+
var siteFooter = fs.readFileSync('./src/templates/footer.html', 'utf8')
18+
var siteHeader = fs.readFileSync('./src/templates/header.html', 'utf8')
19+
var head = fs.readFileSync('./src/templates/head.html', 'utf8')
20+
var googleAnalytics = fs.readFileSync('./src/templates/ga.html', 'utf8')
21+
var googleAnalytics = fs.readFileSync('./src/templates/ga.html', 'utf8')
22+
23+
24+
var template = fs.readFileSync('./src/templates/docs/flexbox/index.html', 'utf8')
25+
var tpl = _.template(template)
26+
var html = tpl({
27+
moduleVersion: module.version,
28+
moduleSize: moduleSize,
29+
moduleObj: moduleObj,
30+
srccss: srccss,
31+
name: moduleName,
32+
navDocs: navDocs,
33+
siteFooter: siteFooter,
34+
googleAnalytics: googleAnalytics,
35+
head: head,
36+
siteHeader: siteHeader
37+
38+
})
39+
40+
fs.writeFileSync('./docs/layout/flexbox/index.html', html)

‎src/templates/docs/flexbox/index.html

+250
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,250 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>
5+
<%= name %> / Layout / Docs / TACHYONS
6+
</title>
7+
<meta name="description" content="css">
8+
<%= head %>
9+
</head>
10+
<body class="w-100 sans-serif">
11+
<%= siteHeader %>
12+
<main class="bg-white black-70">
13+
<header class="ph3 ph5-ns w-100 bg-transparent pv3 mb4 mb5-ns bt bb b--black-10 overflow-auto">
14+
<div class="nowrap mw9 center">
15+
<a title="Debugging" href="/docs/debug"
16+
class="pb2-ns f6 fw6 dim link black-70 mr2 mr3-m mr4-l dib">
17+
Debugging
18+
</a>
19+
<a title="Debug grid" href="/docs/debug-grid"
20+
class="pb2-ns f6 fw6 dim link black-70 mr2 mr3-m mr4-l dib">
21+
Debug Grid
22+
</a>
23+
<a title="Box sizing" href="/docs/layout/box-sizing"
24+
class="pb2-ns f6 fw6 dim link black-70 mr2 mr3-m mr4-l dib">
25+
Box sizing
26+
</a>
27+
<a title="Spacing" href="/docs/layout/spacing"
28+
class="pb2-ns f6 fw6 dim link black-70 mr2 mr3-m mr4-l dib">
29+
Spacing
30+
</a>
31+
<a title="Floats" href="/docs/layout/floats"
32+
class="pb2-ns f6 fw6 dim link black-70 mr2 mr3-m mr4-l dib">
33+
Floats
34+
</a>
35+
<a title="Clearfix" href="/docs/layout/clearfix"
36+
class="pb2-ns f6 fw6 dim link black-70 mr2 mr3-m mr4-l dib">
37+
Clearfix
38+
</a>
39+
<a title="Display" href="/docs/layout/display"
40+
class="pb2-ns f6 fw6 dim link black-70 mr2 mr3-m mr4-l dib">
41+
Display
42+
</a>
43+
<a title="Widths" href="/docs/layout/widths"
44+
class="pb2-ns f6 fw6 dim link black-70 mr2 mr3-m mr4-l dib">
45+
Widths
46+
</a>
47+
<a title="Basic Grid" href="/docs/layout/grid"
48+
class="pb2-ns f6 fw6 dim link black-70 mr2 mr3-m mr4-l dib">
49+
Basic Grid
50+
</a>
51+
<a title="Widths" href="/docs/layout/max-widths"
52+
class="pb2-ns f6 fw6 dim link black-70 mr2 mr3-m mr4-l dib">
53+
Max Widths
54+
</a>
55+
<a title="Widths" href="/docs/layout/heights"
56+
class="pb2-ns f6 fw6 dim link black-70 mr2 mr3-m mr4-l dib">
57+
Heights
58+
</a>
59+
<a title="Widths" href="/docs/layout/position"
60+
class="pb2-ns f6 fw6 dim link black-70 mr2 mr3-m mr4-l dib">
61+
Position
62+
</a>
63+
<a title="Widths" href="/docs/layout/position"
64+
class="pb2-ns f6 fw6 dim link black-70 mr2 mr3-m mr4-l dib">
65+
Flexbox
66+
</a>
67+
</div>
68+
</header>
69+
<article class="pa3 ph5-ns">
70+
<h3 class="f6 ttu tracked mt0">Widths</h3>
71+
<p class="measure f5 f4-ns lh-copy">
72+
The widths module contains both a five-step width scale based on powers of two
73+
as well as a series of percentage values that can be combined with floats for
74+
an infinitely nestable and fully responsive grid system.
75+
</p>
76+
<p class="measure f6 lh-copy">
77+
Class name structure is as follows:
78+
</p>
79+
<pre>
80+
Base:
81+
w = width
82+
83+
Modifiers
84+
1 = 1st step in width scale
85+
2 = 2nd step in width scale
86+
3 = 3rd step in width scale
87+
4 = 4th step in width scale
88+
5 = 5th step in width scale
89+
90+
-10 = literal value 10%
91+
-20 = literal value 20%
92+
-25 = literal value 25%
93+
-30 = literal value 30%
94+
-33 = literal value 33%
95+
-34 = literal value 34%
96+
-40 = literal value 40%
97+
-50 = literal value 50%
98+
-60 = literal value 60%
99+
-70 = literal value 70%
100+
-75 = literal value 75%
101+
-80 = literal value 80%
102+
-90 = literal value 90%
103+
-100 = literal value 100%
104+
105+
-third = calc(100% / 3)
106+
-two-thirds = calc(100% / 3)
107+
-auto = string value auto
108+
109+
110+
Media Query Extensions:
111+
-ns = not-small
112+
-m = medium
113+
-l = large
114+
</pre>
115+
</article>
116+
<div class="ph3 ph5-ns pt4 pb5">
117+
<h3 class="f5 mb4 pb2 bb">Examples</h3>
118+
<h3 class="f5 book pt4 caps">Width Scale</h3>
119+
<table border="0" cellspacing="5" cellpadding="5">
120+
<tr>
121+
<td>
122+
<code class="code">.w1</code>
123+
</td>
124+
<td><div class="w1 bg-black-10 pv2"></div></td>
125+
</tr>
126+
<tr>
127+
<td>
128+
<code class="code">.w2</code>
129+
</td>
130+
<td><div class="w2 bg-black-10 pv2"></div></td>
131+
</tr>
132+
<tr>
133+
<td>
134+
<code class="code">.w3</code>
135+
</td>
136+
<td><div class="w3 bg-black-10 pv2"></div></td>
137+
</tr>
138+
<tr>
139+
<td>
140+
<code class="code">.w4</code>
141+
</td>
142+
<td><div class="w4 bg-black-10 pv2"></div></td>
143+
</tr>
144+
<tr>
145+
<td>
146+
<code class="code">.w5</code>
147+
</td>
148+
<td><div class="w5 bg-black-10 pv2"></div></td>
149+
</tr>
150+
</table>
151+
<h3 class="f5 book pt4 caps">Width Percentages</h3>
152+
<div class="bg-black-10 w-100">
153+
<div class="w-10 bg-black-10 mb2">
154+
<code class="code">w-10</code>
155+
</div>
156+
<div class="w-20 bg-black-10 mb2">
157+
<code class="code">w-20</code>
158+
</div>
159+
<div class="w-25 bg-black-10 mb2">
160+
<code class="code">w-25</code>
161+
</div>
162+
<div class="w-30 bg-black-10 mb2">
163+
<code class="code">w-30</code>
164+
</div>
165+
<div class="w-33 bg-black-10 mb2">
166+
<code class="code">w-33</code>
167+
</div>
168+
<div class="w-third bg-black-10 mb2">
169+
<code class="code">w-third</code>
170+
</div>
171+
<div class="w-34 bg-black-10 mb2">
172+
<code class="code">w-34</code>
173+
</div>
174+
<div class="w-40 bg-black-10 mb2">
175+
<code class="code">w-40</code>
176+
</div>
177+
<div class="w-50 bg-black-10 mb2">
178+
<code class="code">w-50</code>
179+
</div>
180+
<div class="w-60 bg-black-10 mb2">
181+
<code class="code">w-60</code>
182+
</div>
183+
<div class="w-two-thirds bg-black-10 mb2">
184+
<code class="code">w-two-thirds</code>
185+
</div>
186+
<div class="w-75 bg-black-10 mb2">
187+
<code class="code">w-75</code>
188+
</div>
189+
<div class="w-80 bg-black-10 mb2">
190+
<code class="code">w-80</code>
191+
</div>
192+
<div class="w-90 bg-black-10 mb2">
193+
<code class="code">w-90</code>
194+
</div>
195+
<div class="w-100 bg-black-10 mb2">
196+
<code class="code">w-100</code>
197+
</div>
198+
</div>
199+
<div class="mt5 cf">
200+
<div class="dib mr4">
201+
<h1 class="f6 fw6">Previous</h1>
202+
<a href="/docs/layout/display/" class="link fw6 blue dim">Display</a>
203+
</div>
204+
<div class="dib">
205+
<h4 class="f6 fw6">Next</h4>
206+
<a href="/docs/layout/max-widths/" class="link fw6 blue dim">Max Widths</a>
207+
</div>
208+
</div>
209+
<div class="mt5">
210+
<h4 class="f6 fw6">Reference</h4>
211+
<a href="https://developer.mozilla.org/en/docs/Web/css/width" class="link fw6 blue dim">MDN - Width property</a>
212+
</div>
213+
</div>
214+
<section class="bg-white black-70 pt4 pb5 overflow-container">
215+
<header class="ph3 ph5-ns pt4">
216+
<h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
217+
<span class="f4 b dib pl0 ml0 mr4">v<%= moduleVersion %></span>
218+
<span class="f4 b dib pl0 ml0 mr4"><%= moduleSize %></span>
219+
<div>
220+
<dl class="dib mr4 mt0">
221+
<dt class="f6 db">Declarations </dt>
222+
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.declarations.total %></dd>
223+
</dl>
224+
<dl class="dib mr4">
225+
<dt class="f6 db pr2">Selectors </dt>
226+
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.selectors.total %></dd>
227+
</dl>
228+
<dl class="dib mr4">
229+
<dt class="f6 db pr2">Max. Specificity Score </dt>
230+
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.selectors.specificity.max %></dd>
231+
</dl>
232+
<dl class="dib mr4">
233+
<dt class="f6 db pr2">Size of Avg. Rule </dt>
234+
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.rules.size.average %></dd>
235+
</dl>
236+
</div>
237+
<kbd>src/_widths.css</kbd>
238+
</header>
239+
<pre class="ph3 ph5-ns">
240+
<code class="code" style="font-size: .75rem;">
241+
<%= srccss %>
242+
</code>
243+
</pre>
244+
</section>
245+
<%= navDocs %>
246+
</main>
247+
<%= siteFooter %>
248+
<%= googleAnalytics %>
249+
</body>
250+
</html>

0 commit comments

Comments
 (0)