diff --git a/CHANGELOG.md b/CHANGELOG.md index 078f4af1d..996b44fab 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,13 @@ +## 0.5.1 + +### Added +- `.grid-full` for opt-in to 26 column system +- Block groups to 8 up + +### Modified +- Default grid behavior centers column-24 on large screen sizes +- Changed edge padding back to .04vw from 0.01.vw + ## 0.5.0 ### Added diff --git a/lib/sass/calcite-web/base/_config.scss b/lib/sass/calcite-web/base/_config.scss index f345e6e56..eeb6a3abf 100644 --- a/lib/sass/calcite-web/base/_config.scss +++ b/lib/sass/calcite-web/base/_config.scss @@ -38,7 +38,7 @@ $large: 1450px !default; // └────────────────────┘ // ↳ http://esri.github.io/calcite-web/grid/#configuration // ↳ grid → _configuration.md -$vw-ratio: 0.98; +$vw-ratio: 0.95; $container-width: $vw-ratio * 100vw !default; $column-gutter: 1rem !default; diff --git a/lib/sass/calcite-web/grid/_block-groups.scss b/lib/sass/calcite-web/grid/_block-groups.scss index ad2703076..fb89e056c 100644 --- a/lib/sass/calcite-web/grid/_block-groups.scss +++ b/lib/sass/calcite-web/grid/_block-groups.scss @@ -35,6 +35,9 @@ .#{$prefix}block-group-3-up .block { width: 33.33333%; } .#{$prefix}block-group-4-up .block { width: 25%; } .#{$prefix}block-group-5-up .block { width: 20%; } + .#{$prefix}block-group-6-up .block { width: 16.66666%; } + .#{$prefix}block-group-7-up .block { width: 14.28570%; } + .#{$prefix}block-group-8-up .block { width: 12.5%; } } // ┌─────────────────────────┐ diff --git a/lib/sass/calcite-web/grid/_columns.scss b/lib/sass/calcite-web/grid/_columns.scss index cb23c4564..acbdb1bd1 100644 --- a/lib/sass/calcite-web/grid/_columns.scss +++ b/lib/sass/calcite-web/grid/_columns.scss @@ -11,6 +11,7 @@ padding-left: 0; margin-right: auto; margin-left: auto; + box-sizing: border-box; } // ┌─────────┐ @@ -160,6 +161,20 @@ @include grid-container(); } + @media screen and (min-width: $large) { + .grid-container { + $diff: $large-column-count - $default-column-count; + $side: $diff / 2; + $margin: $side / $large-column-count * $container-width; + padding-left: $margin; + padding-right: $margin; + } + .grid-full { + padding-left: 0; + padding-right: 0; + } + } + [class*="column-"] { @include column-base(); } diff --git a/package.json b/package.json index 1ae21a70c..ce2a3e752 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "calcite-web", - "version": "0.5.0", + "version": "0.5.1", "description": "SASS & CSS Framework for Esri websites", "private": true, "homepage": "https://github.com/esri/calcite-web",