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 f27676d..5c62638 100644
Binary files a/examples/bootstrap/css-gridish/bootstrap-grid.sketch and b/examples/bootstrap/css-gridish/bootstrap-grid.sketch differ
diff --git a/examples/bootstrap/css-gridish/css/bootstrap-grid-minimal.css b/examples/bootstrap/css-gridish/css/bootstrap-grid-minimal.css
new file mode 100644
index 0000000..2ec7bac
--- /dev/null
+++ b/examples/bootstrap/css-gridish/css/bootstrap-grid-minimal.css
@@ -0,0 +1,127 @@
+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; }
+  .bootstrap-grid > * {
+    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 9225b33..07fe8ee 100644
Binary files a/examples/carbon/css-gridish/bx-grid.sketch and b/examples/carbon/css-gridish/bx-grid.sketch differ
diff --git a/examples/carbon/css-gridish/css/bx-grid-minimal.css b/examples/carbon/css-gridish/css/bx-grid-minimal.css
new file mode 100644
index 0000000..98fe133
--- /dev/null
+++ b/examples/carbon/css-gridish/css/bx-grid-minimal.css
@@ -0,0 +1,204 @@
+html {
+  font-size: 16px; }
+
+body {
+  margin: 0; }
+
+.bx-container {
+  box-sizing: border-box;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 100rem;
+  overflow-x: hidden;
+  width: 100vw; }
+
+.bx-container--left {
+  margin-left: 0; }
+
+.bx-container--right {
+  margin-right: 0; }
+
+.bx-grid {
+  align-items: flex-start;
+  box-sizing: border-box;
+  display: grid;
+  flex-wrap: wrap;
+  position: relative; }
+  .bx-grid > * {
+    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 ae40c0d..5d4d83b 100644
Binary files a/examples/material/css-gridish/material-grid.sketch and b/examples/material/css-gridish/material-grid.sketch differ
diff --git a/examples/material/css-gridish/scss/_core.scss b/examples/material/css-gridish/scss/_core.scss
index 0df8cfd..502bee9 100755
--- a/examples/material/css-gridish/scss/_core.scss
+++ b/examples/material/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/material/css-gridish/scss/_variables.scss b/examples/material/css-gridish/scss/_variables.scss
index 19b5e36..1863d1e 100755
--- a/examples/material/css-gridish/scss/_variables.scss
+++ b/examples/material/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/material/css-gridish/scss/material-grid-minimal.scss b/examples/material/css-gridish/scss/material-grid-minimal.scss
new file mode 100644
index 0000000..6826a5e
--- /dev/null
+++ b/examples/material/css-gridish/scss/material-grid-minimal.scss
@@ -0,0 +1,3 @@
+$minimal: true;
+
+@import "core.scss";
diff --git a/src/docs/README.md.hbs b/src/docs/README.md.hbs
index b9c67ff..e23883c 100755
--- a/src/docs/README.md.hbs
+++ b/src/docs/README.md.hbs
@@ -1,12 +1,12 @@
 {{{config.intro}}}
 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 `{{config.prefix}}-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 `{{config.prefix}}-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:
 
@@ -14,21 +14,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/{{config.prefix}}-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/{{config.prefix}}-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/{{config.prefix}}-grid.min.css`.
+| Filename | When to Use |
+| ---------- | ----------------- |
+| `css/{{config.prefix}}-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/{{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 |
 
 ## Breakpoints
 
-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:
+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:
 
 | Breakpoint | Number of Columns | Width    | Value  |
 | ---------- | ----------------- | ------- | ------ |
@@ -58,30 +56,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                                                                                    |
-| ----------------------------------------- | ------------------------------------------------------------------------------------------ |
-| `.{{config.prefix}}-container`                          | Container element of whole page for proper margin and max-width (can be used on body tag ) |
-| `.{{config.prefix}}-container--[left, right]`            | Align the container element to the left or right side                                      |
-| `.{{config.prefix}}-container__bleed--[{{#each config.classBreakpoints}}{{this}}{{#unless @last}}, {{/unless}}{{/each}}]`                         | Extend the background color of a container child into the container margin on both sides starting at a specific breakpoint (CSS Grid browsers only)        |
-| `.{{config.prefix}}-container__bleed--[{{#each config.classBreakpoints}}{{this}}{{#unless @last}}, {{/unless}}{{/each}}]--[left, right]`           | Extend the background color of a grid into the container margin on one side at a specific breakpoint (CSS Grid browsers only)           |
-| `.{{config.prefix}}-container__break--[{{#each config.classBreakpoints}}{{this}}{{#unless @last}}, {{/unless}}{{/each}}]`                         | Child of container element should ignore grid’s margin at a specific breakpoint (CSS Grid browsers only)       |
-| `.{{config.prefix}}-container__break--[{{#each config.classBreakpoints}}{{this}}{{#unless @last}}, {{/unless}}{{/each}}]--[left, right]`           | Child of container element should ignore grid’s margin on one side at a specific breakpoint (CSS Grid browsers only)                             |
-| `.{{config.prefix}}-grid`                               | Use anytime you want to apply CSS Grid Layout, including as embedded subgrids              |
-| `.{{config.prefix}}-grid--fixed-columns`                         | Switch grid’s column widths to fixed instead of fluid                                       |
-| `.{{config.prefix}}-grid--fluid-rows`                         | Switch grid’s row height to match the width of a column                                        |
-| `.{{config.prefix}}-padding`                            | Add one unit of padding to element on all sides                                            |
-| `.{{config.prefix}}-padding--[bottom, left, right, top]` | Add one unit of padding to element on one side                                             |
-| `.{{config.prefix}}-padding--[horizontal, vertical]`     | Add one unit of padding to element on two sides                                            |
-{{#each config.breakpoints}}
-{{#unless @last}}| `.{{../config.prefix}}-grid__col--{{@key}}--[1-{{columns}}]`                          | Set the width out of {{columns}} columns for an item in the grid starting at the {{@key}} breakpoint |
-{{/unless}}{{/each ~}}
-| `.{{config.prefix}}-grid__col--[{{#each config.classBreakpoints}}{{this}}{{#unless @last}}, {{/unless}}{{/each}}]--0`                          | Do not display item at a specific breakpoint, but display at the next breakpoint with columns specified |
-| `.{{config.prefix}}-grid__col--[{{#each config.classBreakpoints}}{{this}}{{#unless @last}}, {{/unless}}{{/each}}]--0--only`                          | Do not display item only at specific breakpoint |
-| `.{{config.prefix}}-grid__height--[{{#each config.classBreakpoints}}{{this}}{{#unless @last}}, {{/unless}}{{/each}}]--[1-{{config.rows}}]`                          | Set the min-height based on an interval of {{math config.rowHeight "*" config.rem}}px for an item starting at the breakpoint specified |
-| `.{{config.prefix}}-grid__height--[{{#each config.classBreakpoints}}{{this}}{{#unless @last}}, {{/unless}}{{/each}}]--0`                          | Reset the min-height for an item starting at the specified breakpoint |
+| Class Name | Purpose | Child? |
+| ---------- | ------- | ------ |
+| `.{{config.prefix}}-container` | Container element of whole page for proper margin and max-width (can be used on body tag). You need to use `.{{config.prefix}}-grid` on this same element. | No |
+| `.{{config.prefix}}-container--[left, right]` | Align the container element to the left or right side | |
+| `.{{config.prefix}}-container__bleed--[{{#each config.classBreakpoints}}{{this}}{{#unless @last}}, {{/unless}}{{/each}}]` | 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 `.{{config.prefix}}-container` |
+| `.{{config.prefix}}-container__bleed--[{{#each config.classBreakpoints}}{{this}}{{#unless @last}}, {{/unless}}{{/each}}]--[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 `.{{config.prefix}}-container` |
+| `.{{config.prefix}}-container__break--[{{#each config.classBreakpoints}}{{this}}{{#unless @last}}, {{/unless}}{{/each}}]` |Ignore container’s margin at a specific breakpoint (CSS Grid browsers only) | Child of `.{{config.prefix}}-container` |
+| `.{{config.prefix}}-container__break--[{{#each config.classBreakpoints}}{{this}}{{#unless @last}}, {{/unless}}{{/each}}]--[left, right]` | Ignore container’s margin on one side at a specific breakpoint (CSS Grid browsers only) | Child of `.{{config.prefix}}-container` |
+| `.{{config.prefix}}-grid` | Use anytime you want to apply CSS Grid Layout, including as embedded subgrids | Peer of `.{{config.prefix}}-container` or direct child of another `.{{config.prefix}}-grid` |
+| `.{{config.prefix}}-grid--fixed-columns` | Switch grid’s column widths to fixed instead of fluid | |
+| `.{{config.prefix}}-grid--fluid-rows` | Switch grid’s row height to match the width of a column | |
+| `.{{config.prefix}}-padding` | Add one unit of padding to element on all sides | Child of `.{{config.prefix}}-grid` |
+| `.{{config.prefix}}-padding--[bottom, left, right, top]` | Add one unit of padding to element on one side | Child of `.{{config.prefix}}-grid` |
+| `.{{config.prefix}}-padding--[horizontal, vertical]` | Add one unit of padding to element on two sides | Child of `.{{config.prefix}}-grid` |
 
 By default, the grid code uses fluid columns and fixed rows. You can switch both aspects with `.{{config.prefix}}-grid--fixed-columns` and `.{{config.prefix}}-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/{{config.prefix}}-grid.min.css` and `css/{{config.prefix}}-grid-legacy.min.css`. For the minimal file, you would instead use native CSS Grid rules as needed.
+
+| Class Name | Purpose | Child? |
+| ---------- | ------- | ------ |
+{{#each config.breakpoints}}
+{{#unless @last}}| `.{{../config.prefix}}-grid__col--{{@key}}--[1-{{columns}}]` | Set the width out of {{columns}} columns for an item in the grid starting at the {{@key}} breakpoint | Child of `.{{../config.prefix}}-grid` |
+{{/unless}}{{/each ~}}
+| `.{{config.prefix}}-grid__col--[{{#each config.classBreakpoints}}{{this}}{{#unless @last}}, {{/unless}}{{/each}}]--0` | Do not display item at a specific breakpoint, but display at the next breakpoint with columns specified | Child of `.{{config.prefix}}-grid` |
+| `.{{config.prefix}}-grid__col--[{{#each config.classBreakpoints}}{{this}}{{#unless @last}}, {{/unless}}{{/each}}]--0--only` | Do not display item only at specific breakpoint | Child of `.{{config.prefix}}-grid` |
+| `.{{config.prefix}}-grid__height--[{{#each config.classBreakpoints}}{{this}}{{#unless @last}}, {{/unless}}{{/each}}]--[1-{{config.rows}}]` | Set the min-height based on an interval of {{math config.rowHeight "*" config.rem}}px for an item starting at the breakpoint specified | Child of `.{{config.prefix}}-grid` |
+| `.{{config.prefix}}-grid__height--[{{#each config.classBreakpoints}}{{this}}{{#unless @last}}, {{/unless}}{{/each}}]--0` | Reset the min-height for an item starting at the specified breakpoint | Child of `.{{config.prefix}}-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 `.{{config.prefix}}-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 (`.{{config.prefix}}-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 `.{{config.prefix}}-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 `.{{config.prefix}}-grid__col--{{config.classBreakpoints.[0]}}--1` be the size of `.{{config.prefix}}-grid__col--{{config.classBreakpoints.[1]}}--2` if no `{{config.classBreakpoints.[1]}}` 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 
-`.{{config.prefix}}-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 `.{{config.prefix}}-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 `.{{config.prefix}}-grid__col--{{config.classBreakpoints.[0]}}--1` be the size of `.{{config.prefix}}-grid__col--{{config.classBreakpoints.[1]}}--2` if no `{{config.classBreakpoints.[1]}}` class was declared.
\ No newline at end of file
+`.{{config.prefix}}-grid` elements inside of each other and still respect the overall grid design.
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index a70a012..4360ece 100755
--- a/src/index.js
+++ b/src/index.js
@@ -70,7 +70,7 @@ gulp.task("clean", function() {
   return del([dirDestCss, dirDestScss, `${dirDest}/${prefix}-grid.sketch`]);
 });
 
-gulp.task("css", ["scssRenameLegacy"], function() {
+gulp.task("css", ["scssRenameMinimal"], function() {
   return gulp
     .src(`${dirDestScss}/${prefix}-grid.s\css`)
     .pipe(sass().on("error", sass.logError))
@@ -100,7 +100,22 @@ gulp.task("css-legacy", ["css"], function() {
     .pipe(gulp.dest(dirDestCss));
 });
 
-gulp.task("docs", ["css-legacy"], function() {
+gulp.task("css-minimal", ["css-legacy"], function() {
+  return gulp
+    .src(`${dirDestScss}/${prefix}-grid-minimal.s\css`)
+    .pipe(sass().on("error", sass.logError))
+    .pipe(rename(`${prefix}-grid-minimal.\css`))
+    .pipe(gulp.dest(dirDestCss))
+    .pipe(
+      cleanCSS({
+        level: 2
+      })
+    )
+    .pipe(rename(`${prefix}-grid-minimal.min.\css`))
+    .pipe(gulp.dest(dirDestCss));
+});
+
+gulp.task("docs", ["css-minimal"], function() {
   return gulp
     .src(`${__dirname}/docs/*.hbs`)
     .pipe(
@@ -149,6 +164,14 @@ gulp.task("scssRenameLegacy", ["scssRename"], function() {
     .pipe(gulp.dest(dirDestScss));
 });
 
+gulp.task("scssRenameMinimal", ["scssRenameLegacy"], function() {
+  return gulp
+    .src(`${dirDestScss}/gridish-grid-minimal.s\css`)
+    .pipe(vinylPaths(del))
+    .pipe(rename(`${prefix}-grid-minimal.s\css`))
+    .pipe(gulp.dest(dirDestScss));
+});
+
 gulp.task("sketchClean", ["sketchZip"], function() {
   return del([dirDestSketch]);
 });
diff --git a/src/scss/_core.scss b/src/scss/_core.scss
index 0df8cfd..502bee9 100755
--- a/src/scss/_core.scss
+++ b/src/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/src/scss/_variables.scss b/src/scss/_variables.scss
index 19b5e36..1863d1e 100755
--- a/src/scss/_variables.scss
+++ b/src/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/src/scss/gridish-grid-minimal.scss b/src/scss/gridish-grid-minimal.scss
new file mode 100644
index 0000000..6826a5e
--- /dev/null
+++ b/src/scss/gridish-grid-minimal.scss
@@ -0,0 +1,3 @@
+$minimal: true;
+
+@import "core.scss";