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.
Every flexbox layout begins with a row. Every row contains columns represented with the col-[1-12] class.
| Class | Styles |
|---|---|
col-1 | |
col-2 | |
col-3 | |
col-4 | |
col-5 | |
col-6 | |
col-7 | |
col-8 | |
col-9 | |
col-10 | |
col-11 | |
col-12 | |
<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>By default, columns come with 1 rem of space between the columns. To remove it, add the no-space class to the row.
<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>If there is not enough space in a given row for all the column elements, elements will automatically wrap.
To change this behavior, you can use the row--no-wrap utility class.
<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>These are columns denoted with the col class. The elements will automatically resize based on how many elements are present in the row
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.
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.
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.
| Class | Styles |
|---|---|
offset-1 | |
offset-2 | |
offset-3 | |
offset-4 | |
offset-5 | |
offset-6 | |
offset-7 | |
offset-8 | |
offset-9 | |
offset-10 | |
offset-11 | |
offset-12 | |
<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.
offset-left | |
offset-center | |
offset-right | |
<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>