Skin 10.x: Layout Variations (Proposal.Skin10x.LayoutVariations)

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

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).

57

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.

)))

)))

== Possible Layouts ==

(% class="row" %)

(((

(% class="col-xs-12 col-sm-6" %)

67

(((

68

If we were to replicate the default layout for 10.x it would be:

<div class="header">Header</div>

74

<div class="content">Content</div>

75

<div class="panels">Panels</div>

76

<div class="panels">Panels</div>

77

<div class="footer">Footer</div>

</div>

</div>

Also the structure could be simplified to something like:

<body>

</body>

)))

(% class="col-xs-12 col-sm-6" %)

(((

(% class="row" %)

(((

(% class="col-xs-3" %)

101

(((

102

No side column

103

{{html clean="false"}}<div id="wrapper0-HLHR">

</div>

</div>{{/html}}

)))

(% class="col-xs-3" %)

115

(((

116

Left column

117

{{html clean="false"}}<div id="wrapper0-HR">

</div>

</div>{{/html}}

)))

(% class="col-xs-3" %)

129

(((

130

Right column

131

{{html clean="false"}}<div id="wrapper0-HL">

</div>

</div>{{/html}}

)))

(% class="col-xs-3" %)

143

(((

144

Both columns

145

{{html clean="false"}}<div id="wrapper0">

</div>

</div>{{/html}}

)))

)))

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.

)))

)))

=== Full Width vs. Centered Layouts ===

163

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.

(% class="row" %)

(((

(% class="col-xs-3 col-sm-2" %)

169

(((

170

Full Width

171

{{html clean="false"}}<div id="wrapper0">

</div>

</div>{{/html}}

)))

(% class="col-xs-3 col-sm-2" %)

183

(((

184

Centered

185

{{html clean="false"}}<div id="wrapper1-C">

</div>

</div>{{/html}}

)))

)))

=== Column Layouts ===

198

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.

(% class="row" %)

(((

(% class="col-xs-3 col-sm-2" %)

205

(((

206

[[2-1>>attach:Layout2-1.png]]

207

{{html clean="false"}}<div id="wrapper2-1">

</div>

</div>{{/html}}

)))

(% class="col-xs-3 col-sm-2" %)

219

(((

220

[[2-2>>attach:Layout2-2.png]]

221

{{html clean="false"}}<div id="wrapper2-2">

</div>

</div>{{/html}}

)))

(% class="col-xs-3 col-sm-2" %)

233

(((

234

2-3

235

{{html clean="false"}}<div id="wrapper2-3">

</div>

</div>{{/html}}

)))

(% class="col-xs-3 col-sm-2" %)

247

(((

248

2-4

249

{{html clean="false"}}<div id="wrapper2-4">

</div>

</div>{{/html}}

)))

(% class="col-xs-3 col-sm-2" %)

261

(((

262

2-5

263

{{html clean="false"}}<div id="wrapper2-5">

</div>

</div>{{/html}}

)))

(% class="col-xs-3 col-sm-2" %)

275

(((

276

2-6

277

{{html clean="false"}}<div id="wrapper2-6">

</div>

</div>{{/html}}

)))

)))

(% class="row" %)

(((

(% class="col-xs-3 col-sm-2" %)

293

(((

294

[[2-7>>attach:Layout2-7.png]]

295

{{html clean="false"}}<div id="wrapper2-7">

</div>

</div>{{/html}}

)))

(% class="col-xs-3 col-sm-2" %)

307

(((

308

2-7-1

309

{{html clean="false"}}<div id="wrapper2-7">

</div>

</div>{{/html}}

)))

(% class="col-xs-3 col-sm-2" %)

323

(((

324

2-8

325

{{html clean="false"}}<div id="wrapper2-8">

</div>

</div>{{/html}}

)))

(% class="col-xs-3 col-sm-2" %)

337

(((

338

[[2-9>>attach:Layout2-9.png]]

339

{{html clean="false"}}<div id="wrapper2-9">

</div>

</div>{{/html}}

)))

(% class="col-xs-3 col-sm-2" %)

351

(((

352

[[2-10>>attach:Layout2-10.png]]

353

{{html clean="false"}}<div id="wrapper2-10">

</div>

</div>{{/html}}

)))

(% class="col-xs-3 col-sm-2" %)

365

(((

366

[[2-11>>attach:Layout2-11.png]]

367

{{html clean="false"}}<div id="wrapper2-11">

</div>

</div>{{/html}}

)))

)))

