JSPM

@getbase/containers

4.2.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 8
  • Score
    100M100P100Q64329F
  • License MIT

Base Containers

Package Exports

  • @getbase/containers

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/containers) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

Travis Build Status David Dependencies Status

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

License

Code released under the MIT Open Source license.