Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Side by Side Diff: pages/grid.html

Issue 29491561: Issue 5413 - Create basic style guide for website-defaults (Closed)
Patch Set: Use includes for each demo Created Aug. 10, 2017, 9:52 a.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
OLDNEW
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 <div class="row"> 16 <? include styleguide/grid/all ?>
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 <div class="one-half column"><p class="inverse-text">One half</p></div>
18 <div class="one-half column"><p class="inverse-text">One half</p></div>
19 </div>
20 <div class="row">
21 <div class="one-third column"><p class="inverse-text">One third</p></div>
22 <div class="two-thirds column"><p class="inverse-text">Two thirds</p></div>
23 </div>
24 <div class="row">
25 <div class="one-fourth column"><p class="inverse-text">One fourth</p></div>
26 <div class="three-fourths column"><p class="inverse-text">Three fourths</p></d iv>
27 </div>
28 17
29 <h2 id="tablet">Tablet</h2> 18 <h2 id="tablet">Tablet</h2>
30 <div class="tablet"> 19 <div class="tablet">
31 <div class="row"> 20 <? include styleguide/grid/all ?>
juliandoucette 2017/08/10 16:49:31 NIT: Please indent
ire 2017/08/11 11:09:48 Done.
32 <div class="one-half column"><p class="inverse-text">One half</p></div>
33 </div>
34 <div class="row">
35 <div class="one-third column"><p class="inverse-text">One third</p></div>
36 </div>
37 <div class="row">
38 <div class="one-fourth column"><p class="inverse-text">One fourth</p></div>
39 <div class="one-fourth column"><p class="inverse-text">One fourth</p></div>
40 </div>
41 </div> 21 </div>
42 22
43 <h2 id="mobile">Mobile</h2> 23 <h2 id="mobile">Mobile</h2>
44 <div class="mobile"> 24 <div class="mobile">
45 <div class="row"> 25 <? include styleguide/grid/all ?>
46 <div class="one-half column"><p class="inverse-text">One half</p></div>
47 </div>
48 <div class="row">
49 <div class="one-third column"><p class="inverse-text">One third</p></div>
50 </div>
51 <div class="row">
52 <div class="one-fourth column"><p class="inverse-text">One fourth</p></div>
53 </div>
54 </div> 26 </div>
55 27
56 <h2 id="reverse">Reverse</h2> 28 <h2 id="reverse">Reverse</h2>
57 <div class="row reverse"> 29 <? include styleguide/grid/reversed ?>
juliandoucette 2017/08/10 16:49:30 NIT: "reversed" what? Suggest: Replace this includ
ire 2017/08/11 11:09:48 Done.
58 <div class="one-half column"><p class="inverse-text">First</p></div>
59 <div class="one-half column"><p class="inverse-text">Second</p></div>
60 </div>
61 30
62 <h2 id="right-to-left">Right-to-left</h2> 31 <h2 id="right-to-left">Right-to-left</h2>
63 <div dir="rtl"> 32 <div dir="rtl">
64 <div class="row"> 33 <? include styleguide/grid/2-column ?>
65 <div class="one-half column"><p class="inverse-text">First</p></div>
66 <div class="one-half column"><p class="inverse-text">Second</p></div>
67 </div>
68 </div> 34 </div>
69 35
70 <h2 id="reverse-and-right-to-left">Reverse & right-to-left</h2> 36 <h2 id="reverse-and-right-to-left">Reverse & right-to-left</h2>
71 <div dir="rtl"> 37 <div dir="rtl">
72 <div class="row reverse"> 38 <? include styleguide/grid/reversed ?>
73 <div class="one-half column"><p class="inverse-text">First</p></div>
74 <div class="one-half column"><p class="inverse-text">Second</p></div>
75 </div>
76 </div> 39 </div>
OLDNEW

Powered by Google App Engine
This is Rietveld