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.
npm install cirrus-ui
yarn add cirrus-ui
https://unpkg.com/cirrus-ui
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
andext
packages. Thecore
package only contains the essentials for basic styling whilecore + 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.
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.
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.