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 |