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: Improved demo responsiveness Created Nov. 12, 2016, 2:38 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 /** Grid component */ 19 /*******************************************************************************
juliandoucette 2016/11/16 17:17:38 Note: We will test a margin-left + :first-child gr
20 * Grid component
21 ******************************************************************************/
20 22
21 /** 23 /**
22 * .row contains one or more .column(s) 24 * - .row contains one or more .column(s)
23 * .row clears .column(s) 25 * - .row clears .column(s)
saroyanm 2016/11/15 16:09:44 Detail: this belong to the selector below I guess.
juliandoucette 2016/11/16 17:17:38 Acknowledged.
24 * .row negates the left & right padding of it's first & last .column(s) 26 * - .row negates the left & right padding of it's left-most & right-most
25 * Preserving consistent padding between .column(s) 27 * .column(s) while preserving consistent padding between .column(s)
26 */ 28 */
27 .row 29 .row
28 { 30 {
29 margin: 0px (-$small-space); 31 margin: 0px (-$small-space);
30 } 32 }
31 33
32 .row:after 34 .row:after
33 { 35 {
34 display: block; 36 display: block;
35 clear: both; 37 clear: both;
36 content: ""; 38 content: "";
37 } 39 }
38 40
39 /** 41 /**
40 * .column is 100% width by default 42 * - .column is 100% width by default
41 * Modifier classes are applied to .column to change it's width 43 * - Modifier classes are applied to .column to change it's width
42 * Modifier classes behave differently on different device widths 44 * - Modifier classes behave differently on different device widths
43 */ 45 */
44 .column 46 .column
45 { 47 {
46 position: relative; 48 position: relative;
47 width: 100%; 49 width: 100%;
48 min-height: 1px; 50 min-height: 1px;
saroyanm 2016/11/15 16:09:44 Deatail: can't see a reason of overwriting the ini
juliandoucette 2016/11/16 17:17:38 Acknowledged. A column must have at least 1px hei
49 padding: 0px $small-space; 51 padding: 0px $small-space;
50 } 52 }
51 53
52 /* 54 /* - .column(s) within .row .reverse appear in reverse order
53 * .column(s) within .row .reverse appear in reverse order 55 * - .column(s) within [dir=rtl] appear in reverse order respectively
54 * .column(s) within [dir=rtl] appear in reverse order respectively
55 */ 56 */
56 57
57 /**
58 * .row .column(s) flow left-to-right
59 * RTL .reverse .row .column(s) flow left-to-right
60 */
61 .column, 58 .column,
62 [dir="rtl"] .reverse .column 59 [dir="rtl"] .reverse .column
63 { 60 {
64 float: left; 61 float: left;
65 } 62 }
66 63
67 /**
68 * RTL .row .column(s) flow right-to-left
69 * .reverse .row .column(s) flow right-to-left
70 */
71 .reverse .column, 64 .reverse .column,
72 [dir="rtl"] .column 65 [dir="rtl"] .column
73 { 66 {
74 float: right; 67 float: right;
75 } 68 }
76 69
77 @media(min-width: $tablet-breakpoint) 70 @media(min-width: $tablet-breakpoint)
78 { 71 {
79 /**
80 * Change .column to "one-fourth" width
81 * .one-fourth collapses into .one-half within $tablet-breakpoint
82 */
83 .one-fourth 72 .one-fourth
84 { 73 {
85 width: 50%; 74 width: 50%;
86 } 75 }
87 } 76 }
88 77
89 @media(min-width: $desktop-breakpoint) 78 @media(min-width: $desktop-breakpoint)
90 { 79 {
91 /**
92 * Change .column to "one-half" width
93 */
94 .one-half 80 .one-half
95 { 81 {
96 width: 50%; 82 width: 50%;
97 } 83 }
98 84
99 /**
100 * Change .column to "one-third" width
101 */
102 .one-third 85 .one-third
103 { 86 {
104 width: 33.333333%; 87 width: 33.333333%;
105 } 88 }
106 89
107 /**
108 * Change .column ot "two-thirds" width
109 */
110 .two-thirds 90 .two-thirds
111 { 91 {
112 width: 66.666667%; 92 width: 66.666667%;
113 } 93 }
114 94
115 /**
116 * Change .column to "one-fourth" width
117 */
118 .one-fourth 95 .one-fourth
119 { 96 {
120 width: 25%; 97 width: 25%;
121 } 98 }
122 99
123 /**
124 * Change .column to "three-fourths" width
125 */
126 .three-fourths 100 .three-fourths
127 { 101 {
128 width: 75%; 102 width: 75%;
129 } 103 }
130 } 104 }
LEFTRIGHT

Powered by Google App Engine
This is Rietveld