Base Micro Grid
Base Micro Grid is designed in a way where you can add it on top of the Base CSS framework or to your own custom project.
Table of contents
Overview
Base Micro Grid contains styles for flex grids with rows and basic columns for all breakpoints.
Installation
If you have an existing project and would like to include the Base micro grid module, run the following command:
npm install --save @getbase/micro-gridOnce you have the micro grid module installed, you can include it in your CSS/LESS/SCSS file with one of the following ways:
CSS Import:
@import url("https://unpkg.com/@getbase/micro-grid/index.css");SCSS Import:
/* Import Base Micro Grid */
@import "~@getbase/micro-grid/scss/index";
/* Your Other Styles */
@import "main"LESS Import:
/* Import Base Micro Grid */
@import "~@getbase/micro-grid/less/index";
/* Your Other Styles */
@import "main"Documentation
Base Micro Grid includes styles for flex grids with rows and basic columns for all breakpoints.
Micro Grid (Applies to SCSS/LESS)
| Class | Purpose | Example | Outcome |
|---|---|---|---|
.row |
Apply a .row when wrapping columns |
<div class="row">This needs to be wrapped around columns.</div> |
Applies a .row to a div element which has a negative margin left and right of the gutter spacing for all breakpoints |
.col-1-2 |
Apply a .col-1-2
|
<div class="col-1-2">Column</div> |
Applies a .col-1-2 to a div element which has a padding left and right of gutter spacing and a width of 50% for all breakpoints |
.col-1-3 |
Apply a .col-1-3
|
<div class="col-1-3">Column</div> |
Applies a .col-1-3 to a div element which has a padding left and right of gutter spacing and a width of 33.33333% for all breakpoints |
.col-2-3 |
Apply a .col-2-3
|
<div class="col-2-3">Column</div> |
Applies a .col-2-3 to a div element which has a padding left and right of gutter spacing and a width of 66.66667% for all breakpoints |
.col-1-4 |
Apply a .col-1-4
|
<div class="col-1-4">Column</div> |
Applies a .col-1-4 to a div element which has a padding left and right of gutter spacing and a width of 25% for all breakpoints |
.col-3-4 |
Apply a .col-3-4
|
<div class="col-3-4">Column</div> |
Applies a .col-3-4 to a div element which has a padding left and right of gutter spacing and a width of 75% for all breakpoints |
.col-1-5 |
Apply a .col-1-5
|
<div class="col-1-5">Column</div> |
Applies a .col-1-5 to a div element which has a padding left and right of gutter spacing and a width of 20% for all breakpoints |
.col-2-5 |
Apply a .col-2-5
|
<div class="col-2-5">Column</div> |
Applies a .col-2-5 to a div element which has a padding left and right of gutter spacing and a width of 40% for all breakpoints |
.col-3-5 |
Apply a .col-3-5
|
<div class="col-3-5">Column</div> |
Applies a .col-3-5 to a div element which has a padding left and right of gutter spacing and a width of 60% for all breakpoints |
.col-4-5 |
Apply a .col-4-5
|
<div class="col-4-5">Column</div> |
Applies a .col-4-5 to a div element which has a padding left and right of gutter spacing and a width of 80% for all breakpoints |
.col-full |
Apply a .col-full
|
<div class="col-full">Column</div> |
Applies a .col-full to a div element which has a padding left and right of gutter spacing and a width of 100% for all breakpoints |
.row-m |
Apply a .row-m when wrapping columns |
<div class="row-m">This needs to be wrapped around columns.</div> |
Applies a .row-m to a div element which has a negative margin left and right of the gutter spacing for medium devices and up |
.col-1-2-m |
Apply a .col-1-2-m
|
<div class="col-1-2-m">Column</div> |
Applies a .col-1-2-m to a div element which has a padding left and right of gutter spacing and a width of 50% for medium devices and up |
.col-1-3-m |
Apply a .col-1-3-m
|
<div class="col-1-3-m">Column</div> |
Applies a .col-1-3-m to a div element which has a padding left and right of gutter spacing and a width of 33.33333% for medium devices and up |
.col-2-3-m |
Apply a .col-2-3-m
|
<div class="col-2-3-m">Column</div> |
Applies a .col-2-3-m to a div element which has a padding left and right of gutter spacing and a width of 66.66667% for medium devices and up |
.col-1-4-m |
Apply a .col-1-4-m
|
<div class="col-1-4-m">Column</div> |
Applies a .col-1-4-m to a div element which has a padding left and right of gutter spacing and a width of 25% for medium devices and up |
.col-3-4-m |
Apply a .col-3-4-m
|
<div class="col-3-4-m">Column</div> |
Applies a .col-3-4-m to a div element which has a padding left and right of gutter spacing and a width of 75% for medium devices and up |
.col-1-5-m |
Apply a .col-1-5-m
|
<div class="col-1-5-m">Column</div> |
Applies a .col-1-5-m to a div element which has a padding left and right of gutter spacing and a width of 20% for medium devices and up |
.col-2-5-m |
Apply a .col-2-5-m
|
<div class="col-2-5-m">Column</div> |
Applies a .col-2-5-m to a div element which has a padding left and right of gutter spacing and a width of 40% for medium devices and up |
.col-3-5-m |
Apply a .col-3-5-m
|
<div class="col-3-5-m">Column</div> |
Applies a .col-3-5-m to a div element which has a padding left and right of gutter spacing and a width of 60% for medium devices and up |
.col-4-5-m |
Apply a .col-4-5-m
|
<div class="col-4-5-m">Column</div> |
Applies a .col-4-5-m to a div element which has a padding left and right of gutter spacing and a width of 80% for medium devices and up |
.col-full-m |
Apply a .col-full-m
|
<div class="col-full-m">Column</div> |
Applies a .col-full-m to a div element which has a padding left and right of gutter spacing and a width of 100% for medium devices and up |
.row-l |
Apply a .row-l when wrapping columns |
<div class="row-l">This needs to be wrapped around columns.</div> |
Applies a .row-l to a div element which has a negative margin left and right of the gutter spacing for large devices and up |
.col-1-2-l |
Apply a .col-1-2-l
|
<div class="col-1-2-l">Column</div> |
Applies a .col-1-2-l to a div element which has a padding left and right of gutter spacing and a width of 50% for large devices and up |
.col-1-3-l |
Apply a .col-1-3-l
|
<div class="col-1-3-l">Column</div> |
Applies a .col-1-3-l to a div element which has a padding left and right of gutter spacing and a width of 33.33333% for large devices and up |
.col-2-3-l |
Apply a .col-2-3-l
|
<div class="col-2-3-l">Column</div> |
Applies a .col-2-3-l to a div element which has a padding left and right of gutter spacing and a width of 66.66667% for large devices and up |
.col-1-4-l |
Apply a .col-1-4-l
|
<div class="col-1-4-l">Column</div> |
Applies a .col-1-4-l to a div element which has a padding left and right of gutter spacing and a width of 25% for large devices and up |
.col-3-4-l |
Apply a .col-3-4-l
|
<div class="col-3-4-l">Column</div> |
Applies a .col-3-4-l to a div element which has a padding left and right of gutter spacing and a width of 75% for large devices and up |
.col-1-5-l |
Apply a .col-1-5-l
|
<div class="col-1-5-l">Column</div> |
Applies a .col-1-5-l to a div element which has a padding left and right of gutter spacing and a width of 20% for large devices and up |
.col-2-5-l |
Apply a .col-2-5-l
|
<div class="col-2-5-l">Column</div> |
Applies a .col-2-5-l to a div element which has a padding left and right of gutter spacing and a width of 40% for large devices and up |
.col-3-5-l |
Apply a .col-3-5-l
|
<div class="col-3-5-l">Column</div> |
Applies a .col-3-5-l to a div element which has a padding left and right of gutter spacing and a width of 60% for large devices and up |
.col-4-5-l |
Apply a .col-4-5-l
|
<div class="col-4-5-l">Column</div> |
Applies a .col-4-5-l to a div element which has a padding left and right of gutter spacing and a width of 80% for large devices and up |
.col-full-l |
Apply a .col-full-l
|
<div class="col-full-l">Column</div> |
Applies a .col-full-l to a div element which has a padding left and right of gutter spacing and a width of 100% for large devices and up |
.row-xl |
Apply a .row-xl when wrapping columns |
<div class="row-xl">This needs to be wrapped around columns.</div> |
Applies a .row-xl to a div element which has a negative margin left and right of the gutter spacing for extra large devices and up |
.col-1-2-xl |
Apply a .col-1-2-xl
|
<div class="col-1-2-xl">Column</div> |
Applies a .col-1-2-xl to a div element which has a padding left and right of gutter spacing and a width of 50% for extra large devices and up |
.col-1-3-xl |
Apply a .col-1-3-xl
|
<div class="col-1-3-xl">Column</div> |
Applies a .col-1-3-xl to a div element which has a padding left and right of gutter spacing and a width of 33.33333% for extra large devices and up |
.col-2-3-xl |
Apply a .col-2-3-xl
|
<div class="col-2-3-xl">Column</div> |
Applies a .col-2-3-xl to a div element which has a padding left and right of gutter spacing and a width of 66.66667% for extra large devices and up |
.col-1-4-xl |
Apply a .col-1-4-xl
|
<div class="col-1-4-xl">Column</div> |
Applies a .col-1-4-xl to a div element which has a padding left and right of gutter spacing and a width of 25% for extra large devices and up |
.col-3-4-xl |
Apply a .col-3-4-xl
|
<div class="col-3-4-xl">Column</div> |
Applies a .col-3-4-xl to a div element which has a padding left and right of gutter spacing and a width of 75% for extra large devices and up |
.col-1-5-xl |
Apply a .col-1-5-xl
|
<div class="col-1-5-xl">Column</div> |
Applies a .col-1-5-xl to a div element which has a padding left and right of gutter spacing and a width of 20% for extra large devices and up |
.col-2-5-xl |
Apply a .col-2-5-xl
|
<div class="col-2-5-xl">Column</div> |
Applies a .col-2-5-xl to a div element which has a padding left and right of gutter spacing and a width of 40% for extra large devices and up |
.col-3-5-xl |
Apply a .col-3-5-xl
|
<div class="col-3-5-xl">Column</div> |
Applies a .col-3-5-xl to a div element which has a padding left and right of gutter spacing and a width of 60% for extra large devices and up |
.col-4-5-xl |
Apply a .col-4-5-xl
|
<div class="col-4-5-xl">Column</div> |
Applies a .col-4-5-xl to a div element which has a padding left and right of gutter spacing and a width of 80% for extra large devices and up |
.col-full-xl |
Apply a .col-full-xl
|
<div class="col-full-xl">Column</div> |
Applies a .col-full-xl to a div element which has a padding left and right of gutter spacing and a width of 100% for extra large devices and up |
SCSS
Variables
| Variable | Purpose | Default |
|---|---|---|
$grid-alignment |
Alignment of the grid layout | left |
Variables
| Variable | Purpose | Default |
|---|---|---|
$grid-alignment |
Alignment of the grid layout | left |
LESS
Variables
| Variable | Purpose | Default |
|---|---|---|
@grid-alignment |
Alignment of the grid layout | left |
Demo
View page example with the micro grid and containers stylesheet applied.
Support
- IE10+ and all other modern browsers.
- Please specify browsers you need to support in
package.jsonaccording to browserslist docs.
Authors
Matthew Hartman
License
Code released under the MIT Open Source license.