/ucfoundation-ds

Primary LanguageHTML

Building A Design System With CSS

This is your main project for this workshop! Let’s take a look around 👇

The main project consists of the following tech:

All of the HTML has been pre-written for you (minus some utility classes etc.) and the project structure for Sass and Gorko is also set up.

Getting started

Unzip the project files and using your terminal, run the following inside the project folder:

npm install

There are two commands that you can run:

  1. npm start: this will serve up a local copy of your pattern library and watch for any changes
  2. npm run build: this will build all the patterns for you and put them in dist

Project structure

Patterns

All of the patterns that live in the Fractal pattern library have HTML pre-written, but you’ll probably want to manage them yourself too.

The following folders contain patterns:

  1. 01-design-tokens
  2. 02-utilities
  3. 03-blocks
  4. 04-compositions
  5. 05-prototypes

Each pattern contains at least a HTML file, but might also contain a config.json file. This file contains context which is available to the templates.

CSS

We’re using Sass and Gorko to write our CSS and all the files can be found in the src/scss folder. It’s all organised as per the CUBE CSS methodology.

JS

You’ll be happy to know we’re not writing any JS in this workshop!