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-uiyarn add cirrus-uihttps://unpkg.com/cirrus-uiEven with a multitude of CSS frameworks, some are either too basic that require lots of custom styling 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 10.3kb and 17.2kb respectively.
- 🎁 Beautiful Components - Construct your web app or website using by composing beautifully designed components.
- 💎 Clean - Styles are easy to follow and written using BEM Notation.
- 📱 Responsive - Fully responsive by design.
- 🚢 Modular - Import what you need.
Cirrus relies on What CSS to prefix? to determine which selectors need prefixes.
 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.
The helpers folder contains configurations, utilities, and other styles shared by both core and ext.
- 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.
- Tables - Classes for margin/padding.
- Tables - Clean designs for tables.
- Theme - Default colors of the framework.
- Util - Designed to solve many common headaches with CSS and provide flexibility for modifying existing classes.
- 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.
- Modal - Styles for a pop up modal dialog.
- 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 overlay notification for websites.
- Tooltips - Add tooltips to any control for contextual info.
- jQuery is not needed in order to use this framework.
- You may use jQuery for adding functionality such as toggling the dropdown menu for the
Headercomponent on mobile devices, but you can accomplish the same thing with vanilla JavaScript. - It is possible to use these components without jQuery in other frameworks like Angular and React by mimicking the behavior of toggling the class.
| Project | Description |
|---|---|
| vue-cirrus | Cirrus components for Vue.js with straightforward syntax |
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.
