# Layout

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.

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>

On smaller devices, Cirrus automatically sets the column widths to span the device width. You can remove this behavior by adding ignore-screen to the classes in the row div. More information on this is found below.

Columns with no spaces.

Remove spaces in the columns by adding the no-space to 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>
Grid vertical line spacing.

By default, the grid system in Cirrus will automatically shift columns that do not fit in one row horizontally down to the next line. For example:

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

However, you can override that behavior with the embedding the columns inside a row--no-wrap div.

col-10
col-10
col-10
<div class="row row--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>

Preserve column widths.

The ignore-screen class allows you preserve column widths even in small screen sizes replacing the default behavior of stretching 100%.

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>
Fluid Columns

All column classes col without a number designation will equally distribute the width among wither col elements with a row parent.

col
col
col

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

Column Autosizing

Regular col divs will autoexpand alongside columns with a specific width.

col-2
col
col

# Column Offset

Rather than using empty columns to space columns out, Cirrus provides offsets to make styling much easier. The classes follow the same sizing as the col-n classes. To add the offset, just add the offset-n class to your column and Cirrus will take care of the spacing and calculations.

offset-1
offset-3
offset-4
offset-6
offset-9

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
<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"><div class="uppercase">col-4 offset-right</div></div>
</div>

# 10-grid Layout

Added
0.5.5

Easily set scalable heights and widths for any element.

w-10
w-20
w-30
w-40
w-50
w-60
w-70
w-80
w-90
w-100
h-10
h-20
h-30
h-40
h-50
h-60
h-70
h-80
h-90
h-100

# Page Structure

Cirrus provides styles that enable you to design pages that are spacious and elegant with ease.

Basic Classes

.content

Adds padding from the sides and the bottom to push content to the middle of the screen.

.content-no-padding

Just like .content but without the extra padding at the bottom.

.content-fluid

A div that is centered and fills the width of the parent.

section

A block element to encompass other divs and is usually adjacent to other section elements.

.panel

Works great as a sub-element of section which provides 2.5rem rem padding to the top and bottom.

.divider

A simple gray divider with an optional text field called data-content.

.divider--v

A vertical divider with an optional text field called data-content.

space, space.large, space.x-large

A div alternative to br that is more flexible starting at 1rem to 5rem.

.row

The basic container for column.

.r

The legacy container for content going across (non-flexbox).

# Splash Screen

Creating an eye caching splash screen is incredibly easy with Cirrus which includes customizations to the content within and the layout.

You can design your splash screen however you'd like. Below is an example that takes advantage of all the classes which includes hero, fullscreen, hero-img, parallax-img, and hero-body (for the div immediately underneath).

Easily create beautiful splash screens

Only 6 lines needed and no additional CSS


<div id="splash-img" class="hero fullscreen hero-img parallax-img">
    <div class="hero-body">
        <div class="content u-text-center">
            <h1 class="uppercase white title">Easily create beautiful splash screens</h1>
            <h3 class="uppercase white sub-title faded">Only 6 lines needed and no additional CSS</h3>
        </div>
    </div>
</div>

# Leveling Content

With Cirrus, you can easily vertically center your divs with the level class in the parent container and the level-item class for the children to align the items. The level-content class is used with the level-item class to make the content of the item stretch the width of the parent div relative to other divs.

.level-item
padding: 1rem

.level-item
padding: 1.5rem 1rem

.level-item
padding: 1rem

Above is an example that uses the level class as the container and then the level-item class to space out the children and keep the left and right divs in the center (vertically speaking) to the parent div.

Brand
Item 1 Item 2

Center

You can also create your very own navbar with the level class and specify the content displayed on the left and right side with the level-left and level-right classes respectively. This differs from the header class in the sense that divs have more padding with the same color along with a slight adjustment to the divs.

.level-left
.level-item
.level-content

.level-content
.level-item

.level-right
.level-item
.level-content

In the example above, the contents of level-left, the level-item in the center, and level-right will expand as more content is added into the divs.

Tl;dr: For navbars, check out the header menu documentation.
Fill Height

Looking at the previous examples, you may be wondering how to force the level-items to fill the height of its parent container. This is easily done by adding the fill-height class to the level div.

Totally

Equal

Equal

Equal

Heights

# Pagination

Cirrus comes with easy to style pagination menus that allow for easy navigation between pages in websites and forums. All you need to do is add the pagination class to the parent container and the pagination-item class to the children. To display numerous small pagination items, add the short class. In the small pagination menu shown below, to indicate that a page is selected, add the selected class to the page item.

For a bordered look, add the pagination-bordered class to the pagination.

<div class="col-6">
    <div class="pagination">
        <div class="pagination-item short">
            <a disabled="" href="#" class="">Prev</a>
        </div>
        <div class="pagination-item short selected">
            <a href="#" class="">1</a>
        </div>
        <div class="pagination-item short">
            <a href="#" class="">2</a>
        </div>
        <div class="pagination-item short">
            <a href="#" class="">3</a>
        </div>
        <div class="pagination-item short">
            <a href="#" class="">4</a>
        </div>
        <div class="pagination-item short">
            <a>...</a>
        </div>
        <div class="pagination-item short">
            <a href="#" class="">13</a>
        </div>
        <div class="pagination-item short">
            <a href="#" class="">Next</a>
        </div>
    </div>
