Cirrus

The CSS framework for the modern web.

0.5.4

Why Cirrus?

11

KB

Gzipped

Lightweight

A powerful framework at a fraction of the cost.

Responsive

Easily design your 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 --save
Copy
Install with Yarn

You can use Yarn to install Cirrus.

$ yarn add cirrus-ui
Copy
CDN with unpkg
https://unpkg.com/cirrus-ui
Copy
CDN with JsDelivr
https://cdn.jsdelivr.net/npm/cirrus-ui@0.5.4/dist/cirrus.min.css
Copy
Structure

The file tree for the install looks like this:

├───dist                    // Dist files (git ignored)
│   ├───cirrus.css
│   └───cirrus.min.css
├───demo_res                // Docs resources
│   └─── ...
├───docs                    // Documentation
│   ├───demo.html
│   └─── ...
├───src                     // CSS source files
│   ├───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.

Gulp Commands

  • gulp compile - just compile the CSS without minification.
  • gulp minify - compile the CSS with level 2 minification.
  • gulp watch - automate compiling and minication.
Template

Start developing now with this starter template.

                        <!DOCTYPE html>
<html>
    <head>
            <title>Getting Started with Cirrus</title>

            <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge;" />
        
            <link href="https://unpkg.com/cirrus-ui" type="text/css" rel="stylesheet" />
        
            <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">
            <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    </head>

    <body>
        <div class"content">
            <div class="row text-center">
                <h1 class="title">My First Page</h1>
                <h6 class="light subtitle">A webpage powered by <b>Cirrus</b></p>
            </div>
        </div>
    </body>
</html>
                    

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 indicate users a loading state.

<div class="col-fluid">
    <button class="animated loading center hide-text">1</button>
</div>
<div class="col-fluid">
    <button class="animated loading center loading-left btn-accent">Loading</button>
</div>
<div class="col-fluid">
    <button class="animated loading center loading-white hide-text" id="btn3">3</button>
</div>
<div class="col-fluid">
    <button class="animated loading center loading-right loading-white white" id="btn4">Loading</button>
</div>
<div class="col-fluid">
    <button class="animated loading center hide-text" id="btn5">5</button>
</div>
Hover Grow

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

<div class="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"/>

Components

Cirrus provides a ton of beautifully designed components for any webpage or app. Use cards, one of Cirrus' most popular components to elegantly display information as shown below.

Kangaroo Valley Safari

By John Doe

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

Kangaroo Valley Safari

By John Doe

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

Kangaroo Valley Safari

By John Doe

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 John Doe

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

Person

Kangaroo Valley Safari

By John Doe

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

Kangaroo Valley Safari

By John Doe

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>
        <!-- insert code -->
    </code>
</pre>
                    
As simple as that.

If you would like to specify the language of the code, add the data-lang attribute to the <code> element.

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.