Scarab Carapace

CSS utility class generator

Automatically generate CSS from design tokens
Breakpoints and states · Highly configurable

An extension for the Scarab Sass ecosystem.

💿 Installation · 📚 Documentation · ⭐️ Features · 🍃 Ecosystem
🎉 Motivation · ❤️ Contributing · 📃️ License

💿 Installation

Install Scarab Carapace as a dev-dependency (this also installs Scarab Core):

# With yarn
$ yarn add @scarab/carapace -D

# Or with npm
$ npm install @scarab/carapace --save-dev

Add node_modules/ to your Sass includePaths.
Import the following files to configure Carapace and generate CSS classes:

// 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

⭐️ 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.

📲 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	Sass library for rapid stylesheet development
Scarab CLI (WIP)	Command-line tools for the Scarab ecosystem
Scarab snippets (WIP)	Scarab snippets for your favorite text editors and IDE's

❤️ Contributing

Issues and feature requests and PR's are welcome!

kyleoliveiro/scarab-carapace