A lightweight UI framework written in SCSS
npm install cirrus-ui
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
IE / Edge |
Firefox |
Chrome |
Safari |
Opera |
Electron |
sh
npm install cirrus-ui
`
#### Yarn
`sh
yarn add cirrus-ui
`
#### CDN
For CDNs, it is recommended to attach a specific versions to the URLs to avoid unexpected updates to maintain consistency in your project.
Please do not reference the dist folder artifacts directly as these are subject to change at any time.
##### Unpkg
`html
`
##### JsDelivr
`html
`
Check out the Setup guide for more information.
:hammer: Usage
#### Basic Page
`html
Hello World
👋Hello World
`
#### React
`jsx
import { StrictMode } from "react";
import ReactDOM from "react-dom";
import App from "./App";
import 'cirrus-ui'; // You can import it here if you want
const rootElement = document.getElementById("root");
ReactDOM.render(
,
rootElement
);
`
#### Vue
`js
import Vue from 'vue';
import App from './App.vue';
import 'cirrus-ui';
Vue.config.productionTip = false;
new Vue({
render: (h) => h(App),
}).$mount('#app');
`
#### Svelte
`js
import App from "./App.svelte";
import "cirrus-ui";
const app = new App({
target: document.body
});
export default app;
`
#### Sass/Scss
`scss
@use "node_modules/cirrus-ui/src/cirrus-ext" as * with (
$config: (
excludes: (
ABSOLUTES,
),
opacity: null, // Disable default opacity classes
extend: (
// Add your own
opacity: (
25: .25,
50: .5,
75: .75,
)
)
),
);
`
Check out the Setup guide for more information.
:computer: Development
Use Gitpod, a free online dev environment for GitHub.

Or clone locally:
`bash
$ git clone git@github.com:Spiderpig86/Cirrus.git
$ cd cirrus
$ yarn install
$ yarn watch
`
:crystal_ball: What's Included
- Base - base styles.
- Animations
- Default
- Font
- Grid
- Layout
- Media
- Modifiers
- Spacing
- Builds - build files for core and ext`.