npm package: @getbase/containers
Description: Base Containers
Author: Matthew Hartman
Latest version: 4.2.1

# [Base Containers](http://getbase.org)

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][travis-img]][travis] [![David Dependencies Status][david-img]][david]

[travis-img]:   https://img.shields.io/travis/getbase/containers.svg?branch=master
[david-img]:    https://img.shields.io/david/dev/getbase/containers.svg?branch=master&label=dependencies
[travis]:       https://travis-ci.org/getbase/containers
[david]:        https://david-dm.org/getbase/containers?type=dev

* * *

## Table of contents

* [Overview](#overview)
* [Installation](#installation)
* [Documentation](#documentation)
* [Demo](#demo)
* [Support](#support)
* [Authors](#authors)
* [License](#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:

```bash
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:
  ```css
  @import url("https://unpkg.com/@getbase/containers/index.css");
  ```

#### SCSS Import:

  ```scss
  /* Import Base Containers */
  @import "~@getbase/containers/scss/index";
  /* Your Other Styles */
  @import "main"
  ```


#### LESS Import:

  ```css
  /* 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](https://unpkg.com/@getbase/containers/index.html) 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](https://github.com/ai/browserslist#queries).

* * *

## Authors

#### Matthew Hartman

* [https://twitter.com/matthewhartmans](https://twitter.com/matthewhartmans)
* [https://github.com/matthewhartman](https://github.com/matthewhartman)

* * *

## License

Code released under the [MIT Open Source](https://opensource.org/licenses/MIT) license.