Layout modules are more complex than utilities and are tied to markup structure. They are designed to be highly reusable and to inter-operate with other styles.

# Grid

basscss.com

The utility-based grid allows a lot of flexibility in creating complex layouts. Start by using a `.clearfix` container.

Optionally use a `.container` to set a max-width. Adjust the container width with the `--container-width` variable.

    <div class="container">
      <div class="clearfix">
      </div>
    </div>

Add columns using the `.col` and grid width `.col-N` classes. `.col` floats elements left and sets box-sizing to border-box. `.col-N` sets width according to a 12 column grid. The total number of columns in a row should add up to 12.

.col.col-6
.col.col-6

    <div class="clearfix outline-blue">
      <div class="col col-6">.col.col-6</div>
      <div class="col col-6">.col.col-6</div>
    </div>

## Responsive Grid

Use breakpoint-prefixed column utilities to change the grid at different screen widths. Each breakpoint applies to that screen width and up. Unprefixed styles apply to all screen widths.

.sm-col.sm-col-6.md-col-5.lg-col-4
.sm-col.sm-col-6.md-col-7.lg-col-8

    <div class="clearfix outline-blue">
      <div class="sm-col sm-col-6 md-col-5 lg-col-4">.sm-col.sm-col-6.md-col-5.lg-col-4</div>
      <div class="sm-col sm-col-6 md-col-7 lg-col-8">.sm-col.sm-col-6.md-col-7.lg-col-8</div>
    </div>

## Gutters

Use padding and negative margin utilities to create gutters based on the white space scale. When using negative margin, be sure to compensate for the extra width created with a padded parent element or by using overflow hidden. Otherwise, horizontal scrolling may occur.

.px2
.px2

    <div class="clearfix mxn2 outline-blue">
      <div class="sm-col sm-col-6 md-col-5 lg-col-4 px2"><div>.px2</div></div>
      <div class="sm-col sm-col-6 md-col-7 lg-col-8 px2"><div>.px2</div></div>
    </div>

## Nesting

Nest whole grid structures within columns to created nested grids.

Unnested
Nested
Nested

    <div class="clearfix mxn2 outline-blue">
      <div class="sm-col sm-col-6 md-col-5 lg-col-4 px2"><div>Unnested</div></div>
      <div class="sm-col sm-col-6 md-col-7 lg-col-8 px2">
        <div class="clearfix mxn2">
          <div class="col col-6 px2"><div>Nested</div></div>
          <div class="col col-6 px2"><div>Nested</div></div>
        </div>
      </div>
    </div>

## Reversed

To reverse the order of columns, use the `.col-right` class to float right

.col-right.col-6
.col.col-6

    <div class="clearfix outline-blue">
      <div class="col-right col-6">.col-right.col-6</div>
      <div class="col col-6">.col.col-6</div>
    </div>

## Centering Columns

Use the `.mx-auto` class to center columns within their containers.

Centered Column

    <div class="clearfix mxn2 outline-blue">
      <div class="col-8 px2 mx-auto">
        <div>Centered Column</div>
      </div>
    </div>

# Table Object

basscss.com

Use the table object to vertically center content. These styles can be combined with grid width and white-space utilities for a wide range of layout options. Apply padding to `.table-cell` elements to contol spacing.

# .table-cell

For vertically centered content

.table-cell

    <div class="table outline-blue">
      <div class="table-cell">
        <h1 class="m0">.table-cell</h1>
        <p class="m0">For vertically centered content</p>
      </div>
      <div class="table-cell">.table-cell</div>
    </div>

## Flag Object

The flag object can be emulated by adding `.full-width` to one of the cells. To add padding to the body, nest another div within the full-width cell.

Image

# Flag Body

The full-width utility makes the table object behave like the flag object.

    <div class="table outline-blue">
      <div class="table-cell p2">Image</div>
      <div class="table-cell full-width">
        <h1 class="m0">Flag Body</h1>
        <p class="m0">The full-width utility makes the table object behave like the flag object.</p>
      </div>
    </div>

## Equal width cells

Use the `.table-fixed` extension to create equal-width cells.

# .table-cell

For vertically centered content

.table-cell
.table-cell

    <div class="table table-fixed outline-blue">
      <div class="table-cell">
        <h1 class="m0">.table-cell</h1>
        <p class="m0">For vertically centered content</p>
      </div>
      <div class="table-cell">.table-cell</div>
      <div class="table-cell">.table-cell</div>
    </div>

