Skip to content

Commit ee5ce82

Browse files
author
mrmrs
committed
Update docs for height page
1 parent 29d78b1 commit ee5ce82

File tree

3 files changed

+86
-104
lines changed

3 files changed

+86
-104
lines changed

‎docs/layout/heights/index.html

+43-52
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,8 @@
4242
</header>
4343

4444
<main class="">
45-
<article class="bg-near-white bt b--black-10 ph3 pt3 ph5-ns">
46-
<h4 class="f4 mv0 fw6 dib mr4">heights</h4>
45+
<article class="bg-near-white bt b--black-10 pa3 ph5-ns">
46+
<h4 class="f4 mv0 fw6 dib mr4">tachyons-heights</h4>
4747
<span class="f4 b dib pl0 ml0 mr4">v4.0.2</span>
4848
<span class="f4 b dib pl0 ml0 mr4">272 B</span>
4949
<div>
@@ -64,6 +64,37 @@ <h4 class="f4 mv0 fw6 dib mr4">heights</h4>
6464
<dd class="db pl0 ml0 f4 f2-ns b">1</dd>
6565
</dl>
6666
</div>
67+
<p class="measure f3 lh-copy">
68+
The heights module contains both a five-step height scale based on powers of two
69+
as well as a series of percentage values. Explicit values can be used inside of any parent.
70+
Percentage values will only work inside of a parent element that has a declared height.
71+
</p>
72+
<p class="measure f4 lh-copy">
73+
Class name structure is as follows:
74+
</p>
75+
<pre>
76+
Base:
77+
h = height
78+
79+
Modifiers
80+
1 = 1st step in height scale
81+
2 = 2nd step in height scale
82+
3 = 3rd step in height scale
83+
4 = 4th step in height scale
84+
5 = 5th step in height scale
85+
86+
-25
87+
-50
88+
-75
89+
-100
90+
91+
-auto = string value auto
92+
93+
Media Query Extensions:
94+
-ns = not-small
95+
-m = medium
96+
-l = large
97+
</pre>
6798
</article>
6899
<div class="ph3 ph5-ns pt4 pb5">
69100
<h2 class="f3 bold">Examples</h2>
@@ -73,92 +104,52 @@ <h3 class="f5 book pt4 caps">Height Scale</h3>
73104
<td>
74105
<code class="code">.h1</code>
75106
</td>
76-
<td><div class="h1 bg-black-10 phs"></div></td>
107+
<td><div class="h1 bg-black-05 ph2"></div></td>
77108
</tr>
78109
<tr>
79110
<td>
80111
<code class="code">.h2</code>
81112
</td>
82-
<td><div class="h2 bg-black-10 phs"></div></td>
113+
<td><div class="h2 bg-black-05 ph2"></div></td>
83114
</tr>
84115
<tr>
85116
<td>
86117
<code class="code">.h3</code>
87118
</td>
88-
<td><div class="h3 bg-black-10 phs"></div></td>
119+
<td><div class="h3 bg-black-05 ph2"></div></td>
89120
</tr>
90121
<tr>
91122
<td>
92123
<code class="code">.h4</code>
93124
</td>
94-
<td><div class="h4 bg-black-10 phs"></div></td>
125+
<td><div class="h4 bg-black-05 ph2"></div></td>
95126
</tr>
96127
<tr>
97128
<td>
98129
<code class="code">.h5</code>
99130
</td>
100-
<td><div class="h5 bg-black-10 phs"></div></td>
131+
<td><div class="h5 bg-black-05 ph2"></div></td>
101132
</tr>
102133
</table>
103134
<h3 class="f5 book pt4 caps">Height Percentages</h3>
104-
<div class="bg-black-10 w-100">
105-
<div class="h5">
106-
<div class="h-10 bg-black-10 mbs">
107-
<code class="code">h-10</code>
108-
</div>
109-
</div>
135+
<div class="bg-black-05 w-100">
110136
<div class="h5">
111-
<div class="h-20 bg-black-10 mbs">
112-
<code class="code">h-20</code>
113-
</div>
114-
</div>
115-
<div class="h5">
116-
<div class="h-25 bg-black-10 mbs">
137+
<div class="h-25 bg-black-05 mb2">
117138
<code class="code">h-25</code>
118139
</div>
119140
</div>
120141
<div class="h5">
121-
<div class="h-30 bg-black-10 mbs">
122-
<code class="code">h-30</code>
123-
</div>
124-
</div>
125-
<div class="h5">
126-
<div class="h-40 bg-black-10 mbs">
127-
<code class="code">h-40</code>
128-
</div>
129-
</div>
130-
<div class="h5">
131-
<div class="h-50 bg-black-10 mbs">
142+
<div class="h-50 bg-black-05 mb2">
132143
<code class="code">h-50</code>
133144
</div>
134145
</div>
135146
<div class="h5">
136-
<div class="h-60 bg-black-10 mbs">
137-
<code class="code">h-60</code>
138-
</div>
139-
</div>
140-
<div class="h5">
141-
<div class="h-70 bg-black-10 mbs">
142-
<code class="code">h-70</code>
143-
</div>
144-
</div>
145-
<div class="h5">
146-
<div class="h-75 bg-black-10 mbs">
147+
<div class="h-75 bg-black-05 mb2">
147148
<code class="code">h-75</code>
148149
</div>
149150
</div>
150151
<div class="h5">
151-
<div class="h-80 bg-black-10 mbs">
152-
<code class="code">h-80</code>
153-
</div>
154-
</div>
155-
<div class="h5">
156-
<div class="h-90 bg-black-10 mbs">
157-
<code class="code">h-90</code>
158-
</div>
159-
</div>
160-
<div class="h5">
161-
<div class="h-100 bg-black-10 mbs">
152+
<div class="h-100 bg-black-05 mb2">
162153
<code class="code">h-100</code>
163154
</div>
164155
</div>

