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

Delta Between Two Patch Sets: pages/grid.html

Issue 29491561: Issue 5413 - Create basic style guide for website-defaults (Closed)
Left Patch Set: Created July 18, 2017, 6:53 a.m.
Right Patch Set: Separate Content and Developer Styleguides Created Aug. 21, 2017, 10:18 a.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
Right: Side by side diff | Download
« no previous file with change/comment | « pages/developer-styleguide.html ('k') | pages/index.html » ('j') | no next file with change/comment »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
LEFTRIGHT
(no file at all)
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-column-widths ?>
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-column-widths ?>
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-column-widths ?>
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 <div class="reverse">
58 <div class="one-half column"><p class="inverse-text">First</p></div> 30 <? include styleguide/grid/2-column ?>
59 <div class="one-half column"><p class="inverse-text">Second</p></div>
60 </div> 31 </div>
61 32
62 <h2 id="right-to-left">Right-to-left</h2> 33 <h2 id="right-to-left">Right-to-left</h2>
63 <div dir="rtl"> 34 <div dir="rtl">
64 <div class="row"> 35 <? 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> 36 </div>
69 37
70 <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>
71 <div dir="rtl"> 39 <div class="reverse" dir="rtl">
72 <div class="row reverse"> 40 <? include styleguide/grid/2-column ?>
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> 41 </div>
LEFTRIGHT

Powered by Google App Engine
This is Rietveld