#Columns

Perhaps the most annoying part of designing a website is ensuring that column widths are consistent throughout the website. Cirrus aims to solve this issue with a simple 12-column grid system powered by Flexbox to provide an easy to maintain and scalable framework. If 12 columns are not enough, there is a flexible column that will automatically adjust according to the browser's width and its neighboring columns.

#Basics

Every flexbox layout begins with a row. Every row contains columns represented with the col-* class, where the '*' represents any number from 1 through 12 inclusive.

Col-12
Col-11
Col-1
Col-10
Col-2
Col-9
Col-3
Col-8
Col-4
Col-7
Col-5
Col-6
Col-6
Col-5
Col-7
Col-4
Col-8
Col-3
Col-9
Col-2
Col-10
Col-1
Col-11
<div class="row">
    <div class="col-12 uppercase">
        <div class="uppercase">Col-12</div>
    </div>
</div>
<div class="row">
    <div class="col-11 uppercase">
        <div class="uppercase">Col-11</div>
    </div>
    <div class="col-1 uppercase">
        <div class="uppercase">Col-1</div>
    </div>
</div>
<div class="row">
    <div class="col-10 uppercase">
        <div class="uppercase">Col-10</div>
    </div>
    <div class="col-2 uppercase">
        <div class="uppercase">Col-2</div>
    </div>
</div>
<div class="row">
    <div class="col-9 uppercase">
        <div class="uppercase">Col-9</div>
    </div>
    <div class="col-3 uppercase">
        <div class="uppercase">Col-3</div>
    </div>
</div>
<div class="row">
    <div class="col-8 uppercase">
        <div class="uppercase">Col-8</div>
    </div>
    <div class="col-4 uppercase">
        <div class="uppercase">Col-4</div>
    </div>
</div>
<div class="row">
    <div class="col-7 uppercase">
        <div class="uppercase">Col-7</div>
    </div>
    <div class="col-5 uppercase">
        <div class="uppercase">Col-5</div>
    </div>
</div>
<div class="row">
    <div class="col-6 uppercase">
        <div class="uppercase">Col-6</div>
    </div>
    <div class="col-6 uppercase">
        <div class="uppercase">Col-6</div>
    </div>
</div>
<div class="row">
    <div class="col-5 uppercase">
        <div class="uppercase">Col-5</div>
    </div>
    <div class="col-7 uppercase">
        <div class="uppercase">Col-7</div>
    </div>
</div>
<div class="row">
    <div class="col-4 uppercase">
        <div class="uppercase">Col-4</div>
    </div>
    <div class="col-8 uppercase">
        <div class="uppercase">Col-8</div>
    </div>
</div>
<div class="row">
    <div class="col-3 uppercase">
        <div class="uppercase">Col-3</div>
    </div>
    <div class="col-9 uppercase">
        <div class="uppercase">Col-9</div>
    </div>
</div>
<div class="row">
    <div class="col-2 uppercase">
        <div class="uppercase">Col-2</div>
    </div>
    <div class="col-10 uppercase">
        <div class="uppercase">Col-10</div>
    </div>
</div>
<div class="row">
    <div class="col-1 uppercase">
        <div class="uppercase">Col-1</div>
    </div>
    <div class="col-11 uppercase">
        <div class="uppercase">Col-11</div>
    </div>
</div>
No Space

By default, columns come with 1 rem of space between the columns. To remove it, add the no-space class to the row.

Col-6
Col-6
<div class="row no-space">
    <div class="col-6">
        <div class="uppercase">Col-6</div>
    </div>
    <div class="col-6">
        <div class="uppercase">Col-6</div>
    </div>
</div>
Automatic Overflow

If there is not enough space in a given row for all the column elements, elements will automatically wrap.

col-6
col-6
col-6
col-6
col-9
col-9
col-9

To change this behavior, you can use the u-no-wrap utility class.

