Skip to content

harrycresswell/design-tokens-eleventy

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 

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.

Features

  • Eleventy
  • NPM build Scripts
  • Design tokens
  • YAML to JSON
  • JSON to SCSS
  • Nunjucks templating
  • Styleguide example

Prerequisites

You will need the latest versions of node and npm installed on your machine.

Installation

Clone this repository and install the required dependencies:

npm install

Local development

To start a local development server run:

npm start

Now you can preview the project by visiting http://localhost:8080 in the browser.

Production build

To build a production ready website to ._site run:

npm run build

This will clean the ._site directory and rebuild it ready for deployment.

Basic concepts

Write your scss in .src/scss.

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 .src/site/_includes.

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.

Author

About

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.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published