Wiki source code of Skin 10.x: Migrating to Grid

Last modified by Vincent Massol on 2024/02/26 17:57

Show last authors
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 )))

Get Connected