Skip to content

Commit c366a88

Browse files
author
mrmrs
committed
Update docs
1 parent 8b7c07a commit c366a88

File tree

8 files changed

+266
-7
lines changed

8 files changed

+266
-7
lines changed

‎docs/layout/grid/index.html

Lines changed: 179 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,9 @@ <h4 class="f4 mv0 fw6 dib mr4">Basic Grid</h4>
6363
</p>
6464
</div>
6565
</article>
66-
<div class="ph3 ph5-ns pt4 pb5">
67-
<h2 class="f3 b">Example</h2>
66+
<div class="ph3 ph5-ns">
67+
<h3 class="f5 mb4 pb2 bb">Examples</h3>
68+
<h4 class="f6 mb2">Fixed Columns</h4>
6869
</div>
6970
<section class="cf w-100 pv3 f6 ph3 ph4-ns">
7071
<div class="mw9 center ph3-ns">
@@ -121,7 +122,7 @@ <h2 class="f3 b">Example</h2>
121122
<div class="outline bg-white tc pv4"><code>fl w-third pa2</code></div>
122123
</div>
123124
<div class="fl w-two-thirds pa2">
124-
<div class="outline bg-white tc pv4"><code>fl w-two-third-s pa2</code></div>
125+
<div class="outline bg-white tc pv4"><code>fl w-two-thirds pa2</code></div>
125126
</div>
126127
<div class="fl w-25 pa2">
127128
<div class="outline bg-white tc pv4"><code>fl w-25 pa2</code></div>
@@ -183,17 +184,188 @@ <h2 class="f3 b">Example</h2>
183184
</div>
184185
</div>
185186
</section>
186-
<div class="cf pa3 ph5-ns mv4 mv5-ns bt bb b--black-10">
187+
<div class="ph3 ph5-ns pt5">
188+
<h4 class="f6 mb2">Two Columns - Collapsing</h4>
189+
<code class="f6 pre">
190+
&lt;div class="mw9 center ph3-ns"&gt;
191+
&lt;div class="cf ph2-ns"&gt;
192+
&lt;div class="fl w-100 w-50-ns pa2"&gt;
193+
&lt;div class="outline bg-white pv4"&gt;&lt;/div&gt;
194+
&lt;/div&gt;
195+
&lt;div class="fl w-100 w-50-ns pa2"&gt;
196+
&lt;div class="outline bg-white pv4"&gt;&lt;/div&gt;
197+
&lt;/div&gt;
198+
&lt;/div&gt;
199+
&lt;/div&gt;
200+
</code>
201+
</div>
202+
<section class="w-100 pv3 f6 ph3 ph4-ns">
203+
<div class="mw9 center ph3-ns">
204+
<div class="cf ph2-ns">
205+
<div class="fl w-100 w-50-ns pa2">
206+
<div class="outline bg-white tc pv4"></div>
207+
</div>
208+
<div class="fl w-100 w-50-ns pa2">
209+
<div class="outline bg-white tc pv4"></div>
210+
</div>
211+
</div>
212+
</div>
213+
</section>
214+
<div class="ph3 ph5-ns pt5">
215+
<h4 class="f6 mb2">Three Columns - Collapse to Single</h4>
216+
<code class="f6 pre">
217+
&lt;div class="mw9 center ph3-ns"&gt;
218+
&lt;div class="cf ph2-ns"&gt;
219+
&lt;div class="fl w-100 w-third-ns pa2"&gt;
220+
&lt;div class="outline bg-white pv4"&gt;&lt;/div&gt;
221+
&lt;/div&gt;
222+
&lt;div class="fl w-100 w-third-ns pa2"&gt;
223+
&lt;div class="outline bg-white pv4"&gt;&lt;/div&gt;
224+
&lt;/div&gt;
225+
&lt;div class="fl w-100 w-third-ns pa2"&gt;
226+
&lt;div class="outline bg-white pv4"&gt;&lt;/div&gt;
227+
&lt;/div&gt;
228+
&lt;/div&gt;
229+
&lt;/div&gt;
230+
</code>
231+
</div>
232+
<section class="w-100 pv3 f6 ph3 ph4-ns">
233+
<div class="mw9 center ph3-ns">
234+
<div class="cf ph2-ns">
235+
<div class="fl w-100 w-third-ns pa2">
236+
<div class="outline bg-white pv4"></div>
237+
</div>
238+
<div class="fl w-100 w-third-ns pa2">
239+
<div class="outline bg-white pv4"></div>
240+
</div>
241+
<div class="fl w-100 w-third-ns pa2">
242+
<div class="outline bg-white pv4"></div>
243+
</div>
244+
</div>
245+
</div>
246+
</section>
247+
<div class="ph3 ph5-ns pt5">
248+
<h4 class="f6 mb2">Three Columns - Collapse to Mixed</h4>
249+
<code class="f6 pre">
250+
&lt;div class="mw9 center ph3-ns"&gt;
251+
&lt;div class="cf ph2-ns"&gt;
252+
&lt;div class="fl w-100 w-third-ns pa2"&gt;
253+
&lt;div class="outline bg-white pv4"&gt;&lt;/div&gt;
254+
&lt;/div&gt;
255+
&lt;div class="fl w-50 w-third-ns pa2"&gt;
256+
&lt;div class="outline bg-white pv4"&gt;&lt;/div&gt;
257+
&lt;/div&gt;
258+
&lt;div class="fl w-50 w-third-ns pa2"&gt;
259+
&lt;div class="outline bg-white pv4"&gt;&lt;/div&gt;
260+
&lt;/div&gt;
261+
&lt;/div&gt;
262+
&lt;/div&gt;
263+
</code>
264+
</div>
265+
<section class="w-100 pv3 f6 ph3 ph4-ns">
266+
<div class="mw9 center ph3-ns">
267+
<div class="cf ph2-ns">
268+
<div class="fl w-100 w-third-ns pa2">
269+
<div class="outline bg-white tc pv4"></div>
270+
</div>
271+
<div class="fl w-50 w-third-ns pa2">
272+
<div class="outline bg-white tc pv4"></div>
273+
</div>
274+
<div class="fl w-50 w-third-ns pa2">
275+
<div class="outline bg-white tc pv4"></div>
276+
</div>
277+
</div>
278+
</div>
279+
</section>
280+
<div class="ph3 ph5-ns pt5">
281+
<h4 class="f6 mb2">Four Columns - Collapse to single</h4>
282+
<code class="f6 pre">
283+
&lt;div class="mw9 center ph3-ns"&gt;
284+
&lt;div class="cf ph2-ns"&gt;
285+
&lt;div class="fl w-100 w-25-ns pa2"&gt;
286+
&lt;div class="outline bg-white pv4"&gt;&lt;/div&gt;
287+
&lt;/div&gt;
288+
&lt;div class="fl w-100 w-25-ns pa2"&gt;
289+
&lt;div class="outline bg-white pv4"&gt;&lt;/div&gt;
290+
&lt;/div&gt;
291+
&lt;div class="fl w-100 w-25-ns pa2"&gt;
292+
&lt;div class="outline bg-white pv4"&gt;&lt;/div&gt;
293+
&lt;/div&gt;
294+
&lt;div class="fl w-100 w-25-ns pa2"&gt;
295+
&lt;div class="outline bg-white pv4"&gt;&lt;/div&gt;
296+
&lt;/div&gt;
297+
&lt;/div&gt;
298+
&lt;/div&gt;
299+
</code>
300+
</div>
301+
<section class="w-100 pv3 f6 ph3 ph4-ns">
302+
<div class="mw9 center ph3-ns">
303+
<div class="cf ph2-ns">
304+
<div class="fl w-100 w-25-ns pa2">
305+
<div class="outline bg-white pv4"></div>
306+
</div>
307+
<div class="fl w-100 w-25-ns pa2">
308+
<div class="outline bg-white pv4"></div>
309+
</div>
310+
<div class="fl w-100 w-25-ns pa2">
311+
<div class="outline bg-white pv4"></div>
312+
</div>
313+
<div class="fl w-100 w-25-ns pa2">
314+
<div class="outline bg-white pv4"></div>
315+
</div>
316+
</div>
317+
</div>
318+
</section>
319+
<div class="ph3 ph5-ns pt5">
320+
<h4 class="f6 mb2">Four Columns - Collapse to Mixed</h4>
321+
<code class="f6 pre">
322+
&lt;div class="mw9 center ph3-ns"&gt;
323+
&lt;div class="cf ph2-ns"&gt;
324+
&lt;div class="fl w-100 w-25-ns pa2"&gt;
325+
&lt;div class="outline bg-white tc pv4"&gt;&lt;/div&gt;
326+
&lt;/div&gt;
327+
&lt;div class="fl w-third w-25-ns pa2"&gt;
328+
&lt;div class="outline bg-white tc pv4"&gt;&lt;/div&gt;
329+
&lt;/div&gt;
330+
&lt;div class="fl w-third w-25-ns pa2"&gt;
331+
&lt;div class="outline bg-white tc pv4"&gt;&lt;/div&gt;
332+
&lt;/div&gt;
333+
&lt;div class="fl w-third w-25-ns pa2"&gt;
334+
&lt;div class="outline bg-white tc pv4"&gt;&lt;/div&gt;
335+
&lt;/div&gt;
336+
&lt;/div&gt;
337+
&lt;/div&gt;
338+
</code>
339+
</div>
340+
<section class="w-100 pv3 f6 ph3 ph4-ns">
341+
<div class="mw9 center ph3-ns">
342+
<div class="cf ph2-ns">
343+
<div class="fl w-100 w-25-ns pa2">
344+
<div class="outline bg-white tc pv4"></div>
345+
</div>
346+
<div class="fl w-third w-25-ns pa2">
347+
<div class="outline bg-white tc pv4"></div>
348+
</div>
349+
<div class="fl w-third w-25-ns pa2">
350+
<div class="outline bg-white tc pv4"></div>
351+
</div>
352+
<div class="fl w-third w-25-ns pa2">
353+
<div class="outline bg-white tc pv4"></div>
354+
</div>
355+
</div>
356+
</div>
357+
</section>
358+
<div class="cf pa3 ph5-ns pv4 mv4 mv5-ns bt bb b--black-10">
187359
<div class="dib mr4">
188-
<h1 class="f6 fw6">Previous</h1>
360+
<h4 class="f6 fw6 mt0">Previous</h4>
189361
<a href="/docs/debug-grid/" class="link fw6 blue dim">Debug with a Grid</a>
190362
</div>
191363
<div class="dib">
192-
<h4 class="f6 fw6">Next</h4>
364+
<h4 class="f6 fw6 mt0">Next</h4>
193365
<a href="/docs/layout/background-size/" class="link fw6 blue dim">Background Size</a>
194366
</div>
195367
<div class="mt4">
196-
<h4 class="f6 fw6">Reference</h4>
368+
<h4 class="f6 fw6 mt0">Reference</h4>
197369
<a href="https://developer.mozilla.org/en/docs/Web/css/width" class="link fw6 blue dim">MDN - Width property</a>
198370
</div>
199371
</div>

