Cirrus

A lightweight and responsive CSS framework.

0.4.6

Why Cirrus?

5.2

KB

Gzipped

Lightweight

A powerful framework at a fraction of the cost.

Responsive

Easily design you website without having to worry about different screen sizes.

Flexible

Don't need the whole framework? Just pick the files you need from our repository.

Modern

Cirrus was designed to work across all modern browsers with Flexbox.

Getting Started

Getting started with Cirrus is very simple. There will be more options on getting Cirrus in the future, but for now you can simply download the zip file from the Github repo.

Install with npm

You can use npm to install Cirrus.

npm install cirrus-ui 

Install with Bower

You can use Bower to install Cirrus.

Coming soon 

CDN with unpkg

https://unpkg.com/cirrus-ui@0.4.6/dist/cirrus.min.css

Structure

The file tree for the install looks like this:

├───dist
│   ├───cirrus.css
│   ├───cirrus.min.css
├───demo_res
│   ├───app.css
│   ├───app.js
│   ├───test.css
│   ├───test.js
├───src
│   ├───animations.css
│   ├───button.css
│   ├───card.css
│   ├───code.css
│   ├───default.css
│   ├───font.css
│   ├───footer.css
│   ├───forms.css
│   ├───header.css
│   ├───layout.css
│   ├───links.css
│   ├───lists.css
│   ├───table.css
│   ├───util.css
├───README.md
├───demo.html
└───index.html 

Setting Up

Setting up Cirrus for any project is very simple and will only require a couple of lines on each file.

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">

<!-- Minified Cirrus CSS -->
<link rel="stylesheet" href="../css/cirrus.min.css">

<!-- Import your other dependencies -->

Animations

Cirrus introduces some animations to help you get started with your project from hover effects to loading indicators. All of these components can easily be modified to achieve any appearance.

Loading Button

These buttons are designed to tell users that a function is in progress.

<div class="col-fluid">
    <button class="loading center" id="btn1">1</button>
</div>
<div class="col-fluid">
    <button class="loading center" id="btn2">2</button>
</div>
<div class="col-fluid">
    <button class="loading center" id="btn3">3</button>
</div>
<div class="col-fluid">
    <button class="loading center" id="btn4">4</button>
</div>
<div class="col-fluid">
    <button class="loading center" id="btn5">5</button>
</div>
Hover Grow

Zoom in various elements to make the stand out from the rest.

<div class="col-fluid content">
    <img src="demo_res/img/autodesk_autocad.png" class="hover-grow"/>
    <p>Autodesk</p>
</div> 

Buttons

With Cirrus, buttons can easily be customized to different color schemes and different declarations can be used to construct them.

Buttons with default styling.
test
<div class="btn">test</div>
<button>Regular Button</button>
<input type="submit"/>

Cards

Cards in Cirrus allow you to easily display content in a flexible and elegant manner with only a few lines of code. You can design your cards to be minimal or complex with images, animations, and buttons.

Kangaroo Valley Safari

By Mattia Astorino

Located two hours south of Sydney in the Southern Highland of New South Wales...

Person

Kangaroo Valley Safari

By Mattia Astorino

Located two hours south of Sydney in the Southern Highland of New South Wales...

Code

Embedding Code

It's as simple as pre > code > and then the code you want to mark up.

            <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

                          
<pre>
    <code>
        Code
    </code>
</pre>
                    
Literally Just All You Have To Do

Yep.

Font

Cirrus incorporates beautiful typography to make your website stand out from the rest. Nunito Sans, by Vernon Adams is chosen for the default typography for most elements such as paragraphs, articles, blockquotes, and more while Montserrat adds a bold but elegant touch to titles. The font-size have been converted to rems which is independent of the font sizes of the parent elements. The default is set to 1rem (16px) where each interval of rem is 16 pixels.

this is h1h14rem (48px)

this is h2h23.5rem (40px)

this is h3h33rem (32px)

this is h4h42.5rem (24px)

this is h5h52rem (16px)
this is h6h61rem (12px)

Forms

When was the last time you had fun creating and designing forms? With Cirrus, yesterday's headaches are no more. Easily build beautiful and responsive forms with a couple of lines of code.

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-6
col-6
col-4
col-4
col-4
col-3
col-3
col-3
col-3
col-2
col-2
col-2
col-2
col-2
col-2
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1

Lists

Lists are a common way to organize and present data on webpages. You can easily create elegant unordered lists with ul, ordered lists with ol, and description lists with dl. ul will show bullets, ol will show numbers for ordering, and dl will indent itself if the list item is a sub item.

  • Item 1
  • Item 2
  1. Item 1
  2. Item 2
Main description
Sub item description
    <div class="row">
<div class="col-4">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>
</div>
<div class="col-4">
    <ol>
        <li>Item 1</li>
        <li>Item 2</li>
    </ol>
</div>
<div class="col-4">
    <dl>
        <dt>Main description</dt>
        <dd>Sub item description</dd>
    </dl>
</div>
</div>
                    

Tables

Take the hassle out of styling your tables with Cirrus. Cirrus comes bundled with clean designs to fit any website.

T1 T2 T3 T4 T5 S Notes
T1 T2 T3 T4 T5 S Notes
1Row:1 Cell:1Row:1 Cell:2Row:1 Cell:3Row:1 Cell:4SRow:1 Cell:5
2Row:2 Cell:1Row:2 Cell:2Row:2 Cell:3Row:2 Cell:4SRow:2 Cell:5
3Row:3 Cell:1Row:3 Cell:2Row:3 Cell:3Row:3 Cell:4SRow:3 Cell:5
4Row:4 Cell:1Row:4 Cell:2Row:4 Cell:3Row:4 Cell:4SRow:4 Cell:5
5Row:5 Cell:1Row:5 Cell:2Row:5 Cell:3Row:5 Cell:4SRow:5 Cell:5
6Row:6 Cell:1Row:6 Cell:2Row:6 Cell:3Row:6 Cell:4SRow:6 Cell:5

Utilities

Something still not looking quite right? Cirrus comes with many CSS fixes to fix those anoying situations.