Cirrus

#Columns

Classes for using Cirrus' column system powered by Flexbox. By default, 12 columns are created. However, this can be modified to any number you'd like by modifying asingle variable and rebuilding the project.

Also check out Grid for an alternate way to lay out elements on the page.

#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

To prevent the default stacking behavior, we can use the col-xs-* class on the column, where '*' indicates any number from 1 to 12 (or however many columns you configured your Cirrus build with).

Before

After

<div class="row">
    <div class="col-xs-6">
        <div class="uppercase">col-xs-6</div>
    </div>
    <div class="col-xs-6">
        <div class="uppercase">col-xs-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>