A beautiful CSS framework - (Cirrus CSS)

Cirrus

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

npm install cirrus-ui

Yarn

yarn add cirrus-ui

CDN

https://unpkg.com/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

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

: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.

Core

• 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.

Ext

• 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

Header

:clap: Related Projects

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

:gem: Examples that use Cirrus

• Polarity 9
• Phraze

: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.