Design token management · Responsive mixins · Helper functions

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

💿 Installation

1. Install Scarab Core as a dev-dependency:

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

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

2. Add node_modules/ to your Sass includePaths.

3. Import the Scarab Core library before all other stylesheets:

// Import the Scarab Library
@import '@scarab/core/_';

// Write your Sass here...

📚 Documentation

API documentation and guides: https://scarab.style/core

⭐️ Features

Design token management

Design systems consist of reusable “tokens”. Each token has a name and a value associated with it. Constructing digital interfaces using only the values of tokens that are defined in a design system ensures visual consistency. Scarab provides a simple interface for managing design tokens.

Helper functions

Provides additional syntactic sugar on top of the default Sass functions.

Responsive mixins

Simplifies working with breakpoints and media queries.

🍃 Ecosystem

In addition to the core library, the following packages are available in the Scarab ecosystem:

| Package name | Description | | :-- | :-- | | Carapace | CSS utility class generator | | Scarab CLI (WIP) | Command-line tools for the Scarab ecosystem | | Scarab snippets (WIP) | Scarab snippets for your favorite text editors and IDE's |

🎉 Motivation

Why another Sass library?

Scarab is the resulting by-product of years of web development work. It's designed and built as a library to manage design tokens and to provide additional syntactic sugar for writing stylesheets.

Why use Scarab?

• Define design tokens in Sass (ideal since it's a styling language)
• Use tokens in Sass with Scarab, and in HTML with Carapace
• Ability to export design tokens from Sass to JSON
• Written in Sass; No additional dependencies
• Well tested with 100+ unit tests
• Ecosystem of related packages

Why not just use Sass variables?

Using Sass variables to manage design tokens can be a viable solution for small projects. However, this approach has its limitations. For instance, in Sass, it's not possible to dynamically reference a variable by name. On the other hand, this becomes possible if tokens are stored in a Sass map instead of variables. This opens up many possibilities, and is the main impetus behind the Scarab library.

Alternative libraries

Other options are available, and you should pick one that caters to your project's requirements.

• Tailwind — Generates CSS utility classes with short compile time. Requires PostCSS or Tailwind CLI.
• Tachyons — Good for smaller sites that use native CSS variables (a.k.a. custom properties).
• BassCSS — Alternative to Tachyons. Also uses CSS variables.
• Vue DS — Full-featured design system framework for Vue.

❤️ Contributing

Issues and feature requests and PR's are welcome!

📃️ License

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