Nacho Portmanteau Meltdown


    4.0.0-rc.0 • Public • Published

    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:

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


    npm i @scarab/carapace

    DownloadsWeekly Downloads






    Unpacked Size

    131 kB

    Total Files


    Last publish


    • kyleoliveiro