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

Install with Yarn

You can use Yarn to install Cirrus.

$ yarn add cirrus-uiCopy

CDN with unpkg

https://unpkg.com/cirrus-uiCopy

CDN with JsDelivr

https://cdn.jsdelivr.net/npm/cirrus-ui@0.5.4/dist/cirrus.min.cssCopy

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:

Open the root directory in your terminal.
Remember to run npm install to get all the necessary dependencies.
Modify gulpfile.js to add or remove components and then run gulp minify to build the regular and minified versions.
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.

FileBot

Illustrator

KeepassX

Pandora

Photoshop

PhpStorm

Python

Wing

<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