1 | <p align="center"><img src="https://raw.githubusercontent.com/Spiderpig86/Cirrus/master/img/CirrusLogo.png" width="200"></p>
|
2 | <h1 align="center">Cirrus</h1>
|
3 |
|
4 | <div align="center">
|
5 |
|
6 | [![v.0.7.1](https://img.shields.io/badge/cirrus-0.7.1-blue.svg)](https://github.com/Spiderpig86/Cirrus)
|
7 | [![MIT License](https://img.shields.io/github/license/Spiderpig86/Cirrus.svg)](https://opensource.org/licenses/MIT)
|
8 | [![Github Actions](https://github.com/Spiderpig86/Cirrus/actions/workflows/ci.yml/badge.svg)](https://github.com/Spiderpig86/Cirrus/actions)
|
9 | [![Known Vulnerabilities](https://snyk.io/test/github/Spiderpig86/Cirrus/badge.svg?targetFile=package.json)](https://snyk.io/test/github/Spiderpig86/Cirrus?targetFile=package.json)
|
10 | [![Known Vulnerabilities](https://img.shields.io/npm/dm/cirrus-ui.svg)](https://www.npmjs.com/package/cirrus-ui)
|
11 | [![Reviewed by Hound](https://img.shields.io/badge/Reviewed_by-Hound-8E64B0.svg)](https://houndci.com)
|
12 | [![Featured on Openbase](https://badges.openbase.com/js/featured/cirrus-ui.svg?token=aDr+bdA+d7gMXIHh7XKd6fQiB1OgYBjxxvA2YxyKqP8=)](https://openbase.com/js/cirrus-ui?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge)
|
13 | [![](https://data.jsdelivr.com/v1/package/npm/cirrus-ui/badge)](https://www.jsdelivr.com/package/npm/cirrus-ui)
|
14 |
|
15 | </div>
|
16 |
|
17 | <p align="center">
|
18 | 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.
|
19 | <br />
|
20 | <a href="https://cirrus-ui.netlify.app/"><strong>Check out the docs »</strong></a>
|
21 | <br />
|
22 | <br />
|
23 | <a href="https://github.com/Spiderpig86/Cirrus/issues/new?assignees=&labels=&template=bug-report.md&title=" target="_blank">Request Feature</a>
|
24 | /
|
25 | <a href="https://github.com/Spiderpig86/Cirrus/issues/new?assignees=&labels=&template=bug-report.md&title=" target="_blank">Report a Bug</a>
|
26 | /
|
27 | <a href="https://cirrus-ui.netlify.app/getting-started/examples" target="_blank">Examples</a>
|
28 | </p>
|
29 |
|
30 |
|
31 | ## :sparkles: Features
|
32 |
|
33 | * :art: **Beautiful Components** - Beautifully designed components come right out of the box for rapid prototyping.
|
34 | * :balloon: **Sass First** - Forget bundling tons of JavaScript with each component. All styles require no JS for interactions/functionality (see Modals, Dropdowns, etc.).
|
35 | * :rainbow: **Configuration at its Core** - Add additional components, remove utility classes, disable features, etc. Cirrus takes a generative approach to building your stylesheets.
|
36 | * :zap: **Lightweight** - A large amount of features with a minimal footprint.
|
37 | * :iphone: **Responsive** - Fully responsive by design.
|
38 |
|
39 |
|
40 | ## :dart: Supported Browsers
|
41 | Cirrus relies on [What CSS to prefix?](http://shouldiprefix.com/) to determine which selectors need prefixes.
|
42 |
|
43 | | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron |
|
44 | | --- | --- | --- | --- | --- | --- |
|
45 | | IE11, Edge | last 3 versions, ESR | last 3 versions | last 3 versions | last 3 versions | last 3 versions |
|
46 |
|
47 | ## 📦 Install
|
48 |
|
49 | #### Npm
|
50 | ```sh
|
51 | npm install cirrus-ui
|
52 | ```
|
53 |
|
54 | #### Yarn
|
55 |
|
56 | ```sh
|
57 | yarn add cirrus-ui
|
58 | ```
|
59 |
|
60 | #### CDN
|
61 |
|
62 | For CDNs, it is recommended to attach a specific versions to the URLs to avoid unexpected updates to maintain consistency in your project.
|
63 |
|
64 | ##### Unpkg
|
65 | ```html
|
66 | <link rel="stylesheet" href="https://unpkg.com/cirrus-ui">
|
67 | ```
|
68 |
|
69 | ##### JsDelivr
|
70 |
|
71 | ```html
|
72 | <link rel="stylesheet" href="https://www.jsdelivr.com/package/npm/cirrus-ui">
|
73 | ```
|
74 |
|
75 | Check out the [Setup](https://www.cirrus-ui.com/getting-started/setup) guide for more information.
|
76 |
|
77 | ## :hammer: Usage
|
78 |
|
79 | #### Basic Page
|
80 |
|
81 | ```html
|
82 | <!DOCTYPE html>
|
83 | <html>
|
84 | <head>
|
85 | <title>Hello World</title>
|
86 | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
|
87 | <meta charset="UTF-8" />
|
88 | <meta http-equiv="X-UA-Compatible" content="IE=edge;" />
|
89 | <link href="https://unpkg.com/cirrus-ui" type="text/css" rel="stylesheet" />
|
90 | <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700" rel="stylesheet" />
|
91 | <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" />
|
92 | </head>
|
93 | <body>
|
94 | <h1>👋Hello World</h1>
|
95 | </body>
|
96 | </html>
|
97 | ```
|
98 |
|
99 | #### React
|
100 |
|
101 | ```jsx
|
102 | import { StrictMode } from "react";
|
103 | import ReactDOM from "react-dom";
|
104 |
|
105 | import App from "./App";
|
106 |
|
107 | import 'cirrus-ui'; // You can import it here if you want
|
108 |
|
109 | const rootElement = document.getElementById("root");
|
110 | ReactDOM.render(
|
111 | <StrictMode>
|
112 | <App />
|
113 | </StrictMode>,
|
114 | rootElement
|
115 | );
|
116 | ```
|
117 |
|
118 | #### Vue
|
119 |
|
120 | ```js
|
121 | import Vue from 'vue';
|
122 | import App from './App.vue';
|
123 |
|
124 | import 'cirrus-ui';
|
125 |
|
126 | Vue.config.productionTip = false;
|
127 |
|
128 | new Vue({
|
129 | render: (h) => h(App),
|
130 | }).$mount('#app');
|
131 | ```
|
132 |
|
133 | #### Svelte
|
134 |
|
135 | ```js
|
136 | import App from "./App.svelte";
|
137 | import "cirrus-ui";
|
138 |
|
139 | const app = new App({
|
140 | target: document.body
|
141 | });
|
142 |
|
143 | export default app;
|
144 | ```
|
145 |
|
146 | #### Sass/Scss
|
147 |
|
148 | ```scss
|
149 | @use "node_modules/cirrus-ui/src/cirrus-ext" as * with (
|
150 | $config: (
|
151 | excludes: (
|
152 | ABSOLUTES,
|
153 | ),
|
154 | opacity: null, // Disable default opacity classes
|
155 | extend: (
|
156 | // Add your own
|
157 | opacity: (
|
158 | 25: .25,
|
159 | 50: .5,
|
160 | 75: .75,
|
161 | )
|
162 | )
|
163 | ),
|
164 | );
|
165 | ```
|
166 |
|
167 | Check out the [Setup](https://www.cirrus-ui.com/getting-started/setup) guide for more information.
|
168 |
|
169 | ## :computer: Development
|
170 |
|
171 | Use Gitpod, a free online dev environment for GitHub.
|
172 |
|
173 | [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/Spiderpig86/Cirrus)
|
174 |
|
175 | Or clone locally:
|
176 |
|
177 | ```bash
|
178 | $ git clone git@github.com:Spiderpig86/Cirrus.git
|
179 | $ cd cirrus
|
180 | $ yarn install
|
181 | $ yarn watch
|
182 | ```
|
183 |
|
184 | ## :crystal_ball: What's Included
|
185 |
|
186 | - **Base** - base styles.
|
187 | - Animations
|
188 | - Default
|
189 | - Font
|
190 | - Grid
|
191 | - Layout
|
192 | - Media
|
193 | - Modifiers
|
194 | - Spacing
|
195 | - **Builds** - build files for `core` and `ext`.
|
196 | - **Components** - framework components.
|
197 | - Accordion
|
198 | - Avatar
|
199 | - Breadcrumb
|
200 | - Button
|
201 | - Card
|
202 | - Code
|
203 | - Footer
|
204 | - Forms
|
205 | - Frames
|
206 | - Header
|
207 | - Links
|
208 | - Lists
|
209 | - Modal
|
210 | - Pagination
|
211 | - Placeholder
|
212 | - Progress
|
213 | - Table
|
214 | - Tabs
|
215 | - Tags
|
216 | - Tiles
|
217 | - Toast
|
218 | - Tooltips
|
219 | - **Internal** - internal APIs, functions, constants, etc.
|
220 | - **Utils** - utility classes.
|
221 | - Absolute
|
222 | - Blur
|
223 | - Border
|
224 | - Clearfix
|
225 | - Display
|
226 | - Flex
|
227 | - Misc
|
228 | - Opacity
|
229 | - Overflow
|
230 | - Position
|
231 | - Shadow
|
232 | - Transitions
|
233 | - Z-Index
|
234 |
|
235 | ## :clap: Related Projects
|
236 | | Project | Description |
|
237 | | --------------------------------------------------------- | ------------------------------------------------------------------------------------- |
|
238 | | [vue-cirrus](https://github.com/FlorianWoelki/vue-cirrus) | Cirrus components for Vue.js with straightforward syntax |
|
239 | | cirrus-blocks | A collection of beautiful components built with Cirrus ready to be copied and pasted. |
|
240 | | [cirrus-reset](https://github.com/Cirrus-UI/Cirrus-Reset) | A simple CSS reset from Cirrus. |
|
241 |
|
242 | ## :newspaper: License and Attribution
|
243 | 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.
|
244 |
|
245 | [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2FSpiderpig86%2FCirrus.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2FSpiderpig86%2FCirrus?ref=badge_large)
|
246 |
|
247 | ## 🤝 Contributing [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
|
248 |
|
249 | Read our [contributing guide](https://github.com/Spiderpig86/Cirrus/blob/master/.github/CONTRIBUTING.yml) and improve Cirrus together.
|
250 |
|
251 | 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! :)
|
252 |
|
253 | 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.
|
254 |
|
255 | [![Let's fund issues in this repository](https://issuehunt.io/static/embed/issuehunt-button-v1.svg)](https://issuehunt.io/r/Spiderpig86/Cirrus)
|
256 |
|
257 | ## ❤️ Sponsors and Backers
|
258 |
|
259 | I would greatly appreciate any support for the continued development of this project. :smile:
|
260 |
|
261 | [![](https://opencollective.com/cirrus/tiers/sponsors.svg?avatarHeight=36)](https://opencollective.com/cirrus#support)
|
262 |
|
263 | [![](https://opencollective.com/cirrus/tiers/backers.svg?avatarHeight=36)](https://opencollective.com/cirrus#support)
|