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.4/dist/cirrus.min.css
Copy
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.

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.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
            

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

#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
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Opera
Opera
Electron
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.

Color 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:

  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

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