Documentation

Learn how to use all of great features that Concise provides.

Grid

Concise comes with a fluid, mobile-first grid system. Once the viewport of a device is larger than 768px, the rows of the grid display with 16 columns. Getting started with the grid system is as easy as wrapping any of the .column-* classes inside of a .row class.

Preview
Code 
<div class="row">
  <div class="column-16"></div>
</div>

<div class="row">
  <div class="column-1"></div>
  <div class="column-15"></div>
</div>

<div class="row">
  <div class="column-2"></div>
  <div class="column-14"></div>
</div>

<div class="row">
  <div class="column-3"></div>
  <div class="column-13"></div>
</div>

<div class="row">
  <div class="column-4"></div>
  <div class="column-12"></div>
</div>

<div class="row">
  <div class="column-5"></div>
  <div class="column-11"></div>
</div>

<div class="row">
  <div class="column-6"></div>
  <div class="column-10"></div>
</div>

<div class="row">
  <div class="column-7"></div>
  <div class="column-9"></div>
</div>

<div class="row">
  <div class="column-8"></div>
  <div class="column-8"></div>
</div>

<div class="row">
  <div class="column-4"></div>
  <div class="column-4"></div>
  <div class="column-4"></div>
  <div class="column-4"></div>
</div>

<div class="row">
  <div class="column-2"></div>
  <div class="column-2"></div>
  <div class="column-2"></div>
  <div class="column-2"></div>
  <div class="column-2"></div>
  <div class="column-2"></div>
  <div class="column-2"></div>
  <div class="column-2"></div>
</div>

Adding Gutters

By default, no gutters are added onto any of the grid columns. However, simply adding the class .gutters to your .row class provides a 2% gutter to each of the columns, except for the first one.

Preview
Code 
<div class="row gutters">
  <div class="column-16"></div>
</div>

<div class="row gutters">
  <div class="column-1"></div>
  <div class="column-15"></div>
</div>

<div class="row gutters">
  <div class="column-2"></div>
  <div class="column-14"></div>
</div>

<div class="row gutters">
  <div class="column-3"></div>
  <div class="column-13"></div>
</div>

<div class="row gutters">
  <div class="column-4"></div>
  <div class="column-12"></div>
</div>

<div class="row gutters">
  <div class="column-5"></div>
  <div class="column-11"></div>
</div>

<div class="row gutters">
  <div class="column-6"></div>
  <div class="column-10"></div>
</div>

<div class="row gutters">
  <div class="column-7"></div>
  <div class="column-9"></div>
</div>

<div class="row gutters">
  <div class="column-8"></div>
  <div class="column-8"></div>
</div>

<div class="row gutters">
  <div class="column-4"></div>
  <div class="column-4"></div>
  <div class="column-4"></div>
  <div class="column-4"></div>
</div>

<div class="row gutters">
  <div class="column-2"></div>
  <div class="column-2"></div>
  <div class="column-2"></div>
  <div class="column-2"></div>
  <div class="column-2"></div>
  <div class="column-2"></div>
  <div class="column-2"></div>
  <div class="column-2"></div>
</div>

Nesting

You also can nest grids inside of each other by nesting a .row class inside of a column.

Preview
Code 
<div class="row gutters">
  <div class="column-16">
    <div class="row gutters">
      <div class="column-1"></div>

      <div class="column-15"></div>
    </div>

    <div class="row gutters">
      <div class="column-2"></div>

      <div class="column-14"></div>
    </div>
  </div>
</div>

Column Options

Column Number

Concise comes with a 16-column grid by default. The $column-number variable can be changed in the /helpers/_variables.scss file to accommodate any number of columns you would like.

If you do not use a preprocessor, Concise has pre-built CSS files for a 12 or 24-column grid. These files include proper styling for the grid columns with and without gutters, as as push and pull options.

Download 12-Column CSS File
Download 24-Column CSS File

Column Prefix

By default, the prefix for columns is .column-. The $column-prefix variable can be changed in the /helpers/_variables.scss file to accommodate any prefix you would like. Many people like their column prefix to be .col- or .span.

Gutter Amount

The default gutter size for the .gutters class is 2%. However, the $gutters variable can be changed in the /helpers/_variables.scss to accommodate any gutter size you would like.

Push and Pull

By using .push-* and .pull-* classes, you can easily manage positioning of grid columns. The number you use after a push or pull class is correlated with the column size. For example, .push-6 has the same size as .column-6, which is 37.5%.

Push

Using the .push-* class allows you to push a column to the left.

Preview
Code 
<div class="row">
  <div class="column-6 push-6"></div>
</div>

Pull

Using the .pull-* class allows you to pull a column from the right.

I floated this column to the right to prevent it from laying outside of the preview box. You do not have to do that to every column that you pull.

Preview
Code 
<div class="row">
  <div class="float-right column-6 pull-6"></div>
</div>