Syncss NPM | npm.io

Syncss

A lightweight SASS starter for swiftly crafting design systems, tailored to reflect your design rules.

The principle of Syncss is to isolate all the rules governing your design system into a readily accessible configuration. All the framework's code is available directly within your codebase, allowing you to easily edit it according to your needs.

configs/borders.scss contains the $default-radius variable. If you change this value, it will impact many visual elements (such as form inputs or buttons). The same applies to the $default-size variable for border size or the $primary variable in configs/colors.scss.

Installation

npm install syncss --save-dev

Concepts

Syncss is based on a simple concept, split into three parts:

Simple configuration: where we can easily change the rules of your design system.
Accessible helpers: to use your configuration everywhere.
Synchronized components: to create more complex elements, based on helpers and/or configuration.

Configuration

Initially, I encourage you to browse the files contained in the 'config' folder and input your spacing values, color palette, typographies, and so on.

Example:

With the default configs/spaces.scss configuration, $space-value is equal to 5px and $regulated-multiplicators sets the multiples of this value available in your design system. With this configuration, we have this table of available spaces:

Key	Multiples	Value
0	0	0px
1	1	5px
2	2	10px
3	3	15px
4	4	20px
5	6	30px
6	10	50px
7	20	100px
8	40	200px

If you put $space-value: 0.2em; and $regulated-multiplicators: 0, 1, 2, 3, 4, 5, 7, 10, 15, 20; in your config, this table will automatically update to (note: adding multiplicators will create a new key): | Key | Multiples | Value | | :-: |:-:| :-:| | 0 | 0 | 0em | | 1 | 1 | 0.2em | | 2 | 2 | 0.4em | | 3 | 3 | 0.6em | | 4 | 4 | 0.8em | | 5 | 5 | 1em | | 6 | 7 | 1.4em | | 7 | 10 | 2em | | 8 | 15 | 3em | | 9 | 20 | 4em |

Helper

When your rules match your design system, helpers will produce design tokens usable everywhere in your project.

Example:

With the available spacing configuration explained above, we can build more complex rules like the object in the $config variable of configs/spaces.scss. This will produce design tokens like m-[key] (m-0, p-2, mt-6, px-8, ...) and this with responsiveness if needed.

// configs/spaces.scss

$config: (
  get(0), // key 0
  get(1), // key 1
  get(2), // key 2
  ( // key 3
    "mobile": get(2),
    "tablet": get(3),
  ),
  ( // key 4
    "mobile": get(3),
    "tablet": get(4),
  ),
  ( // key 5
    "mobile": get(4),
    "tablet": get(5),
  ),
  ( // key 6
    "mobile": get(5),
    "tablet": get(6),
  ),
  ( // key 7
    "mobile": get(5),
    "tablet": get(6),
    "desktop": get(7),
  ),
  ( // key 8
    "mobile": get(6),
    "tablet": get(7),
    "desktop": get(8),
  )
);

So with this configuration, m-1 will create a 5px margin, and pt-8 will create a responsive padding-top (50px on mobile, 100px on tablet, and 200px on desktop).

Component

This folder contains basic structures for more complex visual elements. Components can use design tokens created before and read some values from the configuration. They can be used on multiple HTML tags (they do not impact semantics) and can apply in-place styles for children elements.

Like in a design system, your components can have visual variations.

Note: These are style components and they are not related to JS components like Vue.js or React.

Example:

components/Btn.scss will be built using a lot of helpers like text or spacing, but also with some configuration values like border style, size, or radius. In fact, you can showcase all variants and states of this element as in a Storybook.