Scarab Core
Sass library for rapid stylesheet developmentDesign token management · Responsive mixins · Helper functions
💿 Installation
- Install Scarab Core as a dev-dependency:
# With yarn
$ yarn add @scarab/core -D
# Or with npm
$ npm install @scarab/core --save-dev-
Add
node_modules/to your SassincludePaths. -
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.