Project Name | Stars | Downloads | 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 @ |
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
Cirrus relies on What CSS to prefix? to determine which selectors need prefixes.
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
IE11, Edge | last 3 versions, ESR | last 3 versions | last 3 versions | last 3 versions | last 3 versions |
npm install cirrus-ui
yarn add cirrus-ui
For CDNs, it is recommended to attach a specific versions to the URLs to avoid unexpected updates to maintain consistency in your project.
<link rel="stylesheet" href="https://unpkg.com/cirrus-ui">
<link rel="stylesheet" href="https://www.jsdelivr.com/package/npm/cirrus-ui">
Check out the Setup guide for more information.
<!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>
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
);
import Vue from 'vue';
import App from './App.vue';
import 'cirrus-ui';
Vue.config.productionTip = false;
new Vue({
render: (h) => h(App),
}).$mount('#app');
import App from "./App.svelte";
import "cirrus-ui";
const app = new App({
target: document.body
});
export default app;
@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.
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
core
and ext
.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. |
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.
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.
I would greatly appreciate any support for the continued development of this project. 😄