Skip to content

Commit 5cdc62d

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

File tree

5 files changed

+413
-0
lines changed

5 files changed

+413
-0
lines changed

‎mws/grid/_compatibility.scss‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
/*
2+
*
3+
* @title: Compatibility fixes for MWS integration
4+
*
5+
*/
6+
7+
/******
8+
TODO: Evaluate if the following styles are needed for publish instance
9+
******/
10+
11+
.main-container.container-base.container.responsivegrid {
12+
padding: 0 !important;
13+
margin: 0 !important;
14+
}
15+
16+
.root {
17+
width: 100%;
18+
}
19+
20+
div:not(.wrap-container).wcontainer.container.responsivegrid {
21+
&:not([class*="aem-GridColumn--offset--xs-"],
22+
[class*="aem-GridColumn--offset--sm-"],
23+
[class*="aem-GridColumn--offset--md-"],
24+
[class*="aem-GridColumn--offset--lg-"]) {
25+
width: 100%;
26+
padding: 0;
27+
margin: 0;
28+
}
29+
}
30+
31+
.wcontainer.container.responsivegrid {
32+
.aem-GridColumn:not(.wrap-container) {
33+
&--xs--none,
34+
&--offset--xs--0,
35+
&--xs--12,
36+
.cq-Editable-dom .cq-Editable-dom--container {
37+
padding: 0 !important;
38+
}
39+
40+
// Generalize for any aem-GridColumn--default--xx, except when .wrap-container is present
41+
&[class*="aem-GridColumn--default--"]:not(.wrap-container) {
42+
padding: 0 !important;
43+
}
44+
}
45+
}
46+
47+
.wrap-container.container.aem-GridColumn--default--12 {
48+
float: none !important;
49+
}
50+
51+
.wrap-container.container {
52+
padding: 0 15px;
53+
margin: 0 auto;
54+
}
55+
56+
.wrap-container.container:before,
57+
.wrap-container.container:after,
58+
.wrap-container .container-fluid:before,
59+
.wrap-container .container-fluid:after {
60+
display: table;
61+
content: " ";
62+
}
63+
64+
.wrap-container.container:after,
65+
.wrap-container .container-fluid:after {
66+
clear: both;
67+
}
68+
69+
@media (min-width: 768px) {
70+
.wrap-container.container {
71+
width: 750px !important;
72+
}
73+
}
74+
75+
@media (min-width: 992px) {
76+
.wrap-container.container {
77+
width: 970px !important;
78+
}
79+
}
80+
81+
@media (min-width: 1200px) {
82+
.wrap-container.container {
83+
width: 1170px !important;
84+
}
85+
}
86+
87+
.wrap-container .container-fluid {
88+
padding: 0 15px;
89+
margin: 0 auto;
90+
}
91+
92+
.xf-content-height {
93+
margin: 0 !important;
94+
}

‎mws/grid/_grid.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+
.mws-Grid.mws-Grid--#{$n}>.mws-GridColumn.mws-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+
.mws-Grid.mws-Grid--#{$prefix}--#{$n}>.mws-GridColumn.mws-GridColumn--#{$prefix}--#{$i} {
30+
float: left;
31+
clear: none;
32+
width: percentage($i / $n);
33+
}
34+
}
35+
}
36+
37+
/* Hide and newline */
38+
.mws-Grid > .mws-GridColumn.mws-GridColumn--#{$prefix}--newline {
39+
clear: both !important;
40+
}
41+
42+
.mws-Grid > .mws-GridColumn.mws-GridColumn--#{$prefix}--hide {
43+
display: none;
44+
}
45+
}
46+
47+
/* Base grid styles */
48+
/* grid component */
49+
.mws-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+
.mws-Grid-newComponent {
65+
clear: both;
66+
margin: 0;
67+
}
68+
69+
main .mws-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+
}

