Spend more time
building

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

$ 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

0

Stars

0

Forks

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.

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

...

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.

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

Sign in to Cirrus

Enter your username and password.

Remember me

Robbie Roger

Software Engineer at Reddit

Memeing

Snacking

Redditing

Sleeping

SuperRepo Go Volt

In-Stock

$90

7 8 9 10 11 12

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

Spend more time building and less time worrying about CSS.

Created by Stanley Lim

17.8 KB

0

0

Newsletter.

Subscribe for feature previews, bug fixes, and tutorials.

Dead simple setup.

Decision-fatigue-free design system.

Aa

Montserrat

Normal

AaBbCcDd

Bold

AaBbCcDd

Numbers (Light)

0123456789

Aa

Nunito Sans

Normal

AaBbCcDd

Bold

AaBbCcDd

Numbers (Light)

0123456789

Responsive at its core.

A solid foundation for any idea.

John Doe

Lorem! Ipsum!

Sign in to Cirrus

Make Cirrus your own.

There when you need it, gone when you don't.

Spend more time
building

and less time worrying about CSS.