Create beautiful designs in less time with Cirrus, the SCSS framework designed for rapid prototyping. Use beautiful pre-built components to bootstrap your next project and utility classes to polish your final design.
Version 0.7.2 Patch 1 / Gamma VIII
$ yarn add cirrus-ui
A fully responsive and comprehensive SCSS framework with beautiful controls and simplistic structure. Use Cirrus to improve your existing designs or start a new project.
Getting started with Cirrus is a few commands or lines of HTML away (depending on how you want to import it). The framework is designed to be pluggable into any new or existing projects.
Learn moreIntegate to any HTML page.
<!-- Import Cirrus from CDN with relevant fonts -->
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<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://cdn.jsdelivr.net/npm/cirrus-ui/dist/cirrus.min.css">
Import into any node project.
Install the package.
$ yarn add cirrus-ui
Import into project.
// index.js
import 'cirrus-ui';
Sitting at the core of Cirrus is its design system. Every aspect of the design system is exposed via utility functions which allows you to develop consistent user interfaces.
Used In
Used In
<h1 class="title headline-1">Aa</h1>
<h4 class="subtitle font-normal">Montserrat</h4>
<div class="pt-2">
<h6 class="title font-normal">Normal</h6>
<h2 class="subtitle font-normal">AaBbCcDd</h2>
<h6 class="title font-bold">Bold</h6>
<h2 class="subtitle font-bold">AaBbCcDd</h2>
<h6 class="title font-light">Numbers (Light)</h6>
<h2 class="subtitle font-light">0123456789</h2>
</div>
<h1 class="font-alt title headline-1 font-light">Aa</h1>
<h4 class="font-alt subtitle font-normal">Nunito Sans</h4>
<div class="pt-2">
<h6 class="font-alt title font-normal">Normal</h6>
<h2 class="font-alt subtitle font-normal">AaBbCcDd</h2>
<h6 class="font-alt title font-bold">Bold</h6>
<h2 class="font-alt subtitle font-bold">AaBbCcDd</h2>
<h6 class="font-alt title font-light">Numbers (Light)</h6>
<h2 class="font-alt subtitle font-light">0123456789</h2>
</div>
blue (100 - 900)
indigo (100 - 900)
pink (100 - 900)
orange (100 - 900)
<div class="p-2 my-2 bg-white u-round-sm u-shadow-sm">
<div class="u-flex u-gap-1 u-flex-wrap">
<div class="p-3 u-round-full u-shadow-md bg-blue-100"></div>
<div class="p-3 u-round-full u-shadow-md bg-blue-200"></div>
<div class="p-3 u-round-full u-shadow-md bg-blue-300"></div>
<div class="p-3 u-round-full u-shadow-md bg-blue-400"></div>
<div class="p-3 u-round-full u-shadow-md bg-blue-500"></div>
<div class="p-3 u-round-full u-shadow-md bg-blue-600"></div>
<div class="p-3 u-round-full u-shadow-md bg-blue-700"></div>
<div class="p-3 u-round-full u-shadow-md bg-blue-800"></div>
<div class="p-3 u-round-full u-shadow-md bg-blue-900"></div>
</div>
</div>
<div class="p-2 my-2 bg-white u-round-sm u-shadow-sm">
<div class="u-flex u-gap-1 u-flex-wrap">
<div class="p-3 u-round-full u-shadow-md bg-indigo-100"></div>
<div class="p-3 u-round-full u-shadow-md bg-indigo-200"></div>
<div class="p-3 u-round-full u-shadow-md bg-indigo-300"></div>
<div class="p-3 u-round-full u-shadow-md bg-indigo-400"></div>
<div class="p-3 u-round-full u-shadow-md bg-indigo-500"></div>
<div class="p-3 u-round-full u-shadow-md bg-indigo-600"></div>
<div class="p-3 u-round-full u-shadow-md bg-indigo-700"></div>
<div class="p-3 u-round-full u-shadow-md bg-indigo-800"></div>
<div class="p-3 u-round-full u-shadow-md bg-indigo-900"></div>
</div>
</div>
<div class="p-2 my-2 bg-white u-round-sm u-shadow-sm">
<div class="u-flex u-gap-1 u-flex-wrap">
<div class="p-3 u-round-full u-shadow-md bg-pink-100"></div>
<div class="p-3 u-round-full u-shadow-md bg-pink-200"></div>
<div class="p-3 u-round-full u-shadow-md bg-pink-300"></div>
<div class="p-3 u-round-full u-shadow-md bg-pink-400"></div>
<div class="p-3 u-round-full u-shadow-md bg-pink-500"></div>
<div class="p-3 u-round-full u-shadow-md bg-pink-600"></div>
<div class="p-3 u-round-full u-shadow-md bg-pink-700"></div>
<div class="p-3 u-round-full u-shadow-md bg-pink-800"></div>
<div class="p-3 u-round-full u-shadow-md bg-pink-900"></div>
</div>
</div>
<!-- ... -->
<div class="w-100p">
<div class="bg-indigo-500 text-white my-2 pl-2 pr-32 py-1 u-round-sm u-inline-block u-shadow-lg"><span class="font-bold">px-32</span></div>
</div>
<div class="w-100p">
<div class="bg-indigo-500 text-white my-2 pl-2 pr-24 py-1 u-round-sm u-inline-block u-shadow-lg"><span class="font-bold">px-24</span></div>
</div>
<div class="w-100p">
<div class="bg-indigo-500 text-white my-2 pl-2 pr-20 py-1 u-round-sm u-inline-block u-shadow-lg"><span class="font-bold">px-20</span></div>
</div>
<div class="w-100p">
<div class="bg-indigo-500 text-white my-2 pl-2 pr-16 py-1 u-round-sm u-inline-block u-shadow-lg"><span class="font-bold">px-16</span></div>
</div>
<div class="w-100p">
<div class="bg-indigo-500 text-white my-2 pl-2 pr-12 py-1 u-round-sm u-inline-block u-shadow-lg"><span class="font-bold">px-12</span></div>
</div>
<div class="w-100p">
<div class="bg-indigo-500 text-white my-2 pl-2 pr-10 py-1 u-round-sm u-inline-block u-shadow-lg"><span class="font-bold">px-10</span></div>
</div>
<div class="w-100p">
<div class="bg-indigo-500 text-white my-2 pl-2 pr-8 py-1 u-round-sm u-inline-block u-shadow-lg"><span class="font-bold">px-8</span></div>
</div>
<div class="u-opacity-100 bg-green-500 text-white w-100p mb-1 pl-2 py-1 u-round-sm u-shadow-lg">
<div class="font-bold">u-opacity-100</div>
</div>
<div class="u-opacity-90 bg-green-500 text-white w-100p mb-1 pl-2 py-1 u-round-sm u-shadow-lg">
<div class="font-bold">u-opacity-90</div>
</div>
<div class="u-opacity-80 bg-green-500 text-white w-100p mb-1 pl-2 py-1 u-round-sm u-shadow-lg">
<div class="font-bold">u-opacity-80</div>
</div>
<div class="u-opacity-70 bg-green-500 text-white w-100p mb-1 pl-2 py-1 u-round-sm u-shadow-lg">
<div class="font-bold">u-opacity-70</div>
</div>
<div class="u-opacity-60 bg-green-500 text-white w-100p mb-1 pl-2 py-1 u-round-sm u-shadow-lg">
<div class="font-bold">u-opacity-60</div>
</div>
<div class="u-opacity-50 bg-green-500 text-white w-100p mb-1 pl-2 py-1 u-round-sm u-shadow-lg">
<div class="font-bold">u-opacity-50</div>
</div>
<!-- ... -->
<div class="bg-gray-000 u-round-xs u-shadow-none px-4 py-3 m-2">
<div class="font-bold">u-shadow-none</div>
</div>
<div class="bg-gray-000 u-round-xs u-shadow-xs px-4 py-3 m-2">
<div class="font-bold">u-shadow-xs</div>
</div>
<div class="bg-gray-000 u-round-xs u-shadow-sm px-4 py-3 m-2">
<div class="font-bold">u-shadow-sm</div>
</div>
<div class="bg-gray-000 u-round-xs u-shadow-md px-4 py-3 m-2">
<div class="font-bold">u-shadow-md</div>
</div>
<div class="bg-gray-000 u-round-xs u-shadow-lg px-4 py-3 m-2">
<div class="font-bold">u-shadow-lg</div>
</div>
<div class="bg-gray-000 u-round-xs u-shadow-xl px-4 py-3 m-2">
<div class="font-bold">u-shadow-xl</div>
</div>
Cirrus enables you to design for mobile right out of the box. With its responsive components and utility classes, controlling how your design scales with width and height can be done inline inside the HTML without requiring extra media queries.
Learn moreStarting a new project or business shouldn't always mean designing your UI from scratch. Save time by using Cirrus's fully responsive components.
Richard Hendricks.
Founder and CEO of Pied Piper.
Robert Downey Jr. shared a post from Stark Industries.
Robert shared: 'Stark Industries is...'
23 minutes agoOr if you do want to start from scatch, build and extend from existing components to fit your use cases.
Customize Cirrus to make it yours. Toss out default font sizes, modify existing colors, add new animations, etc. You can do all this right from the framework's config file.
/* main.scss */
@use "cirrus-ui/src/cirrus-ext" as * with (
$config: (
extend: (
opacity: (
25: 0.25,
50: 0.5,
75: 0.75
)
)
)
);
/* out.css */
...
.u-opacity-25 {
opacity: .25 !important;
}
.u-opacity-50 {
opacity: .5 !important;
}
.u-opacity-75 {
opacity: .75 !important;
}
Don't need a feature? No problem. Disable it right within the config itself. You can also disable all features and only enable the ones you need. Cirrus is designed to fit your needs without forcing you to bring in styles you won't use -- drastically reducing file size in the process.
/* main.scss */
@use "cirrus-ui/src/cirrus-ext" as * with (
$config: (
excludes: (
// Components
'AVATAR',
'BUTTON',
'CODE',
'FORMS',
'FORMS-EXT',
...
// Utils
'ABSOLUTES',
'OVERFLOW',
'POSITION',
...
),
),
);