Cirrus.CSS

A component and utility centric SCSS framework
designed for rapid prototyping.

Version 0.6.0 / Gamma II

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.3 KB
Compressed
0
Stars
0
Forks

Newsletter.

Subscribe for feature previews, bug fixes, and tutorials.
Modular
Separate files with separate responsibilities. Compartmentalized and easy to use in your projects.
Modern
Supports the latest standards including flexbox and CSS grid.
Compact
Cirrus packs a lot of features with only a 17.3 KB payload.
Component-Based
Beautiful pre-built components and styling for quick prototyping.
Granular Control
Need some quick way to adjust something? Something not looking quite right? Our utility classes will come in handy.
Colors

Choose from a number of vibrant colors from Cirrus's palette to make your website pop.

Typography

Cirrus primarily usesMontserrat and Nunito Sans as its core font choices with easy customization through its modifiers.

Aa

Montserrat

Normal

AaBbCcDd

Bold

AaBbCcDd

Numbers (Light)

0123456789

Used in:

h1h2h3h4h5h6

Aa

Nunito Sans

Light

AaBbCcDd

Normal

AaBbCcDd

Bold

AaBbCcDd

Numbers (Light)

0123456789

Used in:

plabelspanblockquotecodearticle

Headings

Standard headings:

H1 Heading H13rem (48px)

H2 Heading H22.5rem (40px)

H3 Heading H32rem (32px)

H4 Heading H41.75rem (28px)

H5 Heading H51.5rem (24px)
H6 Heading H61.25rem (20px)

Title

This lead text is slightly larger than paragraph to capture the attention of users. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is a regular paragraph.

Blockquotes

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
-John Doe
Layouts

Cirrus makes creating layouts easy with flexbox and grid support.

Flexbox

Col-12
Col-6
Col-6
Col-3
Col-9
Col-2
Col-10
Col-1
Col-11

Grid

Header

Sidebar

Main Content

Sub Content

Sub Content

Footer

Buttons

Reimagined buttons with different themes, shapes, and ways to customize.

Colors

Outline

Shapes

With Glyphs

Sizes

States

Forms

Dozens of beautifully styled form controls for making development a breeze. Keep things simple with default controls or jazz it up with styled inputs.

Inputs
You did it!
Try again.
Unless you inspect element.
Checkboxes
Radio Buttons
Toggles
Pilled
Headers

Dead simple responsive navigation menus for any webpage.

Tooltips

Provide contextual cues to any component on the page.

Cards

Cards are designed to provide an easy and flexible way for developers to present data in an elegant fashion.

Views

By John Doe

Nec invenire inciderint scriptorem et. Et viderer euismod alienum eos, no his melius ancillae, an essent accusata quaerendum quo.

Views

By John Doe

Nec invenire inciderint scriptorem et. Et viderer euismod alienum eos, no his melius ancillae, an essent accusata quaerendum quo.

Views

By John Doe

Nec invenire inciderint scriptorem et. Et viderer euismod alienum eos, no his melius ancillae, an essent accusata quaerendum quo.

For a more compact verison, use Tiles instead.

Robert Downey Jr. shared a post from Stark Industries.

Robert shared: 'Stark Industries is...'

23 minutes ago
Modals

Display modal dialogs without using any JavaScript.

Additional Controls

See all that Cirrus has to offer. Below are some additional useful components.

Menu Lists

Richard Hendricks.

Founder and CEO of Pied Piper.

Tables
T1T2T3T4T5SNotes
T1T2T3T4T5SNotes
1Row:1 Cell:1Row:1 Cell:2Row:1 Cell:3Row:1 Cell:4SRow:1 Cell:5
2Row:2 Cell:1Row:2 Cell:2Row:2 Cell:3Row:2 Cell:4SRow:2 Cell:5
3Row:3 Cell:1Row:3 Cell:2Row:3 Cell:3Row:3 Cell:4SRow:3 Cell:5
4Row:4 Cell:1Row:4 Cell:2Row:4 Cell:3Row:4 Cell:4SRow:4 Cell:5
5Row:5 Cell:1Row:5 Cell:2Row:5 Cell:3Row:5 Cell:4SRow:5 Cell:5
6Row:6 Cell:1Row:6 Cell:2Row:6 Cell:3Row:6 Cell:4SRow:6 Cell:5

Examples

Start off with a few examples and a few complete templates completely powered by Cirrus.

Contact Form

A simple and elegant contact form.

Search Bar / Landing

An example demoing embedding a search bar within the navigation bar in a landing page.

Login

A simple login page.

Support the Project :)

Feeling generous? Support the project.

Donate once.

Donate monthly.