The SF Design System
This is the CSS design system built by and for the City & County of San Francisco's Digital Services team.
Installation
You can install the SF design system source files with npm:
npm install sf-design-systemThis will create a node_modules/sf-design-system directory and add sf-design-system as a dependency in your project's package.json.
Usage
The design system is distributed as SCSS source files, which must be imported and built with a Sass compiler.
Development
The development environment for this project is Fractal. To run it, clone the repository and run:
npm installto install the development dependenciesnpm startto run the development server and view the Fractal site in your browser
Modifying any of the .scss, .html, or .yml files in the src directory should prompt Fractal to refresh your browser automatically.
Compiling assets
You can compile all of the CSS and JavaScript assets with:
npm run build
This will create a public/dist directory containing css/all.css and js/all.js.
Releases
This project uses primer/publish to publish an npm release for every push, depending on branch:
| branch | tag | version |
|---|---|---|
master |
latest |
per package.json |
release-<version> |
next |
<version>-rc.<sha> |
| all others | canary |
0.0.0-<sha> |
To test a canary or release candidate in another project, just npm install the published version, e.g.
# install the most recently published release candidate npm install sf-design-system@next # install from a specific commit, e.g https://github.com/SFDigitalServices/sf-design-system/commit/e4c9704 npnm install sf-design-system@0.0.0-e4c9704