Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://spiderpig86.github.io/Cirrus/
:cloud: The SCSS framework for the modern web.
https://spiderpig86.github.io/Cirrus/
card cirrus css css-framework css-grid css3 flexbox font front-end responsive sass sass-framework scss scss-framework stylesheet stylesheets ui web-development
Last synced: 25 days ago
JSON representation
:cloud: The SCSS framework for the modern web.
- Host: GitHub
- URL: https://spiderpig86.github.io/Cirrus/
- Owner: Spiderpig86
- License: mit
- Created: 2016-12-22T02:55:45.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2024-10-28T04:53:17.000Z (about 2 months ago)
- Last Synced: 2024-10-29T14:56:53.877Z (about 2 months ago)
- Topics: card, cirrus, css, css-framework, css-grid, css3, flexbox, font, front-end, responsive, sass, sass-framework, scss, scss-framework, stylesheet, stylesheets, ui, web-development
- Language: SCSS
- Homepage: https://www.cirrus-ui.com/
- Size: 13.8 MB
- Stars: 1,375
- Watchers: 32
- Forks: 75
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-css - Cirrus - A fully responsive and comprehensive CSS framework with beautiful controls and simplistic structure. (Frameworks :art: / Editor's Draft :black_nib:)
README
Cirrus
[](https://github.com/Spiderpig86/Cirrus)
[](https://opensource.org/licenses/MIT)
[](https://github.com/Spiderpig86/Cirrus/actions)
[](https://snyk.io/test/github/Spiderpig86/Cirrus?targetFile=package.json)
[](https://www.npmjs.com/package/cirrus-ui)
[](https://houndci.com)
[](https://openbase.com/js/cirrus-ui?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge)
[](https://www.jsdelivr.com/package/npm/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
## :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.
* :computer: **Vscode Extension Support** - Install it [here](https://marketplace.visualstudio.com/items?itemName=Spiderpig86.cirrus-intellisense).
* 🤹♂️ **Playground** - Try out whatever experiment you want with Cirrus [here](https://www.cirrus-ui.com/playground).
## :dart: Supported Browsers
Cirrus relies on [What CSS to prefix?](http://shouldiprefix.com/) to determine which selectors need prefixes.
| [
](http://godban.github.io/browsers-support-badges/)IE / Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari | [
](http://godban.github.io/browsers-support-badges/)Opera | [
](http://godban.github.io/browsers-support-badges/)Electron |
| --- | --- | --- | --- | --- | --- |
| IE11, Edge | last 3 versions, ESR | last 3 versions | last 3 versions | last 3 versions | last 3 versions |
## 📦 Install
#### Npm
```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](https://www.cirrus-ui.com/getting-started/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](https://www.cirrus-ui.com/getting-started/setup) guide for more information.
## :computer: Development
Use Gitpod, a free online dev environment for GitHub.
[](https://gitpod.io/#https://github.com/Spiderpig86/Cirrus)
Or clone locally:
```bash
$ git clone [email protected]: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`.
- **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
| Project | Description |
| --------------------------------------------------------- | ------------------------------------------------------------------------------------- |
| [vue-cirrus](https://github.com/FlorianWoelki/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](https://github.com/Cirrus-UI/Cirrus-Reset) | A simple CSS reset from Cirrus. |
## :newspaper: License and Attribution
Cirrus is licensed under the [MIT license](https://github.com/Spiderpig86/Cirrus/blob/master/LICENSE "MIT License"). If this frame work has helped you in any way, attribution in the footer of your website would be much appreciated.
[](https://app.fossa.com/projects/git%2Bgithub.com%2FSpiderpig86%2FCirrus?ref=badge_large)
## 🤝 Contributing [](http://makeapullrequest.com)
Read our [contributing guide](https://github.com/Spiderpig86/Cirrus/blob/master/.github/CONTRIBUTING.yml) and improve Cirrus together.
We welcome all contributions. Please read our [CONTRIBUTING.md](https://github.com/Spiderpig86/Cirrus/blob/master/.github/CONTRIBUTING.md) first. You can submit any ideas as [pull requests](https://github.com/Spiderpig86/Cirrus/pulls) or as [GitHub issues](https://github.com/Spiderpig86/Cirrus/issues). If you'd like to improve code, check out the [Development Instructions](https://www.cirrus-ui.com/getting-started/developing) 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.
[](https://issuehunt.io/r/Spiderpig86/Cirrus)
## ❤️ Sponsors and Backers
I would greatly appreciate any support for the continued development of this project. :smile:
[](https://opencollective.com/cirrus#support)
[](https://opencollective.com/cirrus#support)