(% class="row" %)

(((

(% class="col-xs-3 col-sm-2" %)

383

(((

384

[[2-12>>attach:Layout2-12.png]]

385

{{html clean="false"}}<div id="wrapper2-12">

</div>

</div>{{/html}}

)))

)))

=== Header Footer Layouts ===

398

399

The classic layouts usually include a header and a footer, so these are some possible layout variations:

(% class="row" %)

(((

(% class="col-xs-3 col-sm-2" %)

404

(((

405

3-1

406

{{html clean="false"}}<div id="wrapper3-1">

</div>

</div>{{/html}}

)))

(% class="col-xs-3 col-sm-2" %)

418

(((

419

3-2

420

{{html clean="false"}}<div id="wrapper3-2">

</div>

</div>{{/html}}

)))

(% class="col-xs-3 col-sm-2" %)

432

(((

433

3-3

434

{{html clean="false"}}<div id="wrapper3-3">

</div>

</div>{{/html}}

)))

(% class="col-xs-3 col-sm-2" %)

446

(((

447

3-4

448

{{html clean="false"}}<div id="wrapper3-4">

</div>

</div>{{/html}}

)))

(% class="col-xs-3 col-sm-2" %)

460

(((

461

3-5

462

{{html clean="false"}}<div id="wrapper3-5">

</div>

</div>{{/html}}

)))

(% class="col-xs-3 col-sm-2" %)

474

(((

475

3-6

476

{{html clean="false"}}<div id="wrapper3-6">

</div>

</div>{{/html}}

)))

)))

=== Advanced Grid Layouts ===

489

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:

(% class="row" %)

(((

(% class="col-xs-3 col-sm-2" %)

495

(((

496

4-1

497

{{html clean="false"}}<div id="wrapper4-1">

</div>

</div>{{/html}}

)))

(% class="col-xs-3 col-sm-2" %)

512

(((

513

4-2

514

{{html clean="false"}}<div id="wrapper4-2">

</div>

</div>{{/html}}

)))

(% class="col-xs-3 col-sm-2" %)

528

(((

529

4-3

530

{{html clean="false"}}<div id="wrapper4-3">

</div>

</div>{{/html}}

)))

(% class="col-xs-3 col-sm-2" %)

544

(((

545

4-4

546

{{html clean="false"}}<div id="wrapper4-4">

</div>

</div>{{/html}}

)))

(% class="col-xs-3 col-sm-2" %)

558

(((

559

4-5

560

{{html clean="false"}}<div id="wrapper4-5">

</div>

</div>{{/html}}

)))

(% class="col-xs-3 col-sm-2" %)

574

(((

575

4-6

576

{{html clean="false"}}<div id="wrapper4-6">

</div>

</div>{{/html}}

)))

)))

(% class="row" %)

(((

(% class="col-xs-3 col-sm-2" %)

593

(((

594

[[4-7>>attach:Layout4-7.png]]

595

{{html clean="false"}}<div id="wrapper4-7">

</div>

</div>{{/html}}

)))

(% class="col-xs-3 col-sm-2" %)

610

(((

611

[[4-8>>attach:Layout4-8.png]]

612

{{html clean="false"}}<div id="wrapper4-8">

</div>

</div>{{/html}}

)))

(% class="col-xs-3 col-sm-2" %)

626

(((

627

[[4-9>>attach:Layout4-9.png]]

628

{{html clean="false"}}<div id="wrapper4-9">

</div>

</div>{{/html}}

)))

(% class="col-xs-3 col-sm-2" %)

640

(((

641

[[4-10>>attach:Layout4-10.png]]

642

{{html clean="false"}}<div id="wrapper4-10">

</div>

</div>{{/html}}

)))

(% class="col-xs-3 col-sm-2" %)

658

(((

659

[[4-11>>attach:Layou4-11.png]]

660

{{html clean="false"}}<div id="wrapper4-11">

</div>

</div>{{/html}}

)))

(% class="col-xs-3 col-sm-2" %)

674

(((

675

[[4-12>>attach:Layout4-12.png]]

676

{{html clean="false"}}<div id="wrapper4-12">

</div>

</div>{{/html}}

)))

)))

(% class="row" %)

(((

(% class="col-xs-3 col-sm-2" %)

692

(((

693

[[4-13>>attach:Layout4-13.png]]

694

{{html clean="false"}}<div id="wrapper4-13">

</div>

</div>{{/html}}

)))

)))

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.

