https://github.com/kyleoliveiro/scarab-carapace
CSS utility class generator
https://github.com/kyleoliveiro/scarab-carapace
atomic-css css design-systems frontend functional-css responsive sass styleguide stylesheets
Last synced: 11 months ago
JSON representation
CSS utility class generator
- Host: GitHub
- URL: https://github.com/kyleoliveiro/scarab-carapace
- Owner: kyleoliveiro
- License: bsd-3-clause
- Created: 2016-06-10T12:54:50.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2018-10-31T09:58:57.000Z (over 7 years ago)
- Last Synced: 2025-08-10T01:39:50.967Z (11 months ago)
- Topics: atomic-css, css, design-systems, frontend, functional-css, responsive, sass, styleguide, stylesheets
- Language: CSS
- Homepage:
- Size: 524 KB
- Stars: 5
- Watchers: 3
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Scarab Carapace
CSS utility class generator
Automatically generate CSS from design tokens
Breakpoints and states · Highly configurable
_An extension for the [Scarab](https://github.com/kyleoliveiro/scarab-core) Sass ecosystem._
[](https://www.npmjs.com/package/@scarab/carapace)
[](https://travis-ci.org/kyleoliveiro/scarab-carapace.svg)
---
[💿 Installation](#installation) · [📚 Documentation](#documentation) · [⭐️ Features](#features) · [🍃 Ecosystem](#ecosystem)
[🎉 Motivation](#motivation) · [❤️ Contributing](#contributing) · [📃️ License](#license)
---
## 💿 Installation
1. Install Scarab Carapace as a dev-dependency (this also installs Scarab Core):
```bash
# With yarn
$ yarn add @scarab/carapace -D
# Or with npm
$ npm install @scarab/carapace --save-dev
```
2. Add `node_modules/` to your Sass [`includePaths`](https://github.com/sass/node-sass#includepaths).
3. Import the following files to configure Carapace and generate CSS classes:
```scss
// Import the Scarab Core library
@import '@scarab/core/_';
// Import your design token config
@import 'your-design-tokens.scss';
// Import the Carapace library
@import '@scarab/carapace/_';
// Import your custom module config (more on this later)
@import 'your-custom-module-config.scss';
// Generate Carapace CSS classes
@import '@scarab/carapace/classes';
```
## 📚 Documentation
Read the API documentation and guides:
[**https://scarab.style/carapace**](https://scarab.style/carapace)
## ⭐️ Features
### 🏭 CSS utility class generator
Carapace generates single purpose CSS utility classes from design tokens defined with Scarab. These are the kinds of classes used in the [Functional CSS (a.k.a. Atomic CSS) methodology](https://css-tricks.com/lets-define-exactly-atomic-css/).
### 📲 Breakpoint-specific classes
### 👆 State-specific classes
### ⚙️ Configurable naming convention
## 🍃 Ecosystem
In addition to the core library, the following packages are available in the Scarab ecosystem:
| Package | Description |
| :-- | :-- |
| [**Scarab Core**](https://github.com/kyleoliveiro/scarab-core.git) | Sass library for rapid stylesheet development |
| [**Scarab CLI** (WIP)](https://github.com/kyleoliveiro/scarab-cli.git) | Command-line tools for the Scarab ecosystem |
| [**Scarab snippets** (WIP)](https://github.com/kyleoliveiro/scarab-snippets.git) | Scarab snippets for your favorite text editors and IDE's |
### ❤️ Contributing
Issues and feature requests and PR's are welcome!
### 📃️ License
Licensed under BSD 3-Clause. Copyright © Kyle Oliveiro 2018.