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
• Installation
• Documentation
• Demo
• Support
• Authors
• License

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/containers

Once 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.json according to browserslist docs.

Authors

Matthew Hartman

• https://twitter.com/matthewhartmans
• https://github.com/matthewhartman

License

Code released under the MIT Open Source license.