A fully responsive and comprehensive CSS framework with cbeautiful controls and simplistic structure. Cirrus is designed to be adaptable to existing themes or when starting fresh.

• 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.
• Pagination
  • Design for pagination and pagination navigation links.
• 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.

npm install cirrus-ui

yarn add cirrus-ui

https://unpkg.com/cirrus-ui

• Chrome
• Opera
• Firefox
• Safari
• Edge (Untested)
• Internet Explorer (Untested)

• Polarity 9
• Phraze

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.