</div>

<div class="col-6">
    <div class="pagination pagination-bordered">
        <div class="pagination-item short">
            <a href="#" class="">Prev</a>
        </div>
        <div class="pagination-item short">
            <a href="#" class="">1</a>
        </div>
        <div class="pagination-item short">
            <a>...</a>
        </div>
        <div class="pagination-item short">
            <a href="#" class="">3</a>
        </div>
        <div class="pagination-item short">
            <a href="#" class="">4</a>
        </div>
        <div class="pagination-item short selected">
            <a href="#" class="">5</a>
        </div>
        <div class="pagination-item short">
            <a>...</a>
        </div>
        <div class="pagination-item short">
            <a href="#" class="">23</a>
        </div>
        <div class="pagination-item short">
            <a href="#" class="">Next</a>
        </div>
    </div>
</div>
Pagination Prev/Next

Paginations are also designed to provide easy access to different pages once the user reaches the bottom of a page. Just simply add the pagination class to the parent container and add the pagination-item class to 2 children (3 or more may take up more width than the parent container).

<ul class="pagination no-bullets">
    <li class="pagination-item pagination-prev">
        <a href="#" class="display-block">
            <p class="pagination-item-subtitle">Previous</p>
            <h5 class="u-no-margin">Choose Items</h5>
        </a>
    </li>
    <li class="pagination-item pagination-next">
        <a href="#" class="display-block">
            <p class="pagination-item-subtitle">Next</p>
            <h5 class="u-no-margin">Order</h5>
        </a>
    </li>
</ul>

# Frames

Frames are designed similar to cards, but provide more flexibility to the developer to align items in a structured layout. The frame is designed to auto-expand with more content.

Frame Title
Frame Subtitle
This is the frame header.
Frame Body
Insert any component here, including a frame navigation menu using frame-nav. The frame will auto-expand and if a specific height is set, a scrollbar will appear to take care of overflow.
The lighter gray is the frame itself while the grey are the components of the frame. Please note that the margins are just to serve as an example.
Frame Footer
Takes up the bottom of the frame.
<div class="frame">
    <div class="frame-header">
        <div class="frame__title u-text-center">Frame Title</div>
        <div class="frame__subtitle u-text-center">Frame Subtitle</div>
        <div class="frame__subtitle u-text-center">This is the frame header.</div>
    </div>
    <div class="frame__body">
        <!-- Insert other controls here -->
    </div>
    <div class="frame__footer">
        <!-- Insert some controls here -->
    </div>
</div>

Below is a simple example using a frame.

John Doe
Freelance Photographer

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="frame">
    <div class="frame__header u-text-center">
        <div>
            <figure class="avatar">
                <img src="http://orig04.deviantart.net/aded/f/2013/066/c/2/profile_picture_by_naivety_stock-d5x8lbn.jpg">
            </figure>
        </div>
        <div>
            <div class="frame__title">John Doe</div>
            <div class="frame__subtitle">Freelance Photographer</div>
        </div>
        <div class="row">
            <a class="col" href="#"><i class="fa fa-wrapper fa-facebook link-btn"></i></a>
            <a class="col" href="#"><i class="fa fa-wrapper fa-twitter link-btn"></i></a>
            <a class="col" href="#"><i class="fa fa-wrapper fa-instagram link-btn"></i></a>
            <a class="col" href="#"><i class="fa fa-wrapper fa-medium link-btn"></i></a>
        </div>
    </div>
    <div class="content-no-padding"><div class="divider u-no-margin"></div></div>
    <div class="frame__body">
        <div class="content u-text-center">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </div>
    <div class="content-no-padding"><div class="divider u-no-margin"></div></div>
    <div class="frame__footer">
        <div class="frame__subtitle u-text-center"><i>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</i></div>
    </div>
</div>

Below are other examples of using frames. The one on the left demonstrates overflow on the y-axis with card tiles and the right uses different components (tabcontrol, card tiles, etc...) inside the frame. Both frames are set to 30rem.

Super Awesome Group Chat

Elk

Hey guys.

Tony

What's up?

Elk

I started working on a new webapp. However I'm pretty lazy when it comes to designing from the ground up. Anyone know any good CSS frameworks for rapid prototyping?

Tony

Check out Cirrus. https://spiderpig86.github.io/Cirrus

Elk

Just what I needed.

John Doe

Former youngest person on Earth

Twitter

@johndoe

Instagram

@johndoe

Email

johndoe@github.com

Location

Toronto, Ontario

# Grid

Added
0.5.5

A light-weight abstraction developed as an alternative to the existing flexbox implementation.

Header

Sidebar

Main Content

Sub Content

Sub Content

Footer