‎src/components/forms/newsletter-subscription.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{{{
2+
"bodyClass" : "bg-white"
3+
}}}
4+
<div class="pa4-l">
5+
<form class="bg-light-red mw7 center pa4 br2-ns ba b--black-10">
6+
<fieldset class="cf bn ma0 pa0">
7+
<legend class="pa0 f5 f4-ns mb3 black-80">Sign up for our newsletter</legend>
8+
<div class="cf">
9+
<input class="fl f6 f5-l input-reset bn black-80 bg-white fl pa3 lh-solid w-100 w-75-m w-80-l br2-ns br--left-ns" placeholder="Your Email Address" type="text" name="Email_Adress" value="" id="Email_Adress">
10+
<input class="fl f6 f5-l button-reset pv3 tc bn bg-animate bg-black-70 hover-bg-black white pointer w-100 w-25-m w-20-l br2-ns br--right-ns" type="submit" value="Subscribe">
11+
</div>
12+
</fieldset>
13+
</form>
14+
</div>
15+

‎src/components/text/large-paragraph.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{{{
2+
"bodyClass" : "bg-white"
3+
}}}
4+
5+
<main class="pa3 pa5-ns">
6+
<p class="f4 lh-copy measure">
7+
Typography has one plain duty before it and that is to convey information
8+
in writing. No argument or consideration can absolve typography from this
9+
duty. A printed work which cannot be read becomes a product without
10+
purpose.
11+
</p>
12+
</main>

