CSS utility class generator
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lib/modules
test/src
.gitignore
.npmignore
.travis.yml
LICENSE
README.md
_.scss
carapace-logo.svg
classes.common.scss
classes.scss
package.json
sache.json
yarn.lock

README.md

Scarab Carapace

CSS utility class generator

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

An extension for the Scarab Sass ecosystem.

npm-beta Build Status


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


💿 Installation

  1. 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
  1. Add node_modules/ to your Sass includePaths.

  2. 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!

📃️ License

Licensed under BSD 3-Clause. Copyright © Kyle Oliveiro 2018.