Cirrus UI

The SCSS framework for the modern web.

README

Cirrus


  v.0.7.1
  MIT License
  Github Actions
  Known Vulnerabilities
  Known Vulnerabilities
  Reviewed by Hound
  Featured on Openbase
  undefined

A component-and-utility-centric SCSS framework designed for rapid prototyping. Use beautiful pre-built components to bootstrap your next project and utility classes to polish your final design.

Check out the docs »
Request Feature
/
Report a Bug
/
Examples


:sparkles: Features


:art: Beautiful Components - Beautifully designed components come right out of the box for rapid prototyping.
:balloon: Sass First - Forget bundling tons of JavaScript with each component. All styles require no JS for interactions/functionality (see Modals, Dropdowns, etc.).
:rainbow: Configuration at its Core - Add additional components, remove utility classes, disable features, etc. Cirrus takes a generative approach to building your stylesheets.
:zap: Lightweight - A large amount of features with a minimal footprint.
:iphone: Responsive - Fully responsive by design.

:dart: Supported Browsers

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

[[[[[[
------------------
IE11,lastlastlastlastlast

📦 Install


Npm

  1. ```sh
  2. npm install cirrus-ui
  3. ```

Yarn


  1. ```sh
  2. yarn add cirrus-ui
  3. ```

CDN


For CDNs, it is recommended to attach a specific versions to the URLs to avoid unexpected updates to maintain consistency in your project.

Unpkg
  1. ``` html
  2. <link rel="stylesheet" href="https://unpkg.com/cirrus-ui">
  3. ```

JsDelivr

  1. ``` html
  2. <link rel="stylesheet" href="https://www.jsdelivr.com/package/npm/cirrus-ui">
  3. ```

Check out the Setup guide for more information.

:hammer: Usage


Basic Page


  1. ``` html
  2. <!DOCTYPE html>
  3. <html>
  4.   <head>
  5.     <title>Hello World</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
  7.     <meta charset="UTF-8" />
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge;" />
  9.     <link href="https://unpkg.com/cirrus-ui" type="text/css" rel="stylesheet" />
  10.     <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700" rel="stylesheet" />
  11.     <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" />
  12.   </head>
  13.   <body>
  14.     <h1>👋Hello World</h1>
  15.   </body>
  16. </html>
  17. ```

React


  1. ``` js
  2. import { StrictMode } from "react";
  3. import ReactDOM from "react-dom";

  4. import App from "./App";

  5. import 'cirrus-ui'; // You can import it here if you want

  6. const rootElement = document.getElementById("root");
  7. ReactDOM.render(
  8.     <StrictMode>
  9.         <App />
  10.     </StrictMode>,
  11.     rootElement
  12. );
  13. ```

Vue


  1. ``` js
  2. import Vue from 'vue';
  3. import App from './App.vue';

  4. import 'cirrus-ui';

  5. Vue.config.productionTip = false;

  6. new Vue({
  7.     render: (h) => h(App),
  8. }).$mount('#app');
  9. ```

Svelte


  1. ``` js
  2. import App from "./App.svelte";
  3. import "cirrus-ui";

  4. const app = new App({
  5.     target: document.body
  6. });

  7. export default app;
  8. ```

Sass/Scss


  1. ```scss
  2. @use "node_modules/cirrus-ui/src/cirrus-ext" as * with (
  3.     $config: (
  4.         excludes: (
  5.             ABSOLUTES,
  6.         ),
  7.         opacity: null, // Disable default opacity classes
  8.         extend: (
  9.             // Add your own
  10.             opacity: (
  11.                 25: .25,
  12.                 50: .5,
  13.                 75: .75,
  14.             )
  15.         )
  16.     ),
  17. );
  18. ```

Check out the Setup guide for more information.

:computer: Development


Use Gitpod, a free online dev environment for GitHub.
Open in Gitpod

Or clone locally:

  1. ``` sh
  2. $ git clone git@github.com:Spiderpig86/Cirrus.git
  3. $ cd cirrus
  4. $ yarn install
  5. $ yarn watch
  6. ```

:crystal_ball: What's Included


- Base - base styles.
  - Animations
  - Default
  - Font
  - Grid
  - Layout
  - Media
  - Modifiers
  - Spacing
- Builds - build files for core and ext.
- Components - framework components.
  - Accordion
  - Avatar
  - Breadcrumb
  - Button
  - Card
  - Code
  - Footer
  - Forms
  - Frames
  - Header
  - Links
  - Lists
  - Modal
  - Pagination
  - Placeholder
  - Progress
  - Table
  - Tabs
  - Tags
  - Tiles
  - Toast
  - Tooltips
- Internal - internal APIs, functions, constants, etc.
- Utils - utility classes.
  - Absolute
  - Blur
  - Border
  - Clearfix
  - Display
  - Flex
  - Misc
  - Opacity
  - Overflow
  - Position
  - Shadow
  - Transitions
  - Z-Index

:clap: Related Projects

ProjectDescription
----------------------------------------------------------------------------------------------------------------------------------------------
[vue-cirrus](https://github.com/FlorianWoelki/vue-cirrus)Cirrus
cirrus-blocksA
[cirrus-reset](https://github.com/Cirrus-UI/Cirrus-Reset)A

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

🤝 Contributing PRs Welcome


Read our contributing guide and improve Cirrus together.

We welcome all contributions. Please read our CONTRIBUTING.md first. You can submit any ideas as pull requests or as GitHub issues. If you'd like to improve code, check out the Development Instructions and have a good time! :)

When creating issues, please follow the templates provided for the issue type you selected. The added detail and formatting will help me understand and resolve your issue faster.
Let's fund issues in this repository

❤️ Sponsors and Backers


I would greatly appreciate any support for the continued development of this project. :smile:
undefined
undefined