Barker

Barker is an SCSS starter kit for design systems.

It includes:

A Style Dictionary configuration for defining design tokens.
A sensible project layout and organized SCSS files for themes, components, layouts, and base styles.
SCSS mixins and functions for accessing design tokens.
Esbuild configuration with dart-sass, PostCSS, autoprefixer, and PurgeCSS.
A Stylelint configuration.
pnpm as package manager.

Usage

This kit cannot be installed and does not include any generators. Instead, clone the repository into your project and adapt it to your needs.

git clone [email protected]:woylie/barker.git
cd barker
rm -rf .github .git
pnpm install

Configuration

build.js: Contains the build configuration for Esbuild, as well as the PostCSS configuration and PurgeCSS configuration (disabled by default).
style-dictionary.js: Contains the configuration for Style Dictionary. You can modify the output formats for the design tokens here. Note that the SCSS files depend on the scss output format.

Commands

Description	Command
Development build (tokens, CSS, JS, etc.)	`pnpm build:dev`
Production build (tokens, CSS, JS, etc.)	`pnpm build:prod`
Watch mode (does not watch Style Dictionary tokens)	`pnpm build:dev:watch`
Build Style Dictionary tokens	`pnpm build:tokens`
Run linters	`pnpm lint`
Fix linter issues	`pnpm lint:fix`
Run Prettier	`pnpm lint:prettier`
Fix Prettier issues	`pnpm lint:prettier:fix`
Run Stylelint	`pnpm lint:stylelint`
Fix Stylelint issues	`pnpm lint:stylelint:fix`

Folder Structure

.
├── build                   # Build artefacts (token definitions, CSS, etc.)
│   ├── css                 # CSS output
│   └── tokens              # Token output
│       ├── css             # CSS custom properties
│       ├── js              # JavaScript
│       ├── json            # JSON definitions
│       └── scss            # SCSS mixins and variables
├── src                     # Source files
│   ├── css                 # Styles
│   ├── js                  # JavaScript
│   └── tokens              # Design Tokens
└── ...

Build Folder

The build folder contains the build artefacts.

.
├── ...
├── build                   # Build artefacts
│   ├── css                 # CSS output
│   └── tokens              # Token output
│       ├── css             # CSS custom properties
│       ├── js              # JavaScript
│       ├── json            # JSON definitions
│       └── scss            # SCSS mixins and variables
└── ...

CSS Folders

The CSS styles are divided into the layers base, components, layouts, themes, and utilities. More details about each layer can be found in the corresponding _index.scss files.

.
├── ...
├── src
│   ├── css
│   │   ├── base                    # Global base layer
│   │   │   ├── _animations.scss    # Keyframe animations
│   │   │   ├── _general.scss       # Global styles
│   │   │   ├── _index.scss         # Entry point for base layer
│   │   │   └── _typography.scss    # Global typography styles
│   │   ├── components              # Components are styled elements
│   │   ├── layouts                 # Layouts arrange components on the page
│   │   ├── themes                  # Place for light/dark themes etc.
│   │   ├── utilities               # Utility classes generated from design tokens
│   │   ├── _extends.scss           # SCSS placeholders for @extend
│   │   ├── _functions.scss         # SCSS functions for using design tokens
│   │   ├── _mixins.scss            # SCSS mixins
│   │   └── main.scss               # Entry point
│   └── ...
└── ...

Resources

The design token structure is based on Design Tokens Format where possible.
The structure is inspired by CubeCSS, even though it isn't a faithful implementation.
Barker is based on ideas described in the Design Systems article series.

woylie / barker Goto Github PK

barker's Introduction

Barker

Usage

Configuration

Commands

Folder Structure

Build Folder

CSS Folders

Resources

barker's People

Contributors

Stargazers

Watchers

barker's Issues

Recommend Projects

Recommend Topics

Recommend Org