Skip to main content

Sentro

lang version_badge license_badge stars

A low-level SCSS library for building and managing token-driven design systems.

By utilizing a token-driven approach for your design system, it is easier than ever to enforce consistency, beauty, and delightful DX without sacrificing flexibility, and scalability.

What makes it different from other libraries?

Other token-driven libraries tend to use the utility class method. However, this library uses native css custom properties to its fullest extent. This makes it much more flexible compared to the other libraries as you're working directly with CSS and you are in control with your styles.

This also avoids generating a lot of classes in both dev and prod environments. You won't even need purgecss!

In addition to this, Sentro is well-equipped for making your design system into a production ready design API for your projects to use.

Setup

Prerequisites

  • NodeJS - v14.x (or above)
  • Sass
  • Some build pack like gulp, webpack, etc.
    • Alternatively, you can use a live sass watcher.

Installation

# NPM
npm install @matteusan/sentro

# Yarn
yarn add @matteusan/sentro

Instantiation

  1. In your main SCSS stylesheet, use the @use at-rule to use the library.
@use 'path/to/@matteusan/sentro';
  1. Then configure the prefix to be used and the context in your design system using the with () sass feature.
  • Prefixes are a way to identify your tokens and classes from other design system tokens and classes.
  • Context provides an additional unique prefix for your tokens (e.g. 'token', 'theme', etc.)
@use 'path/to/@matteusan/sentro' with ($prefix: 'sdc', $context: 'token');
  • If you have partials that require the sentro library, just instantiate the directory in the file. The library only requires you to configure the $prefix and $context once in your main SCSS file.
// main.scss
@use 'path/to/@matteusan/sentro' with ($prefix: 'sdc', $context: 'token');

// _partial.scss
@use 'path/to/@matteusan/sentro';
  • The case is different for SCSS files that are not partials and will not get used/imported in the main SCSS file. You have to configure it again since the Sass compiler recognizes it as a separate entity and will not have the influence of the main SCSS file.
// main.scss
@use 'path/to/@matteusan/sentro' with ($prefix: 'sdc', $context: 'token');

// my-component.scss
@use 'path/to/@matteusan/sentro' with ($prefix: 'sdc', $context: 'my-component');
  • As seen above, we recommend that the $context value is the same as the component name.