@mskcc/components
Style sheets for mskcc components in scss and css formats.
Getting Started
The DSM requires Dart Sass in order to
compile. It uses
Sass modules to organize the
codebase and provide exports to use.
If you're new to Sass, check out these resources:
Step 1: Install Sass
npm install --save-dev sass
Step 2: Install package
npm install @mskcc/components
Step 3: Import stylesheet
// import all component styles, no need to import components specifically
@use '@mskcc/components/carbon-11';
// or import inidividual component styling
@use '@mskcc/components/carbon-11/components/button';
Import via CDN
You can use the cdn version by injecting it directly into the html. Add this to the <head> of your html.
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@mskcc/components@latest/dist/carbon-11.min.css"
/>
For developing new components
pnpm run gen:component
The script will create a new component folder in carbon-11 directory and keep the carbon-11 index file up-to-date.
Resources
@mskcc/carbon-react | scss | @use '@mskcc/components/carbon-11' |
| css | @import '@mskcc/components/dist/carbon-11.min.css' |
| Component directory | scss | carbon-11/components/' |
| css | dist/components/' |
| Theme | scss | @use '@mskcc/components/theme' |
| css | @import '@mskcc/components/dist/theme.css' |
| Legacy stylesheet | scss | @use '@mskcc/src/styles-all' |
| css | @import '@mskcc/dist/legacy.min.css' |
| Legacy Component directory | scss | src/' |
| css | dist/legacy-components/' |