Package Exports

@getbase/grid

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@getbase/grid) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Base Grid

Base Grid is designed in a way where you can add it on top of the Base CSS framework or to your own custom project.

Overview
Installation
Documentation
Demo
Support
Authors
License

Overview

Base Grid contains styles for flex grids with rows and columns for your layout for all breakpoints.

Installation

If you have an existing project and would like to include the Base grid module, run the following command:

npm install --save @getbase/grid

Once you have the 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/grid/index.css");

SCSS Import:

/* Import Base Grid */
@import "~@getbase/grid/scss/index";
/* Your Other Styles */
@import "main"

LESS Import:

/* Import Base Grid */
@import "~@getbase/grid/less/index";
/* Your Other Styles */
@import "main"

Documentation

Base Grid includes styles for flex grids with rows and columns for your layout for all breakpoints.

Grid (Applies to SCSS/LESS)

Grid 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`	Apply a `.col-1`	`<div class="col-1">Column</div>`	Applies a `.col-1` to a `div` element which has a padding left and right of gutter spacing and a width of 8.33333% for all breakpoints
`.col-2`	Apply a `.col-2`	`<div class="col-2">Column</div>`	Applies a `.col-2` to a `div` element which has a padding left and right of gutter spacing and a width of 16.66667% for all breakpoints
`.col-3`	Apply a `.col-3`	`<div class="col-3">Column</div>`	Applies a `.col-3` to a `div` element which has a padding left and right of gutter spacing and a width of 25%
`.col-4`	Apply a `.col-4`	`<div class="col-4">Column</div>`	Applies a `.col-4` to a `div` element which has a padding left and right of gutter spacing and a width of 33.33333% for all breakpoints
`.col-5`	Apply a `.col-5`	`<div class="col-5">Column</div>`	Applies a `.col-5` to a `div` element which has a padding left and right of gutter spacing and a width of 41.66667% for all breakpoints
`.col-6`	Apply a `.col-6`	`<div class="col-6">Column</div>`	Applies a `.col-6` to a `div` element which has a padding left and right of gutter spacing and a width of 50% for all breakpoints
`.col-7`	Apply a `.col-7`	`<div class="col-7">Column</div>`	Applies a `.col-7` to a `div` element which has a padding left and right of gutter spacing and a width of 58.33333% for all breakpoints
`.col-8`	Apply a `.col-8`	`<div class="col-8">Column</div>`	Applies a `.col-8` to a `div` element which has a padding left and right of gutter spacing and a width of 66.66667% for all breakpoints
`.col-9`	Apply a `.col-9`	`<div class="col-9">Column</div>`	Applies a `.col-9` to a `div` element which has a padding left and right of gutter spacing and a width of 75% for all breakpoints
`.col-10`	Apply a `.col-10`	`<div class="col-10">Column</div>`	Applies a `.col-10` to a `div` element which has a padding left and right of gutter spacing and a width of 83.33333% for all breakpoints
`.col-11`	Apply a `.col-11`	`<div class="col-11">Column</div>`	Applies a `.col-11` to a `div` element which has a padding left and right of gutter spacing and a width of 91.66667% for all breakpoints
`.col-12`	Apply a `.col-12`	`<div class="col-12">Column</div>`	Applies a `.col-12` to a `div` element which has a padding left and right of gutter spacing and a width of 100% 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-m`	Apply a `.col-1-m`	`<div class="col-1-m">Column</div>`	Applies a `.col-1-m` to a `div` element which has a padding left and right of gutter spacing and a width of 8.33333% for medium devices and up
`.col-2-m`	Apply a `.col-2-m`	`<div class="col-2-m">Column</div>`	Applies a `.col-2-m` to a `div` element which has a padding left and right of gutter spacing and a width of 16.66667% for medium devices and up
`.col-3-m`	Apply a `.col-3-m`	`<div class="col-3-m">Column</div>`	Applies a `.col-3-m` to a `div` element which has a padding left and right of gutter spacing and a width of 25%
`.col-4-m`	Apply a `.col-4-m`	`<div class="col-4-m">Column</div>`	Applies a `.col-4-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-5-m`	Apply a `.col-5-m`	`<div class="col-5-m">Column</div>`	Applies a `.col-5-m` to a `div` element which has a padding left and right of gutter spacing and a width of 41.66667% for medium devices and up
`.col-6-m`	Apply a `.col-6-m`	`<div class="col-6-m">Column</div>`	Applies a `.col-6-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-7-m`	Apply a `.col-7-m`	`<div class="col-7-m">Column</div>`	Applies a `.col-7-m` to a `div` element which has a padding left and right of gutter spacing and a width of 58.33333% for medium devices and up
`.col-8-m`	Apply a `.col-8-m`	`<div class="col-8-m">Column</div>`	Applies a `.col-8-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-9-m`	Apply a `.col-9-m`	`<div class="col-9-m">Column</div>`	Applies a `.col-9-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-10-m`	Apply a `.col-10-m`	`<div class="col-10-m">Column</div>`	Applies a `.col-10-m` to a `div` element which has a padding left and right of gutter spacing and a width of 83.33333% for medium devices and up
`.col-11-m`	Apply a `.col-11-m`	`<div class="col-11-m">Column</div>`	Applies a `.col-11-m` to a `div` element which has a padding left and right of gutter spacing and a width of 91.66667% for medium devices and up
`.col-12-m`	Apply a `.col-12-m`	`<div class="col-12-m">Column</div>`	Applies a `.col-12-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
`.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-l`	Apply a `.col-1-l`	`<div class="col-1-l">Column</div>`	Applies a `.col-1-l` to a `div` element which has a padding left and right of gutter spacing and a width of 8.33333% for large devices and up
`.col-2-l`	Apply a `.col-2-l`	`<div class="col-2-l">Column</div>`	Applies a `.col-2-l` to a `div` element which has a padding left and right of gutter spacing and a width of 16.66667% for large devices and up
`.col-3-l`	Apply a `.col-3-l`	`<div class="col-3-l">Column</div>`	Applies a `.col-3-l` to a `div` element which has a padding left and right of gutter spacing and a width of 25%
`.col-4-l`	Apply a `.col-4-l`	`<div class="col-4-l">Column</div>`	Applies a `.col-4-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-5-l`	Apply a `.col-5-l`	`<div class="col-5-l">Column</div>`	Applies a `.col-5-l` to a `div` element which has a padding left and right of gutter spacing and a width of 41.66667% for large devices and up
`.col-6-l`	Apply a `.col-6-l`	`<div class="col-6-l">Column</div>`	Applies a `.col-6-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-7-l`	Apply a `.col-7-l`	`<div class="col-7-l">Column</div>`	Applies a `.col-7-l` to a `div` element which has a padding left and right of gutter spacing and a width of 58.33333% for large devices and up
`.col-8-l`	Apply a `.col-8-l`	`<div class="col-8-l">Column</div>`	Applies a `.col-8-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-9-l`	Apply a `.col-9-l`	`<div class="col-9-l">Column</div>`	Applies a `.col-9-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-10-l`	Apply a `.col-10-l`	`<div class="col-10-l">Column</div>`	Applies a `.col-10-l` to a `div` element which has a padding left and right of gutter spacing and a width of 83.33333% for large devices and up
`.col-11-l`	Apply a `.col-11-l`	`<div class="col-11-l">Column</div>`	Applies a `.col-11-l` to a `div` element which has a padding left and right of gutter spacing and a width of 91.66667% for large devices and up
`.col-12-l`	Apply a `.col-12-l`	`<div class="col-12-l">Column</div>`	Applies a `.col-12-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
`.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-xl`	Apply a `.col-1-xl`	`<div class="col-1-xl">Column</div>`	Applies a `.col-1-xl` to a `div` element which has a padding left and right of gutter spacing and a width of 8.33333% for extra large devices and up
`.col-2-xl`	Apply a `.col-2-xl`	`<div class="col-2-xl">Column</div>`	Applies a `.col-2-xl` to a `div` element which has a padding left and right of gutter spacing and a width of 16.66667% for extra large devices and up
`.col-3-xl`	Apply a `.col-3-xl`	`<div class="col-3-xl">Column</div>`	Applies a `.col-3-xl` to a `div` element which has a padding left and right of gutter spacing and a width of 25%
`.col-4-xl`	Apply a `.col-4-xl`	`<div class="col-4-xl">Column</div>`	Applies a `.col-4-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-5-xl`	Apply a `.col-5-xl`	`<div class="col-5-xl">Column</div>`	Applies a `.col-5-xl` to a `div` element which has a padding left and right of gutter spacing and a width of 41.66667% for extra large devices and up
`.col-6-xl`	Apply a `.col-6-xl`	`<div class="col-6-xl">Column</div>`	Applies a `.col-6-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-7-xl`	Apply a `.col-7-xl`	`<div class="col-7-xl">Column</div>`	Applies a `.col-7-xl` to a `div` element which has a padding left and right of gutter spacing and a width of 58.33333% for extra large devices and up
`.col-8-xl`	Apply a `.col-8-xl`	`<div class="col-8-xl">Column</div>`	Applies a `.col-8-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-9-xl`	Apply a `.col-9-xl`	`<div class="col-9-xl">Column</div>`	Applies a `.col-9-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-10-xl`	Apply a `.col-10-xl`	`<div class="col-10-xl">Column</div>`	Applies a `.col-10-xl` to a `div` element which has a padding left and right of gutter spacing and a width of 83.33333% for extra large devices and up
`.col-11-xl`	Apply a `.col-11-xl`	`<div class="col-11-xl">Column</div>`	Applies a `.col-11-xl` to a `div` element which has a padding left and right of gutter spacing and a width of 91.66667% for extra large devices and up
`.col-12-xl`	Apply a `.col-12-xl`	`<div class="col-12-xl">Column</div>`	Applies a `.col-12-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
`.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 grid and containers stylesheet applied.

Support

IE10+ and all other modern browsers.
Please specify browsers you need to support in package.json according to browserslist docs.

Authors

Matthew Hartman

License

Code released under the MIT Open Source license.

@getbase/grid

Package Exports

Readme

Base Grid

Table of contents

Overview

Installation

CSS Import:

SCSS Import:

LESS Import:

Documentation

Grid (Applies to SCSS/LESS)

SCSS

Variables

Variables

LESS

Variables

Demo

Support

Authors

Matthew Hartman

License