@mskcc/components v2.7.2
@mskcc/components
Style sheets for mskcc components in
scss
andcss
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:
- Sass Basics
- Webpack with Sass
- Next.js with Sass
- Create React App with Sass
- Parcel with Sass
- Vite with Sass
- Snowpack with Sass
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
components (carbon 11) | type | stylesheet |
---|---|---|
@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' |
For legacy components (carbon 10) | type | stylesheet |
---|---|---|
Legacy stylesheet | scss | @use '@mskcc/src/styles-all' |
css | @import '@mskcc/dist/legacy.min.css' | |
Legacy Component directory | scss | src/' |
css | dist/legacy-components/' |
8 months ago
8 months ago
8 months ago
10 months ago
10 months ago
12 months ago
12 months ago
11 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago