Skip to content

Commit 5ea0c41

Browse files
author
Adam Morse
committed
Merge pull request tachyons-css#36 from lachlanjc/max-widths-update
Improve max widths docs
2 parents b5ea355 + e5eb3c0 commit 5ea0c41

File tree

2 files changed

+104
-46
lines changed

2 files changed

+104
-46
lines changed

‎docs/layout/max-widths/index.html

+52-23
Original file line numberDiff line numberDiff line change
@@ -92,18 +92,9 @@ <h4 class="f4 mv0 fw6 dib mr4">tachyons-max-widths</h4>
9292
7 = 7th step in width scale
9393
8 = 8th step in width scale
9494
9 = 9th step in width scale
95-
10 = 10th step in width scale
9695

97-
-25 = literal value 10%
98-
-50 = literal value 20%
99-
-75 = literal value 25%
10096
-100 = literal value 33%
101-
10297
-none = none
103-
-max = max-content
104-
-min = min-content
105-
-fit = fit-content
106-
-fill = fill-available
10798

10899
Media Query Extensions:
109100
-ns = not-small
@@ -117,50 +108,88 @@ <h3 class="f5 book pt4 caps">Max Width Scale</h3>
117108
<table border="0" cellspacing="5" cellpadding="5">
118109
<tr>
119110
<td>
120-
<code class="code">.mw1</code>
111+
<code class="code mr2">.mw1</code>
121112
</td>
122113
<td>
123-
<div class="mw1 bg-black-10 pv2 oh">
114+
<div class="mw1 bg-black-10 pa2 mv1">
124115
Lorem
125116
</div>
126117
</td>
127118
</tr>
128119
<tr>
129120
<td>
130-
<code class="code">.mw2</code>
121+
<code class="code mr2">.mw2</code>
131122
</td>
132123
<td>
133-
<div class="mw2 bg-black-10 pv2 oh">
124+
<div class="mw2 bg-black-10 pa2 mv1">
134125
Lorem
135126
</div>
136127
</td>
137128
</tr>
138129
<tr>
139130
<td>
140-
<code class="code">.mw3</code>
131+
<code class="code mr2">.mw3</code>
141132
</td>
142133
<td>
143-
<div class="mw3 bg-black-10 pv2 oh">
134+
<div class="mw3 bg-black-10 pa2 mv1">
144135
Lorem ipsum dolor sit amet, consetetur sadipscing
145136
</div>
146137
</td>
147138
</tr>
148139
<tr>
149140
<td>
150-
<code class="code">.mw4</code>
141+
<code class="code mr2">.mw4</code>
151142
</td>
152143
<td>
153-
<div class="mw4 bg-black-10 pv2 oh">
144+
<div class="mw4 bg-black-10 pa2 mv1">
154145
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
155146
</div>
156147
</td>
157148
</tr>
158149
<tr>
159150
<td>
160-
<code class="code">.mw5</code>
151+
<code class="code mr2">.mw5</code>
152+
</td>
153+
<td>
154+
<div class="mw5 bg-black-10 pa2 mv1">
155+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
156+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
157+
vero eos et accusam et justo duo dolores et ea rebum.
158+
</div>
159+
</td>
160+
</tr>
161+
<tr>
162+
<td>
163+
<code class="code mr2">.mw6</code>
164+
</td>
165+
<td>
166+
<div class="mw6 bg-black-10 pa2 mv1">
167+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
168+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
169+
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
170+
no sea takimata sanctus est Lorem ipsum dolor sit amet.
171+
</div>
172+
</td>
173+
</tr>
174+
<tr>
175+
<td>
176+
<code class="code mr2">.mw7</code>
177+
</td>
178+
<td>
179+
<div class="mw7 bg-black-10 pa2 mv1">
180+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
181+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
182+
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
183+
no sea takimata sanctus est Lorem ipsum dolor sit amet.
184+
</div>
185+
</td>
186+
</tr>
187+
<tr>
188+
<td>
189+
<code class="code mr2">.mw8</code>
161190
</td>
162191
<td>
163-
<div class="mw5 bg-black-10 pv2 oh">
192+
<div class="mw8 bg-black-10 pa2 mv1">
164193
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
165194
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
166195
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
@@ -170,10 +199,10 @@ <h3 class="f5 book pt4 caps">Max Width Scale</h3>
170199
</tr>
171200
<tr>
172201
<td>
173-
<code class="code">.mw6</code>
202+
<code class="code mr2">.mw9</code>
174203
</td>
175204
<td>
176-
<div class="mw6 bg-black-10 pv2 oh">
205+
<div class="mw9 bg-black-10 pa2 mv1">
177206
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
178207
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
179208
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
@@ -184,8 +213,8 @@ <h3 class="f5 book pt4 caps">Max Width Scale</h3>
184213
</table>
185214
<h3 class="f5 book pt4 caps">Max Width Percentages</h3>
186215
<div class="bg-black-10 w-100">
187-
<div class="mw-100 bg-black-10 mb3">
188-
<code class="code">mw-100</code>
216+
<div class="mw-100 bg-black-10">
217+
<code class="code db pa2">mw-100</code>
189218
</div>
190219
</div>
191220
<div class="mt5 cf">

