Base Containers
Base Containers 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 Containers is a very thin layer which contains styles for containers for all breakpoints.
Installation
If you have an existing project and would like to include the Base containers module, run the following command:
npm install --save @getbase/containersOnce you have the containers 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/containers/index.css");SCSS Import:
/* Import Base Containers */
@import "~@getbase/containers/scss/index";
/* Your Other Styles */
@import "main"LESS Import:
/* Import Base Containers */
@import "~@getbase/containers/less/index";
/* Your Other Styles */
@import "main"Documentation
Base Containers includes styles for containers.
Containers (Applies to SCSS/LESS)
| Helper Class | Purpose | Example | Outcome |
|---|---|---|---|
.container |
Apply a .container
|
<div class="container">This is a container for all breakpoints</div> |
Applies a .container to a div element for all breakpoints |
.container-full |
Apply a full width container (.container-full) |
<div class="container-full">This is a container that is full width for all breakpoints</div> |
Applies a .container-full to a div element for all breakpoints |
.container-m |
Apply a .container-m
|
<div class="container-m">This is a container for medium devices and above</div> |
Applies a .container-m to a div element for medium devices and above |
.container-full-m |
Apply a full width container (.container-full-m) |
<div class="container-full-m">This is a container that is full width for medium devices and above</div> |
Applies a .container-full-m to a div element for medium devices and above |
.container-l |
Apply a .container-l
|
<div class="container-l">This is a container for large devices and above</div> |
Applies a .container-l to a div element for large devices and above |
.container-full-l |
Apply a full width container (.container-full-l) |
<div class="container-full-l">This is a container that is full width for large devices and above</div> |
Applies a .container-full-l to a div element for large devices and above |
.container-xl |
Apply a .container-xl
|
<div class="container-xl">This is a container for extra large devices and above</div> |
Applies a .container-xl to a div element for extra large devices and above |
.container-full-xl |
Apply a full width container (.container-full-xl) |
<div class="container-full-xl">This is a container that is full width for extra large devices and above</div> |
Applies a .container-full-xl to a div element for extra large devices and above |
SCSS
Variables
| Variable | Purpose | Default |
|---|---|---|
$grid-gutter |
The left and right padding applied to all containers | 15px |
$container-m |
Container width applied to the medium device container ($breakpoint-m - ($grid-gutter * 2)) |
738px |
$container-l |
Container width applied to the large device container ($breakpoint-l - ($grid-gutter * 2)) |
950px |
$container-xl |
Container width applied to the extra large device container ($breakpoint-xl - ($grid-gutter * 2)) |
1170px |
LESS
Variables
| Variable | Purpose | Default |
|---|---|---|
@grid-gutter |
The left and right padding applied to all containers | 15px |
@container-m |
Container width applied to the medium device container (@breakpoint-m - (@grid-gutter * 2)) |
738px |
@container-l |
Container width applied to the large device container (@breakpoint-l - (@grid-gutter * 2)) |
950px |
@container-xl |
Container width applied to the extra large device container (@breakpoint-xl - (@grid-gutter * 2)) |
1170px |
Demo
View page example with the 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.