Cirrus

The CSS framework for the modern web.

0.5.2

Why Cirrus?

11

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 Yarn

You can use Yarn to install Cirrus.

$ yarn add cirrus-ui 

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
│   └───resources_for_documentation
├───demo_res
│   ├───demo.html
│   └───other_documentation_files
├───src
│   ├───animations.css
│   ├───button.css
│   ├───card.css
│   ├───code.css
│   ├───default.css
│   ├───font.css
│   ├───footer.css
│   ├───forms.css
│   ├───frames.css
│   ├───header.css
│   ├───layout.css
│   ├───links.css
│   ├───lists.css
│   ├───media.css
│   ├───modal.css
│   ├───placeholder.css
│   ├───table.css
│   ├───toast.css
│   └───util.css
├───README.md
└───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 -->
Customize Your Build

Cirrus can be modified to include only components that you will need. Since it is processed with Gulp swapping different components in and out of your distribution build is very simple.

Just follow the following steps:

  1. Open the root directory in your terminal.
  2. Remember to run npm install to get all the necessary dependencies.
  3. Modify gulpfile.js to add or remove components and then run gulp minify to build the regular and minified versions.
  4. These build files should appear in the /dist directory.

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

An elegant way of presenting information in an intuitive user interface.

Kangaroo Valley Safari

By Mattia Astorino

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

Kangaroo Valley Safari

By Mattia Astorino

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

Kangaroo Valley Safari

By Mattia Astorino

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

Another card design with the same CSS, different structure.

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

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. In addition to the column system, there are a bunch of different components such as splashes, frames, and additional page styles to make prototyping webpages a breeze.

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. In addition to basic lists, you can create navigation menus and custom drop down menus.

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