Cirrus

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

✨ Features

🎨 Beautiful Components - Beautifully designed components come right out of the box for rapid prototyping.
🎈 Sass First - Forget bundling tons of JavaScript with each component. All styles require no JS for interactions/functionality (see Modals, Dropdowns, etc.).
🌈 Configuration at its Core - Add additional components, remove utility classes, disable features, etc. Cirrus takes a generative approach to building your stylesheets.
⚡️ Lightweight - A large amount of features with a minimal footprint.
📱 Responsive - Fully responsive by design.
💻 Vscode Extension Support - Install it here.
🤹‍♂️ Playground - Try out whatever experiment you want with Cirrus here.

🎯 Supported Browsers

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

IE / Edge	Firefox	Chrome	Safari	Opera	Electron
IE11, Edge	last 3 versions, ESR	last 3 versions	last 3 versions	last 3 versions	last 3 versions

📦 Install

Npm

npm install cirrus-ui

Yarn

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.

Unpkg

<link rel="stylesheet" href="https://unpkg.com/cirrus-ui">

JsDelivr

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

Check out the Setup guide for more information.

🔨 Usage

Basic Page

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

React

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(
    <StrictMode>
        <App />
    </StrictMode>,
    rootElement
);

Vue

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

import App from "./App.svelte";
import "cirrus-ui";

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

export default app;

Sass/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.

💻 Development

Use Gitpod, a free online dev environment for GitHub.

Or clone locally:

$ git clone [email protected]:Spiderpig86/Cirrus.git
$ cd cirrus
$ yarn install
$ yarn watch

🔮 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

👏 Related Projects

Project	Description
vue-cirrus	Cirrus components for Vue.js with straightforward syntax
cirrus-blocks	A collection of beautiful components built with Cirrus ready to be copied and pasted.
cirrus-reset	A simple CSS reset from 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.

🤝 Contributing

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.

❤️ Sponsors and Backers

I would greatly appreciate any support for the continued development of this project. 😄

Project Name	Stars	Repos Using This	Packages Using This	Most Recent Commit	Total Releases	Latest Release	Open Issues	License	Language
Cirrus	1,160	3	3	5 days ago	16	April 01, 2022	21	mit	SCSS
:cloud: The SCSS framework for the modern web.
Gulp Scss Starter	416			a year ago	2	September 29, 2018		gpl-3.0	JavaScript
Frontend development with pleasure. SCSS version
Live Resume	375			2 months ago				mit	SCSS
简历模版 Create a professional website & resume that helps you stand out from the crowd using our fast and easy personal web application, designed to highlight your skills and experience.
Pug Starter	338			9 days ago	2	May 18, 2019		gpl-3.0	JavaScript
Simple pug (jade) starter [framework] enabling faster delivery of HTML & CSS projects to a private server and/or automatic deployment of GitHub pages.
Gulp Pug Starter	262			a year ago	9	September 29, 2018	2	gpl-3.0	JavaScript
Frontend development with pleasure. Pug + SCSS version
Paper Dashboard Angular	143			6 months ago			6	mit	SCSS
Angular version of the original Paper Dashboard.
Web Starter Kit	139			7 months ago	6	September 11, 2020		mit	SCSS
Web Starter Kit is an opinionated boilerplate for web development. A solid starting point for both professionals and newcomers to the industry.
Gerillass	117			5 months ago	17	July 28, 2022		other	SCSS
Gerillass is a Sass mixin library containing a set of Sass mixins and functions to help front-end developers generate scalable CSS outputs.
Commudle Ng	109			12 hours ago			24	agpl-3.0	TypeScript
Where software developers grow together!
Online Resume	46			2 years ago					SCSS
Programmers Online Resume Website Jekyll Theme Check Live Preview @