Skip to content

Commit e99f245

Browse files
GarneaumaGarneauma
committed
Grid: adding mws grid
1 parent 575c57d commit e99f245

4 files changed

Lines changed: 529 additions & 0 deletions

File tree

‎common/grid/_base.scss‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
/*
2+
*
3+
* @title: MWS Grid system
4+
*
5+
*/
6+
7+
/* SASS variables */
8+
$grid-max: 12;
9+
$breakpoints: (
10+
default: null,
11+
phone: '(max-width: 768px)',
12+
tablet: '(min-width: 769px) and (max-width: 1200px)'
13+
);
14+
15+
/* Mixin for grid columns */
16+
@mixin grid-columns($prefix, $media: null) {
17+
@for $n from 1 through $grid-max {
18+
@if $prefix == default {
19+
@for $i from 1 through $n {
20+
.aem-Grid.aem-Grid--#{$n}>.aem-GridColumn.aem-GridColumn--#{$prefix}--#{$i} {
21+
float: left;
22+
clear: none;
23+
width: percentage($i / $n);
24+
}
25+
}
26+
}
27+
28+
@for $i from 1 through $n {
29+
.aem-Grid.aem-Grid--#{$prefix}--#{$n}>.aem-GridColumn.aem-GridColumn--#{$prefix}--#{$i} {
30+
float: left;
31+
clear: none;
32+
width: percentage($i / $n);
33+
}
34+
}
35+
}
36+
37+
/* Hide and newline */
38+
.aem-Grid > .aem-GridColumn.aem-GridColumn--#{$prefix}--newline {
39+
clear: both !important;
40+
}
41+
42+
.aem-Grid > .aem-GridColumn.aem-GridColumn--#{$prefix}--hide {
43+
display: none;
44+
}
45+
}
46+
47+
/* Base grid styles */
48+
/* grid component */
49+
.aem-Grid {
50+
display: block;
51+
width: 100%;
52+
53+
&::before,
54+
&::after {
55+
display: table;
56+
content: " ";
57+
}
58+
59+
&::after {
60+
clear: both;
61+
}
62+
}
63+
64+
.aem-Grid-newComponent {
65+
clear: both;
66+
margin: 0;
67+
}
68+
69+
main .aem-GridColumn {
70+
box-sizing: border-box;
71+
clear: both;
72+
padding-left: $grid-gutter-width/2;
73+
padding-right: $grid-gutter-width/2;
74+
75+
&:has(.container) {
76+
padding-left: 0;
77+
padding-right: 0;
78+
}
79+
}
80+
81+
main .container.responsivegrid {
82+
padding-left: 0;
83+
padding-right: 0;
84+
}
85+
86+
/* Generate grid columns for each breakpoint */
87+
@each $prefix, $media in $breakpoints {
88+
@if $media == null {
89+
@include grid-columns($prefix);
90+
}
91+
92+
@else {
93+
@media #{$media} {
94+
@include grid-columns($prefix);
95+
}
96+
}
97+
}

