@mskcc/fundamentals

> The core brand assets and base level stylesheets for building applications.

| description | location |
| -------------------------- | -------------------------------------------- |
| reset, helpers, fonts | @mskcc/fundamentals/src/styles-all.scss |
| css version of styles-all | @mskcc/fundamentals/dist/styles-all.min.css |
| logos | @mskcc/fundamentals/dist/logos/assets/\* |
| favicons | @mskcc/fundamentals/src/favicons/assets/\* |
| manifest | @mskcc/fundamentals/src/manifest/assets/\* |
| scss stylesheets | @mskcc/fundamentals/src/\* |
| css stylesheets | @mskcc/fundamentals/dist/\* |
| color types (js, ts, json) | @mskcc/fundamentals/dist/types/msk-colors.\* |
| color css variables | @mskcc/fundamentals/dist/msk-colors.css |

Installation

``bash
npm install @mskcc/fundamentals

pnpm

pnpm install @mskcc/fundamentals

yarn

yarn add @mskcc/fundamentals
`

Getting started

Begin with the styles-all stylesheet to reset the browser defaults, provide helper classes, and install font families.

`scss
@import '@mskcc/fundamentals/src/styles-all';
`

`css
@import '@mskcc/fundamentals/css/styles-all';
`

> To install without the font families, use styles-base.

Using font family stylesheets

The font files are colocated with the font stylesheets.

`scss
@use '@mskcc/fundamentals/src/typography/gotham-all.scss';
`

> You may need to adjust the path to the font files to point to the assets within your node_modules.

`scss
@use '@mskcc/fundamentals/src/typography/gotham-all.scss' with (
$msk--font-path: '@mskcc/fundamentals/src/typography/assets/'
);
`

Using scss colors, variables, mixins

`scss
@use '@mskcc/fundamentals/scss/colors' as c;
@use '@mskcc/fundamentals/scss/variables' as v;
@use '@mskcc/fundamentals/scss/mixins' as m;

.msk-button {
background-color: c.$msk--color-blue-50;
box-shadow: v.$msk--elevation-plus-24;
font-size: m.msk-rem(16px);
}
`

Development

`shell
svgo -f src/logo/assets/ -o tmp/
``