#Setup

Follow these simple steps for setting up Cirrus in your project.

Below are a couple of different ways to integrate Cirrus into your project.

1. Use a Package Manager (Recommended)
Npm
npm i cirrus-ui --save
Yarn
yarn add cirrus-ui
2. Use a CDN
Unpkg
https://unpkg.com/cirrus-ui
JsDelivr
https://cdn.jsdelivr.net/npm/cirrus-ui/dist/cirrus.min.css
3. Download from the repository.

#Project Configuration

Now that Cirrus is installed, it is time to configure it for your project. This step ensures that the project is set up properly to support mobile responsiveness and strict rendering with standard mode.

Traditional Webpage

Add the HTML5 DocType. This is required.

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

Add Cirrus Link Import and Other Dependencies

<!-- Minified Cirrus CSS -->

<link rel="stylesheet" href="../css/cirrus.min.css"> <!-- Or use CDN link -->
<!-- Import your other dependencies -->

React

Import cirrus-ui anywhere in your project.

import 'cirrus-ui'; 
// Your other framework code

Write Your App

There's nothing left to do but to start your React app.

import { StrictMode } from "react";
import ReactDOM from "react-dom";

import App from "./App";

import 'cirrus-ui'; // You can import it here if you want

const rootElement = document.getElementById("root");
ReactDOM.render(
    <StrictMode>
        <App />
    </StrictMode>,
    rootElement
);

Vue

Import cirrus-ui anywhere in your project (either in a Vue template or JS file).

import 'cirrus-ui'; 
// Your other framework code

Write Your App

There's nothing left to do but to start your Vue app.

// Example main.js
import Vue from 'vue';
import App from './App.vue';

import 'cirrus-ui';

Vue.config.productionTip = false;

new Vue({
    render: (h) => h(App),
}).$mount('#app');

Svelte

Import cirrus-ui anywhere in your project.

import 'cirrus-ui'; 
// Your other framework code

Write Your App

There's nothing left to do but to start your Svelte app.

import App from "./App.svelte";
import "cirrus-ui";

const app = new App({
    target: document.body
});

export default app;

Sass/Scss Project

Note that this can be used in any Sass/Scss file including in combination with other front-end frameworks such as React, Angular, Vue, etc.

Import the variant of Cirrus

/* Core Build */
@use "cirrus-ui/src/cirrus-core" as *;

/* Extended Build */
@use "cirrus-ui/src/cirrus-ext" as *;

/* All Build */
@use "cirrus-ui/src/cirrus-all" as *;

(Optional) Configure Cirrus

If you want to change classes that Cirrus generates or how it behaves, you can pass in configuration values to override or extend defaults. Read more in the configuration docs. Below is just an example of customizing Cirrus.

@use "cirrus-ui/src/cirrus-ext" as * with (
    $config: (
        excludes: (
            ABSOLUTES,
        ),
        opacity: null, // Disable default opacity classes
        extend: (
            // Add your own
            opacity: (
                25: .25,
                50: .5,
                75: .75,
            )
        )
    ),
);

Start Your Build Process

Run your build process that builds your Sass project. The output file should also contain the contents of Cirrus. Command here is just a sample.

npm run dev

#Starter Template

To help you get started, feel free to use the example page created below. If you want to see it in the browser, click here.

<!DOCTYPE html>
<html id="page">
   <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>