@mskcc/fundamentals v2.6.0
@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/
2 days ago
6 days ago
7 days ago
2 months ago
3 months ago
3 months ago
4 months ago
9 months ago
9 months ago
10 months ago
9 months ago
9 months ago
10 months ago
7 months ago
6 months ago
6 months ago
5 months ago
7 months ago
8 months ago
8 months ago
9 months ago
10 months ago
10 months ago
6 months ago
10 months ago
10 months ago
10 months ago
8 months ago
9 months ago
7 months ago
9 months ago
10 months ago
10 months ago
11 months ago
11 months ago
12 months ago
12 months ago
11 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
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