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.
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.
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.
.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.
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.
@johndoe
@johndoe
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>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.
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&auto=format&fit=crop&w=300&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.
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&auto=format&fit=crop&w=300&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>
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 (Columns + Grid) */
$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.
Learn how to setup Cirrus.
Learn how to customize Cirrus.
Try out Cirrus without installing.