Skip to main content

Installation

npm

The design system CSS is published as @sfgov/design-system npm. You can install it in your project with:

npm install @sfgov/design-system

The current version is 0.0.1. See the release history for other available versions and release notes.

Versioning

We use semantic versioning conventions to number our release versions:

  • Bug fixes, documentation updates, and development-related updates are patch versions, e.g. 1.0.0 → 1.0.1.

  • New features are minor versions, e.g. 1.0.0 → 1.1.0.

  • Breaking changes, or any other changes that may break any sites that upgrade from the previous version, are major versions, e.g. 1.0.0 → 2.0.0.

CDN

There are many content delivery networks that mirror npm packages. For instance, to import all of the design system CSS from the latest version of the npm package from unpkg, you could add the following to your <head>:

<link rel="stylesheet" href="https://unpkg.com/@sfgov/design-system@0.0.1/css/sfds.css">

See the CSS guide for more detailed usage instructions.

Browser support

Generally speaking, our CSS supports the same browsers as Tailwind (as of version 2.x, "the latest stable versions of Chrome, Firefox, Edge, and Safari"). Starting in version 2.0, Tailwind notably introduced the use of CSS custom properties (also known as "CSS variables"), which are supported by approximately 95% of browsers relative to usage as of August, 2021.

Internet Explorer​

Internet Explorer is not supported. Microsoft announced that it will no longer support the browser on June 15, 2022, and its usage has declined rapidly since. In July of 2021 there were 7 unique visitors using Internet Explorer on sf.gov.

Support for Internet Explorer is still available in Tailwind version 1.9. If your project requires IE support, please contact us and we can offer suggestions for a custom CSS build.