## Responsive Table Object

Use breakpoint prefixes to keep table objects stacked at smaller screen sizes. This is useful for things like navigation.

# .sm-table-cell

Only kicks in above the small breakpoint

.sm-table-cell

# .lg-table-cell

Only kicks in above the large breakpoint

.lg-table-cell

    <div class="sm-table mb1 outline-blue">
      <div class="sm-table-cell">
        <h1 class="m0">.sm-table-cell</h1>
        <p class="m0">Only kicks in above the small breakpoint</p>
      </div>
      <div class="sm-table-cell">.sm-table-cell</div>
    </div>
    <div class="lg-table outline-blue">
      <div class="lg-table-cell">
        <h1 class="m0">.lg-table-cell</h1>
        <p class="m0">Only kicks in above the large breakpoint</p>
      </div>
      <div class="lg-table-cell">.lg-table-cell</div>
    </div>

## Table Grid

The table object can be combined with grid width utilities to create vertically centered columns.

# .table-cell.col-7

For vertically centered content

.table-cell.col-5

    <div class="table outline-blue">
      <div class="table-cell col-7">
        <h1 class="m0">.table-cell.col-7</h1>
        <p class="m0">For vertically centered content</p>
      </div>
      <div class="table-cell col-5">.table-cell.col-5</div>
    </div>

MIT License

# Flex Object

CSS layout module using flexbox

jxnblk.com/flex-object

The flex-object is a powerful suite of utilities based on the flexible box layout module. These utilities can replace the need for a grid system in many instances, but can also be combined with the Basscss grid for even more possibilities.

Note: browser support for the flexible box layout module is limited. See http://caniuse.com/#feat=flexbox

## .flex

To begin, add the `.flex` class to a parent element. This sets the element to `display: flex` and enables a flex context for all direct child elements.

Link Link

    <div class="flex">
      <a href="#" class="button">Link</a>
      <a href="#" class="button">Link</a>
    </div>

## .flex-wrap

To wrap elements, use the `.flex-wrap` utility.

Home Nav Item Nav Item Nav Item Nav Item Nav Item Nav Item Nav Item

    <div class="flex flex-wrap">
      <a href="#" class="button">Home</a>
      <a href="#" class="button">Nav Item</a>
      <a href="#" class="button">Nav Item</a>
      <a href="#" class="button">Nav Item</a>
      <a href="#" class="button">Nav Item</a>
      <a href="#" class="button">Nav Item</a>
      <a href="#" class="button">Nav Item</a>
      <a href="#" class="button">Nav Item</a>
    </div>

## .flex-column

To arrange items vertically, use the `.flex-column` utility.

Row
Row
Row

    <div class="flex flex-column">
      <div class="p1 blue border">Row</div>
      <div class="p1 blue border">Row</div>
      <div class="p1 blue border">Row</div>
    </div>

## Alignment

Use these utilities to control vertical alignment of child elements.

### .flex-center

To vertically center child elements, add the `.flex-center` class to the parent element.

# Big

Small

    <div class="flex flex-center">
      <div class="flex-auto px2 py4 blue border">
        <h1 class="m0">Big</h1>
      </div>
      <div class="px2 blue border">Small</div>
    </div>

### .flex-stretch

To stretch all elements to fill the height of the parent, use the `.flex-stretch` utility.

# Big

Small

    <div class="flex flex-stretch">
      <div class="flex-auto px2 py4 blue border">
        <h1 class="m0">Big</h1>
      </div>
      <div class="px2 blue border">Small</div>
    </div>

### .flex-stretch with nested content

To ensure nested elements stretch as well, add the `.flex` class to relevant elements.

# Big

Small

    <div class="flex flex-stretch">
      <div class="flex-auto px2 py4 blue border">
        <h1 class="m0">Big</h1>
      </div>
      <div class="flex blue border">
        <div class="px2 white bg-blue">
          Small
        </div>
      </div>
    </div>

### .flex-baseline

To align child elements to their baseline, use the `.flex-baseline` utility.

# Big

Small

    <div class="flex flex-baseline blue border-bottom">
      <div class="flex-auto px2">
        <h1 class="m0">Big</h1>
      </div>
      <div class="px2">Small</div>
    </div>

### .flex-start

To align child elements to the top, use the `.flex-start` utility.

