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 a single 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-[1-12] class.

ClassStyles
col-1
width: 8.333333333333332%;
col-2
width: 16.666666666666664%;
col-3
width: 25%;
col-4
width: 33.33333333333333%;
col-5
width: 41.666666666666664%;
col-6
width: 50%;
col-7
width: 58.33333333333333%;
col-8
width: 66.66666666666666%;
col-9
width: 75%;
col-10
width: 83.33333333333333%;
col-11
width: 91.66666666666666%;
col-12
width: 100%;
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="md:col-12 uppercase">
        <div class="uppercase">Col-12</div>
    </div>
</div>
<div class="row">
    <div class="md:col-11 uppercase">
        <div class="uppercase">Col-11</div>
    </div>
    <div class="md:col-1 uppercase">
        <div class="uppercase">Col-1</div>
    </div>
</div>
<div class="row">
    <div class="md:col-10 uppercase">
        <div class="uppercase">Col-10</div>
    </div>
    <div class="md:col-2 uppercase">
        <div class="uppercase">Col-2</div>
    </div>
</div>
<div class="row">
    <div class="md:col-9 uppercase">
        <div class="uppercase">Col-9</div>
    </div>
    <div class="md:col-3 uppercase">
        <div class="uppercase">Col-3</div>
    </div>
</div>
<div class="row">
    <div class="md:col-8 uppercase">
        <div class="uppercase">Col-8</div>
    </div>
    <div class="md:col-4 uppercase">
        <div class="uppercase">Col-4</div>
    </div>
</div>
<div class="row">
    <div class="md:col-7 uppercase">
        <div class="uppercase">Col-7</div>
    </div>
    <div class="md:col-5 uppercase">
        <div class="uppercase">Col-5</div>
    </div>
</div>
<div class="row">
    <div class="md:col-6 uppercase">
        <div class="uppercase">Col-6</div>
    </div>
    <div class="md:col-6 uppercase">
        <div class="uppercase">Col-6</div>
    </div>
</div>
<div class="row">
    <div class="md:col-5 uppercase">
        <div class="uppercase">Col-5</div>
    </div>
    <div class="md:col-7 uppercase">
        <div class="uppercase">Col-7</div>
    </div>
</div>
<div class="row">
    <div class="md:col-4 uppercase">
        <div class="uppercase">Col-4</div>
    </div>
    <div class="md:col-8 uppercase">
        <div class="uppercase">Col-8</div>
    </div>
</div>
<div class="row">
    <div class="md:col-3 uppercase">
        <div class="uppercase">Col-3</div>
    </div>
    <div class="md:col-9 uppercase">
        <div class="uppercase">Col-9</div>
    </div>
</div>
<div class="row">
    <div class="md:col-2 uppercase">
        <div class="uppercase">Col-2</div>
    </div>
    <div class="md:col-10 uppercase">
        <div class="uppercase">Col-10</div>
    </div>
</div>
<div class="row">
    <div class="md:col-1 uppercase">
        <div class="uppercase">Col-1</div>
    </div>
    <div class="md: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="md:col-6">
        <div class="uppercase">Col-6</div>
    </div>
    <div class="md: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 row--no-wrap utility class.

col-10
col-10
col-10
<div class="row u-no-wrap">
    <div class="md:col-10">
        <div class="uppercase">col-10</div>
    </div>
    <div class="md:col-10">
        <div class="uppercase">col-10</div>
    </div>
    <div class="md: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 sm:col-5.

For more info, view the docs for viewports.

col-*No stacking.
sm:col-*Stack columns for widths below 640px.
md:col-*Stack columns for widths below 768px.
lg:col-*Stack columns for widths below 1024px.
xl:col-*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-3
col-3
col-3
sm:col-3
sm:col-3
sm:col-3
md:col-3
md:col-3
md:col-3
lg:col-3
lg:col-3
lg:col-3
xl:col-3
xl:col-3
xl:col-3

#Offset

Instead of using empty columns to create offsets for columns, the offset-* class when when applied on the col-[1-12] will offset the column to the right.

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

ClassStyles
offset-1
margin-left: 8.333333333333332%;
offset-2
margin-left: 16.666666666666664%;
offset-3
margin-left: 25%;
offset-4
margin-left: 33.33333333333333%;
offset-5
margin-left: 41.666666666666664%;
offset-6
margin-left: 50%;
offset-7
margin-left: 58.33333333333333%;
offset-8
margin-left: 66.66666666666666%;
offset-9
margin-left: 75%;
offset-10
margin-left: 83.33333333333333%;
offset-11
margin-left: 91.66666666666666%;
offset-12
margin-left: 100%;
offset-1
offset-3
offset-4
offset-6
offset-9
<div class="row">
    <div class="md:col-3 offset-1">
        <div class="uppercase">offset-1</div>
    </div>
    <div class="md:col-3 offset-3">
        <div class="uppercase">offset-3</div>
    </div>
    <div class="md:col-3 offset-4">
        <div class="uppercase">offset-4</div>
    </div>
    <div class="md:col-3 offset-6">
        <div class="uppercase">offset-6</div>
    </div>
    <div class="md: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-5 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="md:col-2">
        <div class="uppercase">col-2</div>
    </div>
    <div class="md:col-3 offset-center">
        <div class="uppercase">md:col-3 offset-center</div>
    </div>
</div>
<div class="row">
    <div class="md:col-5 offset-1">
        <div class="uppercase">md:col-5 offset-1</div>
    </div>
    <div class="md:col-3 offset-left">
        <div class="uppercase">col-3 offset-left</div>
    </div>
</div>
<div class="row">
    <div class="md:col-5 offset-1">
        <div class="uppercase">col-3 offset-1</div>
    </div>
    <div class="md:col-4 offset-right offset-6">
        <div class="uppercase">col-4 offset-right</div>
    </div>
</div>