@smiledirectclub/sds-css v1.9.1

SDC Design System CSS Framework

Much like Bootstrap and Foundation, this is a CSS framework designed by the Digital Experience team that provides you the ability to include our CSS, and build static web pages and prototypes.

More to come...

Consuming

Two things you need to successfully use this framework:

1. The sds-css file of your choice (from NPM or CDN)
2. The Sofia Pro fonts (from NPM or CDN)

NPM

npm install @smiledirectclub/sds-css

CDN

You can link to these files in your HTML.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@smiledirectclub/sds-css/dist/sds-css--all.css">

NOTE: By default, the CDN pulls the latest version. You can target a specific version in the URL by adding @1.x.x to the end of the package name in the path. This would look something like https://cdn.jsdelivr.net/npm/@smiledirectclub/sds-css@1.5.0/dist/sds-css--all.css

Fonts

You will need to import Sofia Pro separately to make sure your text is visually rendering correctly.

Install the @smiledirectclub/sds-globals package and consume the fonts and the css file from the assets/fonts/ directory.

npm install @smiledirectclub/sds-globals

Contributing / Developing

To learn how to contribute to this project visit our Contributing Guidelines on Confluence