This is the CSS design system built by and for the City & County of San Francisco's Digital Services team.
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.
The design system is distributed as SCSS source files, which must be imported and built with a Sass compiler.
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.
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.
This project uses primer/publish to publish an npm release for every push, depending on branch:
| branch | tag | version |
|---|---|---|
main |
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 [email protected]