Skip to content

Commit b41ff1c

Browse files
AlexSkrypnykAlexSkrypnyk
committed
Fixed margins on the nested fluid grid. Part 2.
1 parent c6e9302 commit b41ff1c

File tree

3 files changed

+215
-17
lines changed

3 files changed

+215
-17
lines changed

‎components/00-base/grid/grid.scss

+11
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,17 @@
1818

1919
@include ct-row($ct-grid-gutters);
2020

21+
&#{$root}--no-gutters {
22+
margin-right: 0;
23+
margin-left: 0;
24+
25+
> .col,
26+
> [class*='col-'] {
27+
padding-right: 0;
28+
padding-left: 0;
29+
}
30+
}
31+
2132
&#{$root}--reverse {
2233
flex-direction: row-reverse;
2334
}

‎components/00-base/grid/grid.stories.js

+192-16
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export default {
55
title: 'Base/Grid',
66
parameters: {
77
layout: 'fullscreen',
8-
docs: '<div class="grid-story-docs story-grid-outlines row row--no-grow"><strong>Outline colors: </strong><span class="col grid-story-docs-color-container-contained">Contained container</span><span class="col grid-story-docs-color-container-fluid">Fluid container</span><span class="col grid-story-docs-color-row">Row</span><span class="col grid-story-docs-color-template-column">Template column</span><span class="col grid-story-docs-color-auto-column">Auto column</span><span class="col grid-story-docs-color-placeholder">Placeholder</span></div>',
8+
docs: '<div class="grid-story-docs story-grid-outlines row row--no-grow"><strong>Outline colors: </strong><br/><span class="col grid-story-docs-color-container-contained">Contained container</span><span class="col grid-story-docs-color-container-fluid">Fluid container</span><span class="col grid-story-docs-color-row">Row</span><span class="col grid-story-docs-color-template-column">Template column</span><span class="col grid-story-docs-color-auto-column">Auto column</span><span class="col grid-story-docs-color-placeholder">Placeholder</span></div>',
99
docsClass: 'story-docs--conditional',
1010
},
1111
};
@@ -42,7 +42,7 @@ export const Grid = () => {
4242

4343
html += `<div class="story-container__title">Columns</div>`;
4444

45-
html += `<div class="story-container__subtitle">Template column ${code('.row > .col-[breakpoint]-[column]')}</div>`;
45+
html += `<div class="story-container__subtitle">Template column in container ${code('.container > .row > .col-[breakpoint]-[column]')}</div>`;
4646
cols = [1, 2, 3, 4, 6, 12];
4747
for (let j = 0; j < cols.length; j++) {
4848
html += CivicThemeGrid({
@@ -52,7 +52,7 @@ export const Grid = () => {
5252
});
5353
}
5454

55-
html += `<div class="story-container__subtitle">Template column ${code('.row > .col-[breakpoint]-[column]')}</div>`;
55+
html += `<div class="story-container__subtitle">Template column in fluid container ${code('.container-fluid > .row > .col-[breakpoint]-[column]')}</div>`;
5656
cols = [1];
5757
for (let j = 0; j < cols.length; j++) {
5858
html += CivicThemeGrid({
@@ -63,7 +63,7 @@ export const Grid = () => {
6363
});
6464
}
6565

66-
html += `<div class="story-container__subtitle">Auto column ${code('.row > .col')}</div>`;
66+
html += `<div class="story-container__subtitle">Auto column in container ${code('.container .row > .col')}</div>`;
6767
cols = [1, 2, 3, 4, 6, 12];
6868
for (let j = 0; j < cols.length; j++) {
6969
html += CivicThemeGrid({
@@ -74,7 +74,7 @@ export const Grid = () => {
7474

7575
html += `<div class="story-container__title">Offsets and order</div>`;
7676

77-
html += `<div class="story-container__subtitle">Template column ${code('.row > .col-[breakpoint]-offset-[column]')}</div>`;
77+
html += `<div class="story-container__subtitle">Template column in container ${code('.container > .row > .col-[breakpoint]-offset-[column]')}</div>`;
7878
cols = [1, 2, 3, 4, 6, 12];
7979
let offsets = [1, 2, 3, 4, 6, 8];
8080
for (let j = 0; j < cols.length; j++) {
@@ -86,7 +86,7 @@ export const Grid = () => {
8686
});
8787
}
8888

89-
html += `<div class="story-container__subtitle">Auto column ${code('.row > .col.col-[breakpoint]-offset-[column]')}</div>`;
89+
html += `<div class="story-container__subtitle">Auto column in container ${code('.container > .row > .col.col-[breakpoint]-offset-[column]')}</div>`;
9090
cols = [1, 2, 3, 4, 6, 12];
9191
offsets = [1, 2, 3, 4, 6, 8];
9292
for (let j = 0; j < cols.length; j++) {
@@ -123,9 +123,9 @@ export const Grid = () => {
123123
column_class: 'col',
124124
});
125125

126-
html += `<div class="story-container__title">Nested</div>`;
126+
html += `<div class="story-container__title">Nested Rows (container-less)</div>`;
127127

128-
html += `<div class="story-container__subtitle">Template column ${code('.row > .col-[breakpoint]-[column]')}</div>`;
128+
html += `<div class="story-container__subtitle">Template column wraps template column ${code('.row > .col-[breakpoint]-[column] > .row > .col-[breakpoint]-[column]')}</div>`;
129129
cols = ['A', 'B', 'C', 'D'];
130130
html += CivicThemeGrid({
131131
items: [
@@ -136,15 +136,18 @@ export const Grid = () => {
136136
placeholder('Nested'),
137137
],
138138
use_container: false,
139+
template_column_count: 3,
139140
column_attributes: 'data-story-total-columns="3"',
140141
}),
141142
placeholder('Parent'),
142143
],
144+
use_container: false,
143145
template_column_count: 2,
144146
column_attributes: 'data-story-total-columns="2"',
147+
modifier_class: 'row--no-gutters',
145148
});
146149

147-
html += `<div class="story-container__subtitle">Auto column ${code('.row > .col')}</div>`;
150+
html += `<div class="story-container__subtitle">Template column wraps auto column ${code('.row > .col-[breakpoint]-[column] > .row > .col')}</div>`;
148151
cols = ['A', 'B', 'C', 'D'];
149152
html += CivicThemeGrid({
150153
items: [
@@ -159,33 +162,206 @@ export const Grid = () => {
159162
}),
160163
placeholder('Parent'),
161164
],
165+
use_container: false,
166+
template_column_count: 2,
162167
column_attributes: 'data-story-total-columns="2"',
168+
modifier_class: 'row--no-gutters',
163169
});
164170

165-
html += `<div class="story-container__title">Row utilities</div>`;
171+
html += `<div class="story-container__subtitle">Auto column wraps auto-column ${code('.row > .col > .row > .col')}</div>`;
172+
cols = ['A', 'B', 'C', 'D'];
173+
html += CivicThemeGrid({
174+
items: [
175+
CivicThemeGrid({
176+
items: [
177+
placeholder('Nested'),
178+
placeholder('Nested'),
179+
placeholder('Nested'),
180+
],
181+
use_container: false,
182+
}),
183+
placeholder('Parent'),
184+
],
185+
use_container: false,
186+
modifier_class: 'row--no-gutters',
187+
});
166188

167-
html += `<div class="story-container__subtitle">Reversed columns ${code('.row.row--reverse')}</div>`;
189+
html += `<div class="story-container__subtitle">Auto column wraps template column ${code('.row > .col > .row > .col-[breakpoint]-[column]')}</div>`;
190+
cols = ['A', 'B', 'C', 'D'];
191+
html += CivicThemeGrid({
192+
items: [
193+
CivicThemeGrid({
194+
items: [
195+
placeholder('Nested'),
196+
placeholder('Nested'),
197+
placeholder('Nested'),
198+
],
199+
use_container: false,
200+
template_column_count: 3,
201+
column_attributes: 'data-story-total-columns="3"',
202+
}),
203+
placeholder('Parent'),
204+
],
205+
use_container: false,
206+
modifier_class: 'row--no-gutters',
207+
});
208+
209+
html += `<div class="story-container__title">Nested Containers</div>`;
210+
211+
html += `<div class="story-container__subtitle">Container with template columns wraps container with template columns ${code('.container .row > .col-[breakpoint]-[column] .container > .row > .col-[breakpoint]-[column]')}</div>`;
212+
cols = ['A', 'B', 'C', 'D'];
213+
html += CivicThemeGrid({
214+
items: [
215+
CivicThemeGrid({
216+
items: [
217+
placeholder('Nested'),
218+
placeholder('Nested'),
219+
placeholder('Nested'),
220+
],
221+
use_container: true,
222+
is_fluid: false,
223+
column_attributes: 'data-story-total-columns="3"',
224+
}),
225+
placeholder('Parent'),
226+
],
227+
use_container: true,
228+
is_fluid: false,
229+
template_column_count: 2,
230+
column_attributes: 'data-story-total-columns="2"',
231+
});
232+
233+
html += `<div class="story-container__subtitle">Fluid container with template columns wraps container with template columns ${code('.container-fluid .row > .col-[breakpoint]-[column] .container > .row > .col-[breakpoint]-[column]')}</div>`;
168234
cols = ['A', 'B', 'C', 'D'];
235+
html += CivicThemeGrid({
236+
items: [
237+
CivicThemeGrid({
238+
items: [
239+
placeholder('Nested'),
240+
placeholder('Nested'),
241+
placeholder('Nested'),
242+
],
243+
use_container: true,
244+
is_fluid: false,
245+
column_attributes: 'data-story-total-columns="3"',
246+
}),
247+
placeholder('Parent'),
248+
],
249+
use_container: true,
250+
is_fluid: true,
251+
template_column_count: 2,
252+
column_attributes: 'data-story-total-columns="2"',
253+
});
254+
255+
html += `<div class="story-container__subtitle">Fluid container with template columns wraps container with template columns (single column) ${code('.container-fluid .row > .col-[breakpoint]-[column] .container > .row > .col-[breakpoint]-[column]')}</div>`;
256+
cols = ['A', 'B', 'C', 'D'];
257+
html += CivicThemeGrid({
258+
items: [
259+
CivicThemeGrid({
260+
items: [
261+
placeholder('Nested'),
262+
placeholder('Nested'),
263+
placeholder('Nested'),
264+
],
265+
use_container: true,
266+
is_fluid: false,
267+
column_attributes: 'data-story-total-columns="3"',
268+
}),
269+
],
270+
use_container: true,
271+
is_fluid: true,
272+
template_column_count: 1,
273+
});
274+
275+
html += `<div class="story-container__subtitle">Container with template columns wraps fluid container with template columns ${code('.container .row > .col-[breakpoint]-[column] .container-fluid > .row > .col-[breakpoint]-[column]')}</div>`;
276+
cols = ['A', 'B', 'C', 'D'];
277+
html += CivicThemeGrid({
278+
items: [
279+
CivicThemeGrid({
280+
items: [
281+
placeholder('Nested'),
282+
placeholder('Nested'),
283+
placeholder('Nested'),
284+
],
285+
use_container: true,
286+
is_fluid: true,
287+
column_attributes: 'data-story-total-columns="3"',
288+
}),
289+
placeholder('Parent'),
290+
],
291+
use_container: true,
292+
is_fluid: false,
293+
template_column_count: 2,
294+
column_attributes: 'data-story-total-columns="2"',
295+
});
296+
297+
html += `<div class="story-container__subtitle">Fluid container with template columns wraps fluid container with template columns ${code('.container-fluid .row > .col-[breakpoint]-[column] .container-fluid > .row > .col-[breakpoint]-[column]')}</div>`;
298+
cols = ['A', 'B', 'C', 'D'];
299+
html += CivicThemeGrid({
300+
items: [
301+
CivicThemeGrid({
302+
items: [
303+
placeholder('Nested'),
304+
placeholder('Nested'),
305+
placeholder('Nested'),
306+
],
307+
use_container: true,
308+
is_fluid: true,
309+
column_attributes: 'data-story-total-columns="3"',
310+
}),
311+
placeholder('Parent'),
312+
],
313+
use_container: true,
314+
is_fluid: true,
315+
template_column_count: 2,
316+
column_attributes: 'data-story-total-columns="2"',
317+
});
318+
319+
html += `<div class="story-container__title">Row utilities</div>`;
320+
321+
html += `<div class="story-container__subtitle">No gutters ${code('.row.row--no-gutters')}</div>`;
322+
cols = ['A', 'B', 'C', 'D', 'E'];
169323
html += CivicThemeGrid({
170324
items: generateItems(cols.length, (i) => placeholder(cols[i - 1])),
171325
column_attributes: `data-story-total-columns="${cols.length}"`,
172-
template_column_count: cols.length,
173-
row_class: 'row row--reverse',
326+
use_container: false,
327+
row_class: 'row row--no-gutters',
174328
});
175329

176-
html += `<div class="story-container__subtitle">Equal column heights by default</div>`;
177-
cols = [`<strong>Content should not fill - height is not 100%.</strong> ${randomSentence(5, 'A')}`, randomSentence(30, 'B'), randomSentence(5, 'C'), randomSentence(5, 'D')];
330+
html += `<div class="story-container__subtitle">No gutters within container ${code('.container > .row.row--no-gutters')}</div>`;
331+
cols = ['A', 'B', 'C', 'D', 'E'];
332+
html += CivicThemeGrid({
333+
items: generateItems(cols.length, (i) => placeholder(cols[i - 1])),
334+
column_attributes: `data-story-total-columns="${cols.length}"`,
335+
use_container: true,
336+
is_fluid: false,
337+
row_class: 'row row--no-gutters',
338+
});
339+
340+
html += `<div class="story-container__subtitle">No gutters within fluid container ${code('.container-fluid > .row.row--no-gutters')}</div>`;
341+
cols = ['A', 'B', 'C', 'D', 'E'];
342+
html += CivicThemeGrid({
343+
items: generateItems(cols.length, (i) => placeholder(cols[i - 1])),
344+
column_attributes: `data-story-total-columns="${cols.length}"`,
345+
use_container: true,
346+
is_fluid: true,
347+
row_class: 'row row--no-gutters',
348+
});
349+
350+
html += `<div class="story-container__subtitle">Reversed columns ${code('.row.row--reverse')}</div>`;
351+
cols = ['A', 'B', 'C', 'D'];
178352
html += CivicThemeGrid({
179353
items: generateItems(cols.length, (i) => placeholder(cols[i - 1])),
180354
column_attributes: `data-story-total-columns="${cols.length}"`,
181355
template_column_count: cols.length,
356+
row_class: 'row row--reverse',
182357
});
183358

184-
html += `<div class="story-container__subtitle">Equal column heights by default - Auto column</div>`;
359+
html += `<div class="story-container__subtitle">Equal column heights by default</div>`;
185360
cols = [`<strong>Content should not fill - height is not 100%.</strong> ${randomSentence(5, 'A')}`, randomSentence(30, 'B'), randomSentence(5, 'C'), randomSentence(5, 'D')];
186361
html += CivicThemeGrid({
187362
items: generateItems(cols.length, (i) => placeholder(cols[i - 1])),
188363
column_attributes: `data-story-total-columns="${cols.length}"`,
364+
template_column_count: cols.length,
189365
});
190366

191367
html += `<div class="story-container__subtitle">Equal column heights propagated to content ${code('.row.row--equal-heights-content > .col-[breakpoint]-[column]')}</div>`;

‎components/00-base/mixins/_grid.scss

+12-1
Original file line numberDiff line numberDiff line change
@@ -37,11 +37,22 @@
3737
width: 100%;
3838

3939
// Reset negative row margins which are used to offset column margins.
40-
.row {
40+
> .row {
4141
@each $bp, $value in $ct-breakpoints {
4242
@include ct-breakpoint($bp) {
4343
margin-left: auto;
4444
margin-right: auto;
45+
46+
> .col,
47+
> [class*='col-'] {
48+
&:first-child {
49+
padding-left: 0;
50+
}
51+
52+
&:last-child {
53+
padding-right: 0;
54+
}
55+
}
4556
}
4657
}
4758
}

0 commit comments

Comments
 (0)