www.cirrus-ui.com
Open in
urlscan Pro
18.192.231.252
Public Scan
Submitted URL: http://www.cirrus-ui.com/
Effective URL: https://www.cirrus-ui.com/
Submission: On March 22 via manual from US — Scanned from DE
Effective URL: https://www.cirrus-ui.com/
Submission: On March 22 via manual from US — Scanned from DE
Form analysis 1 forms found in the DOM
https://stanleylim.us2.list-manage.com/subscribe/post
<form action="https://stanleylim.us2.list-manage.com/subscribe/post">
<div class="form-group"><input type="email" class="form-group-input" autocapitalize="off" autocorrect="off" name="MERGE0" id="MERGE0" placeholder="Email" value=""><input type="hidden" name="u" value="c29a21f0dd7ce0561ec3adb9f"><input type="hidden"
name="id" value="f783a43c04"> <input type="hidden" name="ht" value="ed00e8c36ca669627ce34a5802d7c3f956e35fa7:MTYwMzYxNzkyNy40MzE0"><button type="submit" class="form-group-btn btn-primary">Subscribe</button></div>
</form>Text Content
CIRRUS
SearchK
Download
* 0.7.2 Patch 1
* 0.6.3
* 0.5.5
* 0.5.4
SPEND MORE TIME
CRAFTING
AND LESS TIME WORRYING ABOUT CSS.
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
Get Started
$ yarn add cirrus-ui
CREATED BY STANLEY LIM
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.
17.8 KB
Compressed
1317
Stars
80
Forks
NEWSLETTER.
SUBSCRIBE FOR FEATURE PREVIEWS, BUG FIXES, AND TUTORIALS.
Subscribe
DEAD SIMPLE SETUP.
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 more
Integate 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';
DECISION-FATIGUE-FREE DESIGN SYSTEM.
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.
* Typography
* Colors
* Sizes
* Opacity
* Shadow
AA
MONTSERRAT
NORMAL
AABBCCDD
BOLD
AABBCCDD
NUMBERS (LIGHT)
0123456789
Used In
h1h2h3h4h5h6
AA
NUNITO SANS
NORMAL
AABBCCDD
BOLD
AABBCCDD
NUMBERS (LIGHT)
0123456789
Used In
plabelspanblockquotecodearticle
<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>
<!-- ... -->
pr-32
pr-24
pr-20
pr-16
pr-12
pr-10
pr-8
<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>
u-opacity-100
u-opacity-90
u-opacity-80
u-opacity-70
u-opacity-60
u-opacity-50
u-opacity-40
u-opacity-30
u-opacity-20
u-opacity-10
<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>
<!-- ... -->
u-shadow-none
u-shadow-xs
u-shadow-sm
u-shadow-md
u-shadow-lg
u-shadow-xl
<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>
RESPONSIVE AT ITS CORE.
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 more
A SOLID FOUNDATION FOR ANY IDEA.
Starting 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.
*
* News Feed
* Messenger
Shortcuts
* Some App
Kangaroo Valley Safari
By John Doe
Located two hours south of Sydney in the Southern Highland of New South Wales...
2 min. read 22 comments
Robert Downey Jr. shared a post from Stark Industries.
Robert shared: 'Stark Industries is...'
23 minutes ago
ViewDismiss
Prev
1
2
3
4
...
13
Next
* Home
* Group
* Shop
* Me
JOHN DOE
Freelance Photographer
LOREM! IPSUM!
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
Or if you do want to start from scatch, build and extend from existing
components to fit your use cases.
Purchased by 10 of your friends
+5
Buy this course$4.99
SIGN IN TO CIRRUS
Enter your username and password.
Remember me
Sign In
Robbie Roger
Software Engineer at Reddit
Memeing
Snacking
Redditing
Sleeping
SuperRepo Go Volt
In-Stock
$90
789101112
Buy NowAdd to Cart♥
Free shipping on orders over $25.
MAKE CIRRUS YOUR OWN.
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.
Learn more
/* 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;
}
THERE WHEN YOU NEED IT, GONE WHEN YOU DON'T.
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.
Learn more
/* main.scss */
@use "cirrus-ui/src/cirrus-ext" as * with (
$config: (
excludes: (
// Components
'AVATAR',
'BUTTON',
'CODE',
'FORMS',
'FORMS-EXT',
...
// Utils
'ABSOLUTES',
'OVERFLOW',
'POSITION',
...
),
),
);
218.0KB Brotli
CIRRUS
The source code is licensed MIT. The website content is licensed CC BY-NC-SA
4.0.
Made with by Stanley Lim