Skip to content
This repository was archived by the owner on Jul 18, 2024. It is now read-only.

Commit e638be2

Browse files
seejamescodeseejamescode
committed
feat(scss): height class support for css grid
1 parent 626d09a commit e638be2

28 files changed

+1418
-606
lines changed

‎examples/bootstrap/css-gridish/README.md

Lines changed: 7 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,9 @@ The Chrome extension uses the same shortcuts. To set the extension up:
1919

2020
## Legacy Support
2121

22-
If you have no need to support browsers like IE 11 and Edge <15, please use `css/bootstrap-grid.min.css` and ignore the legacy classes below for efficiency’s sake.
22+
If you have no need to support browsers like IE 11 and Edge <15, please use `css/bootstrap-grid.min.css`. This will omit the CSS Flexbox fallback from your code.
2323

24-
If you are supporting browsers that lack [CSS Grid Layout support](https://developer.mozilla.org/en-US/docs/Web/CSS/grid#Browser_compatibility), you can use `css/bootstrap-grid-legacy.min.css` and the legacy classes below. With the legacy file and classes, the browsers that do not support the final CSS Grid Legacy spec will fallback to a flexbox alternative. The flexbox alternative supports embedded subgrids that still reflect the overall grid system’s column structure.
24+
If you are supporting browsers that lack [CSS Grid Layout support](https://developer.mozilla.org/en-US/docs/Web/CSS/grid#Browser_compatibility), you can use `css/bootstrap-grid-legacy.min.css` and the legacy classes below. With the legacy file, the browsers that do not support the final CSS Grid Legacy spec will fallback to a flexbox alternative. The flexbox alternative supports embedded subgrids that still reflect the overall grid system’s column structure.
2525

2626
### Transitioning from Legacy
2727

@@ -77,24 +77,12 @@ If you are new to CSS Grid, please try [learning the basics](https://www.google.
7777
| `.bootstrap-grid__col--sm--[1-12]` | Set the width out of 12 columns for an item in the grid starting at the sm breakpoint |
7878
| `.bootstrap-grid__col--[sm]--0` | Do not display item at a specific breakpoint, but display at the next breakpoint with columns specified |
7979
| `.bootstrap-grid__col--[sm]--0--only` | Do not display item only at specific breakpoint |
80-
81-
By default, the grid code uses fluid columns and fixed rows. You can switch both aspects with `.bootstrap-grid--fixed-columns` and `.bootstrap-grid--fluid-rows`.
82-
83-
If you follow the instructions above for custom breakpoints, all of these legacy classes will generate with a version for each custom breakpoint too. For example, adding the custom breakpoint of `whateversize` will create `.bootstrap-grid__col--whateversize--1`. Since that custom breakpoint is right after the previous breakpoint, it will have the same amount of columns and min-height.
84-
85-
### Legacy
86-
87-
The following classes are only necessary if supporting browsers that do not have [CSS Grid Layout support](https://developer.mozilla.org/en-US/docs/Web/CSS/grid#Browser_compatibility). The previous classes are also necessary for modern browsers.
88-
89-
Please remember that the classes below have no affect on browsers that have [CSS Grid Layout support](https://developer.mozilla.org/en-US/docs/Web/CSS/grid#Browser_compatibility).
90-
91-
| Class Name | Purpose |
92-
| ----------------------------------------- | ------------------------------------------------------------------------------------------ |
93-
| `.bootstrap-grid__height-fixed--[sm]--[1-30]` | Set the min-height based on an interval of 15px for an item starting at the breakpoint specified |
94-
| `.bootstrap-grid__height-fluid--sm--[1-12]` | Set the min-height on the width of 1-12 columns for an item starting at the sm breakpoint |
80+
| `.bootstrap-grid__height--[sm]--[1-30]` | Set the min-height based on an interval of 15px for an item starting at the breakpoint specified |
9581
| `.bootstrap-grid__height--[sm]--0` | Reset the min-height for an item starting at the specified breakpoint |
9682

97-
The legacy `.bootstrap-grid__height-fixed--[sm]--[1-30]` class follows the numbering system as described in our height variables](#Fixed Height).
83+
By default, the grid code uses fluid columns and fixed rows. You can switch both aspects with `.bootstrap-grid--fixed-columns` and `.bootstrap-grid--fluid-rows`. When switching to fluid rows, the rows will scale across breakpoints just like `col` classes and only supports quantities up to the amount of columns in that breakpoint.
84+
85+
If you follow the instructions above for custom breakpoints, all of the `col` and `height` classes will generate with a version for each custom breakpoint too. For example, adding the custom breakpoint of `whateversize` will create `.bootstrap-grid__col--whateversize--1`. Since that custom breakpoint is right after the previous breakpoint, it will have the same amount of columns and min-height.
9886

9987
## Variables
10088

@@ -139,7 +127,7 @@ it is difficult for you to write semantic HTML with CSS Grid Layout. We are
139127
able to take advantage of vw units and the calc function so you can embed
140128
`.bootstrap-grid` elements inside of each other and still respect the overall grid design.
141129

142-
### Why are there no row classes for the legacy implementation?
130+
### Why are there no grouping row classes needed?
143131

144132
Thanks to flexbox’s wrapping functionality, nodes that specify rows are not necessary. Only create a node for a row if it has semantic or accessibility significance. You can keep embedding `.bootstrap-grid` as necessary to accomplish this.
145133

‎examples/bootstrap/css-gridish/bootstrap-grid.sketch

0 Bytes
Binary file not shown.

‎examples/bootstrap/css-gridish/css/bootstrap-grid-legacy.css

Lines changed: 136 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -54,94 +54,123 @@ body {
5454
height: 100%; } }
5555

5656
.bootstrap-grid__height--sm--0 {
57-
height: 0; }
57+
min-height: 0; }
5858

59-
.bootstrap-grid__height-fixed--sm--1 {
60-
height: 1rem; }
59+
.bootstrap-grid__height--sm--1 {
60+
grid-row: span 1;
61+
min-height: 1rem; }
6162

62-
.bootstrap-grid__height-fixed--sm--2 {
63-
height: 2rem; }
63+
.bootstrap-grid__height--sm--2 {
64+
grid-row: span 2;
65+
min-height: 2rem; }
6466

65-
.bootstrap-grid__height-fixed--sm--3 {
66-
height: 3rem; }
67+
.bootstrap-grid__height--sm--3 {
68+
grid-row: span 3;
69+
min-height: 3rem; }
6770

68-
.bootstrap-grid__height-fixed--sm--4 {
69-
height: 4rem; }
71+
.bootstrap-grid__height--sm--4 {
72+
grid-row: span 4;
73+
min-height: 4rem; }
7074

71-
.bootstrap-grid__height-fixed--sm--5 {
72-
height: 5rem; }
75+
.bootstrap-grid__height--sm--5 {
76+
grid-row: span 5;
77+
min-height: 5rem; }
7378

74-
.bootstrap-grid__height-fixed--sm--6 {
75-
height: 6rem; }
79+
.bootstrap-grid__height--sm--6 {
80+
grid-row: span 6;
81+
min-height: 6rem; }
7682

77-
.bootstrap-grid__height-fixed--sm--7 {
78-
height: 7rem; }
83+
.bootstrap-grid__height--sm--7 {
84+
grid-row: span 7;
85+
min-height: 7rem; }
7986

80-
.bootstrap-grid__height-fixed--sm--8 {
81-
height: 8rem; }
87+
.bootstrap-grid__height--sm--8 {
88+
grid-row: span 8;
89+
min-height: 8rem; }
8290

83-
.bootstrap-grid__height-fixed--sm--9 {
84-
height: 9rem; }
91+
.bootstrap-grid__height--sm--9 {
92+
grid-row: span 9;
93+
min-height: 9rem; }
8594

86-
.bootstrap-grid__height-fixed--sm--10 {
87-
height: 10rem; }
95+
.bootstrap-grid__height--sm--10 {
96+
grid-row: span 10;
97+
min-height: 10rem; }
8898

89-
.bootstrap-grid__height-fixed--sm--11 {
90-
height: 11rem; }
99+
.bootstrap-grid__height--sm--11 {
100+
grid-row: span 11;
101+
min-height: 11rem; }
91102

92-
.bootstrap-grid__height-fixed--sm--12 {
93-
height: 12rem; }
103+
.bootstrap-grid__height--sm--12 {
104+
grid-row: span 12;
105+
min-height: 12rem; }
94106

95-
.bootstrap-grid__height-fixed--sm--13 {
96-
height: 13rem; }
107+
.bootstrap-grid__height--sm--13 {
108+
grid-row: span 13;
109+
min-height: 13rem; }
97110

98-
.bootstrap-grid__height-fixed--sm--14 {
99-
height: 14rem; }
111+
.bootstrap-grid__height--sm--14 {
112+
grid-row: span 14;
113+
min-height: 14rem; }
100114

101-
.bootstrap-grid__height-fixed--sm--15 {
102-
height: 15rem; }
115+
.bootstrap-grid__height--sm--15 {
116+
grid-row: span 15;
117+
min-height: 15rem; }
103118

104-
.bootstrap-grid__height-fixed--sm--16 {
105-
height: 16rem; }
119+
.bootstrap-grid__height--sm--16 {
120+
grid-row: span 16;
121+
min-height: 16rem; }
106122

107-
.bootstrap-grid__height-fixed--sm--17 {
108-
height: 17rem; }
123+
.bootstrap-grid__height--sm--17 {
124+
grid-row: span 17;
125+
min-height: 17rem; }
109126

110-
.bootstrap-grid__height-fixed--sm--18 {
111-
height: 18rem; }
127+
.bootstrap-grid__height--sm--18 {
128+
grid-row: span 18;
129+
min-height: 18rem; }
112130

113-
.bootstrap-grid__height-fixed--sm--19 {
114-
height: 19rem; }
131+
.bootstrap-grid__height--sm--19 {
132+
grid-row: span 19;
133+
min-height: 19rem; }
115134

116-
.bootstrap-grid__height-fixed--sm--20 {
117-
height: 20rem; }
135+
.bootstrap-grid__height--sm--20 {
136+
grid-row: span 20;
137+
min-height: 20rem; }
118138

119-
.bootstrap-grid__height-fixed--sm--21 {
120-
height: 21rem; }
139+
.bootstrap-grid__height--sm--21 {
140+
grid-row: span 21;
141+
min-height: 21rem; }
121142

122-
.bootstrap-grid__height-fixed--sm--22 {
123-
height: 22rem; }
143+
.bootstrap-grid__height--sm--22 {
144+
grid-row: span 22;
145+
min-height: 22rem; }
124146

125-
.bootstrap-grid__height-fixed--sm--23 {
126-
height: 23rem; }
147+
.bootstrap-grid__height--sm--23 {
148+
grid-row: span 23;
149+
min-height: 23rem; }
127150

128-
.bootstrap-grid__height-fixed--sm--24 {
129-
height: 24rem; }
151+
.bootstrap-grid__height--sm--24 {
152+
grid-row: span 24;
153+
min-height: 24rem; }
130154

131-
.bootstrap-grid__height-fixed--sm--25 {
132-
height: 25rem; }
155+
.bootstrap-grid__height--sm--25 {
156+
grid-row: span 25;
157+
min-height: 25rem; }
133158

134-
.bootstrap-grid__height-fixed--sm--26 {
135-
height: 26rem; }
159+
.bootstrap-grid__height--sm--26 {
160+
grid-row: span 26;
161+
min-height: 26rem; }
136162

137-
.bootstrap-grid__height-fixed--sm--27 {
138-
height: 27rem; }
163+
.bootstrap-grid__height--sm--27 {
164+
grid-row: span 27;
165+
min-height: 27rem; }
139166

140-
.bootstrap-grid__height-fixed--sm--28 {
141-
height: 28rem; }
167+
.bootstrap-grid__height--sm--28 {
168+
grid-row: span 28;
169+
min-height: 28rem; }
142170

143-
.bootstrap-grid__height-fixed--sm--29 {
144-
height: 29rem; }
171+
.bootstrap-grid__height--sm--29 {
172+
grid-row: span 29;
173+
min-height: 29rem; }
145174

146175
[class*="bootstrap-grid__col--sm--"] {
147176
display: block; }
@@ -156,8 +185,10 @@ body {
156185
width: 8.33333vw;
157186
grid-column: span 1; }
158187

159-
.bootstrap-grid__height-fluid--sm--1 {
160-
height: 8.33333vw;
188+
.bootstrap-grid--fluid-rows
189+
> .bootstrap-grid__height--sm--1 {
190+
grid-row: span 1;
191+
min-height: 8.33333vw;
161192
max-height: 8.33333rem; }
162193

163194
.bootstrap-grid__col--sm--2 {
@@ -166,8 +197,10 @@ body {
166197
width: 16.66667vw;
167198
grid-column: span 2; }
168199

169-
.bootstrap-grid__height-fluid--sm--2 {
170-
height: 16.66667vw;
200+
.bootstrap-grid--fluid-rows
201+
> .bootstrap-grid__height--sm--2 {
202+
grid-row: span 2;
203+
min-height: 16.66667vw;
171204
max-height: 16.66667rem; }
172205

173206
.bootstrap-grid__col--sm--3 {
@@ -176,8 +209,10 @@ body {
176209
width: 25vw;
177210
grid-column: span 3; }
178211

179-
.bootstrap-grid__height-fluid--sm--3 {
180-
height: 25vw;
212+
.bootstrap-grid--fluid-rows
213+
> .bootstrap-grid__height--sm--3 {
214+
grid-row: span 3;
215+
min-height: 25vw;
181216
max-height: 25rem; }
182217

183218
.bootstrap-grid__col--sm--4 {
@@ -186,8 +221,10 @@ body {
186221
width: 33.33333vw;
187222
grid-column: span 4; }
188223

189-
.bootstrap-grid__height-fluid--sm--4 {
190-
height: 33.33333vw;
224+
.bootstrap-grid--fluid-rows
225+
> .bootstrap-grid__height--sm--4 {
226+
grid-row: span 4;
227+
min-height: 33.33333vw;
191228
max-height: 33.33333rem; }
192229

193230
.bootstrap-grid__col--sm--5 {
@@ -196,8 +233,10 @@ body {
196233
width: 41.66667vw;
197234
grid-column: span 5; }
198235

199-
.bootstrap-grid__height-fluid--sm--5 {
200-
height: 41.66667vw;
236+
.bootstrap-grid--fluid-rows
237+
> .bootstrap-grid__height--sm--5 {
238+
grid-row: span 5;
239+
min-height: 41.66667vw;
201240
max-height: 41.66667rem; }
202241

203242
.bootstrap-grid__col--sm--6 {
@@ -206,8 +245,10 @@ body {
206245
width: 50vw;
207246
grid-column: span 6; }
208247

209-
.bootstrap-grid__height-fluid--sm--6 {
210-
height: 50vw;
248+
.bootstrap-grid--fluid-rows
249+
> .bootstrap-grid__height--sm--6 {
250+
grid-row: span 6;
251+
min-height: 50vw;
211252
max-height: 50rem; }
212253

213254
.bootstrap-grid__col--sm--7 {
@@ -216,8 +257,10 @@ body {
216257
width: 58.33333vw;
217258
grid-column: span 7; }
218259

219-
.bootstrap-grid__height-fluid--sm--7 {
220-
height: 58.33333vw;
260+
.bootstrap-grid--fluid-rows
261+
> .bootstrap-grid__height--sm--7 {
262+
grid-row: span 7;
263+
min-height: 58.33333vw;
221264
max-height: 58.33333rem; }
222265

223266
.bootstrap-grid__col--sm--8 {
@@ -226,8 +269,10 @@ body {
226269
width: 66.66667vw;
227270
grid-column: span 8; }
228271

229-
.bootstrap-grid__height-fluid--sm--8 {
230-
height: 66.66667vw;
272+
.bootstrap-grid--fluid-rows
273+
> .bootstrap-grid__height--sm--8 {
274+
grid-row: span 8;
275+
min-height: 66.66667vw;
231276
max-height: 66.66667rem; }
232277

233278
.bootstrap-grid__col--sm--9 {
@@ -236,8 +281,10 @@ body {
236281
width: 75vw;
237282
grid-column: span 9; }
238283

239-
.bootstrap-grid__height-fluid--sm--9 {
240-
height: 75vw;
284+
.bootstrap-grid--fluid-rows
285+
> .bootstrap-grid__height--sm--9 {
286+
grid-row: span 9;
287+
min-height: 75vw;
241288
max-height: 75rem; }
242289

243290
.bootstrap-grid__col--sm--10 {
@@ -246,8 +293,10 @@ body {
246293
width: 83.33333vw;
247294
grid-column: span 10; }
248295

249-
.bootstrap-grid__height-fluid--sm--10 {
250-
height: 83.33333vw;
296+
.bootstrap-grid--fluid-rows
297+
> .bootstrap-grid__height--sm--10 {
298+
grid-row: span 10;
299+
min-height: 83.33333vw;
251300
max-height: 83.33333rem; }
252301

253302
.bootstrap-grid__col--sm--11 {
@@ -256,8 +305,10 @@ body {
256305
width: 91.66667vw;
257306
grid-column: span 11; }
258307

259-
.bootstrap-grid__height-fluid--sm--11 {
260-
height: 91.66667vw;
308+
.bootstrap-grid--fluid-rows
309+
> .bootstrap-grid__height--sm--11 {
310+
grid-row: span 11;
311+
min-height: 91.66667vw;
261312
max-height: 91.66667rem; }
262313

263314
.bootstrap-grid__col--sm--12 {
@@ -266,8 +317,10 @@ body {
266317
width: 100vw;
267318
grid-column: span 12; }
268319

269-
.bootstrap-grid__height-fluid--sm--12 {
270-
height: 100vw;
320+
.bootstrap-grid--fluid-rows
321+
> .bootstrap-grid__height--sm--12 {
322+
grid-row: span 12;
323+
min-height: 100vw;
271324
max-height: 100rem; }
272325

273326
.bootstrap-padding {

0 commit comments

Comments
 (0)