Follow these simple steps for setting up Cirrus in your project.
Below are a couple of different ways to integrate Cirrus into your project.
npm i cirrus-ui --saveyarn add cirrus-uihttps://unpkg.com/cirrus-uihttps://cdn.jsdelivr.net/npm/cirrus-ui@0.6.2/dist/cirrus.min.cssNow 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">
<!-- 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 codeSetup 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">
</head>
<!-- More content -->
</html>Using a new framework can be slightly overwhelming, so this section is to help point out common areas in the documentation to help you get up to speed.
Spacing is an important part of designing a page not just with Cirrus, but in general. This can be accomplished by following some hierarchy for a layout, such as section, content, and row. The section HTML tag semantically spearates the content on the page, the content class adds the needed spacing, and the row class can be used to position the child elements.
<section>
<div class="content">
<p>Some text</p>
<div class="row">
<div class="col">Child 1</div>
<div class="col">Child 2</div>
</div>
</div>
</section>More info can be found in the Spacing docs.
If you are looking to tile elements in a specific form, then I recommend getting started with the following two pages.
With some layout styles in place, now you specify a header and footer.
This pretty much sums up the few pages that would help getting a base layout up and running. You can find more styles to modify the layout under Layout or Utilities.
There are lots of components that already come with the framework. I do not have any specific recommendations other than to pick the ones you want to use. Each page has plenty of examples to cover many possible use cases.
To help you get started, feel free to use the example page created below.
<!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>