From b71171af3eee1ab55fb9e86ea8cc43c263547a65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9my=20Denton?= Date: Thu, 18 Oct 2018 06:16:01 -0700 Subject: [PATCH 1/4] docs: Add pattern lab demos for grid row_gutter and vinset props --- .../grid/10-grid-row-gutter-variations.twig | 55 +++++++++++++++++++ .../grid/20-grid-vinset-variations.twig | 55 +++++++++++++++++++ 2 files changed, 110 insertions(+) create mode 100644 apps/pattern-lab/src/_patterns/02-components/grid/10-grid-row-gutter-variations.twig create mode 100644 apps/pattern-lab/src/_patterns/02-components/grid/20-grid-vinset-variations.twig diff --git a/apps/pattern-lab/src/_patterns/02-components/grid/10-grid-row-gutter-variations.twig b/apps/pattern-lab/src/_patterns/02-components/grid/10-grid-row-gutter-variations.twig new file mode 100644 index 0000000000..630d89dc04 --- /dev/null +++ b/apps/pattern-lab/src/_patterns/02-components/grid/10-grid-row-gutter-variations.twig @@ -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: "1", + column_start: "1", + column_span: "12", + content: "Grid Item 1", + attributes: { + class: [ + "t-bolt-dark", + "u-bolt-padding-medium", + ] + } + }, + { + row_start: "2", + column_start: "1", + column_span: "12", + content: "Grid Item 2", + attributes: { + class: [ + "t-bolt-dark", + "u-bolt-padding-medium", + ] + } + }, + { + row_start: "3", + column_start: "1", + column_span: "12", + content: "Grid Item 3", + attributes: { + class: [ + "t-bolt-dark", + "u-bolt-padding-medium", + ] + } + }, + ] + } only %} +{% endfor %} diff --git a/apps/pattern-lab/src/_patterns/02-components/grid/20-grid-vinset-variations.twig b/apps/pattern-lab/src/_patterns/02-components/grid/20-grid-vinset-variations.twig new file mode 100644 index 0000000000..232696a952 --- /dev/null +++ b/apps/pattern-lab/src/_patterns/02-components/grid/20-grid-vinset-variations.twig @@ -0,0 +1,55 @@ +{% set schema = bolt.data.components["@bolt-components-grid"].schema %} + +{% set vinsets = schema.properties.vinset.enum %} + +{% for vinset in vinsets %} + Vinset: {{ vinset }} + + {% include "@bolt-components-grid/grid.twig" with { + vinset: vinset, + row_gutter: "small", + attributes: { + class: [ + "t-bolt-light" + ] + }, + items: [ + { + row_start: "1", + column_start: "1", + column_span: "12", + content: "Grid Item 1", + attributes: { + class: [ + "t-bolt-dark", + "u-bolt-padding-medium", + ] + } + }, + { + row_start: "2", + column_start: "1", + column_span: "12", + content: "Grid Item 2", + attributes: { + class: [ + "t-bolt-dark", + "u-bolt-padding-medium", + ] + } + }, + { + row_start: "3", + column_start: "1", + column_span: "12", + content: "Grid Item 3", + attributes: { + class: [ + "t-bolt-dark", + "u-bolt-padding-medium", + ] + } + }, + ] + } only %} +{% endfor %} From afbc0810c331585ccd1a33970a67cd65a9a35947 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9my=20Denton?= Date: Thu, 18 Oct 2018 06:17:42 -0700 Subject: [PATCH 2/4] chore: Consolidate existing repeated grid sass using loops --- packages/components/bolt-grid/src/grid.scss | 102 +++----------------- 1 file changed, 13 insertions(+), 89 deletions(-) diff --git a/packages/components/bolt-grid/src/grid.scss b/packages/components/bolt-grid/src/grid.scss index d5531037ff..4970ee5769 100644 --- a/packages/components/bolt-grid/src/grid.scss +++ b/packages/components/bolt-grid/src/grid.scss @@ -32,102 +32,26 @@ 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); - - // 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); - } + @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); - @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); + // 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}); + } - // 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-auto-rows: auto) { + grid-template-rows: auto; + } } - @supports (grid-auto-rows: auto){ - grid-template-rows: auto; + &[row-gutter='#{$name}'] { + 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); - } } From 4431c61728a286b1a861cb4aa08c35cb1431b9b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9my=20Denton?= Date: Thu, 18 Oct 2018 06:53:51 -0700 Subject: [PATCH 3/4] fix: Add IE support for row_gutter property --- packages/components/bolt-grid/src/grid.scss | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/components/bolt-grid/src/grid.scss b/packages/components/bolt-grid/src/grid.scss index 4970ee5769..3f5d4bd017 100644 --- a/packages/components/bolt-grid/src/grid.scss +++ b/packages/components/bolt-grid/src/grid.scss @@ -49,7 +49,20 @@ bolt-grid { } &[row-gutter='#{$name}'] { - grid-row-gap: bolt-v-spacing(#{$name}); + // Use margin to replicate grid-row-gap when not natively supported by the browser. + &:before, + > bolt-grid-item { + @include bolt-margin-bottom(#{$name}); + + @supports (grid-row-gap: 1px) { + // When grid-row-gap is natively supported, reset this workaround. + @include bolt-margin-bottom(0); + } + } + + @supports (grid-row-gap: 1px) { + grid-row-gap: bolt-v-spacing(#{$name}); + } } } } From 754802caa5460f70228bcc729d7b3667b9282b9e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9my=20Denton?= Date: Fri, 26 Oct 2018 13:58:33 -0700 Subject: [PATCH 4/4] docs: Update row numbers in grid demos --- .../02-components/grid/10-grid-row-gutter-variations.twig | 6 +++--- .../02-components/grid/20-grid-vinset-variations.twig | 8 +++++--- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/apps/pattern-lab/src/_patterns/02-components/grid/10-grid-row-gutter-variations.twig b/apps/pattern-lab/src/_patterns/02-components/grid/10-grid-row-gutter-variations.twig index 630d89dc04..4fcce34579 100644 --- a/apps/pattern-lab/src/_patterns/02-components/grid/10-grid-row-gutter-variations.twig +++ b/apps/pattern-lab/src/_patterns/02-components/grid/10-grid-row-gutter-variations.twig @@ -15,7 +15,7 @@ }, items: [ { - row_start: "1", + row_start: "2", column_start: "1", column_span: "12", content: "Grid Item 1", @@ -27,7 +27,7 @@ } }, { - row_start: "2", + row_start: "3", column_start: "1", column_span: "12", content: "Grid Item 2", @@ -39,7 +39,7 @@ } }, { - row_start: "3", + row_start: "4", column_start: "1", column_span: "12", content: "Grid Item 3", diff --git a/apps/pattern-lab/src/_patterns/02-components/grid/20-grid-vinset-variations.twig b/apps/pattern-lab/src/_patterns/02-components/grid/20-grid-vinset-variations.twig index 232696a952..155f340e63 100644 --- a/apps/pattern-lab/src/_patterns/02-components/grid/20-grid-vinset-variations.twig +++ b/apps/pattern-lab/src/_patterns/02-components/grid/20-grid-vinset-variations.twig @@ -5,6 +5,8 @@ {% 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", @@ -15,7 +17,7 @@ }, items: [ { - row_start: "1", + row_start: starting_row, column_start: "1", column_span: "12", content: "Grid Item 1", @@ -27,7 +29,7 @@ } }, { - row_start: "2", + row_start: starting_row + 1, column_start: "1", column_span: "12", content: "Grid Item 2", @@ -39,7 +41,7 @@ } }, { - row_start: "3", + row_start: starting_row + 2, column_start: "1", column_span: "12", content: "Grid Item 3",