Jumpstart with Cirrus

Everything you need to know on setting up your first project.

Installation

There are a few ways to get Cirrus for your project:

Npm

                npm i cirrus-ui --save
                Copy

Yarn

                yarn add cirrus-ui
                Copy

Unpkg CDN

                https://unpkg.com/cirrus-ui
                Copy

JsDelivr

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

Manual Install

All the files you need can be found right here.

Requirements

Cirrus has a few requirements in your setup before getting started to allow for mobile responsiveness and the latest web standards.

Webpage
Node

Traditional Webpage

Add the HTML5 DocType

<!DOCTYPE html>

Add the responsive viewport meta tag

<meta name="viewport" content="width=device-width, initial-scale=1">

Font Awesome

To use glyphs, you must include the Font Awesome library.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

Please visit FontAwesome and sign up to get your developer kit to get started. The CDN above is just a sample.

Required Fonts

Don't forget to include the required fonts.

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

Node App

Import cirrus-ui


    import 'cirrus-ui';

    // Your other framework code

Setup Template

In your main index.html page, make sure that the following dependencies are also included. For example, it would be in the index.html file in your React project.

<!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;" />
        
            <!-- 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">

            <!-- Font Awesome -->
            <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

            <!-- JQuery (Optional to help add navbar functionality) -->
            <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    </head>

    ...

Template

Start your project now with this 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">

            <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

            <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    </head>

    <body>
        <div class="header header-fixed unselectable header-animated">
            <div class="header-brand">
                <div class="nav-item no-hover">
                    <h6 class="title">My App</h6>
                </div>
                <div class="nav-item nav-btn" id="header-btn">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
            <div class="header-nav" id="header-menu">
                <div class="nav-left">
                    <div class="nav-item text-center">
                        <a href="#">
                            <span class="icon">
                                <i class="fab fa-wrapper fa-twitter" aria-hidden="true"></i>
                            </span>
                        </a>
                    </div>
                </div>
                
                <div class="nav-right">
                    <div class="nav-item has-sub toggle-hover" id="dropdown">
                        <a class="nav-dropdown-link">Menu</a>
                        <ul class="dropdown-menu dropdown-animated" role="menu">
                            <li role="menu-item"><a href="#">First Item</a></li>
                            <li role="menu-item"><a href="#">Second Item</a></li>
                            <li role="menu-item"><a href="#">Third Item</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <section class="section">
            <div class="hero fullscreen">
                <div class="hero-body">
                    <div class="content">
                        <div class="text-center">
                            <h1>👋 Hello world!</h1>
                            <h6 class="font-alt font-light">A webpage powered by <b>Cirrus.</b></h6>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </body>
</html>

#Project Variants

There are currently two variants of the project:

Core

This only contains the essential styles needed to build a project with Cirrus. It consists of these components:

Buttons
Code
Default (Base)
Font
Footer
Forms
Frames
Header
Layout
Links
Lists
Media
Modal
Tables
Theme
Util

In the dist folder, these styles are found in the cirrus-core.min.css file here.

Ext

This adds an extension to the framework with more styles, layouts, and pre-built components for quick prototyping.

Animations
Avatar
Card
Form (Extended Styles)
Grid
Link (Extended Styles)
Modifiers
Pagination
Placeholder
Tabs
Tags
Tiles
Toasts
Tooltips

All these styles are combined with the core build in the cirrus.min.css file in the /dist folder here.

#Browser Support

Cirrus relies on What CSS to prefix? and Autoprefixer to help add backwards compatibility to older browsers. Cirrus works well with the following browser versions:

IE / Edge	Firefox	Chrome	Safari	Opera	Electron
IE9 , IE10 , IE11 , Edge	last 3 , ESR	last 3	last 3	last 3	last 3

#Breakpoints

Breakpoints are quite standard across the entire framework. These are the 3 number ranges you need to know:

Mobile Below and including `768px`	Tablet Between `769px` and `1023px`	Desktop Above and including `1024px`
*-mobile	-
-	*-tablet
-		*-desktop
-	*-tablet-only	-

#Colors

These are the colors that style most of the framework.

Name	Hex	Modifier
Primary	`#f03d4d`	`-primary`
Info	`#2972fa`	`-info`
Link	`#5e5cc7`	`-link`
Dark	`#363636`	`-dark`
Success	`#0dd157`	`-success`
Warning	`#fab633`	`-warning`
Danger	`#fb4143`	`-danger`
Light	`#f6f9fc`	`-light`

#Developing

Developing your own version of Cirrus is quite simple with these simple steps.

Get the Source

You can clone the source of the project straight from Github. You can add files or remove them from the /src directory to fit your needs.

Building the Project

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.

Customizing the Theme

You can find Cirrus's color palette within theme.css. Modify and rebuild the project to use the theme you prefer.

For more granular control, you can modify the theme for a specific control by changing the CSS variable value for that specific class. For example, the modification below changes the background color of all buttons for btn--info to #222.

button, .btn, input[type="text"] {
    --cirrus-info: #222;
}

The other selectors will still see the original --cirrus-info color instead.

Folder Structure

The project is organized like this:

├───dist                    // Dist files (git ignored)
│   ├───cirrus.css
│   └───cirrus.min.css
├───img                     // Docs resources
│   └───CirrusLogo.png
├───src                     // CSS source files
│   ├───core                // Styles for core build
│   │   └───...
│   └───ext                 // Extended styles for components
│       └───...
├───...
├───.travis.yml
├───...
├───README.md
├───gulpfile.js             // Build file
└───...