Design tokens and styleguides with Eleventy
A simple workflow showing you how to use Eleventy and NPM Scripts to take YAML design tokens and generate a styleguide and CSS Custom properties.
- NPM build Scripts
- Design tokens
- YAML to JSON
- JSON to SCSS
- Nunjucks templating
- Styleguide example
Clone this repository and install the required dependencies:
To start a local development server run:
Now you can preview the project by visiting
http://localhost:8080 in the browser.
To build a production ready website to
npm run build
This will clean the
._site directory and rebuild it ready for deployment.
With a local server running
onchange will watch for any changes you make to your
scss files and compile them to
.src/site/_includes/css/main.css. Eleventy handles live reloading, so no need for browser sync.
Create new partials and templates in
If you make changes to your design tokens make sure you stop the local server (ctrl+c) then re-run the development server eith
npm start. This will run the necessary scripts and propergate the changes.
For more infomation on this workflow read Design tokens and styleguides with Eleventy.