| Left: | ||
| Right: |
| LEFT | RIGHT |
|---|---|
| 1 title=Grid | 1 title=Grid |
| 2 | 2 |
| 3 <h1>Grid</h1> | 3 <h1>Grid</h1> |
| 4 <p>A grid is made up of rows of columns. Column widths are set by modifier class es and collapse on smaller screens. Columns may also appear in reverse order and right-to-left direction.</p> | 4 <p>A grid is made up of rows of columns. Column widths are set by modifier class es and collapse on smaller screens. Columns may also appear in reverse order and right-to-left direction.</p> |
| 5 | 5 |
| 6 <ol> | 6 <ol> |
| 7 <li><a href="#desktop">Desktop</a></li> | 7 <li><a href="#desktop">Desktop</a></li> |
| 8 <li><a href="#tablet">Tablet</a></li> | 8 <li><a href="#tablet">Tablet</a></li> |
| 9 <li><a href="#mobile">Mobile</a></li> | 9 <li><a href="#mobile">Mobile</a></li> |
| 10 <li><a href="#reverse">Reverse</a></li> | 10 <li><a href="#reverse">Reverse</a></li> |
| 11 <li><a href="#right-to-left">Right-to-left</a></li> | 11 <li><a href="#right-to-left">Right-to-left</a></li> |
| 12 <li><a href="#reverse-and-right-to-left">Reverse & right-to-left</a></li> | 12 <li><a href="#reverse-and-right-to-left">Reverse & right-to-left</a></li> |
| 13 </ol> | 13 </ol> |
| 14 | 14 |
| 15 <h2 id="desktop">Desktop</h2> | 15 <h2 id="desktop">Desktop</h2> |
| 16 <? include styleguide/grid/all ?> | 16 <? include styleguide/grid/all-column-widths ?> |
|
juliandoucette
2017/08/10 16:49:30
NIT: "all" is not very descriptive
Suggest: "colum
ire
2017/08/11 11:09:47
Done. Changed to "all-column-widths", since the ot
juliandoucette
2017/08/20 16:48:39
Acknowledged.
| |
| 17 | 17 |
| 18 <h2 id="tablet">Tablet</h2> | 18 <h2 id="tablet">Tablet</h2> |
| 19 <div class="tablet"> | 19 <div class="tablet"> |
| 20 <? include styleguide/grid/all ?> | 20 <? include styleguide/grid/all-column-widths ?> |
|
juliandoucette
2017/08/10 16:49:31
NIT: Please indent
ire
2017/08/11 11:09:48
Done.
| |
| 21 </div> | 21 </div> |
| 22 | 22 |
| 23 <h2 id="mobile">Mobile</h2> | 23 <h2 id="mobile">Mobile</h2> |
| 24 <div class="mobile"> | 24 <div class="mobile"> |
| 25 <? include styleguide/grid/all ?> | 25 <? include styleguide/grid/all-column-widths ?> |
| 26 </div> | 26 </div> |
| 27 | 27 |
| 28 <h2 id="reverse">Reverse</h2> | 28 <h2 id="reverse">Reverse</h2> |
| 29 <? include styleguide/grid/reversed ?> | 29 <div class="reverse"> |
|
juliandoucette
2017/08/10 16:49:30
NIT: "reversed" what?
Suggest: Replace this includ
ire
2017/08/11 11:09:48
Done.
| |
| 30 <? include styleguide/grid/2-column ?> | |
| 31 </div> | |
| 30 | 32 |
| 31 <h2 id="right-to-left">Right-to-left</h2> | 33 <h2 id="right-to-left">Right-to-left</h2> |
| 32 <div dir="rtl"> | 34 <div dir="rtl"> |
| 33 <? include styleguide/grid/2-column ?> | 35 <? include styleguide/grid/2-column ?> |
| 34 </div> | 36 </div> |
| 35 | 37 |
| 36 <h2 id="reverse-and-right-to-left">Reverse & right-to-left</h2> | 38 <h2 id="reverse-and-right-to-left">Reverse & right-to-left</h2> |
| 37 <div dir="rtl"> | 39 <div class="reverse" dir="rtl"> |
| 38 <? include styleguide/grid/reversed ?> | 40 <? include styleguide/grid/2-column ?> |
| 39 </div> | 41 </div> |
| LEFT | RIGHT |