Cirrus.CSS
A component and utility centric SCSS framework
designed for rapid prototyping.
Version 0.6.3 / Gamma V
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.
Choose from a number of vibrant colors from Cirrus's palette to make your website pop.
Cirrus primarily uses Montserrat and Nunito Sans as its core font choices with easy customization through its modifiers.
Used in:
Used in:
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
Cirrus makes creating layouts easy with flexbox and grid support.
Flexbox
Grid
Header
Sidebar
Main Content
Sub Content
Sub Content
Footer
Dozens of beautifully styled form controls for making development a breeze. Keep things simple with default controls or jazz it up with styled inputs.
Dead simple responsive navigation menus for any webpage.
Provide contextual cues to any component on the page.
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 agoSee all that Cirrus has to offer. Below are some additional useful components.
Richard Hendricks.
Founder and CEO of Pied Piper.
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 |
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.