Skip to content

Commit 6fcc5d1

Browse files
author
mrmrs
committed
Update the index with more grid classes
1 parent c0e7a42 commit 6fcc5d1

File tree

1 file changed

+132
-0
lines changed

1 file changed

+132
-0
lines changed

‎src/templates/index.html

+132
Original file line numberDiff line numberDiff line change
@@ -448,6 +448,138 @@ <h4 class="mt4 fw6 f6">Narrow Measure</h4>
448448
</div>
449449
</div>
450450
</article>
451+
</div>
452+
</div>
453+
<article class="mt5 id="grids"">
454+
<div class="ph3 ph5-ns">
455+
<div class="mw9 center">
456+
<h3 class="f6 ttu fw6 mt0 bb pb2">Grids</h3>
457+
<p class="lh-copy measure">
458+
Floats, widths, and padding can be combined to build a
459+
wide variety of grids.
460+
</p>
461+
</div>
462+
</div>
463+
<section class="cf w-100 pv3 f6 ph3 ph4-ns">
464+
<div class="mw9 center ph3-ns">
465+
<div class="ph2-ns">
466+
<div class="fl w-100 pa2">
467+
<div class="outline bg-white tc pv4"><code>fl w-100 pa2</code></div>
468+
</div>
469+
<div class="fl w-90 pa2">
470+
<div class="outline bg-white tc pv4"><code>fl w-90 pa2</code></div>
471+
</div>
472+
<div class="fl w-10 pa2">
473+
<div class="outline bg-white tc pv4"><code>fl w-10 pa2</code></div>
474+
</div>
475+
<div class="fl w-80 pa2">
476+
<div class="outline bg-white tc pv4"><code>fl w-80 pa2</code></div>
477+
</div>
478+
<div class="fl w-20 pa2">
479+
<div class="outline bg-white tc pv4"><code>fl w-20 pa2</code></div>
480+
</div>
481+
<div class="fl w-70 pa2">
482+
<div class="outline bg-white tc pv4"><code>fl w-80 pa2</code></div>
483+
</div>
484+
<div class="fl w-30 pa2">
485+
<div class="outline bg-white tc pv4"><code>fl w-20 pa2</code></div>
486+
</div>
487+
<div class="fl w-75 pa2">
488+
<div class="outline bg-white tc pv4"><code>fl w-75 pa2</code></div>
489+
</div>
490+
<div class="fl w-25 pa2">
491+
<div class="outline bg-white tc pv4"><code>fl w-25 pa2</code></div>
492+
</div>
493+
<div class="fl w-60 pa2">
494+
<div class="outline bg-white tc pv4"><code>fl w-60 pa2</code></div>
495+
</div>
496+
<div class="fl w-40 pa2">
497+
<div class="outline bg-white tc pv4"><code>fl w-40 pa2</code></div>
498+
</div>
499+
<div class="fl w-50 pa2">
500+
<div class="outline bg-white tc pv4"><code>fl w-50 pa2</code></div>
501+
</div>
502+
<div class="fl w-50 pa2">
503+
<div class="outline bg-white tc pv4"><code>fl w-50 pa2</code></div>
504+
</div>
505+
<div class="fl w-third pa2">
506+
<div class="outline bg-white tc pv4"><code>fl w-third pa2</code></div>
507+
</div>
508+
<div class="fl w-third pa2">
509+
<div class="outline bg-white tc pv4"><code>fl w-third pa2</code></div>
510+
</div>
511+
<div class="fl w-third pa2">
512+
<div class="outline bg-white tc pv4"><code>fl w-third pa2</code></div>
513+
</div>
514+
<div class="fl w-third pa2">
515+
<div class="outline bg-white tc pv4"><code>fl w-third pa2</code></div>
516+
</div>
517+
<div class="fl w-two-thirds pa2">
518+
<div class="outline bg-white tc pv4"><code>fl w-two-third-s pa2</code></div>
519+
</div>
520+
<div class="fl w-25 pa2">
521+
<div class="outline bg-white tc pv4"><code>fl w-25 pa2</code></div>
522+
</div>
523+
<div class="fl w-25 pa2">
524+
<div class="outline bg-white tc pv4"><code>fl w-25 pa2</code></div>
525+
</div>
526+
<div class="fl w-25 pa2">
527+
<div class="outline bg-white tc pv4"><code>fl w-25 pa2</code></div>
528+
</div>
529+
<div class="fl w-25 pa2">
530+
<div class="outline bg-white tc pv4"><code>fl w-25 pa2</code></div>
531+
</div>
532+
<div class="fl w-20 pa2">
533+
<div class="outline bg-white tc pv4"><code>fl w-20 pa2</code></div>
534+
</div>
535+
<div class="fl w-20 pa2">
536+
<div class="outline bg-white tc pv4"><code>fl w-20 pa2</code></div>
537+
</div>
538+
<div class="fl w-20 pa2">
539+
<div class="outline bg-white tc pv4"><code>fl w-20 pa2</code></div>
540+
</div>
541+
<div class="fl w-20 pa2">
542+
<div class="outline bg-white tc pv4"><code>fl w-20 pa2</code></div>
543+
</div>
544+
<div class="fl w-20 pa2">
545+
<div class="outline bg-white tc pv4"><code>fl w-20 pa2</code></div>
546+
</div>
547+
<div class="fl w-10 pa2">
548+
<div class="outline bg-white tc pv4"><code>fl w-20 pa2</code></div>
549+
</div>
550+
<div class="fl w-10 pa2">
551+
<div class="outline bg-white tc pv4"><code>fl w-10 pa2</code></div>
552+
</div>
553+
<div class="fl w-10 pa2">
554+
<div class="outline bg-white tc pv4"><code>fl w-10 pa2</code></div>
555+
</div>
556+
<div class="fl w-10 pa2">
557+
<div class="outline bg-white tc pv4"><code>fl w-10 pa2</code></div>
558+
</div>
559+
<div class="fl w-10 pa2">
560+
<div class="outline bg-white tc pv4"><code>fl w-10 pa2</code></div>
561+
</div>
562+
<div class="fl w-10 pa2">
563+
<div class="outline bg-white tc pv4"><code>fl w-10 pa2</code></div>
564+
</div>
565+
<div class="fl w-10 pa2">
566+
<div class="outline bg-white tc pv4"><code>fl w-10 pa2</code></div>
567+
</div>
568+
<div class="fl w-10 pa2">
569+
<div class="outline bg-white tc pv4"><code>fl w-10 pa2</code></div>
570+
</div>
571+
<div class="fl w-10 pa2">
572+
<div class="outline bg-white tc pv4"><code>fl w-10 pa2</code></div>
573+
</div>
574+
<div class="fl w-10 pa2">
575+
<div class="outline bg-white tc pv4"><code>fl w-10 pa2</code></div>
576+
</div>
577+
</div>
578+
</div>
579+
</section>
580+
</article>
581+
<div class="ph3 ph5-ns pt5">
582+
<div class="mw9 center overflow-auto">
451583
<article class="mt5">
452584
<h3 class="f6 ttu fw6 mt0 mb3 bb pb2">Colors</h3>
453585
<div class="dt-ns dt--fixed-ns">

0 commit comments

Comments
 (0)