#Introduction

Introducing Cirrus, a modular, responsive, and component centric SCSS framework aimed at bringing not only beautiful, hassle-free styling, but also a better developer experience.

  • 🎁 Construct your web app or website using by composing beautifully designed components.
  • 📱 Fully responsive by design.
  • 🎨 Fully customizable themeing.
  • ⚡ The only file you need is the minified CSS file from a CDN.
  • 🌌 Fully open source.
VersionMIT LicenseNPM DownloadsJsDelivr Downloads

#Lightweight

Cirrus comes with lots of functionality in a small package which only consists of a single minified CSS file. No extra JS libraries required. Coming in at 17.8 KB with Brotli compression, page loads are fast and animations are fluid.

#Modular

As of 0.6.0, Cirrus was re-engineered from the ground up to use Sass. This means you can just import the modules that you need in your Sass files.

@import '../node_modules/cirrus-ui/src/core/button.scss';

.my-button {
    @extend .btn;
}

Each file contains classes that only correspond to a component or functionality. For instance, all the tag related classes can be found inside tag.scss. This modular design makes it easier for anyone who wants to make modifications to the framework and rebuild their own version of it.

In addition to being able to import the features you want, Cirrus comes in two flavors, core and extended, that contain the main features and the full framework respectively. More about that here.

#Rapid Prototyping

Cirrus comes with many different classes that help you quickly construct beautiful looking components quickly without having to come up with your own design.

The example is constructed using an avatar, tabs, and tiles.

John Doe

Former youngest person on Earth

Twitter

@johndoe

Instagram

@johndoe

Email

johndoe@github.com

Location

Toronto, Ontario

<div class="frame" style="height: 30rem;">
    <div class="frame__header">
        <div class="avatar"><img src="https://i.imgur.com/sbKJVxr.png"/></div>
        <p class="u-text-center frame__title">John Doe</p>
        <p class="u-text-center frame__subtitle">Former youngest person on Earth</p>
        <div class="tab-container tabs-fill">
            <ul>
                <li class="tab-item"><a>Favorites</a></li>
                <li class="tab-item selected"><a>Profile</a></li>
                <li class="tab-item"><a>Pins</a></li>
            </ul>
        </div>
    </div>
    <div class="frame__body">
        <div class="tile level p-1">
            <div class="tile-avatar"><span class="icon"><i class="fa fa-wrapper fa-twitter" aria-hidden="true"></i></span></div>
            <div class="tile__container">
                <p class="tile__title">Twitter</p>
                <p class="tile__subtitle">@johndoe</p>
            </div>
            <div class="tile__buttons"><a href="!#" class="link-btn"><span class="icon"><i class="fa fa-wrapper fa-pencil small" aria-hidden="true"></i></span></a></div>
        </div>
        <div class="tile level p-1">
            <div class="tile-avatar"><span class="icon"><i class="fa fa-wrapper fa-instagram" aria-hidden="true"></i></span></div>
            <div class="tile__container">
                <p class="tile__title">Instagram</p>
                <p class="tile__subtitle">@johndoe</p>
            </div>
        </div>
        <div class="tile level p-1">
            <div class="tile-avatar"><span class="icon"><i class="fa fa-wrapper fa-envelope-o" aria-hidden="true"></i></span></div>
            <div class="tile__container">
                <p class="tile__title">Email</p>
                <p class="tile__subtitle">johndoe@github.com</p>
            </div>
        </div>
        <div class="tile level p-1">
            <div class="tile-avatar"><span class="icon"><i class="fa fa-wrapper fa-map-marker" aria-hidden="true"></i></span></div>
            <div class="tile__container">
                <p class="tile__title">Location</p>
                <p class="tile__subtitle">Toronto, Ontario</p>
            </div>
        </div>
    </div>
    <div class="frame__footer"></div>
</div>

#Granular Control

Cirrus now ships with many utility classes to get the exact look you want.

Let's say we want to move the overlayed text on top of our image in the center and move the image description to the right of the image only for larger screen sizes. The contents must be vertically aligned.

All of these requirements can be done just with utility classes without any additional CSS.

Before

Overlayed text.

cloud

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Purus faucibus ornare suspendisse sed nisi lacus.

<div>
    <div>
        <div>
            <p>Overlayed text.</p>
            <img src="https://images.unsplash.com/photo-1569428034239-f9565e32e224?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=300&amp;q=80" alt="cloud" />
        </div>
    </div>
    <div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Purus faucibus ornare suspendisse sed nisi lacus.</p></div>
</div>

After

Overlayed text.

cloud

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div class="row u-items-center">
    <div class="col-lg-6">
        <div class="u-relative u-center">
            <p class="u-absolute white font-bold u-center-alt lead">Overlayed text.</p>
            <img src="https://images.unsplash.com/photo-1569428034239-f9565e32e224?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=300&amp;q=80" alt="cloud" class="u-round" />
        </div>
    </div>
    <div class="col-lg-6"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
</div>

#Customize Your Build

Starting with 0.6.0, Cirrus can be more easily customized by editing just a few configuration files within the framework. _size.scss stores all configuration for font sizes, spacing, and breakpoints. theme.scss is the central place to modify any color that is used within the framework.

/* Spacing */
$spacing-system: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32;
$space-size: 0.5rem;

/* Fonts */
$font-size-xs: .7rem;
$font-size-s: .85rem;
$font-size-m: 1rem;
$font-size-l: 1.35rem;
$font-size-xl: 1.75rem;

/* Grid Count */
$grid-columns: 12;

/* Grid Percents */
$grid-width: 1 / $grid-columns;

/* Tab Sizes */
$tab-sizes: ('xsmall': 0.6rem, 'small': 0.75rem, 'large': 1.25rem, 'xlarge': 1.5rem);

/* ... */

Find out how in the developing section.

Ready to give it a try?

Learn how to setup Cirrus.

Learn how to customize Cirrus.

Try out Cirrus without installing.