Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support row_gutter in IE #919

Merged
merged 4 commits into from
Nov 5, 2018
Merged

Support row_gutter in IE #919

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b71171a
docs: Add pattern lab demos for grid row_gutter and vinset props
remydenton Oct 18, 2018
afbc081
chore: Consolidate existing repeated grid sass using loops
remydenton Oct 18, 2018
4431c61
fix: Add IE support for row_gutter property
remydenton Oct 18, 2018
754802c
docs: Update row numbers in grid demos
remydenton Oct 26, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 55 additions & 0 deletions apps/pattern-lab/src/_patterns/02-components/grid/10-grid-row-gutter-variations.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
{% set schema = bolt.data.components["@bolt-components-grid"].schema %}

{% set row_gutters = schema.properties.row_gutter.enum %}

{% for row_gutter in row_gutters %}
Row Gutter: {{ row_gutter }}

{% include "@bolt-components-grid/grid.twig" with {
vinset: "medium",
row_gutter: row_gutter,
attributes: {
class: [
"t-bolt-light"
]
},
items: [
{
row_start: "2",
column_start: "1",
column_span: "12",
content: "Grid Item 1",
attributes: {
class: [
"t-bolt-dark",
"u-bolt-padding-medium",
]
}
},
{
row_start: "3",
column_start: "1",
column_span: "12",
content: "Grid Item 2",
attributes: {
class: [
"t-bolt-dark",
"u-bolt-padding-medium",
]
}
},
{
row_start: "4",
column_start: "1",
column_span: "12",
content: "Grid Item 3",
attributes: {
class: [
"t-bolt-dark",
"u-bolt-padding-medium",
]
}
},
]
} only %}
{% endfor %}
57 changes: 57 additions & 0 deletions apps/pattern-lab/src/_patterns/02-components/grid/20-grid-vinset-variations.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
{% set schema = bolt.data.components["@bolt-components-grid"].schema %}

{% set vinsets = schema.properties.vinset.enum %}

{% for vinset in vinsets %}
Vinset: {{ vinset }}

{% set starting_row = vinset == 'none' ? 1 : 2 %}

{% include "@bolt-components-grid/grid.twig" with {
vinset: vinset,
row_gutter: "small",
attributes: {
class: [
"t-bolt-light"
]
},
items: [
{
row_start: starting_row,
column_start: "1",
column_span: "12",
content: "Grid Item 1",
attributes: {
class: [
"t-bolt-dark",
"u-bolt-padding-medium",
]
}
},
{
row_start: starting_row + 1,
column_start: "1",
column_span: "12",
content: "Grid Item 2",
attributes: {
class: [
"t-bolt-dark",
"u-bolt-padding-medium",
]
}
},
{
row_start: starting_row + 2,
column_start: "1",
column_span: "12",
content: "Grid Item 3",
attributes: {
class: [
"t-bolt-dark",
"u-bolt-padding-medium",
]
}
},
]
} only %}
{% endfor %}
111 changes: 24 additions & 87 deletions packages/components/bolt-grid/src/grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,102 +32,39 @@ bolt-grid {
}
}

// @todo: refactor to auto-generate sizes here from spacing scale
&[vinset='xlarge'] {
grid-template-rows: minmax(#{bolt-v-spacing(xlarge)}, max-content);
grid-auto-rows: minmax(#{bolt-v-spacing(xlarge)}, max-content);

// temporary workaround for forcing the auto-generated rows before/after the grid to be a minimum height in IE 11
&:before, &:after {
min-height: bolt-v-spacing(xlarge);
}

@supports (grid-auto-rows: auto){
grid-template-rows: auto;
}
}

&[vinset='large'] {
grid-template-rows: minmax(#{bolt-v-spacing(large)}, max-content);
grid-auto-rows: minmax(#{bolt-v-spacing(large)}, max-content);
@each $name, $value in $bolt-spacing-values {
&[vinset='#{$name}'] {
grid-template-rows: minmax(#{bolt-v-spacing(#{$name})}, max-content);
grid-auto-rows: minmax(#{bolt-v-spacing(#{$name})}, max-content);

// temporary workaround for forcing the auto-generated rows before/after the grid to be a minimum height in IE 11
&:before, &:after {
min-height: bolt-v-spacing(large);
}

@supports (grid-auto-rows: auto){
grid-template-rows: auto;
}
}

&[vinset='medium'] {
grid-template-rows: minmax(#{bolt-v-spacing(medium)}, max-content);
grid-auto-rows: minmax(#{bolt-v-spacing(medium)}, max-content);

// temporary workaround for forcing the auto-generated rows before/after the grid to be a minimum height in IE 11
&:before, &:after {
min-height: bolt-v-spacing(medium);
}

@supports (grid-auto-rows: auto){
grid-template-rows: auto;
}
}

&[vinset='small'] {
grid-template-rows: minmax(#{bolt-v-spacing(small)}, max-content);
grid-auto-rows: minmax(#{bolt-v-spacing(small)}, max-content);

// temporary workaround for forcing the auto-generated rows before/after the grid to be a minimum height in IE 11
&:before, &:after {
min-height: bolt-v-spacing(small);
}
// temporary workaround for forcing the auto-generated rows before/after the grid to be a minimum height in IE 11
&:before, &:after {
min-height: bolt-v-spacing(#{$name});
}

@supports (grid-auto-rows: auto){
grid-template-rows: auto;
@supports (grid-auto-rows: auto) {
grid-template-rows: auto;
}
}
}

&[vinset='xsmall'] {
grid-template-rows: minmax(#{bolt-v-spacing(xsmall)}, max-content);
grid-auto-rows: minmax(#{bolt-v-spacing(xsmall)}, max-content);
&[row-gutter='#{$name}'] {
// Use margin to replicate grid-row-gap when not natively supported by the browser.
&:before,
> bolt-grid-item {
@include bolt-margin-bottom(#{$name});

// temporary workaround for forcing the auto-generated rows before/after the grid to be a minimum height in IE 11
&:before, &:after {
min-height: bolt-v-spacing(xsmall);
}
@supports (grid-row-gap: 1px) {
// When grid-row-gap is natively supported, reset this workaround.
@include bolt-margin-bottom(0);
}
}

@supports (grid-auto-rows: auto){
grid-template-rows: auto;
@supports (grid-row-gap: 1px) {
grid-row-gap: bolt-v-spacing(#{$name});
}
}
}


// @todo: refactor to auto-generate sizes here from spacing scale -- same as above ^
&[row-gutter='xlarge']{
grid-row-gap: bolt-v-spacing(xlarge);
}

&[row-gutter='large']{
grid-row-gap: bolt-v-spacing(large);
}

&[row-gutter='medium']{
grid-row-gap: bolt-v-spacing(medium);
}

&[row-gutter='small']{
grid-row-gap: bolt-v-spacing(small);
}

&[row-gutter='xsmall']{
grid-row-gap: bolt-v-spacing(xsmall);
}

&[row-gutter='xxsmall']{
grid-row-gap: bolt-v-spacing(xxsmall);
}
}


Expand Down