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

Delta Between Two Patch Sets: demo/grid.html

Issue 29361708: Issue 4609 - Default grid component (Closed)
Left Patch Set: Created Nov. 3, 2016, 5:51 p.m.
Right Patch Set: Updated name, inverse class, and documentation Created Dec. 1, 2016, 6:45 p.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 | « demo/css/demo.css ('k') | demo/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 <!DOCTYPE html>
2 <!--
3 This file is part of website-defaults
4 Copyright (C) 2016 Eyeo GmbH
5
6 website-defaults is free software: you can redistribute it and/or
7 modify it under the terms of the GNU General Public License as published by
8 the Free Software Foundation, either version 3 of the License, or
9 (at your option) any later version.
10
11 website-defaults is distributed in the hope that it will be useful,
12 but WITHOUT ANY WARRANTY; without even the implied warranty of
13 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
14 GNU General Public License for more details.
15
16 You should have received a copy of the GNU General Public License
17 along with website-defaults. If not, see <http://www.gnu.org/licenses/>.
18 -->
19 <html dir="ltr">
20 <head>
21 <meta charset="utf-8">
22 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to- fit=no">
23 <meta http-equiv="x-ua-compatible" content="ie=edge">
24 <title>Grid</title>
25 <link rel="stylesheet" href="/css/main.css">
26 <link rel="stylesheet" href="/css/demo.css">
27 </head>
28 <body>
29 <div class="container">
30
31 <h1>Grid</h1>
32 <p>A grid is made up of rows of columns. Column widths are set by modifier c lasses and collapse on smaller screens. Columns may also appear in reverse order and right-to-left direction.</p>
33
34 <ol>
35 <li><a href="#desktop">Desktop</a></li>
36 <li><a href="#tablet">Tablet</a></li>
37 <li><a href="#mobile">Mobile</a></li>
38 <li><a href="#reverse">Reverse</a></li>
39 <li><a href="#right-to-left">Right-to-left</a></li>
40 <li><a href="#reverse-and-right-to-left">Reverse & right-to-left</a></li>
41 </ol>
42
43 <h2 id="desktop">Desktop</h2>
44 <div class="row">
45 <div class="one-half column"><p class="inverse-text">One half</p></div>
saroyanm 2016/12/01 19:11:05 * What was the reason of renaming the classes from
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 class="two-thirds column"><p class="inverse-text">Two thirds</p></div >
51 </div>
52 <div class="row">
53 <div class="one-fourth column"><p class="inverse-text">One fourth</p></div >
54 <div class="three-fourths column"><p class="inverse-text">Three fourths</p ></div>
55 </div>
56
57 <h2 id="tablet">Tablet</h2>
58 <div class="tablet">
59 <div class="row">
60 <div class="one-half column"><p class="inverse-text">One half</p></div>
61 </div>
62 <div class="row">
63 <div class="one-third column"><p class="inverse-text">One third</p></div >
64 </div>
65 <div class="row">
66 <div class="one-fourth column"><p class="inverse-text">One fourth</p></d iv>
67 <div class="one-fourth column"><p class="inverse-text">One fourth</p></d iv>
68 </div>
69 </div>
70
71 <h2 id="mobile">Mobile</h2>
72 <div class="mobile">
73 <div class="row">
74 <div class="one-half column"><p class="inverse-text">One half</p></div>
75 </div>
76 <div class="row">
77 <div class="one-third column"><p class="inverse-text">One third</p></div >
78 </div>
79 <div class="row">
80 <div class="one-fourth column"><p class="inverse-text">One fourth</p></d iv>
81 </div>
82 </div>
83
84 <h2 id="reverse">Reverse</h2>
85 <div class="row reverse">
86 <div class="one-half column"><p class="inverse-text">First</p></div>
87 <div class="one-half column"><p class="inverse-text">Second</p></div>
88 </div>
89
90 <h2 id="right-to-left">Right-to-left</h2>
91 <div dir="rtl">
92 <div class="row">
93 <div class="one-half column"><p class="inverse-text">First</p></div>
94 <div class="one-half column"><p class="inverse-text">Second</p></div>
95 </div>
96 </div>
97
98 <h2 id="reverse-and-right-to-left">Reverse & right-to-left</h2>
99 <div dir="rtl">
100 <div class="row reverse">
101 <div class="one-half column"><p class="inverse-text">First</p></div>
102 <div class="one-half column"><p class="inverse-text">Second</p></div>
103 </div>
104 </div>
105
106 </div>
107 </body>
108 </html>
LEFTRIGHT

Powered by Google App Engine
This is Rietveld