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.
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 installbuild.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 thescssoutput format.
| 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 |
.
├── 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
└── ...
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
└── ...
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
│ └── ...
└── ...
- 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.
