Basscss / Docs

Layout

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

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>
<!-- Nested divs for demonstration only -->

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>
<!-- Nested divs for demonstration only -->

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>

NPM

The grid is also available as a standalone NPM module.

npm install basscss-grid

Table Object

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>

NPM

The table object is also available as a standalone NPM module.

npm install basscss-table-object
Grid Table Object