@mskcc/fundamentals

@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

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.

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

@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.

@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.

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

Using scss colors, variables, mixins

@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

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