‎lib/heights.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ var module = require('tachyons-heights/package.json')
99
var moduleCss = fs.readFileSync('node_modules/tachyons-heights/css/tachyons-heights.min.css', 'utf8')
1010
var moduleObj = cssstats(moduleCss)
1111
var moduleSize = filesize(moduleObj.gzipSize)
12-
var moduleName = module.name.split("tachyons-").pop()
12+
var moduleName = module.name
1313

1414
var srcCSS = fs.readFileSync('./src/css/_heights.css', 'utf8')
1515
var navDocs = fs.readFileSync('./src/templates/nav_docs.html', 'utf8')

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

+42-51
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515

1616
<%= siteHeader %>
1717
<main class="">
18-
<article class="bg-near-white bt b--black-10 ph3 pt3 ph5-ns">
18+
<article class="bg-near-white bt b--black-10 pa3 ph5-ns">
1919
<h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
2020
<span class="f4 b dib pl0 ml0 mr4">v<%= moduleVersion %></span>
2121
<span class="f4 b dib pl0 ml0 mr4"><%= moduleSize %></span>
@@ -37,6 +37,37 @@ <h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
3737
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.rules.size.average %></dd>
3838
</dl>
3939
</div>
40+
<p class="measure f3 lh-copy">
41+
The heights module contains both a five-step height scale based on powers of two
42+
as well as a series of percentage values. Explicit values can be used inside of any parent.
43+
Percentage values will only work inside of a parent element that has a declared height.
44+
</p>
45+
<p class="measure f4 lh-copy">
46+
Class name structure is as follows:
47+
</p>
48+
<pre>
49+
Base:
50+
h = height
51+
52+
Modifiers
53+
1 = 1st step in height scale
54+
2 = 2nd step in height scale
55+
3 = 3rd step in height scale
56+
4 = 4th step in height scale
57+
5 = 5th step in height scale
58+
59+
-25
60+
-50
61+
-75
62+
-100
63+
64+
-auto = string value auto
65+
66+
Media Query Extensions:
67+
-ns = not-small
68+
-m = medium
69+
-l = large
70+
</pre>
4071
</article>
4172
<div class="ph3 ph5-ns pt4 pb5">
4273
<h2 class="f3 bold">Examples</h2>
@@ -46,92 +77,52 @@ <h3 class="f5 book pt4 caps">Height Scale</h3>
4677
<td>
4778
<code class="code">.h1</code>
4879
</td>
49-
<td><div class="h1 bg-black-10 phs"></div></td>
80+
<td><div class="h1 bg-black-05 ph2"></div></td>
5081
</tr>
5182
<tr>
5283
<td>
5384
<code class="code">.h2</code>
5485
</td>
55-
<td><div class="h2 bg-black-10 phs"></div></td>
86+
<td><div class="h2 bg-black-05 ph2"></div></td>
5687
</tr>
5788
<tr>
5889
<td>
5990
<code class="code">.h3</code>
6091
</td>
61-
<td><div class="h3 bg-black-10 phs"></div></td>
92+
<td><div class="h3 bg-black-05 ph2"></div></td>
6293
</tr>
6394
<tr>
6495
<td>
6596
<code class="code">.h4</code>
6697
</td>
67-
<td><div class="h4 bg-black-10 phs"></div></td>
98+
<td><div class="h4 bg-black-05 ph2"></div></td>
6899
</tr>
69100
<tr>
70101
<td>
71102
<code class="code">.h5</code>
72103
</td>
73-
<td><div class="h5 bg-black-10 phs"></div></td>
104+
<td><div class="h5 bg-black-05 ph2"></div></td>
74105
</tr>
75106
</table>
76107
<h3 class="f5 book pt4 caps">Height Percentages</h3>
77-
<div class="bg-black-10 w-100">
78-
<div class="h5">
79-
<div class="h-10 bg-black-10 mbs">
80-
<code class="code">h-10</code>
81-
</div>
82-
</div>
108+
<div class="bg-black-05 w-100">
83109
<div class="h5">
84-
<div class="h-20 bg-black-10 mbs">
85-
<code class="code">h-20</code>
86-
</div>
87-
</div>
88-
<div class="h5">
89-
<div class="h-25 bg-black-10 mbs">
110+
<div class="h-25 bg-black-05 mb2">
90111
<code class="code">h-25</code>
91112
</div>
92113
</div>
93114
<div class="h5">
94-
<div class="h-30 bg-black-10 mbs">
95-
<code class="code">h-30</code>
96-
</div>
97-
</div>
98-
<div class="h5">
99-
<div class="h-40 bg-black-10 mbs">
100-
<code class="code">h-40</code>
101-
</div>
102-
</div>
103-
<div class="h5">
104-
<div class="h-50 bg-black-10 mbs">
115+
<div class="h-50 bg-black-05 mb2">
105116
<code class="code">h-50</code>
106117
</div>
107118
</div>
108119
<div class="h5">
109-
<div class="h-60 bg-black-10 mbs">
110-
<code class="code">h-60</code>
111-
</div>
112-
</div>
113-
<div class="h5">
114-
<div class="h-70 bg-black-10 mbs">
115-
<code class="code">h-70</code>
116-
</div>
117-
</div>
118-
<div class="h5">
119-
<div class="h-75 bg-black-10 mbs">
120+
<div class="h-75 bg-black-05 mb2">
120121
<code class="code">h-75</code>
121122
</div>
122123
</div>
123124
<div class="h5">
124-
<div class="h-80 bg-black-10 mbs">
125-
<code class="code">h-80</code>
126-
</div>
127-
</div>
128-
<div class="h5">
129-
<div class="h-90 bg-black-10 mbs">
130-
<code class="code">h-90</code>
131-
</div>
132-
</div>
133-
<div class="h5">
134-
<div class="h-100 bg-black-10 mbs">
125+
<div class="h-100 bg-black-05 mb2">
135126
<code class="code">h-100</code>
136127
</div>
137128
</div>

0 commit comments

Comments
 (0)