A fully responsive and comprehensive CSS framework with beautiful controls and simplistic structure. Cirrus is designed to be adaptable to existing themes or when starting fresh.
Check out the docs »

Request Feature / Report a Bug / Examples

npm install cirrus-ui

yarn add cirrus-ui

https://unpkg.com/cirrus-ui

Even with a multitude of CSS frameworks, some are either too basic to develop more complex websites and some are too bogged down with a lot of styles that don't end up getting used. Cirrus is meant to bridge a gap between boilerplate stylesheets and UI frameworks.

• ⚡ Lightweight - Cirrus consists of a single minified file using only 9.9kb and 15.1.kb respectively.
• 🎁 Beautiful Components - Tons of pre-built components to for rapid prototyping.
• 💎 Clean - Styles are easy to follow and written using BEM Notation.
• 📱 Responsive - Responsive designs out of the box.

Cirrus relies on What CSS to prefix? to determine which selectors need preprocessors.

IE / Edge	Firefox	Chrome	Safari	Opera	Electron
IE9, IE10, IE11, Edge	last 3 versions, ESR	last 3 versions	last 3 versions	last 3 versions	last 3 versions

Framework components are now broken down into core and ext packages. The core package only contains the essentials for basic styling while core + ext adds specially designed components.

• Buttons - Styles for the button with 3 different variations.
• Code - Style for code markup blocks.
• Default (Base) - The core of this framework.
• Font - All text styles for this framework for headers, articles, blockquotes, and paragraphs.
• Footer - Basic styles for setting up a page footer.
• Forms - Form styles for textboxes, textfields, selects, and layout.
• Frames - Flexible panel with header, body, and footer for layouts.
• Header - Styles for header elements including drop down menus.
• Layout - Rules for grids, item alignment, and layout borders.
• Links - Link styles with different effects.
• Lists - A simple stylesheet to simplify list UI.
• Media - Rules for styling images, videos, figures, avatars, and other media components.
• Modal - Styles for a pop up modal dialog.
• Placeholder - A padded generic container to display additional information.
• Tables - Clean designs for tables.
• Theme - Default colors of the framework.
• Util - Designed to solve many common headaches with CSS.

• Animations - Consists of animations that will work with the controls.
• Avatar - Styles for user avatars.
• Cards - Base for card controls.
• Grid - Experimental implementation of CSS Grid standard.
• Modifiers - Classes designed for modifying text and backgrounds.
• Pagination - Design for pagination and pagination navigation links.
• Placeholder - Styles for a control designed to be a placeholder such as "Coming Soon" panels and so on.
• Tabs - Contains styles for tab controls.
• Tags - Chip-like controls that are helpful for listing items.
• Tiles - Flexible layout used for tiling controls horizontally.
• Toast - A small overaly notification for websites.
• Tooltips - Add tooltips to any control for contextual info.

• The only component that requires the use of jQuery is the Header component for toggling the dropdown menu on mobile.
• It is possible to use these components without jQuery in other frameworks like Angular and React by mimicking the behavior of toggling the class.

• Polarity 9
• Phraze

Cirrus is licensed under the MIT license. If this frame work has helped you in any way, attribution in the footer of your website would be much appreciated.