Spend more time
building

and less time worrying about CSS.

A component-and-utility-centric 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.0-Patch.1 / Gamma VI

$ yarn add cirrus-ui
Cirrus v0.6 - A component centric CSS framework for fast prototyping. | Product Hunt
Created by Stanley Lim

A fully responsive and comprehensive SCSS framework with beautiful controls and simplistic structure. Integrate it with any existing design or use it to kick start your next 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.

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.

Kangaroo Valley Safari

By John Doe

Located two hours south of Sydney in the Southern Highland of New South Wales...

Robert Downey Jr. shared a post from Stark Industries.

Robert shared: 'Stark Industries is...'

23 minutes ago
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

avatar
avatar
avatar
avatar
+5
avatar
Sign in to Cirrus

Enter your username and password.

Robbie Roger
Software Engineer at Reddit
Memeing
Snacking
Redditing
Sleeping

SuperRepo Go Volt

In-Stock

$90

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