Quick Start Guide
How to start using the Chicago Design System
Designers: Check out the Getting Started for Designers information.
Developers: Follow the instructions below to get started. For a fuller account of how to use the CDS fork of USWDS, go here.
How to contribute to the Chicago Design System.
This quick start guide will walk you through cloning the GitHub repository, as well as installing Jekyll and Fractal so you can start contributing to the Chicago Design System. Once you’ve made edits to your local forks, you can submit a pull request through git/GitHub, which may be merged with the main project after review.
And that’s it — you should now be able to copy our code samples into your index.html and start using the Design System.
GitHub is used for version control of the Chicago Design System. To contribute to the project, you will fork a version of the pattern library to edit.
- Navigate to the Chicago Design System Design Library repository link.
- In the top-right corner of the page, click Fork.
- You now have a forked copy of the original /Chicago/design-library repository. The next step is to make a local copy to edit.
- Go to the code section of your fork.
- Clock Clone or download
- Copy the URL provided.
- Open your command line or Terminal application and enter the directory where you would like to copy the repository.
- Clone the repository with the command below by replacing
<URL>with the fork URL you copied in the previous step. The repository will be cloned into a new directory in this location.
git clone <URL>
- Navigate into the directory of the repository you just created with the command below.
Fractal is used to publish the atomic design elements of the Chiago Design System. You will need to install the CDS Fractal fork in order to edit and preview your changes to the CDS pattern library. Go here for more information on Fractal and here for more information on atomic design.
- If you haven’t already, install npm. npm is a package manager for Node based projects. Below is a link to find the install method that coincides with your operating system:
- Node v4.2.3+, Installation guides
- Navigate to the design-library directory
- Run npm start to make sure it’s up and running
- Make changes to the components in the ‘src’ folder
- Install fractal
npm i -g @frctl/fractal
- Run fractal build to generate the static site
- Open the docs folder static site to make sure it generated correctly
- Sync with the repo
- Make a pull request