Skip to Content

Wiki source code of Skin 10.x: Layout Variations

Last modified by Vincent Massol on 2024/11/19 16:15
Hide last authors
Ecaterina Moraru (Valica) 10.2 1 {{velocity output="false"}}
2 $xwiki.ssx.use('Proposal.Skin10x.LayoutVariations')
Ecaterina Moraru (Valica) 3.22 3 {{/velocity}}
4
Ecaterina Moraru (Valica) 1.2 5 {{toc start="2"/}}
Ecaterina Moraru (Valica) 1.3 6
Ecaterina Moraru (Valica) 14.14 7 == Current Layouts ==
Ecaterina Moraru (Valica) 1.5 8
Ecaterina Moraru (Valica) 1.14 9 Our current layout is a full width one, with a central area (##.main##) and 2 panels areas (###leftPanels##, ###rightPanels##).
Ecaterina Moraru (Valica) 1.8 10
Ecaterina Moraru (Valica) 3.5 11 (% class="row" %)
12 (((
13 (% class="col-xs-12 col-sm-6" %)
14 (((
Ecaterina Moraru (Valica) 1.12 15 {{code language="html"}}
16 <body id="body">
17 <div id="xwikimaincontainer">
18 <div id="xwikimaincontainerinner">
19 <div id="menuview"></div>
20 <div id="headerglobal"></div>
21 <div class="content" id="contentcontainer">
22 <div id="contentcontainerinner">
23 <div class="leftsidecolumns">
24 <div id="contentcolumn">
25 <div class="main">
26 <div id="mainContentArea">
27 <ol id="hierarchy"></ol>
28 <div class="xcontent"></div>
29 </div>
30 <div id="xdocFooter"></div>
31 <div id="xwikidata"></div>
32 </div>
33 </div>
Ecaterina Moraru (Valica) 2.4 34 <div id="leftPanels"></div>
Ecaterina Moraru (Valica) 1.12 35 </div>
36 <div id="rightPanels">
37 </div>
38 </div>
39 </div>
40 <div id="footerglobal"></div>
41 </div>
42 </div>
43 </body>
Ecaterina Moraru (Valica) 1.6 44 {{/code}}
Ecaterina Moraru (Valica) 1.5 45 )))
46
Ecaterina Moraru (Valica) 3.5 47 (% class="col-xs-12 col-sm-6" %)
48 (((
Ecaterina Moraru (Valica) 1.14 49 {{gallery}}
50 image:currentLayout.png
51 {{/gallery}}
Ecaterina Moraru (Valica) 2.2 52
Ecaterina Moraru (Valica) 2.3 53
Ecaterina Moraru (Valica) 2.2 54 The issue with the current structure is that it's very limiting in terms of layout variations it offers. Also it contains a lot of legacy containers that limit the layout placement and also bloats the structure.
55
Ecaterina Moraru (Valica) 14.16 56 When we integrated Bootstrap 3, one important thing we did is that we used LESS, its extend() function and the .make-*-column() mixins when we generated the layout, instead of using the ##.container##, ##.row## and ##.col-*-*## classes (which some got deprecated in the Bootstrap 4 version).
Ecaterina Moraru (Valica) 2.2 57
Ecaterina Moraru (Valica) 14.20 58 Still, in order to fully benefit of the new Flexbox or Grid capabilities we would need to simplify the structure and the divitis nesting, plus changing our core Float layout technique.
Ecaterina Moraru (Valica) 1.5 59 )))
60 )))
Ecaterina Moraru (Valica) 1.8 61
62 == Possible Layouts ==
63
Ecaterina Moraru (Valica) 3.22 64 (% class="row" %)
65 (((
66 (% class="col-xs-12 col-sm-6" %)
67 (((
Ecaterina Moraru (Valica) 2.5 68 If we were to replicate the default layout for 10.x it would be:
Ecaterina Moraru (Valica) 2.6 69
Ecaterina Moraru (Valica) 3.9 70 {{html clean="false"}}
Ecaterina Moraru (Valica) 6.3 71 <div id="wrapper0">
Ecaterina Moraru (Valica) 3.7 72 <div class="wrapper">
Ecaterina Moraru (Valica) 2.5 73 <div class="header">Header</div>
74 <div class="content">Content</div>
Ecaterina Moraru (Valica) 3.22 75 <div class="panels">Panels</div>
76 <div class="panels">Panels</div>
Ecaterina Moraru (Valica) 2.5 77 <div class="footer">Footer</div>
78 </div>
Ecaterina Moraru (Valica) 3.9 79 </div>
Ecaterina Moraru (Valica) 2.5 80 {{/html}}
Ecaterina Moraru (Valica) 10.4 81
Ecaterina Moraru (Valica) 10.5 82
Ecaterina Moraru (Valica) 10.4 83 Also the structure could be simplified to something like:
Ecaterina Moraru (Valica) 10.5 84
Ecaterina Moraru (Valica) 10.4 85 {{code language="html"}}
Ecaterina Moraru (Valica) 10.7 86 <body>
Ecaterina Moraru (Valica) 10.46 87 <div class="header">H</div>
88 <div class="content">C</div>
Ecaterina Moraru (Valica) 10.4 89 <div class="panels">A</div>
90 <div class="panels">B</div>
Ecaterina Moraru (Valica) 10.46 91 <div class="footer">F</div>
Ecaterina Moraru (Valica) 10.7 92 </body>
Ecaterina Moraru (Valica) 10.4 93 {{/code}}
Ecaterina Moraru (Valica) 3.22 94 )))
Ecaterina Moraru (Valica) 2.5 95
Ecaterina Moraru (Valica) 3.22 96 (% class="col-xs-12 col-sm-6" %)
97 (((
Ecaterina Moraru (Valica) 3.24 98 (% class="row" %)
99 (((
100 (% class="col-xs-3" %)
101 (((
Ecaterina Moraru (Valica) 3.29 102 No side column
Ecaterina Moraru (Valica) 30.2 103 {{html clean="false"}}<div id="wrapper0-HLHR">
Ecaterina Moraru (Valica) 3.24 104 <div class="wrapper">
Ecaterina Moraru (Valica) 14.12 105 <div class="header">H</div>
106 <div class="content">C</div>
107 <div class="panels">A</div>
108 <div class="panels">B</div>
109 <div class="footer">F</div>
Ecaterina Moraru (Valica) 3.24 110 </div>
Ecaterina Moraru (Valica) 30.2 111 </div>{{/html}}
Ecaterina Moraru (Valica) 3.22 112 )))
Ecaterina Moraru (Valica) 3.24 113
114 (% class="col-xs-3" %)
115 (((
Ecaterina Moraru (Valica) 3.29 116 Left column
Ecaterina Moraru (Valica) 30.2 117 {{html clean="false"}}<div id="wrapper0-HR">
Ecaterina Moraru (Valica) 3.25 118 <div class="wrapper">
Ecaterina Moraru (Valica) 14.11 119 <div class="header">H</div>
120 <div class="content">C</div>
121 <div class="panels">A</div>
122 <div class="panels">B</div>
123 <div class="footer">F</div>
Ecaterina Moraru (Valica) 3.25 124 </div>
Ecaterina Moraru (Valica) 30.2 125 </div>{{/html}}
Ecaterina Moraru (Valica) 3.22 126 )))
127
Ecaterina Moraru (Valica) 3.24 128 (% class="col-xs-3" %)
129 (((
Ecaterina Moraru (Valica) 3.29 130 Right column
Ecaterina Moraru (Valica) 30.2 131 {{html clean="false"}}<div id="wrapper0-HL">
Ecaterina Moraru (Valica) 3.25 132 <div class="wrapper">
Ecaterina Moraru (Valica) 14.11 133 <div class="header">H</div>
134 <div class="content">C</div>
135 <div class="panels">A</div>
136 <div class="panels">B</div>
137 <div class="footer">F</div>
Ecaterina Moraru (Valica) 3.25 138 </div>
Ecaterina Moraru (Valica) 30.2 139 </div>{{/html}}
Ecaterina Moraru (Valica) 3.24 140 )))
141
142 (% class="col-xs-3" %)
143 (((
Ecaterina Moraru (Valica) 3.29 144 Both columns
Ecaterina Moraru (Valica) 30.2 145 {{html clean="false"}}<div id="wrapper0">
Ecaterina Moraru (Valica) 3.25 146 <div class="wrapper">
Ecaterina Moraru (Valica) 14.11 147 <div class="header">H</div>
148 <div class="content">C</div>
149 <div class="panels">A</div>
150 <div class="panels">B</div>
151 <div class="footer">F</div>
Ecaterina Moraru (Valica) 3.25 152 </div>
Ecaterina Moraru (Valica) 30.2 153 </div>{{/html}}
Ecaterina Moraru (Valica) 3.24 154 )))
155 )))
156
Ecaterina Moraru (Valica) 3.33 157
Ecaterina Moraru (Valica) 16.3 158 The above are all the layout variations available on XWiki 10.x with the Flamingo Skin. On top of the layout variations, each panel area can have 3 size: Small, Medium, Large.
Ecaterina Moraru (Valica) 3.24 159 )))
160 )))
161
Ecaterina Moraru (Valica) 10.49 162 === Full Width vs. Centered Layouts ===
Ecaterina Moraru (Valica) 1.11 163
Ecaterina Moraru (Valica) 14.22 164 One of the major requests for public website is the ability to easily change (without the need of a custom skin) the layout from full width to centered. On xwiki.org for example we have some homepages centered, while the content pages are full width.
Ecaterina Moraru (Valica) 1.11 165
Ecaterina Moraru (Valica) 8.2 166 (% class="row" %)
167 (((
Ecaterina Moraru (Valica) 10.3 168 (% class="col-xs-3 col-sm-2" %)
Ecaterina Moraru (Valica) 8.2 169 (((
Ecaterina Moraru (Valica) 8.5 170 Full Width
Ecaterina Moraru (Valica) 30.2 171 {{html clean="false"}}<div id="wrapper0">
Ecaterina Moraru (Valica) 8.2 172 <div class="wrapper">
Ecaterina Moraru (Valica) 10.44 173 <div class="header">H</div>
174 <div class="content">C</div>
175 <div class="panels">A</div>
176 <div class="panels">B</div>
177 <div class="footer">F</div>
Ecaterina Moraru (Valica) 8.2 178 </div>
Ecaterina Moraru (Valica) 30.2 179 </div>{{/html}}
Ecaterina Moraru (Valica) 8.2 180 )))
181
Ecaterina Moraru (Valica) 10.3 182 (% class="col-xs-3 col-sm-2" %)
Ecaterina Moraru (Valica) 8.2 183 (((
Ecaterina Moraru (Valica) 8.5 184 Centered
Ecaterina Moraru (Valica) 30.2 185 {{html clean="false"}}<div id="wrapper1-C">
Ecaterina Moraru (Valica) 8.2 186 <div class="wrapper">
Ecaterina Moraru (Valica) 10.47 187 <div class="header">H</div>
188 <div class="content">C</div>
189 <div class="panels">A</div>
190 <div class="panels">B</div>
191 <div class="footer">F</div>
Ecaterina Moraru (Valica) 8.2 192 </div>
Ecaterina Moraru (Valica) 30.2 193 </div>{{/html}}
Ecaterina Moraru (Valica) 8.2 194 )))
195 )))
196
Ecaterina Moraru (Valica) 1.11 197 === Column Layouts ===
198
Ecaterina Moraru (Valica) 14.24 199 Having a Grid system it allows multiple variation of column placement. Being in just 1 dimension, the following could be also implemented / fallbacked on Flexbox, which is the current layout technique used in Bootstrap 4.
200 Some of the following examples go beyond the current XWiki layout capabilities, so they would provide extra layout extensibility.
Ecaterina Moraru (Valica) 10.20 201
Ecaterina Moraru (Valica) 8.2 202 (% class="row" %)
203 (((
Ecaterina Moraru (Valica) 10.3 204 (% class="col-xs-3 col-sm-2" %)
Ecaterina Moraru (Valica) 8.2 205 (((
Ecaterina Moraru (Valica) 30.3 206 [[2-1>>attach:Layout2-1.png]]
Ecaterina Moraru (Valica) 30.2 207 {{html clean="false"}}<div id="wrapper2-1">
Ecaterina Moraru (Valica) 10.8 208 <div class="wrapper">
209 <div class="header"></div>
Ecaterina Moraru (Valica) 10.13 210 <div class="content">C</div>
211 <div class="panels">A</div>
212 <div class="panels">B</div>
Ecaterina Moraru (Valica) 10.8 213 <div class="footer"></div>
214 </div>
Ecaterina Moraru (Valica) 30.2 215 </div>{{/html}}
Ecaterina Moraru (Valica) 8.2 216 )))
217
Ecaterina Moraru (Valica) 10.3 218 (% class="col-xs-3 col-sm-2" %)
Ecaterina Moraru (Valica) 8.2 219 (((
Ecaterina Moraru (Valica) 30.4 220 [[2-2>>attach:Layout2-2.png]]
Ecaterina Moraru (Valica) 30.2 221 {{html clean="false"}}<div id="wrapper2-2">
Ecaterina Moraru (Valica) 10.11 222 <div class="wrapper">
223 <div class="header"></div>
Ecaterina Moraru (Valica) 10.13 224 <div class="content">C</div>
225 <div class="panels">A</div>
226 <div class="panels">B</div>
Ecaterina Moraru (Valica) 10.11 227 <div class="footer"></div>
228 </div>
Ecaterina Moraru (Valica) 30.2 229 </div>{{/html}}
Ecaterina Moraru (Valica) 8.2 230 )))
231
Ecaterina Moraru (Valica) 10.3 232 (% class="col-xs-3 col-sm-2" %)
Ecaterina Moraru (Valica) 8.2 233 (((
Ecaterina Moraru (Valica) 16.2 234 2-3
Ecaterina Moraru (Valica) 30.2 235 {{html clean="false"}}<div id="wrapper2-3">
Ecaterina Moraru (Valica) 10.14 236 <div class="wrapper">
237 <div class="header"></div>
238 <div class="content">C</div>
239 <div class="panels">A</div>
240 <div class="panels">B</div>
241 <div class="footer"></div>
242 </div>
Ecaterina Moraru (Valica) 30.2 243 </div>{{/html}}
Ecaterina Moraru (Valica) 8.2 244 )))
245
Ecaterina Moraru (Valica) 10.16 246 (% class="col-xs-3 col-sm-2" %)
247 (((
Ecaterina Moraru (Valica) 16.2 248 2-4
Ecaterina Moraru (Valica) 30.2 249 {{html clean="false"}}<div id="wrapper2-4">
Ecaterina Moraru (Valica) 10.16 250 <div class="wrapper">
251 <div class="header"></div>
252 <div class="content">C</div>
253 <div class="panels">A</div>
254 <div class="panels">B</div>
255 <div class="footer"></div>
256 </div>
Ecaterina Moraru (Valica) 30.2 257 </div>{{/html}}
Ecaterina Moraru (Valica) 8.2 258 )))
259
Ecaterina Moraru (Valica) 10.16 260 (% class="col-xs-3 col-sm-2" %)
261 (((
Ecaterina Moraru (Valica) 16.2 262 2-5
Ecaterina Moraru (Valica) 30.2 263 {{html clean="false"}}<div id="wrapper2-5">
Ecaterina Moraru (Valica) 10.16 264 <div class="wrapper">
265 <div class="header"></div>
266 <div class="content">C</div>
267 <div class="panels">A</div>
268 <div class="panels">B</div>
269 <div class="footer"></div>
270 </div>
Ecaterina Moraru (Valica) 30.2 271 </div>{{/html}}
Ecaterina Moraru (Valica) 10.16 272 )))
273
274 (% class="col-xs-3 col-sm-2" %)
275 (((
Ecaterina Moraru (Valica) 16.2 276 2-6
Ecaterina Moraru (Valica) 30.2 277 {{html clean="false"}}<div id="wrapper2-6">
Ecaterina Moraru (Valica) 10.16 278 <div class="wrapper">
279 <div class="header"></div>
280 <div class="content">C</div>
281 <div class="panels">A</div>
282 <div class="panels">B</div>
283 <div class="footer"></div>
284 </div>
Ecaterina Moraru (Valica) 30.2 285 </div>{{/html}}
Ecaterina Moraru (Valica) 10.16 286 )))
Ecaterina Moraru (Valica) 10.26 287 )))
Ecaterina Moraru (Valica) 10.16 288
Ecaterina Moraru (Valica) 10.27 289
Ecaterina Moraru (Valica) 10.26 290 (% class="row" %)
291 (((
Ecaterina Moraru (Valica) 10.16 292 (% class="col-xs-3 col-sm-2" %)
293 (((
Ecaterina Moraru (Valica) 30.4 294 [[2-7>>attach:Layout2-7.png]]
Ecaterina Moraru (Valica) 30.2 295 {{html clean="false"}}<div id="wrapper2-7">
Ecaterina Moraru (Valica) 10.16 296 <div class="wrapper">
297 <div class="header"></div>
298 <div class="content">C</div>
299 <div class="panels">A</div>
300 <div class="panels">B</div>
301 <div class="footer"></div>
302 </div>
Ecaterina Moraru (Valica) 30.2 303 </div>{{/html}}
Ecaterina Moraru (Valica) 10.16 304 )))
305
Ecaterina Moraru (Valica) 10.21 306 (% class="col-xs-3 col-sm-2" %)
307 (((
Ecaterina Moraru (Valica) 16.2 308 2-7-1
Ecaterina Moraru (Valica) 30.2 309 {{html clean="false"}}<div id="wrapper2-7">
Ecaterina Moraru (Valica) 10.21 310 <div class="wrapper">
311 <div class="header"></div>
312 <div class="content">C</div>
313 <div class="panels">A</div>
314 <div class="panels">B</div>
Ecaterina Moraru (Valica) 10.24 315 <div class="panels">D</div>
316 <div class="panels">E</div>
Ecaterina Moraru (Valica) 10.21 317 <div class="footer"></div>
318 </div>
Ecaterina Moraru (Valica) 30.2 319 </div>{{/html}}
Ecaterina Moraru (Valica) 10.16 320 )))
321
Ecaterina Moraru (Valica) 10.21 322 (% class="col-xs-3 col-sm-2" %)
323 (((
Ecaterina Moraru (Valica) 16.2 324 2-8
Ecaterina Moraru (Valica) 30.2 325 {{html clean="false"}}<div id="wrapper2-8">
Ecaterina Moraru (Valica) 10.21 326 <div class="wrapper">
327 <div class="header"></div>
328 <div class="content">C</div>
329 <div class="panels">A</div>
330 <div class="panels">B</div>
331 <div class="footer"></div>
332 </div>
Ecaterina Moraru (Valica) 30.2 333 </div>{{/html}}
Ecaterina Moraru (Valica) 10.21 334 )))
335
336 (% class="col-xs-3 col-sm-2" %)
337 (((
Ecaterina Moraru (Valica) 30.4 338 [[2-9>>attach:Layout2-9.png]]
Ecaterina Moraru (Valica) 30.2 339 {{html clean="false"}}<div id="wrapper2-9">
Ecaterina Moraru (Valica) 10.21 340 <div class="wrapper">
341 <div class="header"></div>
342 <div class="content">C</div>
343 <div class="panels">A</div>
344 <div class="panels">B</div>
345 <div class="footer"></div>
346 </div>
Ecaterina Moraru (Valica) 30.2 347 </div>{{/html}}
Ecaterina Moraru (Valica) 10.21 348 )))
349
Ecaterina Moraru (Valica) 10.30 350 (% class="col-xs-3 col-sm-2" %)
351 (((
Ecaterina Moraru (Valica) 30.4 352 [[2-10>>attach:Layout2-10.png]]
Ecaterina Moraru (Valica) 30.2 353 {{html clean="false"}}<div id="wrapper2-10">
Ecaterina Moraru (Valica) 10.30 354 <div class="wrapper">
355 <div class="header"></div>
356 <div class="content">C</div>
357 <div class="panels">A</div>
358 <div class="panels">B</div>
359 <div class="footer"></div>
360 </div>
Ecaterina Moraru (Valica) 30.2 361 </div>{{/html}}
Ecaterina Moraru (Valica) 10.21 362 )))
363
Ecaterina Moraru (Valica) 10.33 364 (% class="col-xs-3 col-sm-2" %)
365 (((
Ecaterina Moraru (Valica) 30.4 366 [[2-11>>attach:Layout2-11.png]]
Ecaterina Moraru (Valica) 30.2 367 {{html clean="false"}}<div id="wrapper2-11">
Ecaterina Moraru (Valica) 10.33 368 <div class="wrapper">
369 <div class="header"></div>
370 <div class="content">C</div>
371 <div class="panels">A</div>
372 <div class="panels">B</div>
373 <div class="footer"></div>
374 </div>
Ecaterina Moraru (Valica) 30.2 375 </div>{{/html}}
Ecaterina Moraru (Valica) 10.30 376 )))
Ecaterina Moraru (Valica) 16.5 377 )))
378
Ecaterina Moraru (Valica) 16.6 379
Ecaterina Moraru (Valica) 16.5 380 (% class="row" %)
381 (((
Ecaterina Moraru (Valica) 16.4 382 (% class="col-xs-3 col-sm-2" %)
383 (((
Ecaterina Moraru (Valica) 30.4 384 [[2-12>>attach:Layout2-12.png]]
Ecaterina Moraru (Valica) 30.2 385 {{html clean="false"}}<div id="wrapper2-12">
Ecaterina Moraru (Valica) 16.4 386 <div class="wrapper">
387 <div class="header"></div>
388 <div class="content">C</div>
389 <div class="panels">A</div>
390 <div class="panels">B</div>
391 <div class="footer"></div>
392 </div>
Ecaterina Moraru (Valica) 30.2 393 </div>{{/html}}
Ecaterina Moraru (Valica) 10.33 394 )))
Ecaterina Moraru (Valica) 16.4 395 )))
396
Ecaterina Moraru (Valica) 1.11 397 === Header Footer Layouts ===
398
Ecaterina Moraru (Valica) 14.9 399 The classic layouts usually include a header and a footer, so these are some possible layout variations:
400
Ecaterina Moraru (Valica) 10.36 401 (% class="row" %)
402 (((
403 (% class="col-xs-3 col-sm-2" %)
404 (((
Ecaterina Moraru (Valica) 16.2 405 3-1
Ecaterina Moraru (Valica) 30.2 406 {{html clean="false"}}<div id="wrapper3-1">
Ecaterina Moraru (Valica) 10.39 407 <div class="wrapper">
Ecaterina Moraru (Valica) 10.40 408 <div class="header">H</div>
Ecaterina Moraru (Valica) 10.39 409 <div class="content">C</div>
410 <div class="panels">A</div>
411 <div class="panels">B</div>
Ecaterina Moraru (Valica) 10.40 412 <div class="footer">F</div>
Ecaterina Moraru (Valica) 10.39 413 </div>
Ecaterina Moraru (Valica) 30.2 414 </div>{{/html}}
Ecaterina Moraru (Valica) 10.40 415 )))
Ecaterina Moraru (Valica) 10.39 416
Ecaterina Moraru (Valica) 10.40 417 (% class="col-xs-3 col-sm-2" %)
418 (((
Ecaterina Moraru (Valica) 16.2 419 3-2
Ecaterina Moraru (Valica) 30.2 420 {{html clean="false"}}<div id="wrapper3-2">
Ecaterina Moraru (Valica) 10.36 421 <div class="wrapper">
Ecaterina Moraru (Valica) 10.38 422 <div class="header">H</div>
Ecaterina Moraru (Valica) 10.36 423 <div class="content">C</div>
424 <div class="panels">A</div>
425 <div class="panels">B</div>
Ecaterina Moraru (Valica) 10.38 426 <div class="footer">F</div>
Ecaterina Moraru (Valica) 10.36 427 </div>
Ecaterina Moraru (Valica) 30.2 428 </div>{{/html}}
Ecaterina Moraru (Valica) 10.36 429 )))
430
431 (% class="col-xs-3 col-sm-2" %)
432 (((
Ecaterina Moraru (Valica) 16.2 433 3-3
Ecaterina Moraru (Valica) 30.2 434 {{html clean="false"}}<div id="wrapper3-3">
Ecaterina Moraru (Valica) 10.36 435 <div class="wrapper">
Ecaterina Moraru (Valica) 13.7 436 <div class="header">H</div>
Ecaterina Moraru (Valica) 10.36 437 <div class="content">C</div>
438 <div class="panels">A</div>
439 <div class="panels">B</div>
Ecaterina Moraru (Valica) 13.7 440 <div class="footer">F</div>
Ecaterina Moraru (Valica) 10.36 441 </div>
Ecaterina Moraru (Valica) 30.2 442 </div>{{/html}}
Ecaterina Moraru (Valica) 10.36 443 )))
444
445 (% class="col-xs-3 col-sm-2" %)
446 (((
Ecaterina Moraru (Valica) 16.2 447 3-4
Ecaterina Moraru (Valica) 30.2 448 {{html clean="false"}}<div id="wrapper3-4">
Ecaterina Moraru (Valica) 10.36 449 <div class="wrapper">
Ecaterina Moraru (Valica) 13.7 450 <div class="header">H</div>
Ecaterina Moraru (Valica) 10.36 451 <div class="content">C</div>
452 <div class="panels">A</div>
453 <div class="panels">B</div>
Ecaterina Moraru (Valica) 13.7 454 <div class="footer">F</div>
Ecaterina Moraru (Valica) 10.36 455 </div>
Ecaterina Moraru (Valica) 30.2 456 </div>{{/html}}
Ecaterina Moraru (Valica) 10.36 457 )))
458
459 (% class="col-xs-3 col-sm-2" %)
460 (((
Ecaterina Moraru (Valica) 16.2 461 3-5
Ecaterina Moraru (Valica) 30.2 462 {{html clean="false"}}<div id="wrapper3-5">
Ecaterina Moraru (Valica) 10.36 463 <div class="wrapper">
Ecaterina Moraru (Valica) 13.7 464 <div class="header">H</div>
Ecaterina Moraru (Valica) 10.36 465 <div class="content">C</div>
466 <div class="panels">A</div>
467 <div class="panels">B</div>
Ecaterina Moraru (Valica) 13.7 468 <div class="footer">F</div>
Ecaterina Moraru (Valica) 10.36 469 </div>
Ecaterina Moraru (Valica) 30.2 470 </div>{{/html}}
Ecaterina Moraru (Valica) 10.36 471 )))
472
473 (% class="col-xs-3 col-sm-2" %)
474 (((
Ecaterina Moraru (Valica) 16.2 475 3-6
Ecaterina Moraru (Valica) 30.2 476 {{html clean="false"}}<div id="wrapper3-6">
Ecaterina Moraru (Valica) 10.36 477 <div class="wrapper">
Ecaterina Moraru (Valica) 13.7 478 <div class="header">H</div>
Ecaterina Moraru (Valica) 10.36 479 <div class="content">C</div>
480 <div class="panels">A</div>
481 <div class="panels">B</div>
Ecaterina Moraru (Valica) 13.7 482 <div class="footer">F</div>
Ecaterina Moraru (Valica) 10.36 483 </div>
Ecaterina Moraru (Valica) 30.2 484 </div>{{/html}}
Ecaterina Moraru (Valica) 10.36 485 )))
486 )))
487
Ecaterina Moraru (Valica) 14.4 488 === Advanced Grid Layouts ===
Ecaterina Moraru (Valica) 1.11 489
Ecaterina Moraru (Valica) 14.10 490 Grid allow us to create all sorts of layouts, from asymmetric to overlapping ones. The possibilities are endless. Here are some examples the future skin could transform into (or all) if the new Grid layout technique would be integrated:
Ecaterina Moraru (Valica) 14.4 491
Ecaterina Moraru (Valica) 13.11 492 (% class="row" %)
493 (((
494 (% class="col-xs-3 col-sm-2" %)
495 (((
Ecaterina Moraru (Valica) 16.2 496 4-1
Ecaterina Moraru (Valica) 30.2 497 {{html clean="false"}}<div id="wrapper4-1">
Ecaterina Moraru (Valica) 13.11 498 <div class="wrapper">
499 <div class="header">H</div>
500 <div class="content">C</div>
501 <div class="panels">A</div>
502 <div class="panels">B</div>
Ecaterina Moraru (Valica) 13.12 503 <div class="panels">D</div>
504 <div class="panels">E</div>
505 <div class="panels">G</div>
Ecaterina Moraru (Valica) 13.11 506 <div class="footer">F</div>
507 </div>
Ecaterina Moraru (Valica) 30.2 508 </div>{{/html}}
Ecaterina Moraru (Valica) 13.11 509 )))
510
511 (% class="col-xs-3 col-sm-2" %)
512 (((
Ecaterina Moraru (Valica) 16.2 513 4-2
Ecaterina Moraru (Valica) 30.2 514 {{html clean="false"}}<div id="wrapper4-2">
Ecaterina Moraru (Valica) 13.11 515 <div class="wrapper">
516 <div class="header">H</div>
517 <div class="content">C</div>
518 <div class="panels">A</div>
519 <div class="panels">B</div>
Ecaterina Moraru (Valica) 13.15 520 <div class="panels">D</div>
521 <div class="panels">E</div>
Ecaterina Moraru (Valica) 13.11 522 <div class="footer">F</div>
523 </div>
Ecaterina Moraru (Valica) 30.2 524 </div>{{/html}}
Ecaterina Moraru (Valica) 13.11 525 )))
526
527 (% class="col-xs-3 col-sm-2" %)
528 (((
Ecaterina Moraru (Valica) 16.2 529 4-3
Ecaterina Moraru (Valica) 30.2 530 {{html clean="false"}}<div id="wrapper4-3">
Ecaterina Moraru (Valica) 13.11 531 <div class="wrapper">
532 <div class="header">H</div>
533 <div class="content">C</div>
534 <div class="panels">A</div>
535 <div class="panels">B</div>
Ecaterina Moraru (Valica) 14.2 536 <div class="panels">D</div>
537 <div class="panels">E</div>
Ecaterina Moraru (Valica) 13.11 538 <div class="footer">F</div>
539 </div>
Ecaterina Moraru (Valica) 30.2 540 </div>{{/html}}
Ecaterina Moraru (Valica) 13.11 541 )))
542
543 (% class="col-xs-3 col-sm-2" %)
544 (((
Ecaterina Moraru (Valica) 16.2 545 4-4
Ecaterina Moraru (Valica) 30.2 546 {{html clean="false"}}<div id="wrapper4-4">
Ecaterina Moraru (Valica) 13.11 547 <div class="wrapper">
548 <div class="header">H</div>
549 <div class="content">C</div>
550 <div class="panels">A</div>
551 <div class="panels">B</div>
552 <div class="footer">F</div>
553 </div>
Ecaterina Moraru (Valica) 30.2 554 </div>{{/html}}
Ecaterina Moraru (Valica) 13.11 555 )))
556
557 (% class="col-xs-3 col-sm-2" %)
558 (((
Ecaterina Moraru (Valica) 16.2 559 4-5
Ecaterina Moraru (Valica) 30.2 560 {{html clean="false"}}<div id="wrapper4-5">
Ecaterina Moraru (Valica) 13.11 561 <div class="wrapper">
562 <div class="header">H</div>
563 <div class="content">C</div>
564 <div class="panels">A</div>
565 <div class="panels">B</div>
Ecaterina Moraru (Valica) 14.41 566 <div class="panels">D</div>
567 <div class="panels">E</div>
Ecaterina Moraru (Valica) 13.11 568 <div class="footer">F</div>
569 </div>
Ecaterina Moraru (Valica) 30.2 570 </div>{{/html}}
Ecaterina Moraru (Valica) 13.11 571 )))
572
573 (% class="col-xs-3 col-sm-2" %)
574 (((
Ecaterina Moraru (Valica) 16.2 575 4-6
Ecaterina Moraru (Valica) 30.2 576 {{html clean="false"}}<div id="wrapper4-6">
Ecaterina Moraru (Valica) 13.11 577 <div class="wrapper">
578 <div class="header">H</div>
579 <div class="content">C</div>
580 <div class="panels">A</div>
581 <div class="panels">B</div>
Ecaterina Moraru (Valica) 14.34 582 <div class="panels">D</div>
Ecaterina Moraru (Valica) 13.11 583 <div class="footer">F</div>
584 </div>
Ecaterina Moraru (Valica) 30.2 585 </div>{{/html}}
Ecaterina Moraru (Valica) 13.11 586 )))
587 )))
Ecaterina Moraru (Valica) 14.35 588
Ecaterina Moraru (Valica) 14.42 589
Ecaterina Moraru (Valica) 14.35 590 (% class="row" %)
591 (((
592 (% class="col-xs-3 col-sm-2" %)
593 (((
Ecaterina Moraru (Valica) 30.4 594 [[4-7>>attach:Layout4-7.png]]
Ecaterina Moraru (Valica) 30.2 595 {{html clean="false"}}<div id="wrapper4-7">
Ecaterina Moraru (Valica) 14.35 596 <div class="wrapper">
Ecaterina Moraru (Valica) 14.37 597 <div class="header">H</div>
Ecaterina Moraru (Valica) 14.35 598 <div class="content">C</div>
599 <div class="panels">A</div>
600 <div class="panels">B</div>
601 <div class="panels">D</div>
602 <div class="panels">E</div>
Ecaterina Moraru (Valica) 14.44 603 <div class="panels">G</div>
Ecaterina Moraru (Valica) 14.37 604 <div class="footer">F</div>
Ecaterina Moraru (Valica) 14.35 605 </div>
Ecaterina Moraru (Valica) 30.2 606 </div>{{/html}}
Ecaterina Moraru (Valica) 14.35 607 )))
608
609 (% class="col-xs-3 col-sm-2" %)
610 (((
Ecaterina Moraru (Valica) 30.4 611 [[4-8>>attach:Layout4-8.png]]
Ecaterina Moraru (Valica) 30.2 612 {{html clean="false"}}<div id="wrapper4-8">
Ecaterina Moraru (Valica) 14.35 613 <div class="wrapper">
Ecaterina Moraru (Valica) 14.37 614 <div class="header">H</div>
Ecaterina Moraru (Valica) 14.35 615 <div class="content">C</div>
616 <div class="panels">A</div>
617 <div class="panels">B</div>
Ecaterina Moraru (Valica) 14.37 618 <div class="panels">D</div>
619 <div class="panels">E</div>
620 <div class="footer">F</div>
Ecaterina Moraru (Valica) 14.35 621 </div>
Ecaterina Moraru (Valica) 30.2 622 </div>{{/html}}
Ecaterina Moraru (Valica) 14.35 623 )))
624
625 (% class="col-xs-3 col-sm-2" %)
626 (((
Ecaterina Moraru (Valica) 30.4 627 [[4-9>>attach:Layout4-9.png]]
Ecaterina Moraru (Valica) 30.2 628 {{html clean="false"}}<div id="wrapper4-9">
Ecaterina Moraru (Valica) 14.35 629 <div class="wrapper">
Ecaterina Moraru (Valica) 14.37 630 <div class="header">H</div>
Ecaterina Moraru (Valica) 14.35 631 <div class="content">C</div>
632 <div class="panels">A</div>
633 <div class="panels">B</div>
Ecaterina Moraru (Valica) 14.37 634 <div class="footer">F</div>
Ecaterina Moraru (Valica) 14.35 635 </div>
Ecaterina Moraru (Valica) 30.2 636 </div>{{/html}}
Ecaterina Moraru (Valica) 14.35 637 )))
638
639 (% class="col-xs-3 col-sm-2" %)
640 (((
Ecaterina Moraru (Valica) 30.4 641 [[4-10>>attach:Layout4-10.png]]
Ecaterina Moraru (Valica) 30.2 642 {{html clean="false"}}<div id="wrapper4-10">
Ecaterina Moraru (Valica) 14.35 643 <div class="wrapper">
Ecaterina Moraru (Valica) 14.37 644 <div class="header">H</div>
Ecaterina Moraru (Valica) 14.35 645 <div class="content">C</div>
646 <div class="panels">A</div>
647 <div class="panels">B</div>
Ecaterina Moraru (Valica) 14.37 648 <div class="panels">D</div>
649 <div class="panels">E</div>
Ecaterina Moraru (Valica) 14.61 650 <div class="panels">G</div>
651 <div class="panels">I</div>
Ecaterina Moraru (Valica) 14.37 652 <div class="footer">F</div>
Ecaterina Moraru (Valica) 14.35 653 </div>
Ecaterina Moraru (Valica) 30.2 654 </div>{{/html}}
Ecaterina Moraru (Valica) 14.35 655 )))
656
657 (% class="col-xs-3 col-sm-2" %)
658 (((
Ecaterina Moraru (Valica) 30.5 659 [[4-11>>attach:Layou4-11.png]]
Ecaterina Moraru (Valica) 30.2 660 {{html clean="false"}}<div id="wrapper4-11">
Ecaterina Moraru (Valica) 14.35 661 <div class="wrapper">
Ecaterina Moraru (Valica) 14.37 662 <div class="header">H</div>
Ecaterina Moraru (Valica) 14.35 663 <div class="content">C</div>
664 <div class="panels">A</div>
665 <div class="panels">B</div>
Ecaterina Moraru (Valica) 14.37 666 <div class="panels">D</div>
667 <div class="panels">E</div>
668 <div class="footer">F</div>
Ecaterina Moraru (Valica) 14.35 669 </div>
Ecaterina Moraru (Valica) 30.2 670 </div>{{/html}}
Ecaterina Moraru (Valica) 14.35 671 )))
672
Ecaterina Moraru (Valica) 16.13 673 (% class="col-xs-3 col-sm-2" %)
674 (((
Ecaterina Moraru (Valica) 30.4 675 [[4-12>>attach:Layout4-12.png]]
Ecaterina Moraru (Valica) 30.2 676 {{html clean="false"}}<div id="wrapper4-12">
Ecaterina Moraru (Valica) 16.13 677 <div class="wrapper">
678 <div class="header">H</div>
679 <div class="content">C</div>
680 <div class="panels">A</div>
681 <div class="panels">B</div>
682 </div>
Ecaterina Moraru (Valica) 30.2 683 </div>{{/html}}
Ecaterina Moraru (Valica) 14.47 684 )))
Ecaterina Moraru (Valica) 16.13 685 )))
Ecaterina Moraru (Valica) 14.48 686
Ecaterina Moraru (Valica) 16.27 687
688
Ecaterina Moraru (Valica) 16.23 689 (% class="row" %)
690 (((
691 (% class="col-xs-3 col-sm-2" %)
692 (((
Ecaterina Moraru (Valica) 30.2 693 [[4-13>>attach:Layout4-13.png]]
694 {{html clean="false"}}<div id="wrapper4-13">
Ecaterina Moraru (Valica) 16.23 695 <div class="wrapper">
696 <div class="header">H</div>
697 <div class="content">C</div>
698 <div class="panels">A</div>
699 <div class="footer">F</div>
700 </div>
Ecaterina Moraru (Valica) 30.2 701 </div>{{/html}}
Ecaterina Moraru (Valica) 16.23 702 )))
703 )))
704
705
Ecaterina Moraru (Valica) 15.3 706 This flexibility is also great for different view ports, allowing optimised layouts for mobile, tablet view that prioritise the content no matter where they are placed in the structure. Also we could allow customising the layout at the Page level, so the user could choose something different for Homepage, Dashboard, Blog pages, etc.
Ecaterina Moraru (Valica) 14.49 707
708 Also not depending on Bootstrap's 3 grid system means we are not limited to a 12 columns grid system.
Ecaterina Moraru (Valica) 14.53 709
710 The possibilities are endless. On top of the grid we could also add angled containers and having the ability to create overlapping layouts, any layout variation can be created.
Ecaterina Moraru (Valica) 30.8 711
712 == Preview examples ==
713
714 {{gallery}}
Ecaterina Moraru (Valica) 30.9 715 image:Layout4-12.png
716 image:Layout4-13.png
717 image:Layout4-7.png
718 image:Layout2-2.png
Ecaterina Moraru (Valica) 30.10 719 image:Layout4-9.png
Ecaterina Moraru (Valica) 30.11 720 image:Layout2-10.png
Ecaterina Moraru (Valica) 30.8 721 image:Layou4-11.png
722 {{/gallery}}

About

About

Support

Platform

User Guide

Admin Guide

Developer Guide

Projects

XWiki

Extensions

Other

Contribute

Status

Practices

Under the Hood

Get Involved

Get Connected