Wiki source code of Skin 10.x: Migrating to Grid
Last modified by Vincent Massol on 2024/02/26 17:57
Show last authors
author | version | line-number | content |
---|---|---|---|
1 | The purpose of this investigation is to evaluate the difficulties, advantages and implementability of switching from Bootstrap to a Grid defined skin. | ||
2 | |||
3 | {{toc start="2" /}} | ||
4 | |||
5 | == Comparison == | ||
6 | |||
7 | === Layout Definition === | ||
8 | |||
9 | This is an example of how we have / could have the current layout variations defined in Flamingo skin using multiple techniques: | ||
10 | |||
11 | (%class="row"%)((( | ||
12 | |||
13 | (%class="col-xs-12 col-md-8"%)((( | ||
14 | ==== Limitations ==== | ||
15 | |||
16 | 1. CSS Variables need to be inside a ##:root {}## or other selector declaration, compared to LESS variables that are top level | ||
17 | 1. {{error}}Bug{{/error}} Cannot use CSS variables inside our .LESS files. Gets a ##Less4jException: Could not compile less## error. | ||
18 | 1. {{error}}Limitation{{/error}}(((Cannot use ##fr## units in ##calc()##. In the demo I'm using ##px##, but we would need to calculated in ##%## for panels sizes, using the formula: | ||
19 | {{code}} | ||
20 | the width of each column = (width of viewport / number of columns) * 1% | ||
21 | {{/code}} | ||
22 | ))) | ||
23 | ))) | ||
24 | |||
25 | (%class="col-xs-12 col-md-4"%)((( | ||
26 | ==== Layout Variations ==== | ||
27 | |||
28 | [[image:attach:[email protected]]] | ||
29 | ))) | ||
30 | |||
31 | ))) | ||
32 | |||
33 | (%class="row"%)((( | ||
34 | |||
35 | (%class="col-xs-12 col-md-4"%)((( | ||
36 | ==== LESS + Bootstrap 3 mixins ==== | ||
37 | {{code lang="css"}} | ||
38 | @main-padding: @grid-gutter-width * 2; | ||
39 | |||
40 | #body { | ||
41 | // Both left and right panels are displayed | ||
42 | &.content { | ||
43 | // Left panels are small | ||
44 | &.panel-left-width-Small { | ||
45 | .main { | ||
46 | .make-md-column-push(1); | ||
47 | } | ||
48 | // Left panels are small and right panels are small | ||
49 | &.panel-right-width-Small { | ||
50 | .main { | ||
51 | .make-md-column(10, @main-padding); | ||
52 | } | ||
53 | #leftPanels { | ||
54 | .make-md-column-pull(10); | ||
55 | } | ||
56 | } | ||
57 | // Left panels are small and right panels are medium | ||
58 | &.panel-right-width-Medium { | ||
59 | .main { | ||
60 | .make-md-column(9, @main-padding); | ||
61 | } | ||
62 | #leftPanels { | ||
63 | .make-md-column-pull(9); | ||
64 | } | ||
65 | } | ||
66 | // Left panels are small and right panels are large | ||
67 | &.panel-right-width-Large { | ||
68 | .main { | ||
69 | .make-md-column(8, @main-padding); | ||
70 | } | ||
71 | #leftPanels { | ||
72 | .make-md-column-pull(8); | ||
73 | } | ||
74 | } | ||
75 | } | ||
76 | // Left panels are medium | ||
77 | &.panel-left-width-Medium { | ||
78 | .main { | ||
79 | .make-md-column-push(2); | ||
80 | } | ||
81 | // Left panels are medium and right panels are small | ||
82 | &.panel-right-width-Small { | ||
83 | .main { | ||
84 | .make-md-column(9, @main-padding); | ||
85 | } | ||
86 | #leftPanels { | ||
87 | .make-md-column-pull(9); | ||
88 | } | ||
89 | } | ||
90 | // Left panels are medium and right panels are medium | ||
91 | &.panel-right-width-Medium { | ||
92 | .main { | ||
93 | .make-md-column(8, @main-padding); | ||
94 | } | ||
95 | #leftPanels { | ||
96 | .make-md-column-pull(8); | ||
97 | } | ||
98 | } | ||
99 | // Left panels are medium and right panels are large | ||
100 | &.panel-right-width-Large { | ||
101 | .main { | ||
102 | .make-md-column(7, @main-padding); | ||
103 | } | ||
104 | #leftPanels { | ||
105 | .make-md-column-pull(7); | ||
106 | } | ||
107 | } | ||
108 | } | ||
109 | // // Left panels are large | ||
110 | &.panel-left-width-Large { | ||
111 | .main { | ||
112 | .make-md-column-push(3); | ||
113 | } | ||
114 | // Left panels are large and right panels are small | ||
115 | &.panel-right-width-Small { | ||
116 | .main { | ||
117 | .make-md-column(8, @main-padding); | ||
118 | } | ||
119 | #leftPanels { | ||
120 | .make-md-column-pull(8); | ||
121 | } | ||
122 | } | ||
123 | // Left panels are large and right panels are medium | ||
124 | &.panel-right-width-Medium { | ||
125 | .main { | ||
126 | .make-md-column(7, @main-padding); | ||
127 | } | ||
128 | #leftPanels { | ||
129 | .make-md-column-pull(7); | ||
130 | } | ||
131 | } | ||
132 | // Left panels are large and right panels are large | ||
133 | &.panel-right-width-Large { | ||
134 | .main { | ||
135 | .make-md-column(6, @main-padding); | ||
136 | } | ||
137 | #leftPanels { | ||
138 | .make-md-column-pull(6); | ||
139 | } | ||
140 | } | ||
141 | } | ||
142 | } | ||
143 | |||
144 | // Only right panels | ||
145 | &.hideleft { | ||
146 | &.panel-right-width-Small { | ||
147 | .main { | ||
148 | .make-md-column(11, @main-padding); | ||
149 | } | ||
150 | } | ||
151 | &.panel-right-width-Medium { | ||
152 | .main { | ||
153 | .make-md-column(10, @main-padding); | ||
154 | } | ||
155 | } | ||
156 | &.panel-right-width-Large { | ||
157 | .main { | ||
158 | .make-md-column(9, @main-padding); | ||
159 | } | ||
160 | } | ||
161 | } | ||
162 | |||
163 | // Only left panels | ||
164 | &.hideright { | ||
165 | &.panel-left-width-Small { | ||
166 | .main { | ||
167 | .make-md-column(11, @main-padding); | ||
168 | .make-md-column-push(1); | ||
169 | } | ||
170 | #leftPanels { | ||
171 | .make-md-column-pull(11); | ||
172 | } | ||
173 | } | ||
174 | &.panel-left-width-Medium { | ||
175 | .main { | ||
176 | .make-md-column(10, @main-padding); | ||
177 | .make-md-column-push(2); | ||
178 | } | ||
179 | #leftPanels { | ||
180 | .make-md-column-pull(10); | ||
181 | } | ||
182 | } | ||
183 | &.panel-left-width-Large { | ||
184 | .main { | ||
185 | .make-md-column(9, @main-padding); | ||
186 | .make-md-column-push(3); | ||
187 | } | ||
188 | #leftPanels { | ||
189 | .make-md-column-pull(9); | ||
190 | } | ||
191 | } | ||
192 | } | ||
193 | |||
194 | // No Panels | ||
195 | &.hidelefthideright { | ||
196 | .main { | ||
197 | .make-md-column(12, @main-padding); | ||
198 | } | ||
199 | } | ||
200 | |||
201 | &.panel-left-width-Small { | ||
202 | #leftPanels { | ||
203 | .make-md-column(1); | ||
204 | } | ||
205 | } | ||
206 | &.panel-left-width-Medium { | ||
207 | #leftPanels { | ||
208 | .make-md-column(2); | ||
209 | } | ||
210 | } | ||
211 | &.panel-left-width-Large { | ||
212 | #leftPanels { | ||
213 | .make-md-column(3); | ||
214 | } | ||
215 | } | ||
216 | &.panel-right-width-Small { | ||
217 | #rightPanels, #editPanels { | ||
218 | .make-md-column(1); | ||
219 | } | ||
220 | } | ||
221 | &.panel-right-width-Medium { | ||
222 | #rightPanels, #editPanels { | ||
223 | .make-md-column(2); | ||
224 | } | ||
225 | } | ||
226 | &.panel-right-width-Large { | ||
227 | #rightPanels, #editPanels { | ||
228 | .make-md-column(3); | ||
229 | } | ||
230 | } | ||
231 | } | ||
232 | |||
233 | #leftPanels, #rightPanels { | ||
234 | .make-xs-column(12); | ||
235 | } | ||
236 | {{/code}} | ||
237 | ))) | ||
238 | |||
239 | (%class="col-xs-12 col-md-4"%)((( | ||
240 | ==== LESS + Grid ==== | ||
241 | {{code lang="css"}} | ||
242 | @supports (display: grid) { | ||
243 | #contentcolumn { | ||
244 | grid-area: content; | ||
245 | } | ||
246 | #leftPanels { | ||
247 | grid-area: leftpanels; | ||
248 | } | ||
249 | #rightPanels { | ||
250 | grid-area: rightpanels; | ||
251 | } | ||
252 | #contentcontainer { | ||
253 | display: grid; | ||
254 | grid: "leftpanels content rightpanels" / auto auto auto; | ||
255 | } | ||
256 | body { | ||
257 | &.panel-left-width-Small.panel-right-width-Small { | ||
258 | #contentcontainer { | ||
259 | grid-template-columns: 1fr 10fr 1fr; | ||
260 | } | ||
261 | } | ||
262 | &.panel-left-width-Small.panel-right-width-Medium { | ||
263 | #contentcontainer { | ||
264 | grid-template-columns: 1fr 9fr 2fr; | ||
265 | } | ||
266 | } | ||
267 | &.panel-left-width-Small.panel-right-width-Large { | ||
268 | #contentcontainer { | ||
269 | grid-template-columns: 1fr 8fr 3fr; | ||
270 | } | ||
271 | } | ||
272 | &.panel-left-width-Medium.panel-right-width-Small { | ||
273 | #contentcontainer { | ||
274 | grid-template-columns: 2fr 9fr 1fr; | ||
275 | } | ||
276 | } | ||
277 | &.panel-left-width-Medium.panel-right-width-Medium { | ||
278 | #contentcontainer { | ||
279 | grid-template-columns: 2fr 8fr 2fr; | ||
280 | } | ||
281 | } | ||
282 | &.panel-left-width-Medium.panel-right-width-Large { | ||
283 | #contentcontainer { | ||
284 | grid-template-columns: 2fr 7fr 3fr; | ||
285 | } | ||
286 | } | ||
287 | &.panel-left-width-Large.panel-right-width-Small { | ||
288 | #contentcontainer { | ||
289 | grid-template-columns: 3fr 8fr 1fr; | ||
290 | } | ||
291 | } | ||
292 | &.panel-left-width-Large.panel-right-width-Medium { | ||
293 | #contentcontainer { | ||
294 | grid-template-columns: 3fr 7fr 2fr; | ||
295 | } | ||
296 | } | ||
297 | &.panel-left-width-Large.panel-right-width-Large { | ||
298 | #contentcontainer { | ||
299 | grid-template-columns: 3fr 6fr 3fr; | ||
300 | } | ||
301 | } | ||
302 | &.hideright { | ||
303 | &.panel-left-width-Small { | ||
304 | #contentcontainer { | ||
305 | grid-template-columns: 1fr 11fr 0; | ||
306 | } | ||
307 | } | ||
308 | &.panel-left-width-Medium { | ||
309 | #contentcontainer { | ||
310 | grid-template-columns: 2fr 10fr 0; | ||
311 | } | ||
312 | } | ||
313 | &.panel-left-width-Large { | ||
314 | #contentcontainer { | ||
315 | grid-template-columns: 3fr 9fr 0; | ||
316 | } | ||
317 | } | ||
318 | } | ||
319 | &.hideleft { | ||
320 | &.panel-right-width-Small { | ||
321 | #contentcontainer { | ||
322 | grid-template-columns: 0 11fr 1fr; | ||
323 | } | ||
324 | } | ||
325 | &.panel-right-width-Medium { | ||
326 | #contentcontainer { | ||
327 | grid-template-columns: 0 10fr 2fr; | ||
328 | } | ||
329 | } | ||
330 | &.panel-right-width-Large { | ||
331 | #contentcontainer { | ||
332 | grid-template-columns: 0 9fr 3fr; | ||
333 | } | ||
334 | } | ||
335 | } | ||
336 | } | ||
337 | #body { | ||
338 | &.hidelefthideright { | ||
339 | #contentcontainer { | ||
340 | grid-template-columns: 0 12fr 0; | ||
341 | } | ||
342 | } | ||
343 | } | ||
344 | } | ||
345 | |||
346 | {{/code}} | ||
347 | ))) | ||
348 | |||
349 | (%class="col-xs-12 col-md-4"%)((( | ||
350 | ==== CSS + Grid + CSS Variables ==== | ||
351 | {{code lang="css"}} | ||
352 | @supports (display: grid) { | ||
353 | #contentcolumn { | ||
354 | grid-area: content; | ||
355 | } | ||
356 | #leftPanels { | ||
357 | grid-area: leftpanels; | ||
358 | } | ||
359 | #rightPanels { | ||
360 | grid-area: rightpanels; | ||
361 | } | ||
362 | #contentcontainer { | ||
363 | display: grid; | ||
364 | grid: "leftpanels content rightpanels" / auto auto auto; | ||
365 | } | ||
366 | :root { | ||
367 | --grid-small-column: 1; | ||
368 | --grid-medium-column: 2; | ||
369 | --grid-large-column: 3; | ||
370 | /* The calculations work good with px, but not with fr. We could adapt to have a % solution */ | ||
371 | --grid-unit: 1fr; | ||
372 | } | ||
373 | #body.panel-left-width-Small #contentcontainer { | ||
374 | --grid-leftPanels: calc(var(--grid-small-column) * var(--grid-unit)); | ||
375 | } | ||
376 | #body.panel-left-width-Medium #contentcontainer { | ||
377 | --grid-leftPanels: calc(var(--grid-medium-column) * var(--grid-unit)); | ||
378 | } | ||
379 | #body.panel-left-width-Large #contentcontainer { | ||
380 | --grid-leftPanels: calc(var(--grid-large-column) * var(--grid-unit)); | ||
381 | } | ||
382 | #body.panel-right-width-Small #contentcontainer { | ||
383 | --grid-rightPanels: calc(var(--grid-small-column) * var(--grid-unit)); | ||
384 | } | ||
385 | #body.panel-right-width-Medium #contentcontainer { | ||
386 | --grid-rightPanels: calc(var(--grid-medium-column) * var(--grid-unit)); | ||
387 | } | ||
388 | #body.panel-right-width-Large #contentcontainer { | ||
389 | --grid-rightPanels: calc(var(--grid-large-column) * var(--grid-unit)); | ||
390 | } | ||
391 | #body.hideleft #contentcontainer { | ||
392 | --grid-leftPanels: 0; | ||
393 | } | ||
394 | #body.hideright #contentcontainer { | ||
395 | --grid-rightPanels: 0; | ||
396 | } | ||
397 | #body.hidelefthideright #contentcontainer { | ||
398 | --grid-leftPanels: 0; | ||
399 | --grid-rightPanels: 0; | ||
400 | } | ||
401 | #contentcontainer { | ||
402 | --grid-content: auto; | ||
403 | grid-template-columns: var(--grid-leftPanels) var(--grid-content) var(--grid-rightPanels); | ||
404 | } | ||
405 | } | ||
406 | {{/code}} | ||
407 | ))) | ||
408 | |||
409 | ))) |