# 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.

You can easily remove spaces in the columns by adding the no-space class to the column elements.

Col-6
Col-6
<div class="col-6 no-space">
    <div class="uppercase">Col-6</div>
</div>
<div class="col-6 no-space">
    <div class="uppercase">Col-6</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 fluid-container div.

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

If you still want to use the fluid-container while retaining flex wrapping, add wrap to the fluid-container.

col-fluid
col-10
col-8
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

Fluid columns will automatically adjust the width of every single element inside row fluid-container to all have the same width inside the parent div.

col-fluid
col-fluid
col-fluid

Adding the wrap class to the fluid-container will make new columns wrap to the next line when an overflow occurs instead of showing a scrollbar.

Column Autosizing

By default, placing col-fluid divs in a row with predefined column classes like col-3 will not autoexpand to fill the remaining space.

col-3
col-fluid
col-fluid

But by adding the fluid-container class to the row, any col-fluid column will fill up the remaining space dividing up the space equally among the other columns.

col-3
col-fluid
col-fluid

# 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. Note that for these specific offsets, they simply need to be embedded inside a row div without the flui-container class.

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. This works for columns with specific sizes and col-fluid inside a fluid-container. Note that the row must have the fluid-container class.

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 fluid-container wrap">
    <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 fluid-container wrap">
    <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 fluid-container wrap">
    <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

Hate the 12-grid layout? Cirrus also comes with a 10-grid layout system out of the box. Note: Embedding 10-grid columns inside row divs is optional.

w-10
w-20
w-30
w-40
w-50
w-60
w-70
w-80
w-90
w-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 padding at the top and bottom.

.divider .divider-short

A shorter variant of the regular divider at 15rem wide.

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.

.row .flex

A variant of the orignal row with 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 text-center">
            <h3 class="uppercase white title">Easily create beautiful splash screens</h3>
            <h5 class="uppercase white sub-title faded">Only 6 lines needed and no additional CSS</h5>
        </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

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.

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

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

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="light 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="light 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 text-center">Frame Title</div>
        <div class="frame-subtitle text-center">Frame Subtitle</div>
        <div class="frame-subtitle 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 text-center">
        <div class="row">
            <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 class="row">
            <div class="frame-title">John Doe</div>
            <div class="frame-subtitle">Freelance Photographer</div>
        </div>
        <div class="row fluid-container">
            <a class="col-fluid" href="#"><i class="fa fa-facebook link-btn"></i></a>
            <a class="col-fluid" href="#"><i class="fa fa-twitter link-btn"></i></a>
            <a class="col-fluid" href="#"><i class="fa fa-instagram link-btn"></i></a>
            <a class="col-fluid" href="#"><i class="fa fa-medium link-btn"></i></a>
        </div>
    </div>
    <div class="content-no-padding"><div class="divider no-margin"></div></div>
    <div class="frame-body">
        <div class="content 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 no-margin"></div></div>
    <div class="frame-footer">
        <div class="frame-subtitle 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.

Robert

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?

Robert

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