A gorgeous CSS framework for the web.

Cirrus.CSS

v.0.5.5 / 15.1kb GZIPPED

Cirrus 0.6.0. New version. New documentation.

For the past year, I have been hard at work at bringing a better iteration of Cirrus, rebuilding the documentation from the ground up, and improving on the overall developer experience. And now, I am proud to say that it is now complete. Please check it out and I hope you'll enjoy it.

Created By Stanley Lim
A fully responsive and comprehensive CSS framework with beautiful controls and simplistic structure. Integrate it with any existing design or use it to kick start your next project.
Star

Colors

Choose from a number of vibrant colors from Cirrus's palette to make your website pop.
.bg-primary
#f03d4d
.text-primary
.bg-info
#2972fa
.text-info
.bg-link
#5e5cc7
.text-link
.bg-dark
#363636
.text-dark
.bg-success
#0dd157
.text-success
.bg-warning
#fab633
.text-warning
.bg-danger
#fb4143
.text-danger
.bg-light
#f6f9fc
.text-light

Typography

Cirrus primarily uses Montserrat 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:

h1 h2 h3 h4 h5 h6

Aa

Nunito Sans

Light

AaBbCcDd

Normal

AaBbCcDd

Bold

AaBbCcDd

Numbers (Light)

0123456789

Used in:

p label span blockquote code article

Headings

Standard headings:

This is h1 h1 3rem (48px)

This is h2 h2 2.5rem (40px)

This is h3 h3 2rem (32px)

This is h4 h4 1.75rem (28px)

This is h5 h5 1.5rem (24px)
This is h6 h6 1.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.
Logo
Logo
Logo

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.
Invite

Invite people to project

John Newman

jnewman@gmail.com

Franklin Watson

fwatsonm@gmail.com

Cornelia Roberts

croberts@outlook.com

Dominic Alvarado

dalvarado@yahoo.com

Stanley Lim

slim@stanleylim.me

Additional Controls

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

Tabs

Menu Lists

Richard Hendricks.

Founder and CEO of Pied Piper.

Pagination

Tables

T1 T2 T3 T4 T5 S Notes
T1 T2 T3 T4 T5 S Notes
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

Explore the Docs

Check out the rest of the documentation.

Examples

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

Contact Form

Forms
Layout
Buttons

A simple and elegant contact form.

Search Bar / Landing

Form
Layout

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

Login

Buttons
Forms
Layout

A simple login page.

Showcase

Example sites from the community that use Cirrus.
Under Construction
We'll be done in no time.

Support the Project :)

Feeling generous? Support the project.

Donate once.

Donate monthly.