From 441a043d0cb1f0a95cb52b590605da64dfe90604 Mon Sep 17 00:00:00 2001 From: James Y Rauhut Date: Mon, 30 Apr 2018 13:03:29 -0500 Subject: [PATCH 1/2] feat(css): minimal css file for native css grid sizing (#38) --- README.md | 36 ++-- examples/bootstrap/css-gridish/README.md | 87 ++++---- .../css-gridish/bootstrap-grid.sketch | Bin 3161 -> 3161 bytes .../css/bootstrap-grid-minimal.css | 127 +++++++++++ .../css/bootstrap-grid-minimal.min.css | 1 + .../bootstrap/css-gridish/scss/_core.scss | 10 +- .../css-gridish/scss/_variables.scss | 1 + .../scss/bootstrap-grid-minimal.scss | 3 + examples/carbon/css-gridish/README.md | 87 ++++---- examples/carbon/css-gridish/bx-grid.sketch | Bin 3234 -> 3234 bytes .../css-gridish/css/bx-grid-minimal.css | 204 ++++++++++++++++++ .../css-gridish/css/bx-grid-minimal.min.css | 1 + examples/carbon/css-gridish/scss/_core.scss | 10 +- .../carbon/css-gridish/scss/_variables.scss | 1 + .../css-gridish/scss/bx-grid-minimal.scss | 3 + examples/material/css-gridish/README.md | 91 ++++---- .../css-gridish/css/material-grid-minimal.css | 179 +++++++++++++++ .../css/material-grid-minimal.min.css | 1 + .../material/css-gridish/material-grid.sketch | Bin 3238 -> 3238 bytes examples/material/css-gridish/scss/_core.scss | 10 +- .../material/css-gridish/scss/_variables.scss | 1 + .../scss/material-grid-minimal.scss | 3 + src/docs/README.md.hbs | 91 ++++---- src/index.js | 27 ++- src/scss/_core.scss | 10 +- src/scss/_variables.scss | 1 + src/scss/gridish-grid-minimal.scss | 3 + 27 files changed, 790 insertions(+), 198 deletions(-) create mode 100644 examples/bootstrap/css-gridish/css/bootstrap-grid-minimal.css create mode 100644 examples/bootstrap/css-gridish/css/bootstrap-grid-minimal.min.css create mode 100644 examples/bootstrap/css-gridish/scss/bootstrap-grid-minimal.scss create mode 100644 examples/carbon/css-gridish/css/bx-grid-minimal.css create mode 100644 examples/carbon/css-gridish/css/bx-grid-minimal.min.css create mode 100644 examples/carbon/css-gridish/scss/bx-grid-minimal.scss create mode 100644 examples/material/css-gridish/css/material-grid-minimal.css create mode 100644 examples/material/css-gridish/css/material-grid-minimal.min.css create mode 100644 examples/material/css-gridish/scss/material-grid-minimal.scss create mode 100644 src/scss/gridish-grid-minimal.scss diff --git a/README.md b/README.md index 73eb86a..d23e009 100644 --- a/README.md +++ b/README.md @@ -18,13 +18,13 @@ The truth is that many enterprise projects can’t afford to drop support for br Requires [Node v8.2.0](https://nodejs.org/en/) or higher, which includes npm and npx. -1. Create a file called `css-gridish.json` in your project root. See the [config documentation](#config-file) or an [example config](./examples/material/css-gridish.json) for help. -2. Determine how you want your grid built: - * If you want to build once, run command `npx css-gridish`. - * If you want to add the grid building to your project’s build process: - 1. Run command `npm install css-gridish`. - 2. Add `scripts: {build: "css-gridish"}` in your `package.json`. - 3. Run command `npm run build`. +1. Create a file called `css-gridish.json` in your project root. See the [config documentation](#config-file) or an [example config](./examples/material/css-gridish.json) for help. +2. Determine how you want your grid built: + * If you want to build once, run command `npx css-gridish`. + * If you want to add the grid building to your project’s build process: + 1. Run command `npm install css-gridish`. + 2. Add `scripts: {build: "css-gridish"}` in your `package.json`. + 3. Run command `npm run build`. Your CSS and `README.md` with class documentation will be built into `./css-gridish/`. @@ -92,7 +92,7 @@ $extraBreakpoints: ( ### Transitioning from Legacy -Once your experience can drop support for browsers like IE 11 and Edge <15, you can simply remove all legacy classes and switch over to the non-legacy files. This is a great progressive-enhancement for your performance when it happens. +Once your experience can drop support for browsers like IE 11 and Edge <15, you can simply switch over to the non-legacy files. This is a great progressive-enhancement for your performance when it happens. A minimal file is also included for when you use native CSS Grid rules instead of our column and row classes. ## Future Updates @@ -105,18 +105,22 @@ Once your experience can drop support for browsers like IE 11 and Edge <15, you A lot of times, you will want an item to break out of the gutters for background color, to extend media, or for another reason. Until the CSS Grid spec has a way to ignore that gutter, we use the padding classes (`.yourGrid-padding`) to opt-in to respecting the gutter. The padding classes are always half the size of a gutter for alignment. -### Why are columns using vw units and sometimes the calc function? +### Why is the legacy version using Flexbox instead of the `-ms` prefix use of CSS Grid? -Until Edge and Safari support -[`display: subgrid`](https://developer.mozilla.org/en-US/docs/Web/CSS/display#Browser_compatibility), -it will be difficult for you to write semantic HTML with CSS Grid Layout. We are -able to take advantage of vw units and the calc function so you can embed your -`.yourPrefix-grid` class inside of itself as much that is needed for you. +The biggest reason is due to the lack of auto-placement when using that prefix. See more details about difference in the `-ms` prefix in [this blog post.](https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/) -### Why are there no row classes for the legacy implementation? +### Why are there no grouping row classes needed? Thanks to flexbox’s wrapping functionality, nodes that specify rows are not necessary. Only create a node for a row if it has semantic or accessibility significance. You can keep embedding `.yourPrefix-grid` as necessary to accomplish this. -### What happens in the legacy implementation if I specify the column width for one breakpoint, but not the next larger breakpoint? +### What happens if I specify the column class for one breakpoint, but not the column class for the next breakpoint? To maintain a mobile-first opinion, column widths will scale to the next breakpoint if not specified. This means that a `.yourPrefix__col--sm--3` (with 6 total columns) would automatically grow into a `.yourPrefix__col--md--6` (with 12 total columns) if no `md` class was declared to maintain half of the screen size. + +### Why are columns using vw units and sometimes the calc function? + +Until Edge and Safari support +[`display: subgrid`](https://developer.mozilla.org/en-US/docs/Web/CSS/display#Browser_compatibility), +it will be difficult for you to write semantic HTML with CSS Grid Layout. We are +able to take advantage of vw units and the calc function so you can embed your +`.yourPrefix-grid` class inside of itself as much that is needed for you. diff --git a/examples/bootstrap/css-gridish/README.md b/examples/bootstrap/css-gridish/README.md index b25bc0e..985a9ee 100755 --- a/examples/bootstrap/css-gridish/README.md +++ b/examples/bootstrap/css-gridish/README.md @@ -4,12 +4,12 @@ An example of [CSS Gridish](../../../README.md) generating CSS Grid code, fallba This grid was bootstrapped using [CSS Gridish](https://github.com/ibm/css-gridish). It includes: - CSS Grid Layout code with a Flexbox fallback in CSS and SCSS -- Sketch file with artboards +- Sketch design file with artboards - Config file (`css-gridish.json`) to review webpages with the [CSS Gridish Chrome Extension](https://chrome.google.com/webstore/detail/css-gridish/ebhcneoilkamaddhlphlehojpcooobgc) ## Sketch Artboards and Chrome Extension -The Sketch file can be found above in the list of files titled `bootstrap-grid.sketch`. It includes both grid (CTRL+G) and layout (CTRL+L) settings. +The Sketch design file can be found above in the list of files titled `bootstrap-grid.sketch`. It includes both grid (CTRL+G) and layout (CTRL+L) settings. The Chrome extension uses the same shortcuts. To set the extension up: @@ -17,21 +17,19 @@ The Chrome extension uses the same shortcuts. To set the extension up: 2. Download the `css-gridish.json` file in this project 3. Open the CSS Gridish menu in your Chrome toolbar and upload your `css-gridish.json` file -## Legacy Support +## Files -If you have no need to support browsers like IE 11 and Edge <15, please use `css/bootstrap-grid.min.css`. This will omit the CSS Flexbox fallback from your code. +There are three CSS files to choose from based on what browser support you want and whether you will use native CSS Grid rules or our provided classes: -If you are supporting browsers that lack [CSS Grid Layout support](https://developer.mozilla.org/en-US/docs/Web/CSS/grid#Browser_compatibility), you can use `css/bootstrap-grid-legacy.min.css` and the legacy classes below. With the legacy file, the browsers that do not support the final CSS Grid Legacy spec will fallback to a flexbox alternative. The flexbox alternative supports embedded subgrids that still reflect the overall grid system’s column structure. - -### Transitioning from Legacy - -Once your experience can drop support for IE 11 and Edge <15, you can simply remove all legacy classes and switch over to `css/bootstrap-grid.min.css`. +| Filename | When to Use | +| ---------- | ----------------- | +| `css/bootstrap-grid-legacy.min.css` | To also support browsers that do not have [CSS Grid Layout support](https://developer.mozilla.org/en-US/docs/Web/CSS/grid#Browser_compatibility) (IE 11 and Edge <15) with a reliable Flexbox fallback | +| `css/bootstrap-grid.min.css` | To only support browsers with [CSS Grid Layout support](https://developer.mozilla.org/en-US/docs/Web/CSS/grid#Browser_compatibility) | +| `css/bootstrap-grid-minimal.min.css` | To only support browsers with [CSS Grid Layout support](https://developer.mozilla.org/en-US/docs/Web/CSS/grid#Browser_compatibility), but not use any generated column or height classes | ## Breakpoints -There are currently 2 breakpoints where the design specs change for our -grid. The great thing about CSS Grid Layout is that you can rearrange your -layout at any custom breakpoint between those: +A breakpoint is where the number of columns or another value changes using a media query. There are currently 2 breakpoints where the design specs change for our grid. The great thing about CSS Grid Layout is that you can rearrange your layout at any custom breakpoint between those: | Breakpoint | Number of Columns | Width | Value | | ---------- | ----------------- | ------- | ------ | @@ -60,28 +58,35 @@ The example above will create all legacy classes for your custom breakpoints lik If you are new to CSS Grid, please try [learning the basics](https://www.google.com/search?q=css+grid+tutorials&oq=css+grid+tutorials) before using this. For the most part, you will only have to use `grid-column` and `grid-row` with the following classes: -| Class Name | Purpose | -| ----------------------------------------- | ------------------------------------------------------------------------------------------ | -| `.bootstrap-container` | Container element of whole page for proper margin and max-width (can be used on body tag ) | -| `.bootstrap-container--[left, right]` | Align the container element to the left or right side | -| `.bootstrap-container__bleed--[sm]` | Extend the background color of a container child into the container margin on both sides starting at a specific breakpoint (CSS Grid browsers only) | -| `.bootstrap-container__bleed--[sm]--[left, right]` | Extend the background color of a grid into the container margin on one side at a specific breakpoint (CSS Grid browsers only) | -| `.bootstrap-container__break--[sm]` | Child of container element should ignore grid’s margin at a specific breakpoint (CSS Grid browsers only) | -| `.bootstrap-container__break--[sm]--[left, right]` | Child of container element should ignore grid’s margin on one side at a specific breakpoint (CSS Grid browsers only) | -| `.bootstrap-grid` | Use anytime you want to apply CSS Grid Layout, including as embedded subgrids | -| `.bootstrap-grid--fixed-columns` | Switch grid’s column widths to fixed instead of fluid | -| `.bootstrap-grid--fluid-rows` | Switch grid’s row height to match the width of a column | -| `.bootstrap-padding` | Add one unit of padding to element on all sides | -| `.bootstrap-padding--[bottom, left, right, top]` | Add one unit of padding to element on one side | -| `.bootstrap-padding--[horizontal, vertical]` | Add one unit of padding to element on two sides | -| `.bootstrap-grid__col--sm--[1-12]` | Set the width out of 12 columns for an item in the grid starting at the sm breakpoint | -| `.bootstrap-grid__col--[sm]--0` | Do not display item at a specific breakpoint, but display at the next breakpoint with columns specified | -| `.bootstrap-grid__col--[sm]--0--only` | Do not display item only at specific breakpoint | -| `.bootstrap-grid__height--[sm]--[1-30]` | Set the min-height based on an interval of 15px for an item starting at the breakpoint specified | -| `.bootstrap-grid__height--[sm]--0` | Reset the min-height for an item starting at the specified breakpoint | +| Class Name | Purpose | Child? | +| ---------- | ------- | ------ | +| `.bootstrap-container` | Container element of whole page for proper margin and max-width (can be used on body tag). You need to use `.bootstrap-grid` on this same element. | No | +| `.bootstrap-container--[left, right]` | Align the container element to the left or right side | | +| `.bootstrap-container__bleed--[sm]` | Extend the background color of a container child into the container margin on both sides starting at a specific breakpoint (CSS Grid browsers only) | Child of `.bootstrap-container` | +| `.bootstrap-container__bleed--[sm]--[left, right]` | Extend the background color of a grid into the container margin on one side at a specific breakpoint (CSS Grid browsers only) | Child of `.bootstrap-container` | +| `.bootstrap-container__break--[sm]` |Ignore container’s margin at a specific breakpoint (CSS Grid browsers only) | Child of `.bootstrap-container` | +| `.bootstrap-container__break--[sm]--[left, right]` | Ignore container’s margin on one side at a specific breakpoint (CSS Grid browsers only) | Child of `.bootstrap-container` | +| `.bootstrap-grid` | Use anytime you want to apply CSS Grid Layout, including as embedded subgrids | Peer of `.bootstrap-container` or direct child of another `.bootstrap-grid` | +| `.bootstrap-grid--fixed-columns` | Switch grid’s column widths to fixed instead of fluid | | +| `.bootstrap-grid--fluid-rows` | Switch grid’s row height to match the width of a column | | +| `.bootstrap-padding` | Add one unit of padding to element on all sides | Child of `.bootstrap-grid` | +| `.bootstrap-padding--[bottom, left, right, top]` | Add one unit of padding to element on one side | Child of `.bootstrap-grid` | +| `.bootstrap-padding--[horizontal, vertical]` | Add one unit of padding to element on two sides | Child of `.bootstrap-grid` | By default, the grid code uses fluid columns and fixed rows. You can switch both aspects with `.bootstrap-grid--fixed-columns` and `.bootstrap-grid--fluid-rows`. When switching to fluid rows, the rows will scale across breakpoints just like `col` classes and only supports quantities up to the amount of columns in that breakpoint. +## Optional Classes + +The following classes are included in `css/bootstrap-grid.min.css` and `css/bootstrap-grid-legacy.min.css`. For the minimal file, you would instead use native CSS Grid rules as needed. + +| Class Name | Purpose | Child? | +| ---------- | ------- | ------ | +| `.bootstrap-grid__col--sm--[1-12]` | Set the width out of 12 columns for an item in the grid starting at the sm breakpoint | Child of `.bootstrap-grid` | +| `.bootstrap-grid__col--[sm]--0` | Do not display item at a specific breakpoint, but display at the next breakpoint with columns specified | Child of `.bootstrap-grid` | +| `.bootstrap-grid__col--[sm]--0--only` | Do not display item only at specific breakpoint | Child of `.bootstrap-grid` | +| `.bootstrap-grid__height--[sm]--[1-30]` | Set the min-height based on an interval of 15px for an item starting at the breakpoint specified | Child of `.bootstrap-grid` | +| `.bootstrap-grid__height--[sm]--0` | Reset the min-height for an item starting at the specified breakpoint | Child of `.bootstrap-grid` | + If you follow the instructions above for custom breakpoints, all of the `col` and `height` classes will generate with a version for each custom breakpoint too. For example, adding the custom breakpoint of `whateversize` will create `.bootstrap-grid__col--whateversize--1`. Since that custom breakpoint is right after the previous breakpoint, it will have the same amount of columns and min-height. ## Variables @@ -184,22 +189,22 @@ button { A lot of times, you will want an item to break out of the gutters for background color, to extend media, or for another reason. Until the CSS Grid spec has a way to ignore that gutter, we use the padding classes (`.bootstrap-padding`) to opt-in to respecting the gutter. The padding classes are always half the size of a gutter for alignment. -### Why is the fallback using flexbox instead of the `-ms` prefix use of CSS Grid? +### Why is the legacy version using Flexbox instead of the `-ms` prefix use of CSS Grid? The biggest reason is due to the lack of auto-placement when using that prefix. See more details about difference in the `-ms` prefix in [this blog post.](https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/) +### Why are there no grouping row classes needed? + +Thanks to flexbox’s wrapping functionality, nodes that specify rows are not necessary. Only create a node for a row if it has semantic or accessibility significance. You can keep embedding `.bootstrap-grid` as necessary to accomplish this. + +### What happens if I specify the column class for one breakpoint, but not the column class for the next breakpoint? + +To maintain a mobile-first opinion, column widths will scale to the next breakpoint if not specified. This means that a `.bootstrap-grid__col--sm--1` be the size of `.bootstrap-grid__col----2` if no `` class was declared. + ### Why are columns using vw units and sometimes the calc function? Until Edge and Safari support [`display: subgrid`](https://developer.mozilla.org/en-US/docs/Web/CSS/display#Browser_compatibility), it is difficult for you to write semantic HTML with CSS Grid Layout. We are able to take advantage of vw units and the calc function so you can embed -`.bootstrap-grid` elements inside of each other and still respect the overall grid design. - -### Why are there no grouping row classes needed? - -Thanks to flexbox’s wrapping functionality, nodes that specify rows are not necessary. Only create a node for a row if it has semantic or accessibility significance. You can keep embedding `.bootstrap-grid` as necessary to accomplish this. - -### What happens in the legacy implementation if I specify the column width for one breakpoint, but not the next larger breakpoint? - -To maintain a mobile-first opinion, column widths will scale to the next breakpoint if not specified. This means that a `.bootstrap-grid__col--sm--1` be the size of `.bootstrap-grid__col----2` if no `` class was declared. \ No newline at end of file +`.bootstrap-grid` elements inside of each other and still respect the overall grid design. \ No newline at end of file diff --git a/examples/bootstrap/css-gridish/bootstrap-grid.sketch b/examples/bootstrap/css-gridish/bootstrap-grid.sketch index f27676dd67a6b1a7f60f3d03457e77356c9668fe..5c626380a6f92c0fd3b39b3fffe41a3857b30ad2 100644 GIT binary patch delta 129 zcmca9aZ`dfz?+#xgn@yBgMlMr=0@IjMrI(rc{*bam@!$5SrH^K*@{^OOeZpL11peX rQDFfy966$yz%ui>EWq?FE)y^<$ZZIwUAZCr8YsP)I|?i=z~c!3YJwtA delta 129 zcmca9aZ`dfz?+#xgn@yBgW*N)^o_jjjLblK^K`} * { + box-sizing: border-box; } + .bootstrap-grid > * :last-child, + .bootstrap-grid > * :last-child > :last-child, + .bootstrap-grid > * :last-child > :last-child > :last-child { + margin-bottom: 0; } + +[class*="bootstrap-padding"] { + box-sizing: border-box; } + +@supports (display: grid) { + .bootstrap-grid > * { + height: 100%; } } + +:root { + --bootstrap-height-1: 1rem; + --bootstrap-height-2: 2rem; + --bootstrap-height-3: 3rem; + --bootstrap-height-4: 4rem; + --bootstrap-height-5: 5rem; + --bootstrap-height-6: 6rem; + --bootstrap-height-7: 7rem; + --bootstrap-height-8: 8rem; + --bootstrap-height-9: 9rem; + --bootstrap-height-10: 10rem; + --bootstrap-height-11: 11rem; + --bootstrap-height-12: 12rem; + --bootstrap-height-13: 13rem; + --bootstrap-height-14: 14rem; + --bootstrap-height-15: 15rem; + --bootstrap-height-16: 16rem; + --bootstrap-height-17: 17rem; + --bootstrap-height-18: 18rem; + --bootstrap-height-19: 19rem; + --bootstrap-height-20: 20rem; + --bootstrap-height-21: 21rem; + --bootstrap-height-22: 22rem; + --bootstrap-height-23: 23rem; + --bootstrap-height-24: 24rem; + --bootstrap-height-25: 25rem; + --bootstrap-height-26: 26rem; + --bootstrap-height-27: 27rem; + --bootstrap-height-28: 28rem; + --bootstrap-height-29: 29rem; } + +.bootstrap-padding { + padding: 15px; } + +.bootstrap-padding--bottom { + padding-bottom: 15px; } + +.bootstrap-padding--left { + padding-left: 15px; } + +.bootstrap-padding--right { + padding-right: 15px; } + +.bootstrap-padding--top { + padding-top: 15px; } + +.bootstrap-padding--horizontal { + padding-left: 15px; + padding-right: 15px; } + +.bootstrap-padding--vertical { + padding-bottom: 15px; + padding-top: 15px; } + +.bootstrap-grid { + grid-auto-rows: minmax(1rem, min-content); + grid-template-columns: repeat(auto-fill, 8.33vw); } + .bootstrap-grid.bootstrap-grid--fixed-columns { + grid-template-columns: repeat(auto-fill, 3rem); } + .bootstrap-grid.bootstrap-grid--fluid-rows { + grid-auto-rows: 8.33vw; } + .bootstrap-grid > * { + grid-column: span 12; } + +@media screen and (min-width: 100rem) { + .bootstrap-padding { + padding: 15px; } + .bootstrap-padding--bottom { + padding-bottom: 15px; } + .bootstrap-padding--left { + padding-left: 15px; } + .bootstrap-padding--right { + padding-right: 15px; } + .bootstrap-padding--top { + padding-top: 15px; } + .bootstrap-padding--horizontal { + padding-left: 15px; + padding-right: 15px; } + .bootstrap-padding--vertical { + padding-bottom: 15px; + padding-top: 15px; } + .bootstrap-grid { + grid-template-columns: repeat(auto-fill, 8.33rem); } + .bootstrap-grid.bootstrap-grid--fixed-columns { + grid-template-columns: repeat(auto-fill, 8.33333rem); } + .bootstrap-grid.bootstrap-grid--fluid-rows { + grid-auto-rows: 8.33rem; } } diff --git a/examples/bootstrap/css-gridish/css/bootstrap-grid-minimal.min.css b/examples/bootstrap/css-gridish/css/bootstrap-grid-minimal.min.css new file mode 100644 index 0000000..7ee28e1 --- /dev/null +++ b/examples/bootstrap/css-gridish/css/bootstrap-grid-minimal.min.css @@ -0,0 +1 @@ +html{font-size:15px}body{margin:0}.bootstrap-container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:100rem;overflow-x:hidden;width:100vw}.bootstrap-container--left{margin-left:0}.bootstrap-container--right{margin-right:0}.bootstrap-grid{align-items:flex-start;box-sizing:border-box;display:grid;flex-wrap:wrap;position:relative;grid-auto-rows:minmax(1rem,min-content);grid-template-columns:repeat(auto-fill,8.33vw)}.bootstrap-grid>*{box-sizing:border-box;grid-column:span 12}.bootstrap-grid>* :last-child,.bootstrap-grid>* :last-child>:last-child,.bootstrap-grid>* :last-child>:last-child>:last-child{margin-bottom:0}[class*=bootstrap-padding]{box-sizing:border-box}@supports (display:grid){.bootstrap-grid>*{height:100%}}:root{--bootstrap-height-1:1rem;--bootstrap-height-2:2rem;--bootstrap-height-3:3rem;--bootstrap-height-4:4rem;--bootstrap-height-5:5rem;--bootstrap-height-6:6rem;--bootstrap-height-7:7rem;--bootstrap-height-8:8rem;--bootstrap-height-9:9rem;--bootstrap-height-10:10rem;--bootstrap-height-11:11rem;--bootstrap-height-12:12rem;--bootstrap-height-13:13rem;--bootstrap-height-14:14rem;--bootstrap-height-15:15rem;--bootstrap-height-16:16rem;--bootstrap-height-17:17rem;--bootstrap-height-18:18rem;--bootstrap-height-19:19rem;--bootstrap-height-20:20rem;--bootstrap-height-21:21rem;--bootstrap-height-22:22rem;--bootstrap-height-23:23rem;--bootstrap-height-24:24rem;--bootstrap-height-25:25rem;--bootstrap-height-26:26rem;--bootstrap-height-27:27rem;--bootstrap-height-28:28rem;--bootstrap-height-29:29rem}.bootstrap-padding{padding:15px}.bootstrap-padding--bottom{padding-bottom:15px}.bootstrap-padding--left{padding-left:15px}.bootstrap-padding--right{padding-right:15px}.bootstrap-padding--top{padding-top:15px}.bootstrap-padding--horizontal{padding-left:15px;padding-right:15px}.bootstrap-padding--vertical{padding-bottom:15px;padding-top:15px}.bootstrap-grid.bootstrap-grid--fixed-columns{grid-template-columns:repeat(auto-fill,3rem)}.bootstrap-grid.bootstrap-grid--fluid-rows{grid-auto-rows:8.33vw}@media screen and (min-width:100rem){.bootstrap-padding{padding:15px}.bootstrap-padding--bottom{padding-bottom:15px}.bootstrap-padding--left{padding-left:15px}.bootstrap-padding--right{padding-right:15px}.bootstrap-padding--top{padding-top:15px}.bootstrap-padding--horizontal{padding-left:15px;padding-right:15px}.bootstrap-padding--vertical{padding-bottom:15px;padding-top:15px}.bootstrap-grid{grid-template-columns:repeat(auto-fill,8.33rem)}.bootstrap-grid.bootstrap-grid--fixed-columns{grid-template-columns:repeat(auto-fill,8.33333rem)}.bootstrap-grid.bootstrap-grid--fluid-rows{grid-auto-rows:8.33rem}} \ No newline at end of file diff --git a/examples/bootstrap/css-gridish/scss/_core.scss b/examples/bootstrap/css-gridish/scss/_core.scss index 0df8cfd..502bee9 100755 --- a/examples/bootstrap/css-gridish/scss/_core.scss +++ b/examples/bootstrap/css-gridish/scss/_core.scss @@ -85,13 +85,17 @@ body { @each $name, $breakpoint in $allBreakpoints { @include media-query($name) { - @if is-same-breakpoint($breakpoint, $last) == false { + @if is-same-breakpoint($breakpoint, $last) == false and $minimal == false { @include grid-legacy-heights($name); } - @include grid-legacy-zeros($breakpoint, $name); + @if $minimal == false { + @include grid-legacy-zeros($breakpoint, $name); + } @include grid-padding($breakpoint); @include grid($breakpoint, $name); - @include grid-legacy-columns($breakpoint, $name); + @if $minimal == false { + @include grid-legacy-columns($breakpoint, $name); + } // Wrap all bleed/break classes and css variables in a CSS Grid support query @include grid-legacy-wrapper($includeFlexFallback) { diff --git a/examples/bootstrap/css-gridish/scss/_variables.scss b/examples/bootstrap/css-gridish/scss/_variables.scss index 19b5e36..1863d1e 100755 --- a/examples/bootstrap/css-gridish/scss/_variables.scss +++ b/examples/bootstrap/css-gridish/scss/_variables.scss @@ -9,6 +9,7 @@ $breakpoints: add-padding(map-get($grid-values, "breakpoints")); $first: nth(nth($breakpoints, 1), 2); $last: nth(nth($breakpoints, -1), 2); $includeFlexFallback: false !default; +$minimal: false !default; $rowHeight: map-get($grid-values, "rowHeight"); $rows: map-get($grid-values, "rows"); $extraArtboards: map-get($grid-values, "extraArtboards"); diff --git a/examples/bootstrap/css-gridish/scss/bootstrap-grid-minimal.scss b/examples/bootstrap/css-gridish/scss/bootstrap-grid-minimal.scss new file mode 100644 index 0000000..6826a5e --- /dev/null +++ b/examples/bootstrap/css-gridish/scss/bootstrap-grid-minimal.scss @@ -0,0 +1,3 @@ +$minimal: true; + +@import "core.scss"; diff --git a/examples/carbon/css-gridish/README.md b/examples/carbon/css-gridish/README.md index 845ab77..8b15a7b 100755 --- a/examples/carbon/css-gridish/README.md +++ b/examples/carbon/css-gridish/README.md @@ -4,12 +4,12 @@ An example of [CSS Gridish](../../../README.md) generating CSS Grid code, fallba This grid was bootstrapped using [CSS Gridish](https://github.com/ibm/css-gridish). It includes: - CSS Grid Layout code with a Flexbox fallback in CSS and SCSS -- Sketch file with artboards +- Sketch design file with artboards - Config file (`css-gridish.json`) to review webpages with the [CSS Gridish Chrome Extension](https://chrome.google.com/webstore/detail/css-gridish/ebhcneoilkamaddhlphlehojpcooobgc) ## Sketch Artboards and Chrome Extension -The Sketch file can be found above in the list of files titled `bx-grid.sketch`. It includes both grid (CTRL+G) and layout (CTRL+L) settings. +The Sketch design file can be found above in the list of files titled `bx-grid.sketch`. It includes both grid (CTRL+G) and layout (CTRL+L) settings. The Chrome extension uses the same shortcuts. To set the extension up: @@ -17,21 +17,19 @@ The Chrome extension uses the same shortcuts. To set the extension up: 2. Download the `css-gridish.json` file in this project 3. Open the CSS Gridish menu in your Chrome toolbar and upload your `css-gridish.json` file -## Legacy Support +## Files -If you have no need to support browsers like IE 11 and Edge <15, please use `css/bx-grid.min.css`. This will omit the CSS Flexbox fallback from your code. +There are three CSS files to choose from based on what browser support you want and whether you will use native CSS Grid rules or our provided classes: -If you are supporting browsers that lack [CSS Grid Layout support](https://developer.mozilla.org/en-US/docs/Web/CSS/grid#Browser_compatibility), you can use `css/bx-grid-legacy.min.css` and the legacy classes below. With the legacy file, the browsers that do not support the final CSS Grid Legacy spec will fallback to a flexbox alternative. The flexbox alternative supports embedded subgrids that still reflect the overall grid system’s column structure. - -### Transitioning from Legacy - -Once your experience can drop support for IE 11 and Edge <15, you can simply remove all legacy classes and switch over to `css/bx-grid.min.css`. +| Filename | When to Use | +| ---------- | ----------------- | +| `css/bx-grid-legacy.min.css` | To also support browsers that do not have [CSS Grid Layout support](https://developer.mozilla.org/en-US/docs/Web/CSS/grid#Browser_compatibility) (IE 11 and Edge <15) with a reliable Flexbox fallback | +| `css/bx-grid.min.css` | To only support browsers with [CSS Grid Layout support](https://developer.mozilla.org/en-US/docs/Web/CSS/grid#Browser_compatibility) | +| `css/bx-grid-minimal.min.css` | To only support browsers with [CSS Grid Layout support](https://developer.mozilla.org/en-US/docs/Web/CSS/grid#Browser_compatibility), but not use any generated column or height classes | ## Breakpoints -There are currently 2 breakpoints where the design specs change for our -grid. The great thing about CSS Grid Layout is that you can rearrange your -layout at any custom breakpoint between those: +A breakpoint is where the number of columns or another value changes using a media query. There are currently 2 breakpoints where the design specs change for our grid. The great thing about CSS Grid Layout is that you can rearrange your layout at any custom breakpoint between those: | Breakpoint | Number of Columns | Width | Value | | ---------- | ----------------- | ------- | ------ | @@ -60,28 +58,35 @@ The example above will create all legacy classes for your custom breakpoints lik If you are new to CSS Grid, please try [learning the basics](https://www.google.com/search?q=css+grid+tutorials&oq=css+grid+tutorials) before using this. For the most part, you will only have to use `grid-column` and `grid-row` with the following classes: -| Class Name | Purpose | -| ----------------------------------------- | ------------------------------------------------------------------------------------------ | -| `.bx-container` | Container element of whole page for proper margin and max-width (can be used on body tag ) | -| `.bx-container--[left, right]` | Align the container element to the left or right side | -| `.bx-container__bleed--[sm]` | Extend the background color of a container child into the container margin on both sides starting at a specific breakpoint (CSS Grid browsers only) | -| `.bx-container__bleed--[sm]--[left, right]` | Extend the background color of a grid into the container margin on one side at a specific breakpoint (CSS Grid browsers only) | -| `.bx-container__break--[sm]` | Child of container element should ignore grid’s margin at a specific breakpoint (CSS Grid browsers only) | -| `.bx-container__break--[sm]--[left, right]` | Child of container element should ignore grid’s margin on one side at a specific breakpoint (CSS Grid browsers only) | -| `.bx-grid` | Use anytime you want to apply CSS Grid Layout, including as embedded subgrids | -| `.bx-grid--fixed-columns` | Switch grid’s column widths to fixed instead of fluid | -| `.bx-grid--fluid-rows` | Switch grid’s row height to match the width of a column | -| `.bx-padding` | Add one unit of padding to element on all sides | -| `.bx-padding--[bottom, left, right, top]` | Add one unit of padding to element on one side | -| `.bx-padding--[horizontal, vertical]` | Add one unit of padding to element on two sides | -| `.bx-grid__col--sm--[1-12]` | Set the width out of 12 columns for an item in the grid starting at the sm breakpoint | -| `.bx-grid__col--[sm]--0` | Do not display item at a specific breakpoint, but display at the next breakpoint with columns specified | -| `.bx-grid__col--[sm]--0--only` | Do not display item only at specific breakpoint | -| `.bx-grid__height--[sm]--[1-30]` | Set the min-height based on an interval of 8px for an item starting at the breakpoint specified | -| `.bx-grid__height--[sm]--0` | Reset the min-height for an item starting at the specified breakpoint | +| Class Name | Purpose | Child? | +| ---------- | ------- | ------ | +| `.bx-container` | Container element of whole page for proper margin and max-width (can be used on body tag). You need to use `.bx-grid` on this same element. | No | +| `.bx-container--[left, right]` | Align the container element to the left or right side | | +| `.bx-container__bleed--[sm]` | Extend the background color of a container child into the container margin on both sides starting at a specific breakpoint (CSS Grid browsers only) | Child of `.bx-container` | +| `.bx-container__bleed--[sm]--[left, right]` | Extend the background color of a grid into the container margin on one side at a specific breakpoint (CSS Grid browsers only) | Child of `.bx-container` | +| `.bx-container__break--[sm]` |Ignore container’s margin at a specific breakpoint (CSS Grid browsers only) | Child of `.bx-container` | +| `.bx-container__break--[sm]--[left, right]` | Ignore container’s margin on one side at a specific breakpoint (CSS Grid browsers only) | Child of `.bx-container` | +| `.bx-grid` | Use anytime you want to apply CSS Grid Layout, including as embedded subgrids | Peer of `.bx-container` or direct child of another `.bx-grid` | +| `.bx-grid--fixed-columns` | Switch grid’s column widths to fixed instead of fluid | | +| `.bx-grid--fluid-rows` | Switch grid’s row height to match the width of a column | | +| `.bx-padding` | Add one unit of padding to element on all sides | Child of `.bx-grid` | +| `.bx-padding--[bottom, left, right, top]` | Add one unit of padding to element on one side | Child of `.bx-grid` | +| `.bx-padding--[horizontal, vertical]` | Add one unit of padding to element on two sides | Child of `.bx-grid` | By default, the grid code uses fluid columns and fixed rows. You can switch both aspects with `.bx-grid--fixed-columns` and `.bx-grid--fluid-rows`. When switching to fluid rows, the rows will scale across breakpoints just like `col` classes and only supports quantities up to the amount of columns in that breakpoint. +## Optional Classes + +The following classes are included in `css/bx-grid.min.css` and `css/bx-grid-legacy.min.css`. For the minimal file, you would instead use native CSS Grid rules as needed. + +| Class Name | Purpose | Child? | +| ---------- | ------- | ------ | +| `.bx-grid__col--sm--[1-12]` | Set the width out of 12 columns for an item in the grid starting at the sm breakpoint | Child of `.bx-grid` | +| `.bx-grid__col--[sm]--0` | Do not display item at a specific breakpoint, but display at the next breakpoint with columns specified | Child of `.bx-grid` | +| `.bx-grid__col--[sm]--0--only` | Do not display item only at specific breakpoint | Child of `.bx-grid` | +| `.bx-grid__height--[sm]--[1-30]` | Set the min-height based on an interval of 8px for an item starting at the breakpoint specified | Child of `.bx-grid` | +| `.bx-grid__height--[sm]--0` | Reset the min-height for an item starting at the specified breakpoint | Child of `.bx-grid` | + If you follow the instructions above for custom breakpoints, all of the `col` and `height` classes will generate with a version for each custom breakpoint too. For example, adding the custom breakpoint of `whateversize` will create `.bx-grid__col--whateversize--1`. Since that custom breakpoint is right after the previous breakpoint, it will have the same amount of columns and min-height. ## Variables @@ -184,22 +189,22 @@ button { A lot of times, you will want an item to break out of the gutters for background color, to extend media, or for another reason. Until the CSS Grid spec has a way to ignore that gutter, we use the padding classes (`.bx-padding`) to opt-in to respecting the gutter. The padding classes are always half the size of a gutter for alignment. -### Why is the fallback using flexbox instead of the `-ms` prefix use of CSS Grid? +### Why is the legacy version using Flexbox instead of the `-ms` prefix use of CSS Grid? The biggest reason is due to the lack of auto-placement when using that prefix. See more details about difference in the `-ms` prefix in [this blog post.](https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/) +### Why are there no grouping row classes needed? + +Thanks to flexbox’s wrapping functionality, nodes that specify rows are not necessary. Only create a node for a row if it has semantic or accessibility significance. You can keep embedding `.bx-grid` as necessary to accomplish this. + +### What happens if I specify the column class for one breakpoint, but not the column class for the next breakpoint? + +To maintain a mobile-first opinion, column widths will scale to the next breakpoint if not specified. This means that a `.bx-grid__col--sm--1` be the size of `.bx-grid__col----2` if no `` class was declared. + ### Why are columns using vw units and sometimes the calc function? Until Edge and Safari support [`display: subgrid`](https://developer.mozilla.org/en-US/docs/Web/CSS/display#Browser_compatibility), it is difficult for you to write semantic HTML with CSS Grid Layout. We are able to take advantage of vw units and the calc function so you can embed -`.bx-grid` elements inside of each other and still respect the overall grid design. - -### Why are there no grouping row classes needed? - -Thanks to flexbox’s wrapping functionality, nodes that specify rows are not necessary. Only create a node for a row if it has semantic or accessibility significance. You can keep embedding `.bx-grid` as necessary to accomplish this. - -### What happens in the legacy implementation if I specify the column width for one breakpoint, but not the next larger breakpoint? - -To maintain a mobile-first opinion, column widths will scale to the next breakpoint if not specified. This means that a `.bx-grid__col--sm--1` be the size of `.bx-grid__col----2` if no `` class was declared. \ No newline at end of file +`.bx-grid` elements inside of each other and still respect the overall grid design. \ No newline at end of file diff --git a/examples/carbon/css-gridish/bx-grid.sketch b/examples/carbon/css-gridish/bx-grid.sketch index 9225b33ebc1179530f8003ba5f8d0ba358097a44..07fe8ee49d6830e10949a653bb3c2f5f2d2601d4 100644 GIT binary patch delta 129 zcmZ1^xk!>Xz?+#xgn@yBgMl+*=0@IjMrI(rc{*bam@!$5SrH^K*@{^OOeZpL11peX q$z=gEx;Ublz%nnmEWorfw+Wbz;x+`+eNg^UDE)^!3M?MU;|Ty~4Xz?+#xgn@yBgW+ZF^o_jjjLblK^K`} * { + box-sizing: border-box; } + .bx-grid > * :last-child, + .bx-grid > * :last-child > :last-child, + .bx-grid > * :last-child > :last-child > :last-child { + margin-bottom: 0; } + +[class*="bx-padding"] { + box-sizing: border-box; } + +@supports (display: grid) { + .bx-grid > * { + height: 100%; } } + +:root { + --bx-height-1: 0.5rem; + --bx-height-2: 1rem; + --bx-height-3: 1.5rem; + --bx-height-4: 2rem; + --bx-height-5: 2.5rem; + --bx-height-6: 3rem; + --bx-height-7: 3.5rem; + --bx-height-8: 4rem; + --bx-height-9: 4.5rem; + --bx-height-10: 5rem; + --bx-height-11: 5.5rem; + --bx-height-12: 6rem; + --bx-height-13: 6.5rem; + --bx-height-14: 7rem; + --bx-height-15: 7.5rem; + --bx-height-16: 8rem; + --bx-height-17: 8.5rem; + --bx-height-18: 9rem; + --bx-height-19: 9.5rem; + --bx-height-20: 10rem; + --bx-height-21: 10.5rem; + --bx-height-22: 11rem; + --bx-height-23: 11.5rem; + --bx-height-24: 12rem; + --bx-height-25: 12.5rem; + --bx-height-26: 13rem; + --bx-height-27: 13.5rem; + --bx-height-28: 14rem; + --bx-height-29: 14.5rem; } + +.bx-padding { + padding: 0.625rem; } + +.bx-padding--bottom { + padding-bottom: 0.625rem; } + +.bx-padding--left { + padding-left: 0.625rem; } + +.bx-padding--right { + padding-right: 0.625rem; } + +.bx-padding--top { + padding-top: 0.625rem; } + +.bx-padding--horizontal { + padding-left: 0.625rem; + padding-right: 0.625rem; } + +.bx-padding--vertical { + padding-bottom: 0.625rem; + padding-top: 0.625rem; } + +.bx-grid { + grid-auto-rows: minmax(0.5rem, min-content); + grid-template-columns: repeat(auto-fill, calc((100vw - 10vw) * 0.0833)); } + .bx-grid.bx-grid--fixed-columns { + grid-template-columns: repeat(auto-fill, 1.66667rem); } + .bx-grid.bx-grid--fluid-rows { + grid-auto-rows: calc((100vw - 10vw) * 0.0833); } + .bx-grid > * { + grid-column: span 12; } + +.bx-container { + margin-left: auto; + margin-right: auto; + padding-left: 5vw; + padding-right: 5vw; } + +.bx-container--left { + margin-left: 0; } + +.bx-container--right { + margin-right: 0; } + +.bx-container__bleed--sm, +.bx-container__bleed--sm--left, +.bx-container__break--sm, +.bx-container__break--sm--left { + margin-left: -5vw; } + +.bx-container__bleed--sm, +.bx-container__bleed--sm--right, +.bx-container__break--sm, +.bx-container__break--sm--right { + margin-right: -5vw; } + +.bx-container__bleed--sm, +.bx-container__bleed--sm--left { + padding-left: 5vw; } + .bx-container__bleed--sm.bx-padding, .bx-container__bleed--sm.bx-padding--horizontal, .bx-container__bleed--sm.bx-padding--left, + .bx-container__bleed--sm--left.bx-padding, + .bx-container__bleed--sm--left.bx-padding--horizontal, + .bx-container__bleed--sm--left.bx-padding--left { + padding-left: calc(5vw + 0.625rem); } + +.bx-container__bleed--sm, +.bx-container__bleed--sm--right { + padding-right: 5vw; } + .bx-container__bleed--sm.bx-padding, .bx-container__bleed--sm.bx-padding--horizontal, .bx-container__bleed--sm.bx-padding--right, + .bx-container__bleed--sm--right.bx-padding, + .bx-container__bleed--sm--right.bx-padding--horizontal, + .bx-container__bleed--sm--right.bx-padding--right { + padding-right: calc(5vw + 0.625rem); } + +@media screen and (min-width: 100rem) { + .bx-padding { + padding: 0.625rem; } + .bx-padding--bottom { + padding-bottom: 0.625rem; } + .bx-padding--left { + padding-left: 0.625rem; } + .bx-padding--right { + padding-right: 0.625rem; } + .bx-padding--top { + padding-top: 0.625rem; } + .bx-padding--horizontal { + padding-left: 0.625rem; + padding-right: 0.625rem; } + .bx-padding--vertical { + padding-bottom: 0.625rem; + padding-top: 0.625rem; } + .bx-grid { + grid-template-columns: repeat(auto-fill, calc((100rem - 10vw) * 0.0833)); } + .bx-grid.bx-grid--fixed-columns { + grid-template-columns: repeat(auto-fill, 8.33333rem); } + .bx-grid.bx-grid--fluid-rows { + grid-auto-rows: calc((100rem - 10vw) * 0.0833); } + .bx-container { + margin-left: auto; + margin-right: auto; + padding-left: 5vw; + padding-right: 5vw; } + .bx-container--left { + margin-left: 0; } + .bx-container--right { + margin-right: 0; } + .bx-container__bleed--sm, + .bx-container__bleed--sm--left, + .bx-container__break--sm, + .bx-container__break--sm--left { + margin-left: -5vw; } + .bx-container__bleed--sm, + .bx-container__bleed--sm--right, + .bx-container__break--sm, + .bx-container__break--sm--right { + margin-right: -5vw; } + .bx-container__bleed--sm, + .bx-container__bleed--sm--left { + padding-left: 5vw; } + .bx-container__bleed--sm.bx-padding, .bx-container__bleed--sm.bx-padding--horizontal, .bx-container__bleed--sm.bx-padding--left, + .bx-container__bleed--sm--left.bx-padding, + .bx-container__bleed--sm--left.bx-padding--horizontal, + .bx-container__bleed--sm--left.bx-padding--left { + padding-left: calc(5vw + 0.625rem); } + .bx-container__bleed--sm, + .bx-container__bleed--sm--right { + padding-right: 5vw; } + .bx-container__bleed--sm.bx-padding, .bx-container__bleed--sm.bx-padding--horizontal, .bx-container__bleed--sm.bx-padding--right, + .bx-container__bleed--sm--right.bx-padding, + .bx-container__bleed--sm--right.bx-padding--horizontal, + .bx-container__bleed--sm--right.bx-padding--right { + padding-right: calc(5vw + 0.625rem); } } diff --git a/examples/carbon/css-gridish/css/bx-grid-minimal.min.css b/examples/carbon/css-gridish/css/bx-grid-minimal.min.css new file mode 100644 index 0000000..e006d33 --- /dev/null +++ b/examples/carbon/css-gridish/css/bx-grid-minimal.min.css @@ -0,0 +1 @@ +html{font-size:16px}body{margin:0}.bx-grid{align-items:flex-start;box-sizing:border-box;display:grid;flex-wrap:wrap;position:relative;grid-auto-rows:minmax(.5rem,min-content);grid-template-columns:repeat(auto-fill,calc((100vw - 10vw) * .0833))}.bx-grid>*{box-sizing:border-box;grid-column:span 12}.bx-grid>* :last-child,.bx-grid>* :last-child>:last-child,.bx-grid>* :last-child>:last-child>:last-child{margin-bottom:0}[class*=bx-padding]{box-sizing:border-box}@supports (display:grid){.bx-grid>*{height:100%}}:root{--bx-height-1:0.5rem;--bx-height-2:1rem;--bx-height-3:1.5rem;--bx-height-4:2rem;--bx-height-5:2.5rem;--bx-height-6:3rem;--bx-height-7:3.5rem;--bx-height-8:4rem;--bx-height-9:4.5rem;--bx-height-10:5rem;--bx-height-11:5.5rem;--bx-height-12:6rem;--bx-height-13:6.5rem;--bx-height-14:7rem;--bx-height-15:7.5rem;--bx-height-16:8rem;--bx-height-17:8.5rem;--bx-height-18:9rem;--bx-height-19:9.5rem;--bx-height-20:10rem;--bx-height-21:10.5rem;--bx-height-22:11rem;--bx-height-23:11.5rem;--bx-height-24:12rem;--bx-height-25:12.5rem;--bx-height-26:13rem;--bx-height-27:13.5rem;--bx-height-28:14rem;--bx-height-29:14.5rem}.bx-padding{padding:.625rem}.bx-padding--bottom{padding-bottom:.625rem}.bx-padding--left{padding-left:.625rem}.bx-padding--right{padding-right:.625rem}.bx-padding--top{padding-top:.625rem}.bx-padding--horizontal{padding-left:.625rem;padding-right:.625rem}.bx-padding--vertical{padding-bottom:.625rem;padding-top:.625rem}.bx-grid.bx-grid--fixed-columns{grid-template-columns:repeat(auto-fill,1.66667rem)}.bx-grid.bx-grid--fluid-rows{grid-auto-rows:calc((100vw - 10vw) * .0833)}.bx-container{box-sizing:border-box;max-width:100rem;overflow-x:hidden;width:100vw;margin-left:auto;margin-right:auto;padding-left:5vw;padding-right:5vw}.bx-container--left{margin-left:0}.bx-container--right{margin-right:0}.bx-container__bleed--sm,.bx-container__bleed--sm--left,.bx-container__break--sm,.bx-container__break--sm--left{margin-left:-5vw}.bx-container__bleed--sm,.bx-container__bleed--sm--right,.bx-container__break--sm,.bx-container__break--sm--right{margin-right:-5vw}.bx-container__bleed--sm,.bx-container__bleed--sm--left{padding-left:5vw}.bx-container__bleed--sm--left.bx-padding,.bx-container__bleed--sm--left.bx-padding--horizontal,.bx-container__bleed--sm--left.bx-padding--left,.bx-container__bleed--sm.bx-padding,.bx-container__bleed--sm.bx-padding--horizontal,.bx-container__bleed--sm.bx-padding--left{padding-left:calc(5vw + .625rem)}.bx-container__bleed--sm,.bx-container__bleed--sm--right{padding-right:5vw}.bx-container__bleed--sm--right.bx-padding,.bx-container__bleed--sm--right.bx-padding--horizontal,.bx-container__bleed--sm--right.bx-padding--right,.bx-container__bleed--sm.bx-padding,.bx-container__bleed--sm.bx-padding--horizontal,.bx-container__bleed--sm.bx-padding--right{padding-right:calc(5vw + .625rem)}@media screen and (min-width:100rem){.bx-padding{padding:.625rem}.bx-padding--bottom{padding-bottom:.625rem}.bx-padding--left{padding-left:.625rem}.bx-padding--right{padding-right:.625rem}.bx-padding--top{padding-top:.625rem}.bx-padding--horizontal{padding-left:.625rem;padding-right:.625rem}.bx-padding--vertical{padding-bottom:.625rem;padding-top:.625rem}.bx-grid{grid-template-columns:repeat(auto-fill,calc((100rem - 10vw) * .0833))}.bx-grid.bx-grid--fixed-columns{grid-template-columns:repeat(auto-fill,8.33333rem)}.bx-grid.bx-grid--fluid-rows{grid-auto-rows:calc((100rem - 10vw) * .0833)}.bx-container{margin-left:auto;margin-right:auto;padding-left:5vw;padding-right:5vw}.bx-container--left{margin-left:0}.bx-container--right{margin-right:0}.bx-container__bleed--sm,.bx-container__bleed--sm--left,.bx-container__break--sm,.bx-container__break--sm--left{margin-left:-5vw}.bx-container__bleed--sm,.bx-container__bleed--sm--right,.bx-container__break--sm,.bx-container__break--sm--right{margin-right:-5vw}.bx-container__bleed--sm,.bx-container__bleed--sm--left{padding-left:5vw}.bx-container__bleed--sm--left.bx-padding,.bx-container__bleed--sm--left.bx-padding--horizontal,.bx-container__bleed--sm--left.bx-padding--left,.bx-container__bleed--sm.bx-padding,.bx-container__bleed--sm.bx-padding--horizontal,.bx-container__bleed--sm.bx-padding--left{padding-left:calc(5vw + .625rem)}.bx-container__bleed--sm,.bx-container__bleed--sm--right{padding-right:5vw}.bx-container__bleed--sm--right.bx-padding,.bx-container__bleed--sm--right.bx-padding--horizontal,.bx-container__bleed--sm--right.bx-padding--right,.bx-container__bleed--sm.bx-padding,.bx-container__bleed--sm.bx-padding--horizontal,.bx-container__bleed--sm.bx-padding--right{padding-right:calc(5vw + .625rem)}} \ No newline at end of file diff --git a/examples/carbon/css-gridish/scss/_core.scss b/examples/carbon/css-gridish/scss/_core.scss index 0df8cfd..502bee9 100755 --- a/examples/carbon/css-gridish/scss/_core.scss +++ b/examples/carbon/css-gridish/scss/_core.scss @@ -85,13 +85,17 @@ body { @each $name, $breakpoint in $allBreakpoints { @include media-query($name) { - @if is-same-breakpoint($breakpoint, $last) == false { + @if is-same-breakpoint($breakpoint, $last) == false and $minimal == false { @include grid-legacy-heights($name); } - @include grid-legacy-zeros($breakpoint, $name); + @if $minimal == false { + @include grid-legacy-zeros($breakpoint, $name); + } @include grid-padding($breakpoint); @include grid($breakpoint, $name); - @include grid-legacy-columns($breakpoint, $name); + @if $minimal == false { + @include grid-legacy-columns($breakpoint, $name); + } // Wrap all bleed/break classes and css variables in a CSS Grid support query @include grid-legacy-wrapper($includeFlexFallback) { diff --git a/examples/carbon/css-gridish/scss/_variables.scss b/examples/carbon/css-gridish/scss/_variables.scss index 19b5e36..1863d1e 100755 --- a/examples/carbon/css-gridish/scss/_variables.scss +++ b/examples/carbon/css-gridish/scss/_variables.scss @@ -9,6 +9,7 @@ $breakpoints: add-padding(map-get($grid-values, "breakpoints")); $first: nth(nth($breakpoints, 1), 2); $last: nth(nth($breakpoints, -1), 2); $includeFlexFallback: false !default; +$minimal: false !default; $rowHeight: map-get($grid-values, "rowHeight"); $rows: map-get($grid-values, "rows"); $extraArtboards: map-get($grid-values, "extraArtboards"); diff --git a/examples/carbon/css-gridish/scss/bx-grid-minimal.scss b/examples/carbon/css-gridish/scss/bx-grid-minimal.scss new file mode 100644 index 0000000..6826a5e --- /dev/null +++ b/examples/carbon/css-gridish/scss/bx-grid-minimal.scss @@ -0,0 +1,3 @@ +$minimal: true; + +@import "core.scss"; diff --git a/examples/material/css-gridish/README.md b/examples/material/css-gridish/README.md index 3337486..4f6ed65 100755 --- a/examples/material/css-gridish/README.md +++ b/examples/material/css-gridish/README.md @@ -4,12 +4,12 @@ An example of [CSS Gridish](../../../README.md) generating CSS Grid code, fallba This grid was bootstrapped using [CSS Gridish](https://github.com/ibm/css-gridish). It includes: - CSS Grid Layout code with a Flexbox fallback in CSS and SCSS -- Sketch file with artboards +- Sketch design file with artboards - Config file (`css-gridish.json`) to review webpages with the [CSS Gridish Chrome Extension](https://chrome.google.com/webstore/detail/css-gridish/ebhcneoilkamaddhlphlehojpcooobgc) ## Sketch Artboards and Chrome Extension -The Sketch file can be found above in the list of files titled `material-grid.sketch`. It includes both grid (CTRL+G) and layout (CTRL+L) settings. +The Sketch design file can be found above in the list of files titled `material-grid.sketch`. It includes both grid (CTRL+G) and layout (CTRL+L) settings. The Chrome extension uses the same shortcuts. To set the extension up: @@ -17,21 +17,19 @@ The Chrome extension uses the same shortcuts. To set the extension up: 2. Download the `css-gridish.json` file in this project 3. Open the CSS Gridish menu in your Chrome toolbar and upload your `css-gridish.json` file -## Legacy Support +## Files -If you have no need to support browsers like IE 11 and Edge <15, please use `css/material-grid.min.css`. This will omit the CSS Flexbox fallback from your code. +There are three CSS files to choose from based on what browser support you want and whether you will use native CSS Grid rules or our provided classes: -If you are supporting browsers that lack [CSS Grid Layout support](https://developer.mozilla.org/en-US/docs/Web/CSS/grid#Browser_compatibility), you can use `css/material-grid-legacy.min.css` and the legacy classes below. With the legacy file, the browsers that do not support the final CSS Grid Legacy spec will fallback to a flexbox alternative. The flexbox alternative supports embedded subgrids that still reflect the overall grid system’s column structure. - -### Transitioning from Legacy - -Once your experience can drop support for IE 11 and Edge <15, you can simply remove all legacy classes and switch over to `css/material-grid.min.css`. +| Filename | When to Use | +| ---------- | ----------------- | +| `css/material-grid-legacy.min.css` | To also support browsers that do not have [CSS Grid Layout support](https://developer.mozilla.org/en-US/docs/Web/CSS/grid#Browser_compatibility) (IE 11 and Edge <15) with a reliable Flexbox fallback | +| `css/material-grid.min.css` | To only support browsers with [CSS Grid Layout support](https://developer.mozilla.org/en-US/docs/Web/CSS/grid#Browser_compatibility) | +| `css/material-grid-minimal.min.css` | To only support browsers with [CSS Grid Layout support](https://developer.mozilla.org/en-US/docs/Web/CSS/grid#Browser_compatibility), but not use any generated column or height classes | ## Breakpoints -There are currently 4 breakpoints where the design specs change for our -grid. The great thing about CSS Grid Layout is that you can rearrange your -layout at any custom breakpoint between those: +A breakpoint is where the number of columns or another value changes using a media query. There are currently 4 breakpoints where the design specs change for our grid. The great thing about CSS Grid Layout is that you can rearrange your layout at any custom breakpoint between those: | Breakpoint | Number of Columns | Width | Value | | ---------- | ----------------- | ------- | ------ | @@ -62,30 +60,37 @@ The example above will create all legacy classes for your custom breakpoints lik If you are new to CSS Grid, please try [learning the basics](https://www.google.com/search?q=css+grid+tutorials&oq=css+grid+tutorials) before using this. For the most part, you will only have to use `grid-column` and `grid-row` with the following classes: -| Class Name | Purpose | -| ----------------------------------------- | ------------------------------------------------------------------------------------------ | -| `.material-container` | Container element of whole page for proper margin and max-width (can be used on body tag ) | -| `.material-container--[left, right]` | Align the container element to the left or right side | -| `.material-container__bleed--[xsmall, small, medium]` | Extend the background color of a container child into the container margin on both sides starting at a specific breakpoint (CSS Grid browsers only) | -| `.material-container__bleed--[xsmall, small, medium]--[left, right]` | Extend the background color of a grid into the container margin on one side at a specific breakpoint (CSS Grid browsers only) | -| `.material-container__break--[xsmall, small, medium]` | Child of container element should ignore grid’s margin at a specific breakpoint (CSS Grid browsers only) | -| `.material-container__break--[xsmall, small, medium]--[left, right]` | Child of container element should ignore grid’s margin on one side at a specific breakpoint (CSS Grid browsers only) | -| `.material-grid` | Use anytime you want to apply CSS Grid Layout, including as embedded subgrids | -| `.material-grid--fixed-columns` | Switch grid’s column widths to fixed instead of fluid | -| `.material-grid--fluid-rows` | Switch grid’s row height to match the width of a column | -| `.material-padding` | Add one unit of padding to element on all sides | -| `.material-padding--[bottom, left, right, top]` | Add one unit of padding to element on one side | -| `.material-padding--[horizontal, vertical]` | Add one unit of padding to element on two sides | -| `.material-grid__col--xsmall--[1-4]` | Set the width out of 4 columns for an item in the grid starting at the xsmall breakpoint | -| `.material-grid__col--small--[1-8]` | Set the width out of 8 columns for an item in the grid starting at the small breakpoint | -| `.material-grid__col--medium--[1-12]` | Set the width out of 12 columns for an item in the grid starting at the medium breakpoint | -| `.material-grid__col--[xsmall, small, medium]--0` | Do not display item at a specific breakpoint, but display at the next breakpoint with columns specified | -| `.material-grid__col--[xsmall, small, medium]--0--only` | Do not display item only at specific breakpoint | -| `.material-grid__height--[xsmall, small, medium]--[1-30]` | Set the min-height based on an interval of 8px for an item starting at the breakpoint specified | -| `.material-grid__height--[xsmall, small, medium]--0` | Reset the min-height for an item starting at the specified breakpoint | +| Class Name | Purpose | Child? | +| ---------- | ------- | ------ | +| `.material-container` | Container element of whole page for proper margin and max-width (can be used on body tag). You need to use `.material-grid` on this same element. | No | +| `.material-container--[left, right]` | Align the container element to the left or right side | | +| `.material-container__bleed--[xsmall, small, medium]` | Extend the background color of a container child into the container margin on both sides starting at a specific breakpoint (CSS Grid browsers only) | Child of `.material-container` | +| `.material-container__bleed--[xsmall, small, medium]--[left, right]` | Extend the background color of a grid into the container margin on one side at a specific breakpoint (CSS Grid browsers only) | Child of `.material-container` | +| `.material-container__break--[xsmall, small, medium]` |Ignore container’s margin at a specific breakpoint (CSS Grid browsers only) | Child of `.material-container` | +| `.material-container__break--[xsmall, small, medium]--[left, right]` | Ignore container’s margin on one side at a specific breakpoint (CSS Grid browsers only) | Child of `.material-container` | +| `.material-grid` | Use anytime you want to apply CSS Grid Layout, including as embedded subgrids | Peer of `.material-container` or direct child of another `.material-grid` | +| `.material-grid--fixed-columns` | Switch grid’s column widths to fixed instead of fluid | | +| `.material-grid--fluid-rows` | Switch grid’s row height to match the width of a column | | +| `.material-padding` | Add one unit of padding to element on all sides | Child of `.material-grid` | +| `.material-padding--[bottom, left, right, top]` | Add one unit of padding to element on one side | Child of `.material-grid` | +| `.material-padding--[horizontal, vertical]` | Add one unit of padding to element on two sides | Child of `.material-grid` | By default, the grid code uses fluid columns and fixed rows. You can switch both aspects with `.material-grid--fixed-columns` and `.material-grid--fluid-rows`. When switching to fluid rows, the rows will scale across breakpoints just like `col` classes and only supports quantities up to the amount of columns in that breakpoint. +## Optional Classes + +The following classes are included in `css/material-grid.min.css` and `css/material-grid-legacy.min.css`. For the minimal file, you would instead use native CSS Grid rules as needed. + +| Class Name | Purpose | Child? | +| ---------- | ------- | ------ | +| `.material-grid__col--xsmall--[1-4]` | Set the width out of 4 columns for an item in the grid starting at the xsmall breakpoint | Child of `.material-grid` | +| `.material-grid__col--small--[1-8]` | Set the width out of 8 columns for an item in the grid starting at the small breakpoint | Child of `.material-grid` | +| `.material-grid__col--medium--[1-12]` | Set the width out of 12 columns for an item in the grid starting at the medium breakpoint | Child of `.material-grid` | +| `.material-grid__col--[xsmall, small, medium]--0` | Do not display item at a specific breakpoint, but display at the next breakpoint with columns specified | Child of `.material-grid` | +| `.material-grid__col--[xsmall, small, medium]--0--only` | Do not display item only at specific breakpoint | Child of `.material-grid` | +| `.material-grid__height--[xsmall, small, medium]--[1-30]` | Set the min-height based on an interval of 8px for an item starting at the breakpoint specified | Child of `.material-grid` | +| `.material-grid__height--[xsmall, small, medium]--0` | Reset the min-height for an item starting at the specified breakpoint | Child of `.material-grid` | + If you follow the instructions above for custom breakpoints, all of the `col` and `height` classes will generate with a version for each custom breakpoint too. For example, adding the custom breakpoint of `whateversize` will create `.material-grid__col--whateversize--1`. Since that custom breakpoint is right after the previous breakpoint, it will have the same amount of columns and min-height. ## Variables @@ -188,22 +193,22 @@ button { A lot of times, you will want an item to break out of the gutters for background color, to extend media, or for another reason. Until the CSS Grid spec has a way to ignore that gutter, we use the padding classes (`.material-padding`) to opt-in to respecting the gutter. The padding classes are always half the size of a gutter for alignment. -### Why is the fallback using flexbox instead of the `-ms` prefix use of CSS Grid? +### Why is the legacy version using Flexbox instead of the `-ms` prefix use of CSS Grid? The biggest reason is due to the lack of auto-placement when using that prefix. See more details about difference in the `-ms` prefix in [this blog post.](https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/) +### Why are there no grouping row classes needed? + +Thanks to flexbox’s wrapping functionality, nodes that specify rows are not necessary. Only create a node for a row if it has semantic or accessibility significance. You can keep embedding `.material-grid` as necessary to accomplish this. + +### What happens if I specify the column class for one breakpoint, but not the column class for the next breakpoint? + +To maintain a mobile-first opinion, column widths will scale to the next breakpoint if not specified. This means that a `.material-grid__col--xsmall--1` be the size of `.material-grid__col--small--2` if no `small` class was declared. + ### Why are columns using vw units and sometimes the calc function? Until Edge and Safari support [`display: subgrid`](https://developer.mozilla.org/en-US/docs/Web/CSS/display#Browser_compatibility), it is difficult for you to write semantic HTML with CSS Grid Layout. We are able to take advantage of vw units and the calc function so you can embed -`.material-grid` elements inside of each other and still respect the overall grid design. - -### Why are there no grouping row classes needed? - -Thanks to flexbox’s wrapping functionality, nodes that specify rows are not necessary. Only create a node for a row if it has semantic or accessibility significance. You can keep embedding `.material-grid` as necessary to accomplish this. - -### What happens in the legacy implementation if I specify the column width for one breakpoint, but not the next larger breakpoint? - -To maintain a mobile-first opinion, column widths will scale to the next breakpoint if not specified. This means that a `.material-grid__col--xsmall--1` be the size of `.material-grid__col--small--2` if no `small` class was declared. \ No newline at end of file +`.material-grid` elements inside of each other and still respect the overall grid design. \ No newline at end of file diff --git a/examples/material/css-gridish/css/material-grid-minimal.css b/examples/material/css-gridish/css/material-grid-minimal.css new file mode 100644 index 0000000..5a47afc --- /dev/null +++ b/examples/material/css-gridish/css/material-grid-minimal.css @@ -0,0 +1,179 @@ +html { + font-size: 16px; } + +body { + margin: 0; } + +.material-container { + box-sizing: border-box; + margin-left: auto; + margin-right: auto; + max-width: 120rem; + overflow-x: hidden; + width: 100vw; } + +.material-container--left { + margin-left: 0; } + +.material-container--right { + margin-right: 0; } + +.material-grid { + align-items: flex-start; + box-sizing: border-box; + display: grid; + flex-wrap: wrap; + position: relative; } + .material-grid > * { + box-sizing: border-box; } + .material-grid > * :last-child, + .material-grid > * :last-child > :last-child, + .material-grid > * :last-child > :last-child > :last-child { + margin-bottom: 0; } + +[class*="material-padding"] { + box-sizing: border-box; } + +@supports (display: grid) { + .material-grid > * { + height: 100%; } } + +:root { + --material-height-1: 0.5rem; + --material-height-2: 1rem; + --material-height-3: 1.5rem; + --material-height-4: 2rem; + --material-height-5: 2.5rem; + --material-height-6: 3rem; + --material-height-7: 3.5rem; + --material-height-8: 4rem; + --material-height-9: 4.5rem; + --material-height-10: 5rem; + --material-height-11: 5.5rem; + --material-height-12: 6rem; + --material-height-13: 6.5rem; + --material-height-14: 7rem; + --material-height-15: 7.5rem; + --material-height-16: 8rem; + --material-height-17: 8.5rem; + --material-height-18: 9rem; + --material-height-19: 9.5rem; + --material-height-20: 10rem; + --material-height-21: 10.5rem; + --material-height-22: 11rem; + --material-height-23: 11.5rem; + --material-height-24: 12rem; + --material-height-25: 12.5rem; + --material-height-26: 13rem; + --material-height-27: 13.5rem; + --material-height-28: 14rem; + --material-height-29: 14.5rem; } + +.material-padding { + padding: 0.5rem; } + +.material-padding--bottom { + padding-bottom: 0.5rem; } + +.material-padding--left { + padding-left: 0.5rem; } + +.material-padding--right { + padding-right: 0.5rem; } + +.material-padding--top { + padding-top: 0.5rem; } + +.material-padding--horizontal { + padding-left: 0.5rem; + padding-right: 0.5rem; } + +.material-padding--vertical { + padding-bottom: 0.5rem; + padding-top: 0.5rem; } + +.material-grid { + grid-auto-rows: minmax(0.5rem, min-content); + grid-template-columns: repeat(auto-fill, 25vw); } + .material-grid.material-grid--fixed-columns { + grid-template-columns: repeat(auto-fill, 5.625rem); } + .material-grid.material-grid--fluid-rows { + grid-auto-rows: 25vw; } + .material-grid > * { + grid-column: span 4; } + +@media screen and (min-width: 37.5rem) { + .material-padding { + padding: 0.5rem; } + .material-padding--bottom { + padding-bottom: 0.5rem; } + .material-padding--left { + padding-left: 0.5rem; } + .material-padding--right { + padding-right: 0.5rem; } + .material-padding--top { + padding-top: 0.5rem; } + .material-padding--horizontal { + padding-left: 0.5rem; + padding-right: 0.5rem; } + .material-padding--vertical { + padding-bottom: 0.5rem; + padding-top: 0.5rem; } + .material-grid { + grid-template-columns: repeat(auto-fill, 12.5vw); } + .material-grid.material-grid--fixed-columns { + grid-template-columns: repeat(auto-fill, 4.6875rem); } + .material-grid.material-grid--fluid-rows { + grid-auto-rows: 12.5vw; } + .material-grid > * { + grid-column: span 8; } } + +@media screen and (min-width: 64rem) { + .material-padding { + padding: 1rem; } + .material-padding--bottom { + padding-bottom: 1rem; } + .material-padding--left { + padding-left: 1rem; } + .material-padding--right { + padding-right: 1rem; } + .material-padding--top { + padding-top: 1rem; } + .material-padding--horizontal { + padding-left: 1rem; + padding-right: 1rem; } + .material-padding--vertical { + padding-bottom: 1rem; + padding-top: 1rem; } + .material-grid { + grid-template-columns: repeat(auto-fill, 8.33vw); } + .material-grid.material-grid--fixed-columns { + grid-template-columns: repeat(auto-fill, 5.33333rem); } + .material-grid.material-grid--fluid-rows { + grid-auto-rows: 8.33vw; } + .material-grid > * { + grid-column: span 12; } } + +@media screen and (min-width: 120rem) { + .material-padding { + padding: 1rem; } + .material-padding--bottom { + padding-bottom: 1rem; } + .material-padding--left { + padding-left: 1rem; } + .material-padding--right { + padding-right: 1rem; } + .material-padding--top { + padding-top: 1rem; } + .material-padding--horizontal { + padding-left: 1rem; + padding-right: 1rem; } + .material-padding--vertical { + padding-bottom: 1rem; + padding-top: 1rem; } + .material-grid { + grid-template-columns: repeat(auto-fill, 9.996rem); } + .material-grid.material-grid--fixed-columns { + grid-template-columns: repeat(auto-fill, 10rem); } + .material-grid.material-grid--fluid-rows { + grid-auto-rows: 9.996rem; } } diff --git a/examples/material/css-gridish/css/material-grid-minimal.min.css b/examples/material/css-gridish/css/material-grid-minimal.min.css new file mode 100644 index 0000000..0596268 --- /dev/null +++ b/examples/material/css-gridish/css/material-grid-minimal.min.css @@ -0,0 +1 @@ +html{font-size:16px}body{margin:0}.material-container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:120rem;overflow-x:hidden;width:100vw}.material-container--left{margin-left:0}.material-container--right{margin-right:0}.material-grid{align-items:flex-start;box-sizing:border-box;display:grid;flex-wrap:wrap;position:relative;grid-auto-rows:minmax(.5rem,min-content);grid-template-columns:repeat(auto-fill,25vw)}.material-grid>*{box-sizing:border-box;grid-column:span 4}.material-grid>* :last-child,.material-grid>* :last-child>:last-child,.material-grid>* :last-child>:last-child>:last-child{margin-bottom:0}[class*=material-padding]{box-sizing:border-box}@supports (display:grid){.material-grid>*{height:100%}}:root{--material-height-1:0.5rem;--material-height-2:1rem;--material-height-3:1.5rem;--material-height-4:2rem;--material-height-5:2.5rem;--material-height-6:3rem;--material-height-7:3.5rem;--material-height-8:4rem;--material-height-9:4.5rem;--material-height-10:5rem;--material-height-11:5.5rem;--material-height-12:6rem;--material-height-13:6.5rem;--material-height-14:7rem;--material-height-15:7.5rem;--material-height-16:8rem;--material-height-17:8.5rem;--material-height-18:9rem;--material-height-19:9.5rem;--material-height-20:10rem;--material-height-21:10.5rem;--material-height-22:11rem;--material-height-23:11.5rem;--material-height-24:12rem;--material-height-25:12.5rem;--material-height-26:13rem;--material-height-27:13.5rem;--material-height-28:14rem;--material-height-29:14.5rem}.material-padding{padding:.5rem}.material-padding--bottom{padding-bottom:.5rem}.material-padding--left{padding-left:.5rem}.material-padding--right{padding-right:.5rem}.material-padding--top{padding-top:.5rem}.material-padding--horizontal{padding-left:.5rem;padding-right:.5rem}.material-padding--vertical{padding-bottom:.5rem;padding-top:.5rem}.material-grid.material-grid--fixed-columns{grid-template-columns:repeat(auto-fill,5.625rem)}.material-grid.material-grid--fluid-rows{grid-auto-rows:25vw}@media screen and (min-width:37.5rem){.material-padding{padding:.5rem}.material-padding--bottom{padding-bottom:.5rem}.material-padding--left{padding-left:.5rem}.material-padding--right{padding-right:.5rem}.material-padding--top{padding-top:.5rem}.material-padding--horizontal{padding-left:.5rem;padding-right:.5rem}.material-padding--vertical{padding-bottom:.5rem;padding-top:.5rem}.material-grid{grid-template-columns:repeat(auto-fill,12.5vw)}.material-grid.material-grid--fixed-columns{grid-template-columns:repeat(auto-fill,4.6875rem)}.material-grid.material-grid--fluid-rows{grid-auto-rows:12.5vw}.material-grid>*{grid-column:span 8}}@media screen and (min-width:64rem){.material-padding{padding:1rem}.material-padding--bottom{padding-bottom:1rem}.material-padding--left{padding-left:1rem}.material-padding--right{padding-right:1rem}.material-padding--top{padding-top:1rem}.material-padding--horizontal{padding-left:1rem;padding-right:1rem}.material-padding--vertical{padding-bottom:1rem;padding-top:1rem}.material-grid{grid-template-columns:repeat(auto-fill,8.33vw)}.material-grid.material-grid--fixed-columns{grid-template-columns:repeat(auto-fill,5.33333rem)}.material-grid.material-grid--fluid-rows{grid-auto-rows:8.33vw}.material-grid>*{grid-column:span 12}}@media screen and (min-width:120rem){.material-padding{padding:1rem}.material-padding--bottom{padding-bottom:1rem}.material-padding--left{padding-left:1rem}.material-padding--right{padding-right:1rem}.material-padding--top{padding-top:1rem}.material-padding--horizontal{padding-left:1rem;padding-right:1rem}.material-padding--vertical{padding-bottom:1rem;padding-top:1rem}.material-grid{grid-template-columns:repeat(auto-fill,9.996rem)}.material-grid.material-grid--fixed-columns{grid-template-columns:repeat(auto-fill,10rem)}.material-grid.material-grid--fluid-rows{grid-auto-rows:9.996rem}} \ No newline at end of file diff --git a/examples/material/css-gridish/material-grid.sketch b/examples/material/css-gridish/material-grid.sketch index ae40c0dfe3adef190952744f17c2befcdfc54359..5d4d83b62a153f38d6145a57b07c5f9fed26c66f 100644 GIT binary patch delta 128 zcmZ1`xlEEbz?+#xgn@yBgMl+*=0@IjMrI(rc{*bam@!$5SrH^K*@{^OOeZpL11peX qDP#dN`Z%JQz%p;REWornw+Wbz<2D4-lc4;Q5PA|%6j(Tx#}fcV^&+qU delta 128 zcmZ1`xlEEbz?+#xgn@yBgW+ZF^o_jjjLblK^K`} Date: Tue, 1 May 2018 14:57:42 -0500 Subject: [PATCH 2/2] feat(js): optional javascript file to adjust grid to scrollbar width (#39) * feat(css): minimal css file for native css grid sizing * feat(js): optional javascript file to adjust grid to scrollbar width * chore(docs): specify js is not minified name * chore(js): place inside immediately-invoked function expression --- examples/bootstrap/css-gridish/README.md | 2 + .../css-gridish/bootstrap-grid.sketch | Bin 3161 -> 3161 bytes .../css-gridish/css/bootstrap-grid-legacy.css | 161 ++++++--- .../css/bootstrap-grid-legacy.min.css | 2 +- .../css/bootstrap-grid-minimal.css | 14 +- .../css/bootstrap-grid-minimal.min.css | 2 +- .../css-gridish/css/bootstrap-grid.css | 14 +- .../css-gridish/css/bootstrap-grid.min.css | 2 +- .../css-gridish/js/bootstrap-grid.js | 20 ++ .../bootstrap/css-gridish/scss/_core.scss | 6 +- .../bootstrap/css-gridish/scss/_mixins.scss | 18 +- .../css-gridish/scss/_utilities.scss | 20 +- examples/bootstrap/index.html | 1 + examples/carbon/css-gridish/README.md | 2 + examples/carbon/css-gridish/bx-grid.sketch | Bin 3234 -> 3234 bytes .../carbon/css-gridish/css/bx-grid-legacy.css | 161 ++++++--- .../css-gridish/css/bx-grid-legacy.min.css | 2 +- .../css-gridish/css/bx-grid-minimal.css | 14 +- .../css-gridish/css/bx-grid-minimal.min.css | 2 +- examples/carbon/css-gridish/css/bx-grid.css | 14 +- .../carbon/css-gridish/css/bx-grid.min.css | 2 +- examples/carbon/css-gridish/js/bx-grid.js | 20 ++ examples/carbon/css-gridish/scss/_core.scss | 6 +- examples/carbon/css-gridish/scss/_mixins.scss | 18 +- .../carbon/css-gridish/scss/_utilities.scss | 20 +- examples/carbon/index.html | 1 + examples/material/css-gridish/README.md | 2 + .../css-gridish/css/material-grid-legacy.css | 337 ++++++++++++++---- .../css/material-grid-legacy.min.css | 2 +- .../css-gridish/css/material-grid-minimal.css | 26 +- .../css/material-grid-minimal.min.css | 2 +- .../css-gridish/css/material-grid.css | 26 +- .../css-gridish/css/material-grid.min.css | 2 +- .../material/css-gridish/js/material-grid.js | 20 ++ .../material/css-gridish/material-grid.sketch | Bin 3238 -> 3238 bytes examples/material/css-gridish/scss/_core.scss | 6 +- .../material/css-gridish/scss/_mixins.scss | 18 +- .../material/css-gridish/scss/_utilities.scss | 20 +- examples/material/example.html | 1 + examples/material/index.html | 1 + index.html | 1 + src/docs/README.md.hbs | 2 + src/index.js | 17 +- src/js/gridish-grid.js | 20 ++ src/scss/_core.scss | 6 +- src/scss/_mixins.scss | 18 +- src/scss/_utilities.scss | 20 +- 47 files changed, 831 insertions(+), 240 deletions(-) create mode 100644 examples/bootstrap/css-gridish/js/bootstrap-grid.js create mode 100644 examples/carbon/css-gridish/js/bx-grid.js create mode 100644 examples/material/css-gridish/js/material-grid.js create mode 100644 src/js/gridish-grid.js diff --git a/examples/bootstrap/css-gridish/README.md b/examples/bootstrap/css-gridish/README.md index 985a9ee..1a4c39c 100755 --- a/examples/bootstrap/css-gridish/README.md +++ b/examples/bootstrap/css-gridish/README.md @@ -27,6 +27,8 @@ There are three CSS files to choose from based on what browser support you want | `css/bootstrap-grid.min.css` | To only support browsers with [CSS Grid Layout support](https://developer.mozilla.org/en-US/docs/Web/CSS/grid#Browser_compatibility) | | `css/bootstrap-grid-minimal.min.css` | To only support browsers with [CSS Grid Layout support](https://developer.mozilla.org/en-US/docs/Web/CSS/grid#Browser_compatibility), but not use any generated column or height classes | +There is also an optional JavaScript file included at `js/bootstrap-grid.js`. This will adjust the grid to not go behind browser scrollbars since different browsers handle the `vw` unit differently. It applies to any browser that supports [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables#Browser_compatibility) and [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver#Browser_compatibility). + ## Breakpoints A breakpoint is where the number of columns or another value changes using a media query. There are currently 2 breakpoints where the design specs change for our grid. The great thing about CSS Grid Layout is that you can rearrange your layout at any custom breakpoint between those: diff --git a/examples/bootstrap/css-gridish/bootstrap-grid.sketch b/examples/bootstrap/css-gridish/bootstrap-grid.sketch index 5c626380a6f92c0fd3b39b3fffe41a3857b30ad2..8a34ffc65018fdd6cf119ee28df2657639a70d03 100644 GIT binary patch delta 129 zcmca9aZ`dfz?+#xgn@yBgW*%z!i~J`jLblK^K`}EWq?FE)y^<$ZZIwUAZCr8YsP)I|?i=z~c!3YJwtA diff --git a/examples/bootstrap/css-gridish/css/bootstrap-grid-legacy.css b/examples/bootstrap/css-gridish/css/bootstrap-grid-legacy.css index 9a0686a..8e72b63 100755 --- a/examples/bootstrap/css-gridish/css/bootstrap-grid-legacy.css +++ b/examples/bootstrap/css-gridish/css/bootstrap-grid-legacy.css @@ -10,6 +10,7 @@ body { margin-right: auto; max-width: 100rem; overflow-x: hidden; + padding-right: var(--scrollbar-width); width: 100vw; } .bootstrap-container--left { @@ -48,37 +49,39 @@ body { .bootstrap-grid > * { height: 100%; } } -@supports (display: grid) { - :root { - --bootstrap-height-1: 1rem; - --bootstrap-height-2: 2rem; - --bootstrap-height-3: 3rem; - --bootstrap-height-4: 4rem; - --bootstrap-height-5: 5rem; - --bootstrap-height-6: 6rem; - --bootstrap-height-7: 7rem; - --bootstrap-height-8: 8rem; - --bootstrap-height-9: 9rem; - --bootstrap-height-10: 10rem; - --bootstrap-height-11: 11rem; - --bootstrap-height-12: 12rem; - --bootstrap-height-13: 13rem; - --bootstrap-height-14: 14rem; - --bootstrap-height-15: 15rem; - --bootstrap-height-16: 16rem; - --bootstrap-height-17: 17rem; - --bootstrap-height-18: 18rem; - --bootstrap-height-19: 19rem; - --bootstrap-height-20: 20rem; - --bootstrap-height-21: 21rem; - --bootstrap-height-22: 22rem; - --bootstrap-height-23: 23rem; - --bootstrap-height-24: 24rem; - --bootstrap-height-25: 25rem; - --bootstrap-height-26: 26rem; - --bootstrap-height-27: 27rem; - --bootstrap-height-28: 28rem; - --bootstrap-height-29: 29rem; } } +:root { + --scrollbar-width: 0px; } + @supports (display: grid) { + :root { + --bootstrap-height-1: 1rem; + --bootstrap-height-2: 2rem; + --bootstrap-height-3: 3rem; + --bootstrap-height-4: 4rem; + --bootstrap-height-5: 5rem; + --bootstrap-height-6: 6rem; + --bootstrap-height-7: 7rem; + --bootstrap-height-8: 8rem; + --bootstrap-height-9: 9rem; + --bootstrap-height-10: 10rem; + --bootstrap-height-11: 11rem; + --bootstrap-height-12: 12rem; + --bootstrap-height-13: 13rem; + --bootstrap-height-14: 14rem; + --bootstrap-height-15: 15rem; + --bootstrap-height-16: 16rem; + --bootstrap-height-17: 17rem; + --bootstrap-height-18: 18rem; + --bootstrap-height-19: 19rem; + --bootstrap-height-20: 20rem; + --bootstrap-height-21: 21rem; + --bootstrap-height-22: 22rem; + --bootstrap-height-23: 23rem; + --bootstrap-height-24: 24rem; + --bootstrap-height-25: 25rem; + --bootstrap-height-26: 26rem; + --bootstrap-height-27: 27rem; + --bootstrap-height-28: 28rem; + --bootstrap-height-29: 29rem; } } .bootstrap-grid__height--sm--0 { height: 0; @@ -261,17 +264,21 @@ body { .bootstrap-grid { grid-auto-rows: minmax(1rem, min-content); - grid-template-columns: repeat(auto-fill, 8.33vw); } + grid-template-columns: repeat(auto-fill, 8.33vw); + grid-template-columns: repeat(auto-fill, calc((100vw - var(--scrollbar-width))* 0.0833)); } .bootstrap-grid.bootstrap-grid--fixed-columns { grid-template-columns: repeat(auto-fill, 3rem); } .bootstrap-grid.bootstrap-grid--fluid-rows { - grid-auto-rows: 8.33vw; } + grid-auto-rows: 8.33vw; + grid-auto-rows: calc((100vw - var(--scrollbar-width))* 0.0833); } .bootstrap-grid > * { grid-column: span 12; } .bootstrap-grid__col--sm--1 { max-width: 8.33rem; + max-width: calc((100rem - var(--scrollbar-width))* 0.0833); width: 8.33vw; + width: calc((100vw - var(--scrollbar-width))* 0.0833); grid-column: span 1; } .bootstrap-grid__col--sm--1.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) { grid-column: span 1; } @@ -280,12 +287,17 @@ body { > .bootstrap-grid__height--sm--1 { grid-row: span 1; height: 8.33vw; + height: calc((100vw - var(--scrollbar-width))* 0.0833); min-height: 8.33vw; - max-height: 8.33rem; } + min-height: calc((100vw - var(--scrollbar-width))* 0.0833); + max-height: 8.33rem; + max-height: calc((100rem - var(--scrollbar-width))* 0.0833); } .bootstrap-grid__col--sm--2 { max-width: 16.66rem; + max-width: calc((100rem - var(--scrollbar-width))* 0.1666); width: 16.66vw; + width: calc((100vw - var(--scrollbar-width))* 0.1666); grid-column: span 2; } .bootstrap-grid__col--sm--2.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) { grid-column: span 2; } @@ -294,12 +306,17 @@ body { > .bootstrap-grid__height--sm--2 { grid-row: span 2; height: 16.66vw; + height: calc((100vw - var(--scrollbar-width))* 0.1666); min-height: 16.66vw; - max-height: 16.66rem; } + min-height: calc((100vw - var(--scrollbar-width))* 0.1666); + max-height: 16.66rem; + max-height: calc((100rem - var(--scrollbar-width))* 0.1666); } .bootstrap-grid__col--sm--3 { max-width: 25rem; + max-width: calc((100rem - var(--scrollbar-width))* 0.25); width: 25vw; + width: calc((100vw - var(--scrollbar-width))* 0.25); grid-column: span 3; } .bootstrap-grid__col--sm--3.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) { grid-column: span 3; } @@ -308,12 +325,17 @@ body { > .bootstrap-grid__height--sm--3 { grid-row: span 3; height: 25vw; + height: calc((100vw - var(--scrollbar-width))* 0.25); min-height: 25vw; - max-height: 25rem; } + min-height: calc((100vw - var(--scrollbar-width))* 0.25); + max-height: 25rem; + max-height: calc((100rem - var(--scrollbar-width))* 0.25); } .bootstrap-grid__col--sm--4 { max-width: 33.33rem; + max-width: calc((100rem - var(--scrollbar-width))* 0.3333); width: 33.33vw; + width: calc((100vw - var(--scrollbar-width))* 0.3333); grid-column: span 4; } .bootstrap-grid__col--sm--4.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) { grid-column: span 4; } @@ -322,12 +344,17 @@ body { > .bootstrap-grid__height--sm--4 { grid-row: span 4; height: 33.33vw; + height: calc((100vw - var(--scrollbar-width))* 0.3333); min-height: 33.33vw; - max-height: 33.33rem; } + min-height: calc((100vw - var(--scrollbar-width))* 0.3333); + max-height: 33.33rem; + max-height: calc((100rem - var(--scrollbar-width))* 0.3333); } .bootstrap-grid__col--sm--5 { max-width: 41.66rem; + max-width: calc((100rem - var(--scrollbar-width))* 0.4166); width: 41.66vw; + width: calc((100vw - var(--scrollbar-width))* 0.4166); grid-column: span 5; } .bootstrap-grid__col--sm--5.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) { grid-column: span 5; } @@ -336,12 +363,17 @@ body { > .bootstrap-grid__height--sm--5 { grid-row: span 5; height: 41.66vw; + height: calc((100vw - var(--scrollbar-width))* 0.4166); min-height: 41.66vw; - max-height: 41.66rem; } + min-height: calc((100vw - var(--scrollbar-width))* 0.4166); + max-height: 41.66rem; + max-height: calc((100rem - var(--scrollbar-width))* 0.4166); } .bootstrap-grid__col--sm--6 { max-width: 50rem; + max-width: calc((100rem - var(--scrollbar-width))* 0.5); width: 50vw; + width: calc((100vw - var(--scrollbar-width))* 0.5); grid-column: span 6; } .bootstrap-grid__col--sm--6.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) { grid-column: span 6; } @@ -350,12 +382,17 @@ body { > .bootstrap-grid__height--sm--6 { grid-row: span 6; height: 50vw; + height: calc((100vw - var(--scrollbar-width))* 0.5); min-height: 50vw; - max-height: 50rem; } + min-height: calc((100vw - var(--scrollbar-width))* 0.5); + max-height: 50rem; + max-height: calc((100rem - var(--scrollbar-width))* 0.5); } .bootstrap-grid__col--sm--7 { max-width: 58.33rem; + max-width: calc((100rem - var(--scrollbar-width))* 0.5833); width: 58.33vw; + width: calc((100vw - var(--scrollbar-width))* 0.5833); grid-column: span 7; } .bootstrap-grid__col--sm--7.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) { grid-column: span 7; } @@ -364,12 +401,17 @@ body { > .bootstrap-grid__height--sm--7 { grid-row: span 7; height: 58.33vw; + height: calc((100vw - var(--scrollbar-width))* 0.5833); min-height: 58.33vw; - max-height: 58.33rem; } + min-height: calc((100vw - var(--scrollbar-width))* 0.5833); + max-height: 58.33rem; + max-height: calc((100rem - var(--scrollbar-width))* 0.5833); } .bootstrap-grid__col--sm--8 { max-width: 66.66rem; + max-width: calc((100rem - var(--scrollbar-width))* 0.6666); width: 66.66vw; + width: calc((100vw - var(--scrollbar-width))* 0.6666); grid-column: span 8; } .bootstrap-grid__col--sm--8.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) { grid-column: span 8; } @@ -378,12 +420,17 @@ body { > .bootstrap-grid__height--sm--8 { grid-row: span 8; height: 66.66vw; + height: calc((100vw - var(--scrollbar-width))* 0.6666); min-height: 66.66vw; - max-height: 66.66rem; } + min-height: calc((100vw - var(--scrollbar-width))* 0.6666); + max-height: 66.66rem; + max-height: calc((100rem - var(--scrollbar-width))* 0.6666); } .bootstrap-grid__col--sm--9 { max-width: 75rem; + max-width: calc((100rem - var(--scrollbar-width))* 0.75); width: 75vw; + width: calc((100vw - var(--scrollbar-width))* 0.75); grid-column: span 9; } .bootstrap-grid__col--sm--9.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) { grid-column: span 9; } @@ -392,12 +439,17 @@ body { > .bootstrap-grid__height--sm--9 { grid-row: span 9; height: 75vw; + height: calc((100vw - var(--scrollbar-width))* 0.75); min-height: 75vw; - max-height: 75rem; } + min-height: calc((100vw - var(--scrollbar-width))* 0.75); + max-height: 75rem; + max-height: calc((100rem - var(--scrollbar-width))* 0.75); } .bootstrap-grid__col--sm--10 { max-width: 83.33rem; + max-width: calc((100rem - var(--scrollbar-width))* 0.8333); width: 83.33vw; + width: calc((100vw - var(--scrollbar-width))* 0.8333); grid-column: span 10; } .bootstrap-grid__col--sm--10.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) { grid-column: span 10; } @@ -406,12 +458,17 @@ body { > .bootstrap-grid__height--sm--10 { grid-row: span 10; height: 83.33vw; + height: calc((100vw - var(--scrollbar-width))* 0.8333); min-height: 83.33vw; - max-height: 83.33rem; } + min-height: calc((100vw - var(--scrollbar-width))* 0.8333); + max-height: 83.33rem; + max-height: calc((100rem - var(--scrollbar-width))* 0.8333); } .bootstrap-grid__col--sm--11 { max-width: 91.66rem; + max-width: calc((100rem - var(--scrollbar-width))* 0.9166); width: 91.66vw; + width: calc((100vw - var(--scrollbar-width))* 0.9166); grid-column: span 11; } .bootstrap-grid__col--sm--11.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) { grid-column: span 11; } @@ -420,12 +477,17 @@ body { > .bootstrap-grid__height--sm--11 { grid-row: span 11; height: 91.66vw; + height: calc((100vw - var(--scrollbar-width))* 0.9166); min-height: 91.66vw; - max-height: 91.66rem; } + min-height: calc((100vw - var(--scrollbar-width))* 0.9166); + max-height: 91.66rem; + max-height: calc((100rem - var(--scrollbar-width))* 0.9166); } .bootstrap-grid__col--sm--12 { max-width: 100rem; + max-width: calc((100rem - var(--scrollbar-width))* 1); width: 100vw; + width: calc((100vw - var(--scrollbar-width))* 1); grid-column: span 12; } .bootstrap-grid__col--sm--12.bootstrap-grid > *:not([class*="bootstrap-grid__col"]) { grid-column: span 12; } @@ -434,8 +496,11 @@ body { > .bootstrap-grid__height--sm--12 { grid-row: span 12; height: 100vw; + height: calc((100vw - var(--scrollbar-width))* 1); min-height: 100vw; - max-height: 100rem; } + min-height: calc((100vw - var(--scrollbar-width))* 1); + max-height: 100rem; + max-height: calc((100rem - var(--scrollbar-width))* 1); } @media screen and (min-width: 100rem) { .bootstrap-grid__col--sm--0--only { @@ -462,11 +527,13 @@ body { padding-bottom: 15px; padding-top: 15px; } .bootstrap-grid { - grid-template-columns: repeat(auto-fill, 8.33rem); } + grid-template-columns: repeat(auto-fill, 8.33rem); + grid-template-columns: repeat(auto-fill, calc((100rem - var(--scrollbar-width))* 0.0833)); } .bootstrap-grid.bootstrap-grid--fixed-columns { grid-template-columns: repeat(auto-fill, 8.33333rem); } .bootstrap-grid.bootstrap-grid--fluid-rows { - grid-auto-rows: 8.33rem; } + grid-auto-rows: 8.33rem; + grid-auto-rows: calc((100rem - var(--scrollbar-width))* 0.0833); } [class*="bootstrap-grid__col--"] { min-width: 0; } } diff --git a/examples/bootstrap/css-gridish/css/bootstrap-grid-legacy.min.css b/examples/bootstrap/css-gridish/css/bootstrap-grid-legacy.min.css index f35d27e..687124f 100755 --- a/examples/bootstrap/css-gridish/css/bootstrap-grid-legacy.min.css +++ b/examples/bootstrap/css-gridish/css/bootstrap-grid-legacy.min.css @@ -1 +1 @@ -html{font-size:15px}body{margin:0}.bootstrap-container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:100rem;overflow-x:hidden;width:100vw}.bootstrap-container--left{margin-left:0}.bootstrap-container--right{margin-right:0}.bootstrap-grid{align-items:flex-start;box-sizing:border-box;display:flex;display:grid;flex-wrap:wrap;position:relative;grid-auto-rows:minmax(1rem,min-content);grid-template-columns:repeat(auto-fill,8.33vw)}.bootstrap-grid>*{box-sizing:border-box;width:100%;grid-column:span 12}.bootstrap-grid>* :last-child,.bootstrap-grid>* :last-child>:last-child,.bootstrap-grid>* :last-child>:last-child>:last-child{margin-bottom:0}[class*=bootstrap-padding]{box-sizing:border-box}@supports (display:grid){.bootstrap-grid{align-items:unset}.bootstrap-grid>*{width:initial;height:100%}:root{--bootstrap-height-1:1rem;--bootstrap-height-2:2rem;--bootstrap-height-3:3rem;--bootstrap-height-4:4rem;--bootstrap-height-5:5rem;--bootstrap-height-6:6rem;--bootstrap-height-7:7rem;--bootstrap-height-8:8rem;--bootstrap-height-9:9rem;--bootstrap-height-10:10rem;--bootstrap-height-11:11rem;--bootstrap-height-12:12rem;--bootstrap-height-13:13rem;--bootstrap-height-14:14rem;--bootstrap-height-15:15rem;--bootstrap-height-16:16rem;--bootstrap-height-17:17rem;--bootstrap-height-18:18rem;--bootstrap-height-19:19rem;--bootstrap-height-20:20rem;--bootstrap-height-21:21rem;--bootstrap-height-22:22rem;--bootstrap-height-23:23rem;--bootstrap-height-24:24rem;--bootstrap-height-25:25rem;--bootstrap-height-26:26rem;--bootstrap-height-27:27rem;--bootstrap-height-28:28rem;--bootstrap-height-29:29rem}}.bootstrap-grid__height--sm--0{height:0;min-height:0}.bootstrap-grid__height--sm--1{grid-row:span 1;height:1rem;min-height:1rem}.bootstrap-grid__height--sm--2{grid-row:span 2;height:2rem;min-height:2rem}.bootstrap-grid__height--sm--3{grid-row:span 3;height:3rem;min-height:3rem}.bootstrap-grid__height--sm--4{grid-row:span 4;height:4rem;min-height:4rem}.bootstrap-grid__height--sm--5{grid-row:span 5;height:5rem;min-height:5rem}.bootstrap-grid__height--sm--6{grid-row:span 6;height:6rem;min-height:6rem}.bootstrap-grid__height--sm--7{grid-row:span 7;height:7rem;min-height:7rem}.bootstrap-grid__height--sm--8{grid-row:span 8;height:8rem;min-height:8rem}.bootstrap-grid__height--sm--9{grid-row:span 9;height:9rem;min-height:9rem}.bootstrap-grid__height--sm--10{grid-row:span 10;height:10rem;min-height:10rem}.bootstrap-grid__height--sm--11{grid-row:span 11;height:11rem;min-height:11rem}.bootstrap-grid__height--sm--12{grid-row:span 12;height:12rem;min-height:12rem}.bootstrap-grid__height--sm--13{grid-row:span 13;height:13rem;min-height:13rem}.bootstrap-grid__height--sm--14{grid-row:span 14;height:14rem;min-height:14rem}.bootstrap-grid__height--sm--15{grid-row:span 15;height:15rem;min-height:15rem}.bootstrap-grid__height--sm--16{grid-row:span 16;height:16rem;min-height:16rem}.bootstrap-grid__height--sm--17{grid-row:span 17;height:17rem;min-height:17rem}.bootstrap-grid__height--sm--18{grid-row:span 18;height:18rem;min-height:18rem}.bootstrap-grid__height--sm--19{grid-row:span 19;height:19rem;min-height:19rem}.bootstrap-grid__height--sm--20{grid-row:span 20;height:20rem;min-height:20rem}.bootstrap-grid__height--sm--21{grid-row:span 21;height:21rem;min-height:21rem}.bootstrap-grid__height--sm--22{grid-row:span 22;height:22rem;min-height:22rem}.bootstrap-grid__height--sm--23{grid-row:span 23;height:23rem;min-height:23rem}.bootstrap-grid__height--sm--24{grid-row:span 24;height:24rem;min-height:24rem}.bootstrap-grid__height--sm--25{grid-row:span 25;height:25rem;min-height:25rem}.bootstrap-grid__height--sm--26{grid-row:span 26;height:26rem;min-height:26rem}.bootstrap-grid__height--sm--27{grid-row:span 27;height:27rem;min-height:27rem}.bootstrap-grid__height--sm--28{grid-row:span 28;height:28rem;min-height:28rem}.bootstrap-grid__height--sm--29{grid-row:span 29;height:29rem;min-height:29rem}[class*=bootstrap-grid__col--sm--]{display:block}.bootstrap-grid__col--sm--0,.bootstrap-grid__col--sm--0--only{display:none}.bootstrap-padding{padding:15px}.bootstrap-padding--bottom{padding-bottom:15px}.bootstrap-padding--left{padding-left:15px}.bootstrap-padding--right{padding-right:15px}.bootstrap-padding--top{padding-top:15px}.bootstrap-padding--horizontal{padding-left:15px;padding-right:15px}.bootstrap-padding--vertical{padding-bottom:15px;padding-top:15px}.bootstrap-grid.bootstrap-grid--fixed-columns{grid-template-columns:repeat(auto-fill,3rem)}.bootstrap-grid.bootstrap-grid--fluid-rows{grid-auto-rows:8.33vw}.bootstrap-grid__col--sm--1{max-width:8.33rem;width:8.33vw;grid-column:span 1}.bootstrap-grid__col--sm--1.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 1}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--1{grid-row:span 1;height:8.33vw;min-height:8.33vw;max-height:8.33rem}.bootstrap-grid__col--sm--2{max-width:16.66rem;width:16.66vw;grid-column:span 2}.bootstrap-grid__col--sm--2.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 2}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--2{grid-row:span 2;height:16.66vw;min-height:16.66vw;max-height:16.66rem}.bootstrap-grid__col--sm--3{max-width:25rem;width:25vw;grid-column:span 3}.bootstrap-grid__col--sm--3.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 3}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--3{grid-row:span 3;height:25vw;min-height:25vw;max-height:25rem}.bootstrap-grid__col--sm--4{max-width:33.33rem;width:33.33vw;grid-column:span 4}.bootstrap-grid__col--sm--4.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 4}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--4{grid-row:span 4;height:33.33vw;min-height:33.33vw;max-height:33.33rem}.bootstrap-grid__col--sm--5{max-width:41.66rem;width:41.66vw;grid-column:span 5}.bootstrap-grid__col--sm--5.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 5}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--5{grid-row:span 5;height:41.66vw;min-height:41.66vw;max-height:41.66rem}.bootstrap-grid__col--sm--6{max-width:50rem;width:50vw;grid-column:span 6}.bootstrap-grid__col--sm--6.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 6}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--6{grid-row:span 6;height:50vw;min-height:50vw;max-height:50rem}.bootstrap-grid__col--sm--7{max-width:58.33rem;width:58.33vw;grid-column:span 7}.bootstrap-grid__col--sm--7.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 7}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--7{grid-row:span 7;height:58.33vw;min-height:58.33vw;max-height:58.33rem}.bootstrap-grid__col--sm--8{max-width:66.66rem;width:66.66vw;grid-column:span 8}.bootstrap-grid__col--sm--8.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 8}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--8{grid-row:span 8;height:66.66vw;min-height:66.66vw;max-height:66.66rem}.bootstrap-grid__col--sm--9{max-width:75rem;width:75vw;grid-column:span 9}.bootstrap-grid__col--sm--9.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 9}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--9{grid-row:span 9;height:75vw;min-height:75vw;max-height:75rem}.bootstrap-grid__col--sm--10{max-width:83.33rem;width:83.33vw;grid-column:span 10}.bootstrap-grid__col--sm--10.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 10}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--10{grid-row:span 10;height:83.33vw;min-height:83.33vw;max-height:83.33rem}.bootstrap-grid__col--sm--11{max-width:91.66rem;width:91.66vw;grid-column:span 11}.bootstrap-grid__col--sm--11.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 11}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--11{grid-row:span 11;height:91.66vw;min-height:91.66vw;max-height:91.66rem}.bootstrap-grid__col--sm--12{max-width:100rem;width:100vw;grid-column:span 12}.bootstrap-grid__col--sm--12.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 12}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--12{grid-row:span 12;height:100vw;min-height:100vw;max-height:100rem}@media screen and (min-width:100rem){.bootstrap-grid__col--sm--0--only,[class*=bootstrap-grid__col--xl--]{display:block}.bootstrap-grid__col--xl--0,.bootstrap-grid__col--xl--0--only{display:none}.bootstrap-padding{padding:15px}.bootstrap-padding--bottom{padding-bottom:15px}.bootstrap-padding--left{padding-left:15px}.bootstrap-padding--right{padding-right:15px}.bootstrap-padding--top{padding-top:15px}.bootstrap-padding--horizontal{padding-left:15px;padding-right:15px}.bootstrap-padding--vertical{padding-bottom:15px;padding-top:15px}.bootstrap-grid{grid-template-columns:repeat(auto-fill,8.33rem)}.bootstrap-grid.bootstrap-grid--fixed-columns{grid-template-columns:repeat(auto-fill,8.33333rem)}.bootstrap-grid.bootstrap-grid--fluid-rows{grid-auto-rows:8.33rem}[class*=bootstrap-grid__col--]{min-width:0}}@supports (display:grid){.bootstrap-grid>*,.bootstrap-grid>[class*=bootstrap-grid__col--]{min-width:initial;max-width:initial;width:initial}.bootstrap-grid>.bootstrap-grid,.bootstrap-grid>[class*=bootstrap-grid__col--].bootstrap-grid{display:grid}.bootstrap-grid>[class*=bootstrap-grid__height--]{height:unset;max-height:unset;min-height:initial}}.bootstrap-grid>script{display:none} \ No newline at end of file +html{font-size:15px}body{margin:0}.bootstrap-container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:100rem;overflow-x:hidden;padding-right:var(--scrollbar-width);width:100vw}.bootstrap-container--left{margin-left:0}.bootstrap-container--right{margin-right:0}.bootstrap-grid{align-items:flex-start;box-sizing:border-box;display:flex;display:grid;flex-wrap:wrap;position:relative;grid-auto-rows:minmax(1rem,min-content);grid-template-columns:repeat(auto-fill,8.33vw);grid-template-columns:repeat(auto-fill,calc((100vw - var(--scrollbar-width))* .0833))}.bootstrap-grid>*{box-sizing:border-box;width:100%;grid-column:span 12}.bootstrap-grid>* :last-child,.bootstrap-grid>* :last-child>:last-child,.bootstrap-grid>* :last-child>:last-child>:last-child{margin-bottom:0}[class*=bootstrap-padding]{box-sizing:border-box}:root{--scrollbar-width:0px}@supports (display:grid){.bootstrap-grid{align-items:unset}.bootstrap-grid>*{width:initial;height:100%}:root{--bootstrap-height-1:1rem;--bootstrap-height-2:2rem;--bootstrap-height-3:3rem;--bootstrap-height-4:4rem;--bootstrap-height-5:5rem;--bootstrap-height-6:6rem;--bootstrap-height-7:7rem;--bootstrap-height-8:8rem;--bootstrap-height-9:9rem;--bootstrap-height-10:10rem;--bootstrap-height-11:11rem;--bootstrap-height-12:12rem;--bootstrap-height-13:13rem;--bootstrap-height-14:14rem;--bootstrap-height-15:15rem;--bootstrap-height-16:16rem;--bootstrap-height-17:17rem;--bootstrap-height-18:18rem;--bootstrap-height-19:19rem;--bootstrap-height-20:20rem;--bootstrap-height-21:21rem;--bootstrap-height-22:22rem;--bootstrap-height-23:23rem;--bootstrap-height-24:24rem;--bootstrap-height-25:25rem;--bootstrap-height-26:26rem;--bootstrap-height-27:27rem;--bootstrap-height-28:28rem;--bootstrap-height-29:29rem}}.bootstrap-grid__height--sm--0{height:0;min-height:0}.bootstrap-grid__height--sm--1{grid-row:span 1;height:1rem;min-height:1rem}.bootstrap-grid__height--sm--2{grid-row:span 2;height:2rem;min-height:2rem}.bootstrap-grid__height--sm--3{grid-row:span 3;height:3rem;min-height:3rem}.bootstrap-grid__height--sm--4{grid-row:span 4;height:4rem;min-height:4rem}.bootstrap-grid__height--sm--5{grid-row:span 5;height:5rem;min-height:5rem}.bootstrap-grid__height--sm--6{grid-row:span 6;height:6rem;min-height:6rem}.bootstrap-grid__height--sm--7{grid-row:span 7;height:7rem;min-height:7rem}.bootstrap-grid__height--sm--8{grid-row:span 8;height:8rem;min-height:8rem}.bootstrap-grid__height--sm--9{grid-row:span 9;height:9rem;min-height:9rem}.bootstrap-grid__height--sm--10{grid-row:span 10;height:10rem;min-height:10rem}.bootstrap-grid__height--sm--11{grid-row:span 11;height:11rem;min-height:11rem}.bootstrap-grid__height--sm--12{grid-row:span 12;height:12rem;min-height:12rem}.bootstrap-grid__height--sm--13{grid-row:span 13;height:13rem;min-height:13rem}.bootstrap-grid__height--sm--14{grid-row:span 14;height:14rem;min-height:14rem}.bootstrap-grid__height--sm--15{grid-row:span 15;height:15rem;min-height:15rem}.bootstrap-grid__height--sm--16{grid-row:span 16;height:16rem;min-height:16rem}.bootstrap-grid__height--sm--17{grid-row:span 17;height:17rem;min-height:17rem}.bootstrap-grid__height--sm--18{grid-row:span 18;height:18rem;min-height:18rem}.bootstrap-grid__height--sm--19{grid-row:span 19;height:19rem;min-height:19rem}.bootstrap-grid__height--sm--20{grid-row:span 20;height:20rem;min-height:20rem}.bootstrap-grid__height--sm--21{grid-row:span 21;height:21rem;min-height:21rem}.bootstrap-grid__height--sm--22{grid-row:span 22;height:22rem;min-height:22rem}.bootstrap-grid__height--sm--23{grid-row:span 23;height:23rem;min-height:23rem}.bootstrap-grid__height--sm--24{grid-row:span 24;height:24rem;min-height:24rem}.bootstrap-grid__height--sm--25{grid-row:span 25;height:25rem;min-height:25rem}.bootstrap-grid__height--sm--26{grid-row:span 26;height:26rem;min-height:26rem}.bootstrap-grid__height--sm--27{grid-row:span 27;height:27rem;min-height:27rem}.bootstrap-grid__height--sm--28{grid-row:span 28;height:28rem;min-height:28rem}.bootstrap-grid__height--sm--29{grid-row:span 29;height:29rem;min-height:29rem}[class*=bootstrap-grid__col--sm--]{display:block}.bootstrap-grid__col--sm--0,.bootstrap-grid__col--sm--0--only{display:none}.bootstrap-padding{padding:15px}.bootstrap-padding--bottom{padding-bottom:15px}.bootstrap-padding--left{padding-left:15px}.bootstrap-padding--right{padding-right:15px}.bootstrap-padding--top{padding-top:15px}.bootstrap-padding--horizontal{padding-left:15px;padding-right:15px}.bootstrap-padding--vertical{padding-bottom:15px;padding-top:15px}.bootstrap-grid.bootstrap-grid--fixed-columns{grid-template-columns:repeat(auto-fill,3rem)}.bootstrap-grid.bootstrap-grid--fluid-rows{grid-auto-rows:8.33vw;grid-auto-rows:calc((100vw - var(--scrollbar-width))* .0833)}.bootstrap-grid__col--sm--1{max-width:8.33rem;max-width:calc((100rem - var(--scrollbar-width))* .0833);width:8.33vw;width:calc((100vw - var(--scrollbar-width))* .0833);grid-column:span 1}.bootstrap-grid__col--sm--1.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 1}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--1{grid-row:span 1;height:8.33vw;height:calc((100vw - var(--scrollbar-width))* .0833);min-height:8.33vw;min-height:calc((100vw - var(--scrollbar-width))* .0833);max-height:8.33rem;max-height:calc((100rem - var(--scrollbar-width))* .0833)}.bootstrap-grid__col--sm--2{max-width:16.66rem;max-width:calc((100rem - var(--scrollbar-width))* .1666);width:16.66vw;width:calc((100vw - var(--scrollbar-width))* .1666);grid-column:span 2}.bootstrap-grid__col--sm--2.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 2}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--2{grid-row:span 2;height:16.66vw;height:calc((100vw - var(--scrollbar-width))* .1666);min-height:16.66vw;min-height:calc((100vw - var(--scrollbar-width))* .1666);max-height:16.66rem;max-height:calc((100rem - var(--scrollbar-width))* .1666)}.bootstrap-grid__col--sm--3{max-width:25rem;max-width:calc((100rem - var(--scrollbar-width))* .25);width:25vw;width:calc((100vw - var(--scrollbar-width))* .25);grid-column:span 3}.bootstrap-grid__col--sm--3.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 3}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--3{grid-row:span 3;height:25vw;height:calc((100vw - var(--scrollbar-width))* .25);min-height:25vw;min-height:calc((100vw - var(--scrollbar-width))* .25);max-height:25rem;max-height:calc((100rem - var(--scrollbar-width))* .25)}.bootstrap-grid__col--sm--4{max-width:33.33rem;max-width:calc((100rem - var(--scrollbar-width))* .3333);width:33.33vw;width:calc((100vw - var(--scrollbar-width))* .3333);grid-column:span 4}.bootstrap-grid__col--sm--4.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 4}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--4{grid-row:span 4;height:33.33vw;height:calc((100vw - var(--scrollbar-width))* .3333);min-height:33.33vw;min-height:calc((100vw - var(--scrollbar-width))* .3333);max-height:33.33rem;max-height:calc((100rem - var(--scrollbar-width))* .3333)}.bootstrap-grid__col--sm--5{max-width:41.66rem;max-width:calc((100rem - var(--scrollbar-width))* .4166);width:41.66vw;width:calc((100vw - var(--scrollbar-width))* .4166);grid-column:span 5}.bootstrap-grid__col--sm--5.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 5}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--5{grid-row:span 5;height:41.66vw;height:calc((100vw - var(--scrollbar-width))* .4166);min-height:41.66vw;min-height:calc((100vw - var(--scrollbar-width))* .4166);max-height:41.66rem;max-height:calc((100rem - var(--scrollbar-width))* .4166)}.bootstrap-grid__col--sm--6{max-width:50rem;max-width:calc((100rem - var(--scrollbar-width))* .5);width:50vw;width:calc((100vw - var(--scrollbar-width))* .5);grid-column:span 6}.bootstrap-grid__col--sm--6.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 6}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--6{grid-row:span 6;height:50vw;height:calc((100vw - var(--scrollbar-width))* .5);min-height:50vw;min-height:calc((100vw - var(--scrollbar-width))* .5);max-height:50rem;max-height:calc((100rem - var(--scrollbar-width))* .5)}.bootstrap-grid__col--sm--7{max-width:58.33rem;max-width:calc((100rem - var(--scrollbar-width))* .5833);width:58.33vw;width:calc((100vw - var(--scrollbar-width))* .5833);grid-column:span 7}.bootstrap-grid__col--sm--7.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 7}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--7{grid-row:span 7;height:58.33vw;height:calc((100vw - var(--scrollbar-width))* .5833);min-height:58.33vw;min-height:calc((100vw - var(--scrollbar-width))* .5833);max-height:58.33rem;max-height:calc((100rem - var(--scrollbar-width))* .5833)}.bootstrap-grid__col--sm--8{max-width:66.66rem;max-width:calc((100rem - var(--scrollbar-width))* .6666);width:66.66vw;width:calc((100vw - var(--scrollbar-width))* .6666);grid-column:span 8}.bootstrap-grid__col--sm--8.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 8}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--8{grid-row:span 8;height:66.66vw;height:calc((100vw - var(--scrollbar-width))* .6666);min-height:66.66vw;min-height:calc((100vw - var(--scrollbar-width))* .6666);max-height:66.66rem;max-height:calc((100rem - var(--scrollbar-width))* .6666)}.bootstrap-grid__col--sm--9{max-width:75rem;max-width:calc((100rem - var(--scrollbar-width))* .75);width:75vw;width:calc((100vw - var(--scrollbar-width))* .75);grid-column:span 9}.bootstrap-grid__col--sm--9.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 9}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--9{grid-row:span 9;height:75vw;height:calc((100vw - var(--scrollbar-width))* .75);min-height:75vw;min-height:calc((100vw - var(--scrollbar-width))* .75);max-height:75rem;max-height:calc((100rem - var(--scrollbar-width))* .75)}.bootstrap-grid__col--sm--10{max-width:83.33rem;max-width:calc((100rem - var(--scrollbar-width))* .8333);width:83.33vw;width:calc((100vw - var(--scrollbar-width))* .8333);grid-column:span 10}.bootstrap-grid__col--sm--10.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 10}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--10{grid-row:span 10;height:83.33vw;height:calc((100vw - var(--scrollbar-width))* .8333);min-height:83.33vw;min-height:calc((100vw - var(--scrollbar-width))* .8333);max-height:83.33rem;max-height:calc((100rem - var(--scrollbar-width))* .8333)}.bootstrap-grid__col--sm--11{max-width:91.66rem;max-width:calc((100rem - var(--scrollbar-width))* .9166);width:91.66vw;width:calc((100vw - var(--scrollbar-width))* .9166);grid-column:span 11}.bootstrap-grid__col--sm--11.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 11}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--11{grid-row:span 11;height:91.66vw;height:calc((100vw - var(--scrollbar-width))* .9166);min-height:91.66vw;min-height:calc((100vw - var(--scrollbar-width))* .9166);max-height:91.66rem;max-height:calc((100rem - var(--scrollbar-width))* .9166)}.bootstrap-grid__col--sm--12{max-width:100rem;max-width:calc((100rem - var(--scrollbar-width))* 1);width:100vw;width:calc((100vw - var(--scrollbar-width))* 1);grid-column:span 12}.bootstrap-grid__col--sm--12.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 12}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--12{grid-row:span 12;height:100vw;height:calc((100vw - var(--scrollbar-width))* 1);min-height:100vw;min-height:calc((100vw - var(--scrollbar-width))* 1);max-height:100rem;max-height:calc((100rem - var(--scrollbar-width))* 1)}@media screen and (min-width:100rem){.bootstrap-grid__col--sm--0--only,[class*=bootstrap-grid__col--xl--]{display:block}.bootstrap-grid__col--xl--0,.bootstrap-grid__col--xl--0--only{display:none}.bootstrap-padding{padding:15px}.bootstrap-padding--bottom{padding-bottom:15px}.bootstrap-padding--left{padding-left:15px}.bootstrap-padding--right{padding-right:15px}.bootstrap-padding--top{padding-top:15px}.bootstrap-padding--horizontal{padding-left:15px;padding-right:15px}.bootstrap-padding--vertical{padding-bottom:15px;padding-top:15px}.bootstrap-grid{grid-template-columns:repeat(auto-fill,8.33rem);grid-template-columns:repeat(auto-fill,calc((100rem - var(--scrollbar-width))* .0833))}.bootstrap-grid.bootstrap-grid--fixed-columns{grid-template-columns:repeat(auto-fill,8.33333rem)}.bootstrap-grid.bootstrap-grid--fluid-rows{grid-auto-rows:8.33rem;grid-auto-rows:calc((100rem - var(--scrollbar-width))* .0833)}[class*=bootstrap-grid__col--]{min-width:0}}@supports (display:grid){.bootstrap-grid>*,.bootstrap-grid>[class*=bootstrap-grid__col--]{min-width:initial;max-width:initial;width:initial}.bootstrap-grid>.bootstrap-grid,.bootstrap-grid>[class*=bootstrap-grid__col--].bootstrap-grid{display:grid}.bootstrap-grid>[class*=bootstrap-grid__height--]{height:unset;max-height:unset;min-height:initial}}.bootstrap-grid>script{display:none} \ No newline at end of file diff --git a/examples/bootstrap/css-gridish/css/bootstrap-grid-minimal.css b/examples/bootstrap/css-gridish/css/bootstrap-grid-minimal.css index 2ec7bac..0f7054d 100644 --- a/examples/bootstrap/css-gridish/css/bootstrap-grid-minimal.css +++ b/examples/bootstrap/css-gridish/css/bootstrap-grid-minimal.css @@ -10,6 +10,7 @@ body { margin-right: auto; max-width: 100rem; overflow-x: hidden; + padding-right: var(--scrollbar-width); width: 100vw; } .bootstrap-container--left { @@ -39,6 +40,7 @@ body { height: 100%; } } :root { + --scrollbar-width: 0px; --bootstrap-height-1: 1rem; --bootstrap-height-2: 2rem; --bootstrap-height-3: 3rem; @@ -94,11 +96,13 @@ body { .bootstrap-grid { grid-auto-rows: minmax(1rem, min-content); - grid-template-columns: repeat(auto-fill, 8.33vw); } + grid-template-columns: repeat(auto-fill, 8.33vw); + grid-template-columns: repeat(auto-fill, calc((100vw - var(--scrollbar-width))* 0.0833)); } .bootstrap-grid.bootstrap-grid--fixed-columns { grid-template-columns: repeat(auto-fill, 3rem); } .bootstrap-grid.bootstrap-grid--fluid-rows { - grid-auto-rows: 8.33vw; } + grid-auto-rows: 8.33vw; + grid-auto-rows: calc((100vw - var(--scrollbar-width))* 0.0833); } .bootstrap-grid > * { grid-column: span 12; } @@ -120,8 +124,10 @@ body { padding-bottom: 15px; padding-top: 15px; } .bootstrap-grid { - grid-template-columns: repeat(auto-fill, 8.33rem); } + grid-template-columns: repeat(auto-fill, 8.33rem); + grid-template-columns: repeat(auto-fill, calc((100rem - var(--scrollbar-width))* 0.0833)); } .bootstrap-grid.bootstrap-grid--fixed-columns { grid-template-columns: repeat(auto-fill, 8.33333rem); } .bootstrap-grid.bootstrap-grid--fluid-rows { - grid-auto-rows: 8.33rem; } } + grid-auto-rows: 8.33rem; + grid-auto-rows: calc((100rem - var(--scrollbar-width))* 0.0833); } } diff --git a/examples/bootstrap/css-gridish/css/bootstrap-grid-minimal.min.css b/examples/bootstrap/css-gridish/css/bootstrap-grid-minimal.min.css index 7ee28e1..e6da9e5 100644 --- a/examples/bootstrap/css-gridish/css/bootstrap-grid-minimal.min.css +++ b/examples/bootstrap/css-gridish/css/bootstrap-grid-minimal.min.css @@ -1 +1 @@ -html{font-size:15px}body{margin:0}.bootstrap-container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:100rem;overflow-x:hidden;width:100vw}.bootstrap-container--left{margin-left:0}.bootstrap-container--right{margin-right:0}.bootstrap-grid{align-items:flex-start;box-sizing:border-box;display:grid;flex-wrap:wrap;position:relative;grid-auto-rows:minmax(1rem,min-content);grid-template-columns:repeat(auto-fill,8.33vw)}.bootstrap-grid>*{box-sizing:border-box;grid-column:span 12}.bootstrap-grid>* :last-child,.bootstrap-grid>* :last-child>:last-child,.bootstrap-grid>* :last-child>:last-child>:last-child{margin-bottom:0}[class*=bootstrap-padding]{box-sizing:border-box}@supports (display:grid){.bootstrap-grid>*{height:100%}}:root{--bootstrap-height-1:1rem;--bootstrap-height-2:2rem;--bootstrap-height-3:3rem;--bootstrap-height-4:4rem;--bootstrap-height-5:5rem;--bootstrap-height-6:6rem;--bootstrap-height-7:7rem;--bootstrap-height-8:8rem;--bootstrap-height-9:9rem;--bootstrap-height-10:10rem;--bootstrap-height-11:11rem;--bootstrap-height-12:12rem;--bootstrap-height-13:13rem;--bootstrap-height-14:14rem;--bootstrap-height-15:15rem;--bootstrap-height-16:16rem;--bootstrap-height-17:17rem;--bootstrap-height-18:18rem;--bootstrap-height-19:19rem;--bootstrap-height-20:20rem;--bootstrap-height-21:21rem;--bootstrap-height-22:22rem;--bootstrap-height-23:23rem;--bootstrap-height-24:24rem;--bootstrap-height-25:25rem;--bootstrap-height-26:26rem;--bootstrap-height-27:27rem;--bootstrap-height-28:28rem;--bootstrap-height-29:29rem}.bootstrap-padding{padding:15px}.bootstrap-padding--bottom{padding-bottom:15px}.bootstrap-padding--left{padding-left:15px}.bootstrap-padding--right{padding-right:15px}.bootstrap-padding--top{padding-top:15px}.bootstrap-padding--horizontal{padding-left:15px;padding-right:15px}.bootstrap-padding--vertical{padding-bottom:15px;padding-top:15px}.bootstrap-grid.bootstrap-grid--fixed-columns{grid-template-columns:repeat(auto-fill,3rem)}.bootstrap-grid.bootstrap-grid--fluid-rows{grid-auto-rows:8.33vw}@media screen and (min-width:100rem){.bootstrap-padding{padding:15px}.bootstrap-padding--bottom{padding-bottom:15px}.bootstrap-padding--left{padding-left:15px}.bootstrap-padding--right{padding-right:15px}.bootstrap-padding--top{padding-top:15px}.bootstrap-padding--horizontal{padding-left:15px;padding-right:15px}.bootstrap-padding--vertical{padding-bottom:15px;padding-top:15px}.bootstrap-grid{grid-template-columns:repeat(auto-fill,8.33rem)}.bootstrap-grid.bootstrap-grid--fixed-columns{grid-template-columns:repeat(auto-fill,8.33333rem)}.bootstrap-grid.bootstrap-grid--fluid-rows{grid-auto-rows:8.33rem}} \ No newline at end of file +html{font-size:15px}body{margin:0}.bootstrap-container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:100rem;overflow-x:hidden;padding-right:var(--scrollbar-width);width:100vw}.bootstrap-container--left{margin-left:0}.bootstrap-container--right{margin-right:0}.bootstrap-grid{align-items:flex-start;box-sizing:border-box;display:grid;flex-wrap:wrap;position:relative;grid-auto-rows:minmax(1rem,min-content);grid-template-columns:repeat(auto-fill,8.33vw);grid-template-columns:repeat(auto-fill,calc((100vw - var(--scrollbar-width))* .0833))}.bootstrap-grid>*{box-sizing:border-box;grid-column:span 12}.bootstrap-grid>* :last-child,.bootstrap-grid>* :last-child>:last-child,.bootstrap-grid>* :last-child>:last-child>:last-child{margin-bottom:0}[class*=bootstrap-padding]{box-sizing:border-box}@supports (display:grid){.bootstrap-grid>*{height:100%}}:root{--scrollbar-width:0px;--bootstrap-height-1:1rem;--bootstrap-height-2:2rem;--bootstrap-height-3:3rem;--bootstrap-height-4:4rem;--bootstrap-height-5:5rem;--bootstrap-height-6:6rem;--bootstrap-height-7:7rem;--bootstrap-height-8:8rem;--bootstrap-height-9:9rem;--bootstrap-height-10:10rem;--bootstrap-height-11:11rem;--bootstrap-height-12:12rem;--bootstrap-height-13:13rem;--bootstrap-height-14:14rem;--bootstrap-height-15:15rem;--bootstrap-height-16:16rem;--bootstrap-height-17:17rem;--bootstrap-height-18:18rem;--bootstrap-height-19:19rem;--bootstrap-height-20:20rem;--bootstrap-height-21:21rem;--bootstrap-height-22:22rem;--bootstrap-height-23:23rem;--bootstrap-height-24:24rem;--bootstrap-height-25:25rem;--bootstrap-height-26:26rem;--bootstrap-height-27:27rem;--bootstrap-height-28:28rem;--bootstrap-height-29:29rem}.bootstrap-padding{padding:15px}.bootstrap-padding--bottom{padding-bottom:15px}.bootstrap-padding--left{padding-left:15px}.bootstrap-padding--right{padding-right:15px}.bootstrap-padding--top{padding-top:15px}.bootstrap-padding--horizontal{padding-left:15px;padding-right:15px}.bootstrap-padding--vertical{padding-bottom:15px;padding-top:15px}.bootstrap-grid.bootstrap-grid--fixed-columns{grid-template-columns:repeat(auto-fill,3rem)}.bootstrap-grid.bootstrap-grid--fluid-rows{grid-auto-rows:8.33vw;grid-auto-rows:calc((100vw - var(--scrollbar-width))* .0833)}@media screen and (min-width:100rem){.bootstrap-padding{padding:15px}.bootstrap-padding--bottom{padding-bottom:15px}.bootstrap-padding--left{padding-left:15px}.bootstrap-padding--right{padding-right:15px}.bootstrap-padding--top{padding-top:15px}.bootstrap-padding--horizontal{padding-left:15px;padding-right:15px}.bootstrap-padding--vertical{padding-bottom:15px;padding-top:15px}.bootstrap-grid{grid-template-columns:repeat(auto-fill,8.33rem);grid-template-columns:repeat(auto-fill,calc((100rem - var(--scrollbar-width))* .0833))}.bootstrap-grid.bootstrap-grid--fixed-columns{grid-template-columns:repeat(auto-fill,8.33333rem)}.bootstrap-grid.bootstrap-grid--fluid-rows{grid-auto-rows:8.33rem;grid-auto-rows:calc((100rem - var(--scrollbar-width))* .0833)}} \ No newline at end of file diff --git a/examples/bootstrap/css-gridish/css/bootstrap-grid.css b/examples/bootstrap/css-gridish/css/bootstrap-grid.css index 8ae05a7..0d3f2be 100755 --- a/examples/bootstrap/css-gridish/css/bootstrap-grid.css +++ b/examples/bootstrap/css-gridish/css/bootstrap-grid.css @@ -10,6 +10,7 @@ body { margin-right: auto; max-width: 100rem; overflow-x: hidden; + padding-right: var(--scrollbar-width); width: 100vw; } .bootstrap-container--left { @@ -39,6 +40,7 @@ body { height: 100%; } } :root { + --scrollbar-width: 0px; --bootstrap-height-1: 1rem; --bootstrap-height-2: 2rem; --bootstrap-height-3: 3rem; @@ -192,11 +194,13 @@ body { .bootstrap-grid { grid-auto-rows: minmax(1rem, min-content); - grid-template-columns: repeat(auto-fill, 8.33vw); } + grid-template-columns: repeat(auto-fill, 8.33vw); + grid-template-columns: repeat(auto-fill, calc((100vw - var(--scrollbar-width))* 0.0833)); } .bootstrap-grid.bootstrap-grid--fixed-columns { grid-template-columns: repeat(auto-fill, 3rem); } .bootstrap-grid.bootstrap-grid--fluid-rows { - grid-auto-rows: 8.33vw; } + grid-auto-rows: 8.33vw; + grid-auto-rows: calc((100vw - var(--scrollbar-width))* 0.0833); } .bootstrap-grid > * { grid-column: span 12; } @@ -333,8 +337,10 @@ body { padding-bottom: 15px; padding-top: 15px; } .bootstrap-grid { - grid-template-columns: repeat(auto-fill, 8.33rem); } + grid-template-columns: repeat(auto-fill, 8.33rem); + grid-template-columns: repeat(auto-fill, calc((100rem - var(--scrollbar-width))* 0.0833)); } .bootstrap-grid.bootstrap-grid--fixed-columns { grid-template-columns: repeat(auto-fill, 8.33333rem); } .bootstrap-grid.bootstrap-grid--fluid-rows { - grid-auto-rows: 8.33rem; } } + grid-auto-rows: 8.33rem; + grid-auto-rows: calc((100rem - var(--scrollbar-width))* 0.0833); } } diff --git a/examples/bootstrap/css-gridish/css/bootstrap-grid.min.css b/examples/bootstrap/css-gridish/css/bootstrap-grid.min.css index 39106ce..f914aaa 100755 --- a/examples/bootstrap/css-gridish/css/bootstrap-grid.min.css +++ b/examples/bootstrap/css-gridish/css/bootstrap-grid.min.css @@ -1 +1 @@ -html{font-size:15px}body{margin:0}.bootstrap-container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:100rem;overflow-x:hidden;width:100vw}.bootstrap-container--left{margin-left:0}.bootstrap-container--right{margin-right:0}.bootstrap-grid{align-items:flex-start;box-sizing:border-box;display:grid;flex-wrap:wrap;position:relative;grid-auto-rows:minmax(1rem,min-content);grid-template-columns:repeat(auto-fill,8.33vw)}.bootstrap-grid>*{box-sizing:border-box;grid-column:span 12}.bootstrap-grid>* :last-child,.bootstrap-grid>* :last-child>:last-child,.bootstrap-grid>* :last-child>:last-child>:last-child{margin-bottom:0}[class*=bootstrap-padding]{box-sizing:border-box}@supports (display:grid){.bootstrap-grid>*{height:100%}}:root{--bootstrap-height-1:1rem;--bootstrap-height-2:2rem;--bootstrap-height-3:3rem;--bootstrap-height-4:4rem;--bootstrap-height-5:5rem;--bootstrap-height-6:6rem;--bootstrap-height-7:7rem;--bootstrap-height-8:8rem;--bootstrap-height-9:9rem;--bootstrap-height-10:10rem;--bootstrap-height-11:11rem;--bootstrap-height-12:12rem;--bootstrap-height-13:13rem;--bootstrap-height-14:14rem;--bootstrap-height-15:15rem;--bootstrap-height-16:16rem;--bootstrap-height-17:17rem;--bootstrap-height-18:18rem;--bootstrap-height-19:19rem;--bootstrap-height-20:20rem;--bootstrap-height-21:21rem;--bootstrap-height-22:22rem;--bootstrap-height-23:23rem;--bootstrap-height-24:24rem;--bootstrap-height-25:25rem;--bootstrap-height-26:26rem;--bootstrap-height-27:27rem;--bootstrap-height-28:28rem;--bootstrap-height-29:29rem}.bootstrap-grid__height--sm--0{height:0;min-height:0}.bootstrap-grid__height--sm--1{grid-row:span 1}.bootstrap-grid__height--sm--2{grid-row:span 2}.bootstrap-grid__height--sm--3{grid-row:span 3}.bootstrap-grid__height--sm--4{grid-row:span 4}.bootstrap-grid__height--sm--5{grid-row:span 5}.bootstrap-grid__height--sm--6{grid-row:span 6}.bootstrap-grid__height--sm--7{grid-row:span 7}.bootstrap-grid__height--sm--8{grid-row:span 8}.bootstrap-grid__height--sm--9{grid-row:span 9}.bootstrap-grid__height--sm--10{grid-row:span 10}.bootstrap-grid__height--sm--11{grid-row:span 11}.bootstrap-grid__height--sm--12{grid-row:span 12}.bootstrap-grid__height--sm--13{grid-row:span 13}.bootstrap-grid__height--sm--14{grid-row:span 14}.bootstrap-grid__height--sm--15{grid-row:span 15}.bootstrap-grid__height--sm--16{grid-row:span 16}.bootstrap-grid__height--sm--17{grid-row:span 17}.bootstrap-grid__height--sm--18{grid-row:span 18}.bootstrap-grid__height--sm--19{grid-row:span 19}.bootstrap-grid__height--sm--20{grid-row:span 20}.bootstrap-grid__height--sm--21{grid-row:span 21}.bootstrap-grid__height--sm--22{grid-row:span 22}.bootstrap-grid__height--sm--23{grid-row:span 23}.bootstrap-grid__height--sm--24{grid-row:span 24}.bootstrap-grid__height--sm--25{grid-row:span 25}.bootstrap-grid__height--sm--26{grid-row:span 26}.bootstrap-grid__height--sm--27{grid-row:span 27}.bootstrap-grid__height--sm--28{grid-row:span 28}.bootstrap-grid__height--sm--29{grid-row:span 29}[class*=bootstrap-grid__col--sm--]{display:block}.bootstrap-grid__col--sm--0,.bootstrap-grid__col--sm--0--only{display:none}.bootstrap-padding{padding:15px}.bootstrap-padding--bottom{padding-bottom:15px}.bootstrap-padding--left{padding-left:15px}.bootstrap-padding--right{padding-right:15px}.bootstrap-padding--top{padding-top:15px}.bootstrap-padding--horizontal{padding-left:15px;padding-right:15px}.bootstrap-padding--vertical{padding-bottom:15px;padding-top:15px}.bootstrap-grid.bootstrap-grid--fixed-columns{grid-template-columns:repeat(auto-fill,3rem)}.bootstrap-grid.bootstrap-grid--fluid-rows{grid-auto-rows:8.33vw}.bootstrap-grid__col--sm--1,.bootstrap-grid__col--sm--1.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 1}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--1{grid-row:span 1}.bootstrap-grid__col--sm--2,.bootstrap-grid__col--sm--2.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 2}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--2{grid-row:span 2}.bootstrap-grid__col--sm--3,.bootstrap-grid__col--sm--3.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 3}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--3{grid-row:span 3}.bootstrap-grid__col--sm--4,.bootstrap-grid__col--sm--4.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 4}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--4{grid-row:span 4}.bootstrap-grid__col--sm--5,.bootstrap-grid__col--sm--5.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 5}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--5{grid-row:span 5}.bootstrap-grid__col--sm--6,.bootstrap-grid__col--sm--6.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 6}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--6{grid-row:span 6}.bootstrap-grid__col--sm--7,.bootstrap-grid__col--sm--7.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 7}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--7{grid-row:span 7}.bootstrap-grid__col--sm--8,.bootstrap-grid__col--sm--8.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 8}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--8{grid-row:span 8}.bootstrap-grid__col--sm--9,.bootstrap-grid__col--sm--9.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 9}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--9{grid-row:span 9}.bootstrap-grid__col--sm--10,.bootstrap-grid__col--sm--10.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 10}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--10{grid-row:span 10}.bootstrap-grid__col--sm--11,.bootstrap-grid__col--sm--11.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 11}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--11{grid-row:span 11}.bootstrap-grid__col--sm--12,.bootstrap-grid__col--sm--12.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 12}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--12{grid-row:span 12}@media screen and (min-width:100rem){.bootstrap-grid__col--sm--0--only,[class*=bootstrap-grid__col--xl--]{display:block}.bootstrap-grid__col--xl--0,.bootstrap-grid__col--xl--0--only{display:none}.bootstrap-padding{padding:15px}.bootstrap-padding--bottom{padding-bottom:15px}.bootstrap-padding--left{padding-left:15px}.bootstrap-padding--right{padding-right:15px}.bootstrap-padding--top{padding-top:15px}.bootstrap-padding--horizontal{padding-left:15px;padding-right:15px}.bootstrap-padding--vertical{padding-bottom:15px;padding-top:15px}.bootstrap-grid{grid-template-columns:repeat(auto-fill,8.33rem)}.bootstrap-grid.bootstrap-grid--fixed-columns{grid-template-columns:repeat(auto-fill,8.33333rem)}.bootstrap-grid.bootstrap-grid--fluid-rows{grid-auto-rows:8.33rem}} \ No newline at end of file +html{font-size:15px}body{margin:0}.bootstrap-container{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:100rem;overflow-x:hidden;padding-right:var(--scrollbar-width);width:100vw}.bootstrap-container--left{margin-left:0}.bootstrap-container--right{margin-right:0}.bootstrap-grid{align-items:flex-start;box-sizing:border-box;display:grid;flex-wrap:wrap;position:relative;grid-auto-rows:minmax(1rem,min-content);grid-template-columns:repeat(auto-fill,8.33vw);grid-template-columns:repeat(auto-fill,calc((100vw - var(--scrollbar-width))* .0833))}.bootstrap-grid>*{box-sizing:border-box;grid-column:span 12}.bootstrap-grid>* :last-child,.bootstrap-grid>* :last-child>:last-child,.bootstrap-grid>* :last-child>:last-child>:last-child{margin-bottom:0}[class*=bootstrap-padding]{box-sizing:border-box}@supports (display:grid){.bootstrap-grid>*{height:100%}}:root{--scrollbar-width:0px;--bootstrap-height-1:1rem;--bootstrap-height-2:2rem;--bootstrap-height-3:3rem;--bootstrap-height-4:4rem;--bootstrap-height-5:5rem;--bootstrap-height-6:6rem;--bootstrap-height-7:7rem;--bootstrap-height-8:8rem;--bootstrap-height-9:9rem;--bootstrap-height-10:10rem;--bootstrap-height-11:11rem;--bootstrap-height-12:12rem;--bootstrap-height-13:13rem;--bootstrap-height-14:14rem;--bootstrap-height-15:15rem;--bootstrap-height-16:16rem;--bootstrap-height-17:17rem;--bootstrap-height-18:18rem;--bootstrap-height-19:19rem;--bootstrap-height-20:20rem;--bootstrap-height-21:21rem;--bootstrap-height-22:22rem;--bootstrap-height-23:23rem;--bootstrap-height-24:24rem;--bootstrap-height-25:25rem;--bootstrap-height-26:26rem;--bootstrap-height-27:27rem;--bootstrap-height-28:28rem;--bootstrap-height-29:29rem}.bootstrap-grid__height--sm--0{height:0;min-height:0}.bootstrap-grid__height--sm--1{grid-row:span 1}.bootstrap-grid__height--sm--2{grid-row:span 2}.bootstrap-grid__height--sm--3{grid-row:span 3}.bootstrap-grid__height--sm--4{grid-row:span 4}.bootstrap-grid__height--sm--5{grid-row:span 5}.bootstrap-grid__height--sm--6{grid-row:span 6}.bootstrap-grid__height--sm--7{grid-row:span 7}.bootstrap-grid__height--sm--8{grid-row:span 8}.bootstrap-grid__height--sm--9{grid-row:span 9}.bootstrap-grid__height--sm--10{grid-row:span 10}.bootstrap-grid__height--sm--11{grid-row:span 11}.bootstrap-grid__height--sm--12{grid-row:span 12}.bootstrap-grid__height--sm--13{grid-row:span 13}.bootstrap-grid__height--sm--14{grid-row:span 14}.bootstrap-grid__height--sm--15{grid-row:span 15}.bootstrap-grid__height--sm--16{grid-row:span 16}.bootstrap-grid__height--sm--17{grid-row:span 17}.bootstrap-grid__height--sm--18{grid-row:span 18}.bootstrap-grid__height--sm--19{grid-row:span 19}.bootstrap-grid__height--sm--20{grid-row:span 20}.bootstrap-grid__height--sm--21{grid-row:span 21}.bootstrap-grid__height--sm--22{grid-row:span 22}.bootstrap-grid__height--sm--23{grid-row:span 23}.bootstrap-grid__height--sm--24{grid-row:span 24}.bootstrap-grid__height--sm--25{grid-row:span 25}.bootstrap-grid__height--sm--26{grid-row:span 26}.bootstrap-grid__height--sm--27{grid-row:span 27}.bootstrap-grid__height--sm--28{grid-row:span 28}.bootstrap-grid__height--sm--29{grid-row:span 29}[class*=bootstrap-grid__col--sm--]{display:block}.bootstrap-grid__col--sm--0,.bootstrap-grid__col--sm--0--only{display:none}.bootstrap-padding{padding:15px}.bootstrap-padding--bottom{padding-bottom:15px}.bootstrap-padding--left{padding-left:15px}.bootstrap-padding--right{padding-right:15px}.bootstrap-padding--top{padding-top:15px}.bootstrap-padding--horizontal{padding-left:15px;padding-right:15px}.bootstrap-padding--vertical{padding-bottom:15px;padding-top:15px}.bootstrap-grid.bootstrap-grid--fixed-columns{grid-template-columns:repeat(auto-fill,3rem)}.bootstrap-grid.bootstrap-grid--fluid-rows{grid-auto-rows:8.33vw;grid-auto-rows:calc((100vw - var(--scrollbar-width))* .0833)}.bootstrap-grid__col--sm--1,.bootstrap-grid__col--sm--1.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 1}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--1{grid-row:span 1}.bootstrap-grid__col--sm--2,.bootstrap-grid__col--sm--2.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 2}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--2{grid-row:span 2}.bootstrap-grid__col--sm--3,.bootstrap-grid__col--sm--3.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 3}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--3{grid-row:span 3}.bootstrap-grid__col--sm--4,.bootstrap-grid__col--sm--4.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 4}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--4{grid-row:span 4}.bootstrap-grid__col--sm--5,.bootstrap-grid__col--sm--5.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 5}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--5{grid-row:span 5}.bootstrap-grid__col--sm--6,.bootstrap-grid__col--sm--6.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 6}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--6{grid-row:span 6}.bootstrap-grid__col--sm--7,.bootstrap-grid__col--sm--7.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 7}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--7{grid-row:span 7}.bootstrap-grid__col--sm--8,.bootstrap-grid__col--sm--8.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 8}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--8{grid-row:span 8}.bootstrap-grid__col--sm--9,.bootstrap-grid__col--sm--9.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 9}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--9{grid-row:span 9}.bootstrap-grid__col--sm--10,.bootstrap-grid__col--sm--10.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 10}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--10{grid-row:span 10}.bootstrap-grid__col--sm--11,.bootstrap-grid__col--sm--11.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 11}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--11{grid-row:span 11}.bootstrap-grid__col--sm--12,.bootstrap-grid__col--sm--12.bootstrap-grid>:not([class*=bootstrap-grid__col]){grid-column:span 12}.bootstrap-grid--fluid-rows>.bootstrap-grid__height--sm--12{grid-row:span 12}@media screen and (min-width:100rem){.bootstrap-grid__col--sm--0--only,[class*=bootstrap-grid__col--xl--]{display:block}.bootstrap-grid__col--xl--0,.bootstrap-grid__col--xl--0--only{display:none}.bootstrap-padding{padding:15px}.bootstrap-padding--bottom{padding-bottom:15px}.bootstrap-padding--left{padding-left:15px}.bootstrap-padding--right{padding-right:15px}.bootstrap-padding--top{padding-top:15px}.bootstrap-padding--horizontal{padding-left:15px;padding-right:15px}.bootstrap-padding--vertical{padding-bottom:15px;padding-top:15px}.bootstrap-grid{grid-template-columns:repeat(auto-fill,8.33rem);grid-template-columns:repeat(auto-fill,calc((100rem - var(--scrollbar-width))* .0833))}.bootstrap-grid.bootstrap-grid--fixed-columns{grid-template-columns:repeat(auto-fill,8.33333rem)}.bootstrap-grid.bootstrap-grid--fluid-rows{grid-auto-rows:8.33rem;grid-auto-rows:calc((100rem - var(--scrollbar-width))* .0833)}} \ No newline at end of file diff --git a/examples/bootstrap/css-gridish/js/bootstrap-grid.js b/examples/bootstrap/css-gridish/js/bootstrap-grid.js new file mode 100644 index 0000000..6bd20d4 --- /dev/null +++ b/examples/bootstrap/css-gridish/js/bootstrap-grid.js @@ -0,0 +1,20 @@ +(function () { + var updateScrollbarWidth = function () { + const scrollbarWidth = + window.innerWidth - document.documentElement.clientWidth + "px"; + + document.documentElement.style.setProperty( + "--scrollbar-width", + scrollbarWidth + ); + }; + + var scrollbarObserver = new MutationObserver(updateScrollbarWidth); + scrollbarObserver.observe(document.body, { + attributes: true, + childList: true, + characterData: true + }); + + updateScrollbarWidth(); +})(); \ No newline at end of file diff --git a/examples/bootstrap/css-gridish/scss/_core.scss b/examples/bootstrap/css-gridish/scss/_core.scss index 502bee9..7ea5a1d 100755 --- a/examples/bootstrap/css-gridish/scss/_core.scss +++ b/examples/bootstrap/css-gridish/scss/_core.scss @@ -17,6 +17,7 @@ body { margin-right: auto; max-width: #{map-get($last, breakpoint)}rem; overflow-x: hidden; + padding-right: var(--scrollbar-width); width: 100vw; } @@ -77,8 +78,9 @@ body { } } -@include grid-legacy-wrapper($includeFlexFallback) { - :root { +:root { + --scrollbar-width: 0px; + @include grid-legacy-wrapper($includeFlexFallback) { @include grid-heights-fixed($rows); } } diff --git a/examples/bootstrap/css-gridish/scss/_mixins.scss b/examples/bootstrap/css-gridish/scss/_mixins.scss index cf7bf4b..0851a57 100755 --- a/examples/bootstrap/css-gridish/scss/_mixins.scss +++ b/examples/bootstrap/css-gridish/scss/_mixins.scss @@ -1,13 +1,15 @@ // Set the width of a grid’s column @mixin grid($breakpoint, $breakpointName) { @if (map-get($breakpoint, columns) != null) { - $columnSize: get-fluid-size($breakpointName, 1); + $columnSize: get-fluid-size($breakpointName, 1, false); + $columnSizeScrollbar: get-fluid-size($breakpointName, 1); .#{$prefix}-grid { @if is-same-breakpoint($breakpoint, $first) { grid-auto-rows: minmax($rowHeight * 1rem, min-content); } grid-template-columns: repeat(auto-fill, $columnSize); + grid-template-columns: repeat(auto-fill, $columnSizeScrollbar); &.#{$prefix}-grid--fixed-columns { grid-template-columns: repeat( @@ -20,6 +22,7 @@ &.#{$prefix}-grid--fluid-rows { grid-auto-rows: $columnSize; + grid-auto-rows: $columnSizeScrollbar; } @if is-same-breakpoint($breakpoint, $last) == false { @@ -55,7 +58,8 @@ $columnMultiplier: $i * map-get($breakpoint, columns) / map-get($currentBreakpoint, columns); - $columnSize: get-fluid-size($name, $columnMultiplier); + $columnSize: get-fluid-size($name, $columnMultiplier, false); + $columnSizeScrollbar: get-fluid-size($name, $columnMultiplier); $isSecondToLast: is-same-breakpoint( $breakpoint, @@ -63,6 +67,11 @@ ); $maxColumnSize: get-fluid-size( + nth(nth($allBreakpoints, length($allBreakpoints)), 1), + $columnMultiplier, + false + ); + $maxColumnSizeScrollbar: get-fluid-size( nth(nth($allBreakpoints, length($allBreakpoints)), 1), $columnMultiplier ); @@ -72,8 +81,10 @@ // If second-to-last media query, apply max-width instead of remaking classes in last media query @if $isSecondToLast { max-width: $maxColumnSize; + max-width: $maxColumnSizeScrollbar; } width: $columnSize; + width: $columnSizeScrollbar; } grid-column: span #{$columnMultiplier}; @@ -89,10 +100,13 @@ grid-row: span $i; @if $includeFlexFallback { height: $columnSize; + height: $columnSizeScrollbar; min-height: $columnSize; + min-height: $columnSizeScrollbar; // If second-to-last media query, apply max-height instead of remaking classes in last media query @if $isSecondToLast { max-height: $maxColumnSize; + max-height: $maxColumnSizeScrollbar; } } } diff --git a/examples/bootstrap/css-gridish/scss/_utilities.scss b/examples/bootstrap/css-gridish/scss/_utilities.scss index 1d29635..31d2fd1 100644 --- a/examples/bootstrap/css-gridish/scss/_utilities.scss +++ b/examples/bootstrap/css-gridish/scss/_utilities.scss @@ -18,6 +18,7 @@ /// Returns a calc() expression that represents a fluid width at a given breakpoint. /// @param {String} $breakpointName A valid breakpoint. /// @param {Number} $columnSpan The number of columns to span across. +/// @param {Boolean} $supportsCSSVariable Does the output rule include CSS Variables? /// @return {Length} A calc() expression representing fluid width. /// @example scss /// button { @@ -31,7 +32,11 @@ /// max-width: 25vw; /// } /// } -@function get-fluid-size($breakpointName, $columnSpan) { +@function get-fluid-size( + $breakpointName, + $columnSpan, + $supportsCSSVariable: true +) { $breakpoint: map-get($breakpointsAndArtboards, $breakpointName); @if ($breakpoint == null or type-of($breakpoint) != "map") { @@ -54,16 +59,27 @@ } $container: 100vw; + @if ($supportsCSSVariable) { + $container: "(100vw - var(--scrollbar-width))"; + } + // Last breakpoint is a max-width and should be a fixed number @if is-same-breakpoint($breakpoint, $last) { $container: map-get($breakpoint, breakpoint) * 1rem; + @if ($supportsCSSVariable) { + $container: "(#{$container} - var(--scrollbar-width))"; + } } $multiplier: round-decimal($columnSpan / $columnTotal, 4, floor); // For IE, we can't have a 0 in the $fluidWidth calc(). @if ($margin == 0) { - @return $container * $multiplier; + @if ($supportsCSSVariable) { + @return calc(#{$container}* #{$multiplier}); + } @else { + @return $container * $multiplier; + } } @return calc((#{$container} - #{$margin * 2}) * #{$multiplier}); diff --git a/examples/bootstrap/index.html b/examples/bootstrap/index.html index 9aaac3a..90082b2 100644 --- a/examples/bootstrap/index.html +++ b/examples/bootstrap/index.html @@ -51,6 +51,7 @@

Bootstrap Example

+ \ No newline at end of file diff --git a/examples/material/index.html b/examples/material/index.html index 5a2444c..28cef5e 100644 --- a/examples/material/index.html +++ b/examples/material/index.html @@ -51,6 +51,7 @@

Material Example

+ \ No newline at end of file diff --git a/src/docs/README.md.hbs b/src/docs/README.md.hbs index e23883c..06716cc 100755 --- a/src/docs/README.md.hbs +++ b/src/docs/README.md.hbs @@ -24,6 +24,8 @@ There are three CSS files to choose from based on what browser support you want | `css/{{config.prefix}}-grid.min.css` | To only support browsers with [CSS Grid Layout support](https://developer.mozilla.org/en-US/docs/Web/CSS/grid#Browser_compatibility) | | `css/{{config.prefix}}-grid-minimal.min.css` | To only support browsers with [CSS Grid Layout support](https://developer.mozilla.org/en-US/docs/Web/CSS/grid#Browser_compatibility), but not use any generated column or height classes | +There is also an optional JavaScript file included at `js/{{config.prefix}}-grid.js`. This will adjust the grid to not go behind browser scrollbars since different browsers handle the `vw` unit differently. It applies to any browser that supports [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables#Browser_compatibility) and [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver#Browser_compatibility). + ## Breakpoints A breakpoint is where the number of columns or another value changes using a media query. There are currently {{length config.breakpoints}} breakpoints where the design specs change for our grid. The great thing about CSS Grid Layout is that you can rearrange your layout at any custom breakpoint between those: diff --git a/src/index.js b/src/index.js index 4360ece..d82be0f 100755 --- a/src/index.js +++ b/src/index.js @@ -27,6 +27,7 @@ const route = const dirDest = `${dirRoot}/${route}`; const dirDestCss = `${dirDest}/\css`; const dirDestDesign = `${__dirname}/css-gridish-design.json`; +const dirDestJs = `${dirDest}/js`; const dirDestScss = `${dirDest}/s\css`; const dirDestSketch = `${dirDest}/sketch`; const prefix = config.prefix ? config.prefix : "gridish"; @@ -67,7 +68,12 @@ handlebars.registerHelper("math", function(lvalue, operator, rvalue, options) { }); gulp.task("clean", function() { - return del([dirDestCss, dirDestScss, `${dirDest}/${prefix}-grid.sketch`]); + return del([ + dirDestCss, + dirDestJs, + dirDestScss, + `${dirDest}/${prefix}-grid.sketch` + ]); }); gulp.task("css", ["scssRenameMinimal"], function() { @@ -115,7 +121,7 @@ gulp.task("css-minimal", ["css-legacy"], function() { .pipe(gulp.dest(dirDestCss)); }); -gulp.task("docs", ["css-minimal"], function() { +gulp.task("docs", ["js"], function() { return gulp .src(`${__dirname}/docs/*.hbs`) .pipe( @@ -144,6 +150,13 @@ gulp.task("docs", ["css-minimal"], function() { .pipe(gulp.dest(dirDest)); }); +gulp.task("js", ["css-minimal"], function() { + return gulp + .src(`${__dirname}/js/gridish-grid.js`) + .pipe(rename(`${prefix}-grid.js`)) + .pipe(gulp.dest(dirDestJs)); +}); + gulp.task("scss", ["valuesClean"], function() { return gulp.src(`${__dirname}/scss/**/*.s\css`).pipe(gulp.dest(dirDestScss)); }); diff --git a/src/js/gridish-grid.js b/src/js/gridish-grid.js new file mode 100644 index 0000000..6bd20d4 --- /dev/null +++ b/src/js/gridish-grid.js @@ -0,0 +1,20 @@ +(function () { + var updateScrollbarWidth = function () { + const scrollbarWidth = + window.innerWidth - document.documentElement.clientWidth + "px"; + + document.documentElement.style.setProperty( + "--scrollbar-width", + scrollbarWidth + ); + }; + + var scrollbarObserver = new MutationObserver(updateScrollbarWidth); + scrollbarObserver.observe(document.body, { + attributes: true, + childList: true, + characterData: true + }); + + updateScrollbarWidth(); +})(); \ No newline at end of file diff --git a/src/scss/_core.scss b/src/scss/_core.scss index 502bee9..7ea5a1d 100755 --- a/src/scss/_core.scss +++ b/src/scss/_core.scss @@ -17,6 +17,7 @@ body { margin-right: auto; max-width: #{map-get($last, breakpoint)}rem; overflow-x: hidden; + padding-right: var(--scrollbar-width); width: 100vw; } @@ -77,8 +78,9 @@ body { } } -@include grid-legacy-wrapper($includeFlexFallback) { - :root { +:root { + --scrollbar-width: 0px; + @include grid-legacy-wrapper($includeFlexFallback) { @include grid-heights-fixed($rows); } } diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss index cf7bf4b..0851a57 100755 --- a/src/scss/_mixins.scss +++ b/src/scss/_mixins.scss @@ -1,13 +1,15 @@ // Set the width of a grid’s column @mixin grid($breakpoint, $breakpointName) { @if (map-get($breakpoint, columns) != null) { - $columnSize: get-fluid-size($breakpointName, 1); + $columnSize: get-fluid-size($breakpointName, 1, false); + $columnSizeScrollbar: get-fluid-size($breakpointName, 1); .#{$prefix}-grid { @if is-same-breakpoint($breakpoint, $first) { grid-auto-rows: minmax($rowHeight * 1rem, min-content); } grid-template-columns: repeat(auto-fill, $columnSize); + grid-template-columns: repeat(auto-fill, $columnSizeScrollbar); &.#{$prefix}-grid--fixed-columns { grid-template-columns: repeat( @@ -20,6 +22,7 @@ &.#{$prefix}-grid--fluid-rows { grid-auto-rows: $columnSize; + grid-auto-rows: $columnSizeScrollbar; } @if is-same-breakpoint($breakpoint, $last) == false { @@ -55,7 +58,8 @@ $columnMultiplier: $i * map-get($breakpoint, columns) / map-get($currentBreakpoint, columns); - $columnSize: get-fluid-size($name, $columnMultiplier); + $columnSize: get-fluid-size($name, $columnMultiplier, false); + $columnSizeScrollbar: get-fluid-size($name, $columnMultiplier); $isSecondToLast: is-same-breakpoint( $breakpoint, @@ -63,6 +67,11 @@ ); $maxColumnSize: get-fluid-size( + nth(nth($allBreakpoints, length($allBreakpoints)), 1), + $columnMultiplier, + false + ); + $maxColumnSizeScrollbar: get-fluid-size( nth(nth($allBreakpoints, length($allBreakpoints)), 1), $columnMultiplier ); @@ -72,8 +81,10 @@ // If second-to-last media query, apply max-width instead of remaking classes in last media query @if $isSecondToLast { max-width: $maxColumnSize; + max-width: $maxColumnSizeScrollbar; } width: $columnSize; + width: $columnSizeScrollbar; } grid-column: span #{$columnMultiplier}; @@ -89,10 +100,13 @@ grid-row: span $i; @if $includeFlexFallback { height: $columnSize; + height: $columnSizeScrollbar; min-height: $columnSize; + min-height: $columnSizeScrollbar; // If second-to-last media query, apply max-height instead of remaking classes in last media query @if $isSecondToLast { max-height: $maxColumnSize; + max-height: $maxColumnSizeScrollbar; } } } diff --git a/src/scss/_utilities.scss b/src/scss/_utilities.scss index 1d29635..31d2fd1 100644 --- a/src/scss/_utilities.scss +++ b/src/scss/_utilities.scss @@ -18,6 +18,7 @@ /// Returns a calc() expression that represents a fluid width at a given breakpoint. /// @param {String} $breakpointName A valid breakpoint. /// @param {Number} $columnSpan The number of columns to span across. +/// @param {Boolean} $supportsCSSVariable Does the output rule include CSS Variables? /// @return {Length} A calc() expression representing fluid width. /// @example scss /// button { @@ -31,7 +32,11 @@ /// max-width: 25vw; /// } /// } -@function get-fluid-size($breakpointName, $columnSpan) { +@function get-fluid-size( + $breakpointName, + $columnSpan, + $supportsCSSVariable: true +) { $breakpoint: map-get($breakpointsAndArtboards, $breakpointName); @if ($breakpoint == null or type-of($breakpoint) != "map") { @@ -54,16 +59,27 @@ } $container: 100vw; + @if ($supportsCSSVariable) { + $container: "(100vw - var(--scrollbar-width))"; + } + // Last breakpoint is a max-width and should be a fixed number @if is-same-breakpoint($breakpoint, $last) { $container: map-get($breakpoint, breakpoint) * 1rem; + @if ($supportsCSSVariable) { + $container: "(#{$container} - var(--scrollbar-width))"; + } } $multiplier: round-decimal($columnSpan / $columnTotal, 4, floor); // For IE, we can't have a 0 in the $fluidWidth calc(). @if ($margin == 0) { - @return $container * $multiplier; + @if ($supportsCSSVariable) { + @return calc(#{$container}* #{$multiplier}); + } @else { + @return $container * $multiplier; + } } @return calc((#{$container} - #{$margin * 2}) * #{$multiplier});