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)

$3

``
npm install @smiledirectclub/sds-css
`

$3

You can link to these files in your HTML.


`

`

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

$3

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