‎src/templates/docs/max-widths/index.html

+52-23
Original file line numberDiff line numberDiff line change
@@ -56,18 +56,9 @@ <h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
5656
7 = 7th step in width scale
5757
8 = 8th step in width scale
5858
9 = 9th step in width scale
59-
10 = 10th step in width scale
6059

61-
-25 = literal value 10%
62-
-50 = literal value 20%
63-
-75 = literal value 25%
6460
-100 = literal value 33%
65-
6661
-none = none
67-
-max = max-content
68-
-min = min-content
69-
-fit = fit-content
70-
-fill = fill-available
7162

7263
Media Query Extensions:
7364
-ns = not-small
@@ -81,50 +72,88 @@ <h3 class="f5 book pt4 caps">Max Width Scale</h3>
8172
<table border="0" cellspacing="5" cellpadding="5">
8273
<tr>
8374
<td>
84-
<code class="code">.mw1</code>
75+
<code class="code mr2">.mw1</code>
8576
</td>
8677
<td>
87-
<div class="mw1 bg-black-10 pv2 oh">
78+
<div class="mw1 bg-black-10 pa2 mv1">
8879
Lorem
8980
</div>
9081
</td>
9182
</tr>
9283
<tr>
9384
<td>
94-
<code class="code">.mw2</code>
85+
<code class="code mr2">.mw2</code>
9586
</td>
9687
<td>
97-
<div class="mw2 bg-black-10 pv2 oh">
88+
<div class="mw2 bg-black-10 pa2 mv1">
9889
Lorem
9990
</div>
10091
</td>
10192
</tr>
10293
<tr>
10394
<td>
104-
<code class="code">.mw3</code>
95+
<code class="code mr2">.mw3</code>
10596
</td>
10697
<td>
107-
<div class="mw3 bg-black-10 pv2 oh">
98+
<div class="mw3 bg-black-10 pa2 mv1">
10899
Lorem ipsum dolor sit amet, consetetur sadipscing
109100
</div>
110101
</td>
111102
</tr>
112103
<tr>
113104
<td>
114-
<code class="code">.mw4</code>
105+
<code class="code mr2">.mw4</code>
115106
</td>
116107
<td>
117-
<div class="mw4 bg-black-10 pv2 oh">
108+
<div class="mw4 bg-black-10 pa2 mv1">
118109
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
119110
</div>
120111
</td>
121112
</tr>
122113
<tr>
123114
<td>
124-
<code class="code">.mw5</code>
115+
<code class="code mr2">.mw5</code>
116+
</td>
117+
<td>
118+
<div class="mw5 bg-black-10 pa2 mv1">
119+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
120+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
121+
vero eos et accusam et justo duo dolores et ea rebum.
122+
</div>
123+
</td>
124+
</tr>
125+
<tr>
126+
<td>
127+
<code class="code mr2">.mw6</code>
128+
</td>
129+
<td>
130+
<div class="mw6 bg-black-10 pa2 mv1">
131+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
132+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
133+
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
134+
no sea takimata sanctus est Lorem ipsum dolor sit amet.
135+
</div>
136+
</td>
137+
</tr>
138+
<tr>
139+
<td>
140+
<code class="code mr2">.mw7</code>
141+
</td>
142+
<td>
143+
<div class="mw7 bg-black-10 pa2 mv1">
144+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
145+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
146+
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
147+
no sea takimata sanctus est Lorem ipsum dolor sit amet.
148+
</div>
149+
</td>
150+
</tr>
151+
<tr>
152+
<td>
153+
<code class="code mr2">.mw8</code>
125154
</td>
126155
<td>
127-
<div class="mw5 bg-black-10 pv2 oh">
156+
<div class="mw8 bg-black-10 pa2 mv1">
128157
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
129158
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
130159
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
@@ -134,10 +163,10 @@ <h3 class="f5 book pt4 caps">Max Width Scale</h3>
134163
</tr>
135164
<tr>
136165
<td>
137-
<code class="code">.mw6</code>
166+
<code class="code mr2">.mw9</code>
138167
</td>
139168
<td>
140-
<div class="mw6 bg-black-10 pv2 oh">
169+
<div class="mw9 bg-black-10 pa2 mv1">
141170
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
142171
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
143172
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
@@ -148,8 +177,8 @@ <h3 class="f5 book pt4 caps">Max Width Scale</h3>
148177
</table>
149178
<h3 class="f5 book pt4 caps">Max Width Percentages</h3>
150179
<div class="bg-black-10 w-100">
151-
<div class="mw-100 bg-black-10 mb3">
152-
<code class="code">mw-100</code>
180+
<div class="mw-100 bg-black-10">
181+
<code class="code db pa2">mw-100</code>
153182
</div>
154183
</div>
155184
<div class="mt5 cf">

0 commit comments

Comments
 (0)