A beautiful CSS framework - (Cirrus CSS)


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

:hammer: Quick Install


npm install cirrus-ui


yarn add cirrus-ui



:sparkles: Why not other frameworks?

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.

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

:dart: Supported Browsers

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

IE / Edge






IE9, IE10, IE11, Edge last 3 versions, ESR last 3 versions last 3 versions last 3 versions last 3 versions

:crystal_ball: What's Included

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.

:pager: jQuery


:clap: Related Projects

Project Description
vue-cirrus Cirrus components for Vue.js with straightforward syntax

:gem: Examples that use Cirrus

:newspaper: License and Attribution

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.