patchui v1.0.64

PatchUi 🐾 🖥 💻 📱

Welcome to PatchUi, the official design token styles library for Snyk’s PatchUi Design System.

Documentation

The full documentation can be found at https://snyk.marketing/patchui.

Getting Started with the Styles Library

Setting it up

Install PatchUi with either npm:

npm i patchui

or yarn:

yarn add patchui

Using PatchUi

PatchUi is compiled both as a whole bundle and into broken down sections based on the following structure:

Sass Files Structure

scss
├── atoms
│   ├── _button.scss
│   └── index.scss
├── common
│   ├── _functions.scss
│   ├── _variables.scss
│   └── index.scss
├── core
│   ├── _animation.scss
│   ├── _baseline.scss
│   ├── _color.scss
│   ├── _elevation.scss
│   ├── _icons.scss
│   ├── _layout.scss
│   ├── _shape.scss
│   ├── _spacing.scss
│   ├── _typography.scss
│   └── index.scss
├── atoms.scss
├── core.scss
└── index.scss

Compiled CSS Files Structure

css
├── atoms.css
├── atoms.css.map
├── core.css
├── core.css.map
├── index.css
└── index.css.map

PatchUi can be used through its design tokens, (CSS class names) or through mixin includes. Once you have access to PatchUi, you can access the styles as follows:

import './node_modules/patchui/scss/[index | core | atoms].[scss | css]';

If you are using WebPack, then you can reference the styles through an alias as follows:

module.exports = {
  resolve: {
    alias: {
      'patchui': path.resolve(
        __dirname,
        './node_modules/patchui/scss/[index | core | atoms].[scss | css]'
      ),
    },
  }
};