11
KBGzipped
Lightweight
A powerful framework at a fraction of the cost.
Gzipped
Lightweight
A powerful framework at a fraction of the cost.
Responsive
Easily design your website without having to worry about different screen sizes.
Flexible
Don't need the whole framework? Just pick the files you need from our repository.
Modern
Cirrus was designed to work across all modern browsers with Flexbox.
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.
You can use NPM to install Cirrus.
$ npm install cirrus-ui --save
Copy
You can use Yarn to install Cirrus.
$ yarn add cirrus-ui
Copy
https://unpkg.com/cirrus-ui
Copy
https://cdn.jsdelivr.net/npm/cirrus-ui@0.5.4/dist/cirrus.min.css
Copy
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 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 -->
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:
npm install
to get all the necessary dependencies.gulpfile.js
to add or remove components and then run gulp minify
to build the regular and minified versions./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.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>
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.
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>
Zoom in various elements to make the stand out from the rest.
<div class="content">
<img src="demo_res/img/autodesk_autocad.png" class="hover-grow"/>
<p>Autodesk</p>
</div>