Awesome Open Source
Awesome Open Source

Cirrus

v.0.6.3 MIT License Github Actions Known Vulnerabilities Known Vulnerabilities Reviewed by Hound

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

🔨 Quick Install

Npm

npm install cirrus-ui

Yarn

yarn add cirrus-ui

CDN

https://unpkg.com/cirrus-ui

✨ Why not other frameworks?

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

🎯 Supported Browsers

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

IE / EdgeIE / Edge FirefoxFirefox ChromeChrome SafariSafari OperaOpera ElectronElectron
IE9, IE10, IE11, Edge last 3 versions, ESR last 3 versions last 3 versions last 3 versions last 3 versions

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

The helpers folder contains configurations, utilities, and other styles shared by both core and ext.

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

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

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

👏 Related Projects

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

💎 Examples that use Cirrus


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

FOSSA Status


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Css (209,838
Scss (17,264
Css3 (8,144
Frontend (6,553
Sass (6,031
Ui (5,254
Web Development (2,014
Font (1,726
Responsive (1,593
Flexbox (1,106
Card (858
Css Framework (777
Css Grid (717
Stylesheets (359
Sass Framework (138
Related Projects