{"id":13803683,"url":"https://spiderpig86.github.io/Cirrus/","last_synced_at":"2025-05-13T16:32:21.733Z","repository":{"id":37359674,"uuid":"77105582","full_name":"Spiderpig86/Cirrus","owner":"Spiderpig86","description":":cloud: The SCSS framework for the modern web.","archived":false,"fork":false,"pushed_at":"2025-04-27T07:08:27.000Z","size":14210,"stargazers_count":1398,"open_issues_count":24,"forks_count":75,"subscribers_count":32,"default_branch":"master","last_synced_at":"2025-04-27T08:19:54.538Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://www.cirrus-ui.com/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Spiderpig86.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["Spiderpig86"],"patreon":"spiderpig86"}},"created_at":"2016-12-22T02:55:45.000Z","updated_at":"2025-04-27T07:08:31.000Z","dependencies_parsed_at":"2023-02-15T19:45:54.454Z","dependency_job_id":"40ab3efa-0e34-4e1a-98fb-22348f5129e4","html_url":"https://github.com/Spiderpig86/Cirrus","commit_stats":{"total_commits":1084,"total_committers":12,"mean_commits":90.33333333333333,"dds":0.02583025830258301,"last_synced_commit":"ee67b56eb92509cfdb3bef7372f2fbe42b91c80c"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Spiderpig86%2FCirrus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Spiderpig86%2FCirrus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Spiderpig86%2FCirrus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Spiderpig86%2FCirrus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Spiderpig86","download_url":"https://codeload.github.com/Spiderpig86/Cirrus/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253981906,"owners_count":21994352,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["card","cirrus","css","css-framework","css-grid","css3","flexbox","font","front-end","responsive","sass","sass-framework","scss","scss-framework","stylesheet","stylesheets","ui","web-development"],"created_at":"2024-08-04T01:00:36.876Z","updated_at":"2025-05-13T16:32:16.712Z","avatar_url":"https://github.com/Spiderpig86.png","language":"SCSS","funding_links":["https://github.com/sponsors/Spiderpig86","https://patreon.com/spiderpig86","https://issuehunt.io/r/Spiderpig86/Cirrus","https://opencollective.com/cirrus"],"categories":["Frameworks :art:"],"sub_categories":["Editor's Draft :black_nib:"],"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/Spiderpig86/Cirrus/master/img/CirrusLogo.png\" width=\"200\"\u003e\u003c/p\u003e\n\u003ch1 align=\"center\"\u003eCirrus\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n  [![v.0.7.2](https://img.shields.io/badge/cirrus-0.7.2-blue.svg)](https://github.com/Spiderpig86/Cirrus)\n  [![MIT License](https://img.shields.io/github/license/Spiderpig86/Cirrus.svg)](https://opensource.org/licenses/MIT)\n  [![Github Actions](https://github.com/Spiderpig86/Cirrus/actions/workflows/ci.yml/badge.svg)](https://github.com/Spiderpig86/Cirrus/actions)\n  [![Known Vulnerabilities](https://snyk.io/test/github/Spiderpig86/Cirrus/badge.svg?targetFile=package.json)](https://snyk.io/test/github/Spiderpig86/Cirrus?targetFile=package.json)\n  [![Known Vulnerabilities](https://img.shields.io/npm/dm/cirrus-ui.svg)](https://www.npmjs.com/package/cirrus-ui)\n  [![Reviewed by Hound](https://img.shields.io/badge/Reviewed_by-Hound-8E64B0.svg)](https://houndci.com)\n  [![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\u0026amp;utm_medium=badge\u0026amp;utm_campaign=rate-badge)\n  [![](https://data.jsdelivr.com/v1/package/npm/cirrus-ui/badge)](https://www.jsdelivr.com/package/npm/cirrus-ui)\n\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\nA 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.\n\u003cbr /\u003e\n\u003ca href=\"https://cirrus-ui.netlify.app/\"\u003e\u003cstrong\u003eCheck out the docs »\u003c/strong\u003e\u003c/a\u003e\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003ca href=\"https://github.com/Spiderpig86/Cirrus/issues/new?assignees=\u0026labels=\u0026template=bug-report.md\u0026title=\" target=\"_blank\"\u003eRequest Feature\u003c/a\u003e\n/\n\u003ca href=\"https://github.com/Spiderpig86/Cirrus/issues/new?assignees=\u0026labels=\u0026template=bug-report.md\u0026title=\" target=\"_blank\"\u003eReport a Bug\u003c/a\u003e\n/\n\u003ca href=\"https://cirrus-ui.netlify.app/getting-started/examples\" target=\"_blank\"\u003eExamples\u003c/a\u003e\n\u003c/p\u003e\n\n\n## :sparkles: Features\n\n* :art: **Beautiful Components** - Beautifully designed components come right out of the box for rapid prototyping.\n* :balloon: **Sass First** - Forget bundling tons of JavaScript with each component. All styles require no JS for interactions/functionality (see Modals, Dropdowns, etc.).\n* :rainbow: **Configuration at its Core** - Add additional components, remove utility classes, disable features, etc. Cirrus takes a generative approach to building your stylesheets. \n* :zap: **Lightweight** - A large amount of features with a minimal footprint.\n* :iphone: **Responsive** - Fully responsive by design.\n* :computer: **Vscode Extension Support** - Install it [here](https://marketplace.visualstudio.com/items?itemName=Spiderpig86.cirrus-intellisense).\n* 🤹‍♂️ **Playground** - Try out whatever experiment you want with Cirrus [here](https://www.cirrus-ui.com/playground).\n\n## :dart: Supported Browsers\nCirrus relies on [What CSS to prefix?](http://shouldiprefix.com/) to determine which selectors need prefixes.\n\n| [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png\" alt=\"IE / Edge\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eIE / Edge | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png\" alt=\"Firefox\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eFirefox | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png\" alt=\"Chrome\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eChrome | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png\" alt=\"Safari\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eSafari | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png\" alt=\"Opera\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eOpera | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png\" alt=\"Electron\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eElectron |\n| --- | --- | --- | --- | --- | --- |\n| IE11, Edge | last 3 versions, ESR | last 3 versions | last 3 versions | last 3 versions | last 3 versions |\n\n## 📦 Install\n\n#### Npm\n```sh\nnpm install cirrus-ui\n```\n\n#### Yarn\n\n```sh\nyarn add cirrus-ui\n```\n\n#### CDN\n\nFor CDNs, it is recommended to attach a specific versions to the URLs to avoid unexpected updates to maintain consistency in your project.\n\n**Please do not reference the `dist` folder artifacts directly as these are subject to change at any time.**\n\n##### Unpkg\n```html\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/cirrus-ui\"\u003e\n```\n\n##### JsDelivr\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://www.jsdelivr.com/package/npm/cirrus-ui\"\u003e\n```\n\nCheck out the [Setup](https://www.cirrus-ui.com/getting-started/setup) guide for more information.\n\n## :hammer: Usage\n\n#### Basic Page\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eHello World\u003c/title\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0\" /\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge;\" /\u003e\n    \u003clink href=\"https://unpkg.com/cirrus-ui\" type=\"text/css\" rel=\"stylesheet\" /\u003e\n    \u003clink href=\"https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700\" rel=\"stylesheet\" /\u003e\n    \u003clink href=\"https://fonts.googleapis.com/css?family=Montserrat:400,700\" rel=\"stylesheet\" /\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003ch1\u003e👋Hello World\u003c/h1\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n#### React\n\n```jsx\nimport { StrictMode } from \"react\";\nimport ReactDOM from \"react-dom\";\n\nimport App from \"./App\";\n\nimport 'cirrus-ui'; // You can import it here if you want\n\nconst rootElement = document.getElementById(\"root\");\nReactDOM.render(\n    \u003cStrictMode\u003e\n        \u003cApp /\u003e\n    \u003c/StrictMode\u003e,\n    rootElement\n);\n```\n\n#### Vue\n\n```js\nimport Vue from 'vue';\nimport App from './App.vue';\n\nimport 'cirrus-ui';\n\nVue.config.productionTip = false;\n\nnew Vue({\n    render: (h) =\u003e h(App),\n}).$mount('#app');\n```\n\n#### Svelte\n\n```js\nimport App from \"./App.svelte\";\nimport \"cirrus-ui\";\n\nconst app = new App({\n    target: document.body\n});\n\nexport default app;\n```\n\n#### Sass/Scss\n\n```scss\n@use \"node_modules/cirrus-ui/src/cirrus-ext\" as * with (\n    $config: (\n        excludes: (\n            ABSOLUTES,\n        ),\n        opacity: null, // Disable default opacity classes\n        extend: (\n            // Add your own\n            opacity: (\n                25: .25,\n                50: .5,\n                75: .75,\n            )\n        )\n    ),\n);\n```\n\nCheck out the [Setup](https://www.cirrus-ui.com/getting-started/setup) guide for more information.\n\n## :computer: Development\n\nUse Gitpod, a free online dev environment for GitHub.\n\n[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/Spiderpig86/Cirrus)\n\nOr clone locally:\n\n```bash\n$ git clone git@github.com:Spiderpig86/Cirrus.git\n$ cd cirrus\n$ yarn install\n$ yarn watch\n```\n\n## :crystal_ball: What's Included\n\n- **Base** - base styles.\n  - Animations\n  - Default\n  - Font\n  - Grid\n  - Layout\n  - Media\n  - Modifiers\n  - Spacing\n- **Builds** - build files for `core` and `ext`.\n- **Components** - framework components.\n  - Accordion\n  - Avatar\n  - Breadcrumb\n  - Button\n  - Card\n  - Code\n  - Footer\n  - Forms\n  - Frames\n  - Header\n  - Links\n  - Lists\n  - Modal\n  - Pagination\n  - Placeholder\n  - Progress\n  - Table\n  - Tabs\n  - Tags\n  - Tiles\n  - Toast\n  - Tooltips\n- **Internal** - internal APIs, functions, constants, etc.\n- **Utils** - utility classes.\n  - Absolute\n  - Blur\n  - Border\n  - Clearfix\n  - Display\n  - Flex\n  - Misc\n  - Opacity\n  - Overflow\n  - Position\n  - Shadow\n  - Transitions\n  - Z-Index\n\n## :clap: Related Projects\n| Project                                                   | Description                                                                           |\n| --------------------------------------------------------- | ------------------------------------------------------------------------------------- |\n| [vue-cirrus](https://github.com/FlorianWoelki/vue-cirrus) | Cirrus components for Vue.js with straightforward syntax                              |\n| cirrus-blocks                                             | A collection of beautiful components built with Cirrus ready to be copied and pasted. |\n| [cirrus-reset](https://github.com/Cirrus-UI/Cirrus-Reset) | A simple CSS reset from Cirrus.                                                       |\n\n## :newspaper: License and Attribution\nCirrus 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.\n\n[![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)\n\n## 🤝 Contributing [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)\n\nRead our [contributing guide](https://github.com/Spiderpig86/Cirrus/blob/master/.github/CONTRIBUTING.yml) and improve Cirrus together.\n\nWe 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! :)\n\nWhen 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.\n\n[![Let's fund issues in this repository](https://issuehunt.io/static/embed/issuehunt-button-v1.svg)](https://issuehunt.io/r/Spiderpig86/Cirrus)\n\n## ❤️ Sponsors and Backers\n\nI would greatly appreciate any support for the continued development of this project. :smile:\n\n[![](https://opencollective.com/cirrus/tiers/sponsors.svg?avatarHeight=36)](https://opencollective.com/cirrus#support)\n\n[![](https://opencollective.com/cirrus/tiers/backers.svg?avatarHeight=36)](https://opencollective.com/cirrus#support)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/spiderpig86.github.io%2FCirrus%2F","html_url":"https://awesome.ecosyste.ms/projects/spiderpig86.github.io%2FCirrus%2F","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/spiderpig86.github.io%2FCirrus%2F/lists"}