Cirrus.CSS
A component and utility centric SCSS framework
designed for rapid prototyping.
Version 0.6.3 / Gamma V
A component and utility centric SCSS framework
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
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.8 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 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:
Aa
Nunito Sans
Light
AaBbCcDd
Normal
AaBbCcDd
Bold
AaBbCcDd
Numbers (Light)
0123456789
Used in:
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
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 DoeNec invenire inciderint scriptorem et. Et viderer euismod alienum eos, no his melius ancillae, an essent accusata quaerendum quo.
Views
By John DoeNec invenire inciderint scriptorem et. Et viderer euismod alienum eos, no his melius ancillae, an essent accusata quaerendum quo.
Views
By John DoeNec 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 agoAdditional 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
| T1 | T2 | T3 | T4 | T5 | S | Notes |
|---|---|---|---|---|---|---|
| T1 | T2 | T3 | T4 | T5 | S | Notes |
| 1 | Row:1 Cell:1 | Row:1 Cell:2 | Row:1 Cell:3 | Row:1 Cell:4 | S | Row:1 Cell:5 |
| 2 | Row:2 Cell:1 | Row:2 Cell:2 | Row:2 Cell:3 | Row:2 Cell:4 | S | Row:2 Cell:5 |
| 3 | Row:3 Cell:1 | Row:3 Cell:2 | Row:3 Cell:3 | Row:3 Cell:4 | S | Row:3 Cell:5 |
| 4 | Row:4 Cell:1 | Row:4 Cell:2 | Row:4 Cell:3 | Row:4 Cell:4 | S | Row:4 Cell:5 |
| 5 | Row:5 Cell:1 | Row:5 Cell:2 | Row:5 Cell:3 | Row:5 Cell:4 | S | Row:5 Cell:5 |
| 6 | Row:6 Cell:1 | Row:6 Cell:2 | Row:6 Cell:3 | Row:6 Cell:4 | S | Row:6 Cell:5 |
Examples
Start off with a few examples and a few complete templates completely powered by Cirrus.
Contact Form
Forms
Layouts
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
Forms
Layouts
Buttons
A simple login page.
Support the Project :)
Feeling generous? Support the project.
Donate once.
Donate monthly.
