CSS utility class generator
Switch branches/tags
Nothing to show
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib/modules 4.0.0-rc.0 Oct 31, 2018
test/src Update gitignore, npmignore, and add test folder Oct 31, 2018
.gitignore Update gitignore, npmignore, and add test folder Oct 31, 2018
.npmignore Update gitignore, npmignore, and add test folder Oct 31, 2018
.travis.yml 4.0.0-rc.0 Oct 31, 2018
LICENSE Update for v4 Jan 18, 2018
README.md Update README Oct 31, 2018
_.scss 4.0.0-rc.0 Oct 31, 2018
carapace-logo.svg 4.0.0-rc.0 Oct 31, 2018
classes.common.scss 4.0.0-rc.0 Oct 31, 2018
classes.scss 4.0.0-rc.0 Oct 31, 2018
package.json 4.0.0-rc.0 Oct 31, 2018
sache.json 4.0.0-rc.0 Oct 31, 2018
yarn.lock 4.0.0-rc.0 Oct 31, 2018

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.