‎common/grid/grid-en.html‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
---
2+
{
3+
"title": "MWS Grid system",
4+
"language": "en",
5+
"altLangPage": "grid-fr.html",
6+
"description": "Grid system page including working examples to test how various grid layouts appear on different screen sizes.",
7+
"layout": "no-container",
8+
"dateModified": "2025-09-09"
9+
}
10+
---
11+
12+
<div class="wb-prettify all-pre hide"></div>
13+
14+
<div class="container">
15+
<h1>{{page.title}}</h1>
16+
<p>{{page.description}}</p>
17+
18+
<h2>MWS grid system</h2>
19+
</div>
20+
<div class="container responsivegrid">
21+
<div class="aem-Grid aem-Grid--12 demo-Grid">
22+
<div class="aem-GridColumn aem-GridColumn--default--3"><p class="bg-dark text-white text-center">3-12</p></div>
23+
<div class="aem-GridColumn aem-GridColumn--default--4"><p class="bg-dark text-white text-center">4-12</p></div>
24+
<div class="aem-GridColumn aem-GridColumn--default--2"><p class="bg-dark text-white text-center">2-12</p></div>
25+
</div>
26+
<div class="aem-Grid aem-Grid--12 demo-Grid">
27+
<div class="aem-GridColumn aem-GridColumn--default--1"><p class="bg-dark text-white text-center">1-12</p></div>
28+
<div class="aem-GridColumn aem-GridColumn--default--1"><p class="bg-dark text-white text-center">1-12</p></div>
29+
<div class="aem-GridColumn aem-GridColumn--default--10"><p class="bg-dark text-white text-center">10-12</p></div>
30+
</div>
31+
<div class="aem-Grid aem-Grid--12 demo-Grid">
32+
<div class="aem-GridColumn aem-GridColumn--default--6"><p class="bg-dark text-white text-center">6-12</p></div>
33+
<div class="aem-GridColumn aem-GridColumn--default--1"><p class="bg-dark text-white text-center">1-12</p></div>
34+
<div class="aem-GridColumn aem-GridColumn--default--1"><p class="bg-dark text-white text-center">1-12</p></div>
35+
<div class="aem-GridColumn aem-GridColumn--default--1"><p class="bg-dark text-white text-center">1-12</p></div>
36+
<div class="aem-GridColumn aem-GridColumn--default--1"><p class="bg-dark text-white text-center">1-12</p></div>
37+
<div class="aem-GridColumn aem-GridColumn--default--1"><p class="bg-dark text-white text-center">1-12</p></div>
38+
<div class="aem-GridColumn aem-GridColumn--default--1"><p class="bg-dark text-white text-center">1-12</p></div>
39+
</div>
40+
<div class="aem-Grid aem-Grid--12 demo-Grid">
41+
<div class="aem-GridColumn aem-GridColumn--default--4"><p class="bg-dark text-white text-center">4-12</p></div>
42+
<div class="aem-GridColumn aem-GridColumn--default--4"><p class="bg-dark text-white text-center">4-12</p></div>
43+
<div class="aem-GridColumn aem-GridColumn--default--4"><p class="bg-dark text-white text-center">4-12</p></div>
44+
</div>
45+
</div>
46+
47+
<div class="container">
48+
<h2>Bootstrap grid system</h2>
49+
</div>
50+
<div class="container">
51+
<div class="row">
52+
<div class="col-xs-3"><p class="bg-dark text-white text-center">col-xs-3</p></div>
53+
<div class="col-xs-4"><p class="bg-dark text-white text-center">col-xs-4</p></div>
54+
<div class="col-xs-2"><p class="bg-dark text-white text-center">col-xs-2</p></div>
55+
</div>
56+
<div class="row">
57+
<div class="col-xs-1"><p class="bg-dark text-white text-center">col-xs-1</p></div>
58+
<div class="col-xs-1"><p class="bg-dark text-white text-center">col-xs-1</p></div>
59+
<div class="col-xs-10"><p class="bg-dark text-white text-center">col-xs-10</p></div>
60+
</div>
61+
<div class="row">
62+
<div class="col-xs-6"><p class="bg-dark text-white text-center">col-xs-6</p></div>
63+
<div class="col-xs-1"><p class="bg-dark text-white text-center">col-xs-1</p></div>
64+
<div class="col-xs-1"><p class="bg-dark text-white text-center">col-xs-1</p></div>
65+
<div class="col-xs-1"><p class="bg-dark text-white text-center">col-xs-1</p></div>
66+
<div class="col-xs-1"><p class="bg-dark text-white text-center">col-xs-1</p></div>
67+
<div class="col-xs-1"><p class="bg-dark text-white text-center">col-xs-1</p></div>
68+
<div class="col-xs-1"><p class="bg-dark text-white text-center">col-xs-1</p></div>
69+
</div>
70+
<div class="row">
71+
<div class="col-xs-4"><p class="bg-dark text-white text-center">col-xs-4</p></div>
72+
<div class="col-xs-4"><p class="bg-dark text-white text-center">col-xs-4</p></div>
73+
<div class="col-xs-4"><p class="bg-dark text-white text-center">col-xs-4</p></div>
74+
</div>
75+
</div>
76+
77+
<div class="container">
78+
<h2>MWS grid system with nested Bootstrap grid system</h2>
79+
</div>
80+
<div class="container responsivegrid">
81+
<div class="aem-Grid aem-Grid--12 demo-Grid">
82+
<div class="aem-GridColumn aem-GridColumn--default--3"><p class="bg-dark text-white text-center">3-12</p></div>
83+
<div class="aem-GridColumn aem-GridColumn--default--4"><p class="bg-dark text-white text-center">4-12</p></div>
84+
<div class="aem-GridColumn aem-GridColumn--default--2"><p class="bg-dark text-white text-center">2-12</p></div>
85+
</div>
86+
<div class="aem-Grid aem-Grid--12 demo-Grid">
87+
<div class="aem-GridColumn aem-GridColumn--default--1"><p class="bg-dark text-white text-center">1-12</p></div>
88+
<div class="aem-GridColumn aem-GridColumn--default--1"><p class="bg-dark text-white text-center">1-12</p></div>
89+
<div class="aem-GridColumn aem-GridColumn--default--10">
90+
<div class="row">
91+
<div class="col-xs-6"><p class="bg-dark text-white text-center">col-xs-6</p></div>
92+
<div class="col-xs-6"><p class="bg-dark text-white text-center">col-xs-6</p></div>
93+
</div>
94+
</div>
95+
</div>
96+
<div class="aem-Grid aem-Grid--12 demo-Grid">
97+
<div class="aem-GridColumn aem-GridColumn--default--6"><p class="bg-dark text-white text-center">6-12</p></div>
98+
<div class="aem-GridColumn aem-GridColumn--default--1"><p class="bg-dark text-white text-center">1-12</p></div>
99+
<div class="aem-GridColumn aem-GridColumn--default--1"><p class="bg-dark text-white text-center">1-12</p></div>
100+
<div class="aem-GridColumn aem-GridColumn--default--1"><p class="bg-dark text-white text-center">1-12</p></div>
101+
<div class="aem-GridColumn aem-GridColumn--default--1"><p class="bg-dark text-white text-center">1-12</p></div>
102+
<div class="aem-GridColumn aem-GridColumn--default--1"><p class="bg-dark text-white text-center">1-12</p></div>
103+
<div class="aem-GridColumn aem-GridColumn--default--1"><p class="bg-dark text-white text-center">1-12</p></div>
104+
</div>
105+
<div class="aem-Grid aem-Grid--12 demo-Grid">
106+
<div class="aem-GridColumn aem-GridColumn--default--4"><p class="bg-dark text-white text-center">4-12</p></div>
107+
<div class="aem-GridColumn aem-GridColumn--default--4"><p class="bg-dark text-white text-center">4-12</p></div>
108+
<div class="aem-GridColumn aem-GridColumn--default--4"><p class="bg-dark text-white text-center">4-12</p></div>
109+
</div>
110+
</div>

0 commit comments

Comments
 (0)