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

Delta Between Two Patch Sets: scss/_grid.scss

Issue 29361708: Issue 4609 - Default grid component (Closed)
Left Patch Set: Fixed one-half one-fourth mix-up, added units to 0s, and adjusted content hirarchy Created Nov. 8, 2016, 4:08 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:
Left: Side by side diff | Download
Right: Side by side diff | Download
« demo/grid.html ('K') | « demo/index.html ('k') | scss/main.scss » ('j') | no next file with change/comment »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
LEFTRIGHT
1 /*! 1 /*!
2 * This file is part of universal-design-language 2 * This file is part of website-defaults
3 * Copyright (C) 2016 Eyeo GmbH 3 * Copyright (C) 2016 Eyeo GmbH
4 * 4 *
5 * universal-design-language is free software: you can redistribute it and/or 5 * website-defaults is free software: you can redistribute it and/or
6 * modify it under the terms of the GNU General Public License as published by 6 * modify it under the terms of the GNU General Public License as published by
7 * the Free Software Foundation, either version 3 of the License, or 7 * the Free Software Foundation, either version 3 of the License, or
8 * (at your option) any later version. 8 * (at your option) any later version.
9 * 9 *
10 * universal-design-language is distributed in the hope that it will be useful, 10 * website-defaults is distributed in the hope that it will be useful,
11 * but WITHOUT ANY WARRANTY; without even the implied warranty of 11 * but WITHOUT ANY WARRANTY; without even the implied warranty of
12 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 12 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13 * GNU General Public License for more details. 13 * GNU General Public License for more details.
14 * 14 *
15 * You should have received a copy of the GNU General Public License 15 * You should have received a copy of the GNU General Public License
16 * along with web.starter-kit. If not, see <http://www.gnu.org/licenses/>. 16 * along with website-defaults. If not, see <http://www.gnu.org/licenses/>.
17 */ 17 */
18 18
19 .container, 19 /*******************************************************************************
saroyanm 2016/11/08 16:19:40 What suppose to be the difference between the cont
juliandoucette 2016/11/09 14:51:16 Acknowledged.
juliandoucette 2016/11/09 14:51:16 We decided to move .container to _content.scss.
juliandoucette 2016/11/09 19:47:18 Done.
20 .container-fluid 20 * Grid component
21 ******************************************************************************/
22
23 /**
24 * - .row contains one or more .column(s)
25 * - .row clears .column(s)
26 * - .row negates the left & right padding of it's left-most & right-most
27 * .column(s) while preserving consistent padding between .column(s)
28 */
29 .row
21 { 30 {
22 margin: 0px auto; 31 margin: 0px (-$small-space);
23 padding: 0px $small-space;
24 max-width: 100%;
25 } 32 }
26 33
27 .container:after,
saroyanm 2016/11/08 16:19:40 Note: we might use double colon as soon we will dr
juliandoucette 2016/11/09 14:51:16 Acknowledged.
juliandoucette 2016/11/09 19:47:18 Done.
28 .container-fluid:after,
29 .row:after 34 .row:after
30 { 35 {
36 display: block;
37 clear: both;
31 content: ""; 38 content: "";
32 display: table;
saroyanm 2016/11/08 16:19:40 I'll suggest to use display: block; I can't see re
juliandoucette 2016/11/09 14:51:16 Acknowledged. I will change this to display:block
juliandoucette 2016/11/09 19:47:18 Done.
33 clear: both;
34 } 39 }
35 40
36 .row 41 /**
37 { 42 * - .column is 100% width by default
38 margin: 0px -$small-space; 43 * - Modifier classes are applied to .column to change it's width
saroyanm 2016/11/08 16:19:39 Why do we need to use negative margins here ?
juliandoucette 2016/11/09 14:51:16 It should be (-$small-space) to avoid incorrect ca
juliandoucette 2016/11/09 14:51:16 Negative margin reasoning: To add consistent padd
juliandoucette 2016/11/09 19:47:18 Done.
39 } 44 * - Modifier classes behave differently on different device widths
40 45 */
41 .column 46 .column
42 { 47 {
43 position: relative; 48 position: relative;
49 width: 100%;
44 min-height: 1px; 50 min-height: 1px;
45 padding: 0px $small-space; 51 padding: 0px $small-space;
46 width: 100%;
47 } 52 }
48 53
49 [dir="ltr"] .column 54 /* - .column(s) within .row .reverse appear in reverse order
saroyanm 2016/11/08 16:19:39 detail: .column selector should be enough, same ap
juliandoucette 2016/11/09 14:51:16 Acknowledged. This only applies to properties whi
juliandoucette 2016/11/09 19:47:18 Done.
55 * - .column(s) within [dir=rtl] appear in reverse order respectively
56 */
57
58 .column,
59 [dir="rtl"] .reverse .column
50 { 60 {
51 float: left; 61 float: left;
saroyanm 2016/11/08 16:19:40 I'm not opposed of using floats, because seems lik
juliandoucette 2016/11/09 14:51:16 Julian - Acknowledged. @Thomas's opinion is still
52 } 62 }
53 63
64 .reverse .column,
54 [dir="rtl"] .column 65 [dir="rtl"] .column
55 { 66 {
56 float: right; 67 float: right;
57 } 68 }
58 69
59 @media (min-width: $mobile-breakpoint)
60 {
61 .container
62 {
63 width: 540px;
saroyanm 2016/11/08 16:19:39 Why is the width specification for the container i
juliandoucette 2016/11/09 14:51:16 Acknowledged. - We are moving container outside -
juliandoucette 2016/11/09 19:47:18 Done.
64 }
65 }
66
67 @media(min-width: $tablet-breakpoint) 70 @media(min-width: $tablet-breakpoint)
68 { 71 {
69 .container
70 {
71 width: 720px;
72 }
73
74 .one-fourth 72 .one-fourth
75 { 73 {
76 width: 50%; 74 width: 50%;
77 }
78
79 [dir="ltr"] .pull-one-fourth
80 {
81 right: 50%;
82 }
83
84 [dir="rtl"] .pull-one-fourth
85 {
86 left: 50%;
87 }
88
89 [dir="ltr"] .push-one-fourth
90 {
91 left: 50%;
92 }
93
94 [dir="ltr"] .push-one-fourth
95 {
96 right: 50%;
97 } 75 }
98 } 76 }
99 77
100 @media(min-width: $desktop-breakpoint) 78 @media(min-width: $desktop-breakpoint)
saroyanm 2016/11/08 16:19:39 I can't see a reason why we need to specify deskto
juliandoucette 2016/11/09 14:51:16 Acknowledged. - Since we are styling mobile first
juliandoucette 2016/11/09 19:47:18 Done.
101 { 79 {
102 .container
103 {
104 width: 960px;
105 }
106
107 .one-half 80 .one-half
108 { 81 {
109 width: 50%; 82 width: 50%;
110 } 83 }
111 84
112 [dir="ltr"] .pull-one-half 85 .one-third
113 { 86 {
114 right: 50%; 87 width: 33.333333%;
115 } 88 }
116 89
117 [dir="rtl"] .pull-one-half 90 .two-thirds
118 { 91 {
119 left: 50%; 92 width: 66.666667%;
120 }
121
122 [dir="ltr"] .push-one-half
123 {
124 left: 50%;
125 }
126
127 [dir="rtl"] .push-one-half
128 {
129 right: 50%;
130 } 93 }
131 94
132 .one-fourth 95 .one-fourth
133 { 96 {
134 width: 25%; 97 width: 25%;
135 } 98 }
136 99
137 [dir="ltr"] .pull-one-fourth
saroyanm 2016/11/08 16:19:40 A suggestion regarding pulling and pushing. I'm n
juliandoucette 2016/11/09 14:51:16 Acknowledged. - naming TBD - we'll cover 1/2, 1/3
juliandoucette 2016/11/09 19:47:18 Done.
138 {
139 right: 25%;
140 }
141
142 [dir="rtl"] .pull-one-fourth
143 {
144 left: 25%;
145 }
146
147 [dir="ltr"] .push-one-fourth
148 {
149 left: 25%;
150 }
151
152 [dir="ltr"] .push-one-fourth
153 {
154 right: 25%;
155 }
156
157 .one-third
158 {
159 width: 33.333333%;
160 }
161
162 [dir="ltr"] .pull-one-third
163 {
164 right: 33.333333%;
165 }
166
167 [dir="rtl"] .pull-one-third
168 {
169 left: 33.333333%;
170 }
171
172 [dir="ltr"] .push-one-third
173 {
174 left: 33.333333%;
175 }
176
177 [dir="rtl"] .push-one-third
178 {
179 right: 33.333333%;
180 }
181
182 .two-thirds
183 {
184 width: 66.666667%;
185 }
186
187 [dir="ltr"] .pull-one-third
188 {
189 right: 66.666667%;
190 }
191
192 [dir="rtl"] .pull-one-third
193 {
194 left: 66.666667%;
195 }
196
197 [dir="ltr"] .push-one-third
198 {
199 left: 66.666667%;
200 }
201
202 [dir="rtl"] .push-one-third
203 {
204 right: 66.666667%;
205 }
206
207 .three-fourths 100 .three-fourths
208 { 101 {
209 width: 75%; 102 width: 75%;
210 } 103 }
211
212 [dir="ltr"] .pull-three-fourths
213 {
214 right: 75%;
215 }
216
217 [dir="rtl"] .pull-three-fourths
218 {
219 left: 75%;
220 }
221
222 [dir="ltr"] .push-three-fourths
223 {
224 left: 75%;
225 }
226
227 [dir="rtl"] .push-three-fourths
228 {
229 right: 75%;
230 }
231
232 } 104 }
LEFTRIGHT

Powered by Google App Engine
This is Rietveld