707

708

Also not depending on Bootstrap's 3 grid system means we are not limited to a 12 columns grid system.

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.

711

712

== Preview examples ==

image:Layout4-12.png

image:Layout4-13.png

image:Layout4-7.png

image:Layout2-2.png

image:Layout4-9.png

image:Layout2-10.png

image:Layou4-11.png

Wiki source code of Skin 10.x: Layout Variations

About

About

Support

Platform

User Guide

Admin Guide

Developer Guide

Projects

XWiki

Extensions

Other

Contribute

Status

Practices

Under the Hood

Get Involved

Get Connected

author	version	line-number	content
		1	{{velocity output="false"}}
		2	$xwiki.ssx.use('Proposal.Skin10x.LayoutVariations')
		3	{{/velocity}}
		4
		5	{{toc start="2"/}}
		6
		7	== Current Layouts ==
		8
		9	Our current layout is a full width one, with a central area (##.main##) and 2 panels areas (###leftPanels##, ###rightPanels##).
		10
		11	(% class="row" %)
		12	(((
		13	(% class="col-xs-12 col-sm-6" %)
		14	(((
		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>
		34	<div id="leftPanels"></div>
		35	</div>
		36	<div id="rightPanels">
		37	</div>
		38	</div>
		39	</div>
		40	<div id="footerglobal"></div>
		41	</div>
		42	</div>
		43	</body>
		44	{{/code}}
		45	)))
		46
		47	(% class="col-xs-12 col-sm-6" %)
		48	(((
		49	{{gallery}}
		50	image:currentLayout.png
		51	{{/gallery}}
		52
		53
		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
		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).
		57
		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.
		59	)))
		60	)))
		61
		62	== Possible Layouts ==
		63
		64	(% class="row" %)
		65	(((
		66	(% class="col-xs-12 col-sm-6" %)
		67	(((
		68	If we were to replicate the default layout for 10.x it would be:
		69
		70	{{html clean="false"}}
		71	<div id="wrapper0">
		72	<div class="wrapper">
		73	<div class="header">Header</div>
		74	<div class="content">Content</div>
		75	<div class="panels">Panels</div>
		76	<div class="panels">Panels</div>
		77	<div class="footer">Footer</div>
		78	</div>
		79	</div>
		80	{{/html}}
		81
		82
		83	Also the structure could be simplified to something like:
		84
		85	{{code language="html"}}
		86	<body>
		87	<div class="header">H</div>
		88	<div class="content">C</div>
		89	<div class="panels">A</div>
		90	<div class="panels">B</div>
		91	<div class="footer">F</div>
		92	</body>
		93	{{/code}}
		94	)))
		95
		96	(% class="col-xs-12 col-sm-6" %)
		97	(((
		98	(% class="row" %)
		99	(((
		100	(% class="col-xs-3" %)
		101	(((
		102	No side column
		103	{{html clean="false"}}<div id="wrapper0-HLHR">
		104	<div class="wrapper">
		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>
		110	</div>
		111	</div>{{/html}}
		112	)))
		113
		114	(% class="col-xs-3" %)
		115	(((
		116	Left column
		117	{{html clean="false"}}<div id="wrapper0-HR">
		118	<div class="wrapper">
		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>
		124	</div>
		125	</div>{{/html}}
		126	)))
		127
		128	(% class="col-xs-3" %)
		129	(((
		130	Right column
		131	{{html clean="false"}}<div id="wrapper0-HL">
		132	<div class="wrapper">
		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>
		138	</div>
		139	</div>{{/html}}
		140	)))
		141
		142	(% class="col-xs-3" %)
		143	(((
		144	Both columns
		145	{{html clean="false"}}<div id="wrapper0">
		146	<div class="wrapper">
		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>
		152	</div>
		153	</div>{{/html}}
		154	)))
		155	)))
		156
		157
		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.
		159	)))
		160	)))
		161
		162	=== Full Width vs. Centered Layouts ===
		163
		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.
		165
		166	(% class="row" %)
		167	(((
		168	(% class="col-xs-3 col-sm-2" %)
		169	(((
		170	Full Width
		171	{{html clean="false"}}<div id="wrapper0">
		172	<div class="wrapper">
		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>
		178	</div>
		179	</div>{{/html}}
		180	)))
		181
		182	(% class="col-xs-3 col-sm-2" %)
		183	(((
		184	Centered
		185	{{html clean="false"}}<div id="wrapper1-C">
		186	<div class="wrapper">
		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>
		192	</div>
		193	</div>{{/html}}
		194	)))
		195	)))
		196
		197	=== Column Layouts ===
		198
		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.
		201
		202	(% class="row" %)
		203	(((
		204	(% class="col-xs-3 col-sm-2" %)
		205	(((
		206	[[2-1>>attach:Layout2-1.png]]
		207	{{html clean="false"}}<div id="wrapper2-1">
		208	<div class="wrapper">
		209	<div class="header"></div>
		210	<div class="content">C</div>
		211	<div class="panels">A</div>
		212	<div class="panels">B</div>
		213	<div class="footer"></div>
		214	</div>
		215	</div>{{/html}}
		216	)))
		217
		218	(% class="col-xs-3 col-sm-2" %)
		219	(((
		220	[[2-2>>attach:Layout2-2.png]]
		221	{{html clean="false"}}<div id="wrapper2-2">
		222	<div class="wrapper">
		223	<div class="header"></div>
		224	<div class="content">C</div>
		225	<div class="panels">A</div>
		226	<div class="panels">B</div>
		227	<div class="footer"></div>
		228	</div>
		229	</div>{{/html}}
		230	)))
		231
		232	(% class="col-xs-3 col-sm-2" %)
		233	(((
		234	2-3
		235	{{html clean="false"}}<div id="wrapper2-3">
		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>
		243	</div>{{/html}}
		244	)))
		245
		246	(% class="col-xs-3 col-sm-2" %)
		247	(((
		248	2-4
		249	{{html clean="false"}}<div id="wrapper2-4">
		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>
		257	</div>{{/html}}
		258	)))
		259
		260	(% class="col-xs-3 col-sm-2" %)
		261	(((
		262	2-5
		263	{{html clean="false"}}<div id="wrapper2-5">
		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>
		271	</div>{{/html}}
		272	)))
		273
		274	(% class="col-xs-3 col-sm-2" %)
		275	(((
		276	2-6
		277	{{html clean="false"}}<div id="wrapper2-6">
		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>
		285	</div>{{/html}}
		286	)))
		287	)))
		288
		289
		290	(% class="row" %)
		291	(((
		292	(% class="col-xs-3 col-sm-2" %)
		293	(((
		294	[[2-7>>attach:Layout2-7.png]]
		295	{{html clean="false"}}<div id="wrapper2-7">
		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>
		303	</div>{{/html}}
		304	)))
		305
		306	(% class="col-xs-3 col-sm-2" %)
		307	(((
		308	2-7-1
		309	{{html clean="false"}}<div id="wrapper2-7">
		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>
		315	<div class="panels">D</div>
		316	<div class="panels">E</div>
		317	<div class="footer"></div>
		318	</div>
		319	</div>{{/html}}
		320	)))
		321
		322	(% class="col-xs-3 col-sm-2" %)
		323	(((
		324	2-8
		325	{{html clean="false"}}<div id="wrapper2-8">
		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>
		333	</div>{{/html}}
		334	)))
		335
		336	(% class="col-xs-3 col-sm-2" %)
		337	(((
		338	[[2-9>>attach:Layout2-9.png]]
		339	{{html clean="false"}}<div id="wrapper2-9">
		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>
		347	</div>{{/html}}
		348	)))
		349
		350	(% class="col-xs-3 col-sm-2" %)
		351	(((
		352	[[2-10>>attach:Layout2-10.png]]
		353	{{html clean="false"}}<div id="wrapper2-10">
		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>
		361	</div>{{/html}}
		362	)))
		363
		364	(% class="col-xs-3 col-sm-2" %)
		365	(((
		366	[[2-11>>attach:Layout2-11.png]]
		367	{{html clean="false"}}<div id="wrapper2-11">
		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>
		375	</div>{{/html}}
		376	)))
		377	)))
		378
		379
		380	(% class="row" %)
		381	(((
		382	(% class="col-xs-3 col-sm-2" %)
		383	(((
		384	[[2-12>>attach:Layout2-12.png]]
		385	{{html clean="false"}}<div id="wrapper2-12">
		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>
		393	</div>{{/html}}
		394	)))
		395	)))
		396
		397	=== Header Footer Layouts ===
		398
		399	The classic layouts usually include a header and a footer, so these are some possible layout variations:
		400
		401	(% class="row" %)
		402	(((
		403	(% class="col-xs-3 col-sm-2" %)
		404	(((
		405	3-1
		406	{{html clean="false"}}<div id="wrapper3-1">
		407	<div class="wrapper">
		408	<div class="header">H</div>
		409	<div class="content">C</div>
		410	<div class="panels">A</div>
		411	<div class="panels">B</div>
		412	<div class="footer">F</div>
		413	</div>
		414	</div>{{/html}}
		415	)))
		416
		417	(% class="col-xs-3 col-sm-2" %)
		418	(((
		419	3-2
		420	{{html clean="false"}}<div id="wrapper3-2">
		421	<div class="wrapper">
		422	<div class="header">H</div>
		423	<div class="content">C</div>
		424	<div class="panels">A</div>
		425	<div class="panels">B</div>
		426	<div class="footer">F</div>
		427	</div>
		428	</div>{{/html}}
		429	)))
		430
		431	(% class="col-xs-3 col-sm-2" %)
		432	(((
		433	3-3
		434	{{html clean="false"}}<div id="wrapper3-3">
		435	<div class="wrapper">
		436	<div class="header">H</div>
		437	<div class="content">C</div>
		438	<div class="panels">A</div>
		439	<div class="panels">B</div>
		440	<div class="footer">F</div>
		441	</div>
		442	</div>{{/html}}
		443	)))
		444
		445	(% class="col-xs-3 col-sm-2" %)
		446	(((
		447	3-4
		448	{{html clean="false"}}<div id="wrapper3-4">
		449	<div class="wrapper">
		450	<div class="header">H</div>
		451	<div class="content">C</div>
		452	<div class="panels">A</div>
		453	<div class="panels">B</div>
		454	<div class="footer">F</div>
		455	</div>
		456	</div>{{/html}}
		457	)))
		458
		459	(% class="col-xs-3 col-sm-2" %)
		460	(((
		461	3-5
		462	{{html clean="false"}}<div id="wrapper3-5">
		463	<div class="wrapper">
		464	<div class="header">H</div>
		465	<div class="content">C</div>
		466	<div class="panels">A</div>
		467	<div class="panels">B</div>
		468	<div class="footer">F</div>
		469	</div>
		470	</div>{{/html}}
		471	)))
		472
		473	(% class="col-xs-3 col-sm-2" %)
		474	(((
		475	3-6
		476	{{html clean="false"}}<div id="wrapper3-6">
		477	<div class="wrapper">
		478	<div class="header">H</div>
		479	<div class="content">C</div>
		480	<div class="panels">A</div>
		481	<div class="panels">B</div>
		482	<div class="footer">F</div>
		483	</div>
		484	</div>{{/html}}
		485	)))
		486	)))
		487
		488	=== Advanced Grid Layouts ===
		489
		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:
		491
		492	(% class="row" %)
		493	(((
		494	(% class="col-xs-3 col-sm-2" %)
		495	(((
		496	4-1
		497	{{html clean="false"}}<div id="wrapper4-1">
		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>
		503	<div class="panels">D</div>
		504	<div class="panels">E</div>
		505	<div class="panels">G</div>
		506	<div class="footer">F</div>
		507	</div>
		508	</div>{{/html}}
		509	)))
		510
		511	(% class="col-xs-3 col-sm-2" %)
		512	(((
		513	4-2
		514	{{html clean="false"}}<div id="wrapper4-2">
		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>
		520	<div class="panels">D</div>
		521	<div class="panels">E</div>
		522	<div class="footer">F</div>
		523	</div>
		524	</div>{{/html}}
		525	)))
		526
		527	(% class="col-xs-3 col-sm-2" %)
		528	(((
		529	4-3
		530	{{html clean="false"}}<div id="wrapper4-3">
		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>
		536	<div class="panels">D</div>
		537	<div class="panels">E</div>
		538	<div class="footer">F</div>
		539	</div>
		540	</div>{{/html}}
		541	)))
		542
		543	(% class="col-xs-3 col-sm-2" %)
		544	(((
		545	4-4
		546	{{html clean="false"}}<div id="wrapper4-4">
		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>
		554	</div>{{/html}}
		555	)))
		556
		557	(% class="col-xs-3 col-sm-2" %)
		558	(((
		559	4-5
		560	{{html clean="false"}}<div id="wrapper4-5">
		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>
		566	<div class="panels">D</div>
		567	<div class="panels">E</div>
		568	<div class="footer">F</div>
		569	</div>
		570	</div>{{/html}}
		571	)))
		572
		573	(% class="col-xs-3 col-sm-2" %)
		574	(((
		575	4-6
		576	{{html clean="false"}}<div id="wrapper4-6">
		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>
		582	<div class="panels">D</div>
		583	<div class="footer">F</div>
		584	</div>
		585	</div>{{/html}}
		586	)))
		587	)))
		588
		589
		590	(% class="row" %)
		591	(((
		592	(% class="col-xs-3 col-sm-2" %)
		593	(((
		594	[[4-7>>attach:Layout4-7.png]]
		595	{{html clean="false"}}<div id="wrapper4-7">
		596	<div class="wrapper">
		597	<div class="header">H</div>
		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>
		603	<div class="panels">G</div>
		604	<div class="footer">F</div>
		605	</div>
		606	</div>{{/html}}
		607	)))
		608
		609	(% class="col-xs-3 col-sm-2" %)
		610	(((
		611	[[4-8>>attach:Layout4-8.png]]
		612	{{html clean="false"}}<div id="wrapper4-8">
		613	<div class="wrapper">
		614	<div class="header">H</div>
		615	<div class="content">C</div>
		616	<div class="panels">A</div>
		617	<div class="panels">B</div>
		618	<div class="panels">D</div>
		619	<div class="panels">E</div>
		620	<div class="footer">F</div>
		621	</div>
		622	</div>{{/html}}
		623	)))
		624
		625	(% class="col-xs-3 col-sm-2" %)
		626	(((
		627	[[4-9>>attach:Layout4-9.png]]
		628	{{html clean="false"}}<div id="wrapper4-9">
		629	<div class="wrapper">
		630	<div class="header">H</div>
		631	<div class="content">C</div>
		632	<div class="panels">A</div>
		633	<div class="panels">B</div>
		634	<div class="footer">F</div>
		635	</div>
		636	</div>{{/html}}
		637	)))
		638
		639	(% class="col-xs-3 col-sm-2" %)
		640	(((
		641	[[4-10>>attach:Layout4-10.png]]
		642	{{html clean="false"}}<div id="wrapper4-10">
		643	<div class="wrapper">
		644	<div class="header">H</div>
		645	<div class="content">C</div>
		646	<div class="panels">A</div>
		647	<div class="panels">B</div>
		648	<div class="panels">D</div>
		649	<div class="panels">E</div>
		650	<div class="panels">G</div>
		651	<div class="panels">I</div>
		652	<div class="footer">F</div>
		653	</div>
		654	</div>{{/html}}
		655	)))
		656
		657	(% class="col-xs-3 col-sm-2" %)
		658	(((
		659	[[4-11>>attach:Layou4-11.png]]
		660	{{html clean="false"}}<div id="wrapper4-11">
		661	<div class="wrapper">
		662	<div class="header">H</div>
		663	<div class="content">C</div>
		664	<div class="panels">A</div>
		665	<div class="panels">B</div>
		666	<div class="panels">D</div>
		667	<div class="panels">E</div>
		668	<div class="footer">F</div>
		669	</div>
		670	</div>{{/html}}
		671	)))
		672
		673	(% class="col-xs-3 col-sm-2" %)
		674	(((
		675	[[4-12>>attach:Layout4-12.png]]
		676	{{html clean="false"}}<div id="wrapper4-12">
		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>
		683	</div>{{/html}}
		684	)))
		685	)))
		686
		687
		688
		689	(% class="row" %)
		690	(((
		691	(% class="col-xs-3 col-sm-2" %)
		692	(((
		693	[[4-13>>attach:Layout4-13.png]]
		694	{{html clean="false"}}<div id="wrapper4-13">
		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>
		701	</div>{{/html}}
		702	)))
		703	)))
		704
		705
		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.
		707
		708	Also not depending on Bootstrap's 3 grid system means we are not limited to a 12 columns grid system.
		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.
		711
		712	== Preview examples ==
		713
		714	{{gallery}}
		715	image:Layout4-12.png
		716	image:Layout4-13.png
		717	image:Layout4-7.png
		718	image:Layout2-2.png
		719	image:Layout4-9.png
		720	image:Layout2-10.png
		721	image:Layou4-11.png
		722	{{/gallery}}