col-10
col-10
col-10
<div class="row u-no-wrap">
    <div class="col-10">
        <div class="uppercase">col-10</div>
    </div>
    <div class="col-10">
        <div class="uppercase">col-10</div>
    </div>
    <div class="col-10">
        <div class="uppercase">col-10</div>
    </div>
</div>
Auto Columns

These are columns denoted with the col class. The elements will automatically resize based on how many elements are present in the row

col
col
col

By default, the elements will wrap to the next row if there is not enough space. To disable it, add the u-no-wrap class to your row.

If you mix sized columns with auto sized columns, the auto sized columns will grow to fill remaining space.

col-2
col
col

#Viewports

In Cirrus, columns have 4 different variants based on breakpoints: xs, sm, md, and lg.

For example, to set the breakpoint for col-5 to stack only for sm or smaller, you should use col-sm-5.

For more info, view the docs for viewports.

col-xs-*No stacking.
col-sm-*Stack columns for widths below 640px.
col-*,col-md-*Stack columns for widths below 768px.
col-lg-*Stack columns for widths below 1024px.
col-xl-*Stack columns for widths below 1280px.

To get a better idea of how these breakpoints work, take a look at the example below by resizing your browser window.

col-xs-3
col-xs-3
col-xs-3
col-sm-3
col-sm-3
col-sm-3
col-md-3 / col-3
col-md-3 / col-3
col-md-3 / col-3
col-lg-3
col-lg-3
col-lg-3
col-xl-3
col-xl-3
col-xl-3
Prevent Stacking
⚠ As of 0.6.1 this is no longer relevant. For 0.6.1+, you can achieve this behavior with col-xs-*.

To prevent the default stacking behavior, we can use the ignore-screen class on the column.

Before

After

<div class="row">
    <div class="col-6 ignore-screen">
        <div class="uppercase">col-6</div>
    </div>
    <div class="col-6 ignore-screen">
        <div class="uppercase">col-6</div>
    </div>
</div>

#Offset

Instead of using empty columns to create offsets for columns, the offset-* class when when applied on the col-* will offset the column to the right depending on the value of '*'. The value of '*' uses values from 1 through 12 inclusive.

In other words, a column with col-5 offset-3 is offset from the left by the same width of a col-3.

offset-1
offset-3
offset-4
offset-6
offset-9
<div class="row">
    <div class="col-3 offset-1">
        <div class="uppercase">offset-1</div>
    </div>
    <div class="col-3 offset-3">
        <div class="uppercase">offset-3</div>
    </div>
    <div class="col-3 offset-4">
        <div class="uppercase">offset-4</div>
    </div>
    <div class="col-3 offset-6">
        <div class="uppercase">offset-6</div>
    </div>
    <div class="col-3 offset-9">
        <div class="uppercase">offset-9</div>
    </div>
</div>

For less specific spacing, you can use offset-right to push the column to the left, offset-center to push the column to the center, and offset-left to push the column to the right.

col-2
col-3 offset-center
col-3 offset-1
col-3 offset-left
col-3 offset-1
col-4 offset-right
offset-left
margin-left: auto;
margin-right: 0;
offset-center
margin-left: auto;
margin-right: auto;
offset-right
margin-left: 0;
margin-right: auto;
<div class="row">
    <div class="col-2">
        <div class="uppercase">col-2</div>
    </div>
    <div class="col-3 offset-center">
        <div class="uppercase"> col-3 offset-center</div>
    </div>
</div>
<div class="row">
    <div class="col-5 offset-1">
        <div class="uppercase">col-3 offset-1</div>
    </div>
    <div class="col-3 offset-left">
        <div class="uppercase">col-3 offset-left</div>
    </div>
</div>
<div class="row">
    <div class="col-5 offset-1">
        <div class="uppercase">col-3 offset-1</div>
    </div>
    <div class="col-4 offset-right offset-6">
        <div class="uppercase">col-4 offset-right</div>
    </div>
</div>