‎src/components/text/narrow-paragraph.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{{{
2+
"bodyClass" : "bg-white"
3+
}}}
4+
5+
<div class="pa3 pa5-ns">
6+
<p class="f5 lh-copy measure-narrow">
7+
Typography has one plain duty before it and that is to convey information
8+
in writing. No argument or consideration can absolve typography from this
9+
duty. A printed work which cannot be read becomes a product without
10+
purpose.
11+
</p>
12+
</div>

‎src/components/text/paragraph.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{{{
2+
"bodyClass" : "bg-white"
3+
}}}
4+
5+
<main class="pa3 pa5-ns">
6+
<p class="f5 lh-copy measure">
7+
Typography has one plain duty before it and that is to convey information
8+
in writing. No argument or consideration can absolve typography from this
9+
duty. A printed work which cannot be read becomes a product without
10+
purpose.
11+
</p>
12+
</main>

‎src/components/text/small-narrow-paragraph.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{{{
2+
"bodyClass" : "bg-white"
3+
}}}
4+
5+
<main class="pa3 pa5-ns">
6+
<p class="f6 lh-copy measure-narrow">
7+
Typography has one plain duty before it and that is to convey information
8+
in writing. No argument or consideration can absolve typography from this
9+
duty. A printed work which cannot be read becomes a product without
10+
purpose.
11+
</p>
12+
</main>

‎src/components/text/small-paragraph.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{{{
2+
"bodyClass" : "bg-white"
3+
}}}
4+
5+
<main class="pa3 pa5-ns">
6+
<p class="f6 lh-copy measure">
7+
Typography has one plain duty before it and that is to convey information
8+
in writing. No argument or consideration can absolve typography from this
9+
duty. A printed work which cannot be read becomes a product without
10+
purpose.
11+
</p>
12+
</main>

‎src/components/text/wide-paragraph.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{{{
2+
"bodyClass" : "bg-white"
3+
}}}
4+
5+
<div class="pa3 pa5-ns">
6+
<p class="f5 lh-copy measure-wide">
7+
Typography has one plain duty before it and that is to convey information
8+
in writing. No argument or consideration can absolve typography from this
9+
duty. A printed work which cannot be read becomes a product without
10+
purpose.
11+
</p>
12+
</div>

0 commit comments

Comments
 (0)