# Big

Small

    <div class="flex flex-start blue border-top">
      <div class="flex-auto px2">
        <h1 class="m0">Big</h1>
      </div>
      <div class="px2">Small</div>
    </div>

### .flex-end

To align child elements to the bottom, use the `.flex-end` utility.

# Big

Small

    <div class="flex flex-end blue border-bottom">
      <div class="flex-auto px2">
        <h1 class="m0">Big</h1>
      </div>
      <div class="px2">Small</div>
    </div>

## Responsive Utilities

To set display flex only at certain breakpoints and up, use the breakpoint-prefixed versions of `.flex`. All other utilities will only work at the set breakpoint.

## .sm-flex

Div
Div

## .md-flex

Div
Div

## .lg-flex

Div
Div

    <div class="sm-flex flex-center mb2 blue">
      <div class="border">
        <h2 class="m0">.sm-flex</h2>
      </div>
      <div class="flex-auto border">Div</div>
      <div class="border">Div</div>
    </div>
    <div class="md-flex flex-center mb2 blue">
      <div class="border">
        <h2 class="m0">.md-flex</h2>
      </div>
      <div class="flex-auto border">Div</div>
      <div class="border">Div</div>
    </div>
    <div class="lg-flex flex-center mb2 blue">
      <div class="border">
        <h2 class="m0">.lg-flex</h2>
      </div>
      <div class="flex-auto border">Div</div>
      <div class="border">Div</div>
    </div>

## Child elements

To control the size and behavior of child elements, use these utilities.

### .flex-auto

To make an element grow or shrink as needed, use the `.flex-auto` utility.

Nav Item Nav Item
Nav Item

    <div class="flex">
      <a href="#" class="button button-nav-light">Nav Item</a>
      <a href="#" class="button button-nav-light">Nav Item</a>
      <div class="flex-auto blue border"></div>
      <a href="#" class="button button-nav-light">Nav Item</a>
    </div>

### .flex-grow

To make an element grow, but not shrink, use the `.flex-grow` utility.

Nav Item Nav Item
Nav Item

    <div class="flex">
      <a href="#" class="button button-nav-light">Nav Item</a>
      <a href="#" class="button button-nav-light">Nav Item</a>
      <div class="flex-grow blue border"></div>
      <a href="#" class="button button-nav-light">Nav Item</a>
    </div>

### .flex-none

To prevent an element from growing or shrinking, use the `.flex-none` utility.

Nav Item Nav Item Nav Item

    <div class="flex">
      <a href="#" class="flex-auto m1 button button-blue">Nav Item</a>
      <a href="#" class="flex-auto m1 button button-blue">Nav Item</a>
      <a href="#" class="flex-none m1 button button-blue">Nav Item</a>
    </div>

## Ordering

To change the order of child elements, use the `.flex-first` and `.flex-last` utilities.

### .flex-first

Nav Item Nav Item First Nav Item

    <div class="flex">
      <a href="#" class="button button-blue">Nav Item</a>
      <a href="#" class="flex-first button button-blue">Nav Item First</a>
      <a href="#" class="button button-blue">Nav Item</a>
    </div>

### .flex-last

Nav Item Nav Item Last Nav Item

    <div class="flex">
      <a href="#" class="button button-blue">Nav Item</a>
      <a href="#" class="flex-last button button-blue">Nav Item Last</a>
      <a href="#" class="button button-blue">Nav Item</a>
    </div>

## Parent Element Utilities

    .flex { display: flex }
    .flex-column  { flex-direction: column }
    .flex-wrap    { flex-wrap: wrap }
    .flex-center   { align-items: center }
    .flex-baseline { align-items: baseline }
    .flex-stretch  { align-items: stretch }
    .flex-start    { align-items: flex-start }
    .flex-end      { align-items: flex-end }

## Child Element Utilities

    .flex-first { order: -1 }
    .flex-last  { order: 1024 }
    .flex-auto { flex: 1 1 auto }
    .flex-grow { flex: 1 0 auto }
    .flex-none { flex: none }

## Custom Media Queries

Adjust these custom media query values to change the breakpoints.

    @custom-media --breakpoint-sm (min-width: 40em);
    @custom-media --breakpoint-md (min-width: 52em);
    @custom-media --breakpoint-lg (min-width: 64em);

Utility Color
Grid Table Object Flex Object