Sass library for rapid stylesheet development
Design token management · Responsive mixins · Helper functions
💿 Installation · 📚 Documentation · ⭐️ Features · 🍃 Ecosystem
🎉 Motivation · ❤️ Contributing · 📃️ License
- 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...API documentation and guides:
https://scarab.style/core
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.
Provides additional syntactic sugar on top of the default Sass functions.
Simplifies working with breakpoints and media queries.
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 |
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.
- 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
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.
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.
Issues and feature requests and PR's are welcome!
Licensed under BSD 3-Clause. Copyright © Kyle Oliveiro 2018.