‎mws/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 example</h2>
19+
</div>
20+
<div class="container responsivegrid">
21+
<div class="mws-Grid mws-Grid--12 demo-Grid">
22+
<div class="mws-GridColumn mws-GridColumn--default--3"><p class="bg-dark text-white text-center">3-12</p></div>
23+
<div class="mws-GridColumn mws-GridColumn--default--4"><p class="bg-dark text-white text-center">4-12</p></div>
24+
<div class="mws-GridColumn mws-GridColumn--default--2"><p class="bg-dark text-white text-center">2-12</p></div>
25+
</div>
26+
<div class="mws-Grid mws-Grid--12 demo-Grid">
27+
<div class="mws-GridColumn mws-GridColumn--default--1"><p class="bg-dark text-white text-center">1-12</p></div>
28+
<div class="mws-GridColumn mws-GridColumn--default--1"><p class="bg-dark text-white text-center">1-12</p></div>
29+
<div class="mws-GridColumn mws-GridColumn--default--10"><p class="bg-dark text-white text-center">10-12</p></div>
30+
</div>
31+
<div class="mws-Grid mws-Grid--12 demo-Grid">
32+
<div class="mws-GridColumn mws-GridColumn--default--6"><p class="bg-dark text-white text-center">6-12</p></div>
33+
<div class="mws-GridColumn mws-GridColumn--default--1"><p class="bg-dark text-white text-center">1-12</p></div>
34+
<div class="mws-GridColumn mws-GridColumn--default--1"><p class="bg-dark text-white text-center">1-12</p></div>
35+
<div class="mws-GridColumn mws-GridColumn--default--1"><p class="bg-dark text-white text-center">1-12</p></div>
36+
<div class="mws-GridColumn mws-GridColumn--default--1"><p class="bg-dark text-white text-center">1-12</p></div>
37+
<div class="mws-GridColumn mws-GridColumn--default--1"><p class="bg-dark text-white text-center">1-12</p></div>
38+
<div class="mws-GridColumn mws-GridColumn--default--1"><p class="bg-dark text-white text-center">1-12</p></div>
39+
</div>
40+
<div class="mws-Grid mws-Grid--12 demo-Grid">
41+
<div class="mws-GridColumn mws-GridColumn--default--4"><p class="bg-dark text-white text-center">4-12</p></div>
42+
<div class="mws-GridColumn mws-GridColumn--default--4"><p class="bg-dark text-white text-center">4-12</p></div>
43+
<div class="mws-GridColumn mws-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 example</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 example</h2>
79+
</div>
80+
<div class="container responsivegrid">
81+
<div class="mws-Grid mws-Grid--12 demo-Grid">
82+
<div class="mws-GridColumn mws-GridColumn--default--3"><p class="bg-dark text-white text-center">3-12</p></div>
83+
<div class="mws-GridColumn mws-GridColumn--default--4"><p class="bg-dark text-white text-center">4-12</p></div>
84+
<div class="mws-GridColumn mws-GridColumn--default--2"><p class="bg-dark text-white text-center">2-12</p></div>
85+
</div>
86+
<div class="mws-Grid mws-Grid--12 demo-Grid">
87+
<div class="mws-GridColumn mws-GridColumn--default--1"><p class="bg-dark text-white text-center">1-12</p></div>
88+
<div class="mws-GridColumn mws-GridColumn--default--1"><p class="bg-dark text-white text-center">1-12</p></div>
89+
<div class="mws-GridColumn mws-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="mws-Grid mws-Grid--12 demo-Grid">
97+
<div class="mws-GridColumn mws-GridColumn--default--6"><p class="bg-dark text-white text-center">6-12</p></div>
98+
<div class="mws-GridColumn mws-GridColumn--default--1"><p class="bg-dark text-white text-center">1-12</p></div>
99+
<div class="mws-GridColumn mws-GridColumn--default--1"><p class="bg-dark text-white text-center">1-12</p></div>
100+
<div class="mws-GridColumn mws-GridColumn--default--1"><p class="bg-dark text-white text-center">1-12</p></div>
101+
<div class="mws-GridColumn mws-GridColumn--default--1"><p class="bg-dark text-white text-center">1-12</p></div>
102+
<div class="mws-GridColumn mws-GridColumn--default--1"><p class="bg-dark text-white text-center">1-12</p></div>
103+
<div class="mws-GridColumn mws-GridColumn--default--1"><p class="bg-dark text-white text-center">1-12</p></div>
104+
</div>
105+
<div class="mws-Grid mws-Grid--12 demo-Grid">
106+
<div class="mws-GridColumn mws-GridColumn--default--4"><p class="bg-dark text-white text-center">4-12</p></div>
107+
<div class="mws-GridColumn mws-GridColumn--default--4"><p class="bg-dark text-white text-center">4-12</p></div>
108+
<div class="mws-GridColumn mws-GridColumn--default--4"><p class="bg-dark text-white text-center">4-12</p></div>
109+
</div>
110+
</div>

0 commit comments

Comments
 (0)