core-styles

Core Styles Library for import into a .scss file or Vue component where scss is being used.

Core Styles uses the latest sass-lang api. You can either import the main.scss file or just the parts you want.

Build Setup

# install depedencies
$ yarn

# generate unminified CSS
$ yarn build

# generate minified css
$ yarn build-min

File Structure

/src
    /dist
        main.css
        main.css.map
    /scss
        _buttons.scss
        _colorClasses.scss
        _colors.scss
        _commonAppStyles.scss
        _commonTransitionStyles.scss
        _forms.scss
        _global.mixins.scss
        _globalVariables.scss
        _gridStyles.scss
        _other.scss
        _typography.scss
        _typographyVariables.scss
        _vuetifyOverrides.scss
        main.scss

You have the option to import either the whole minified main.css or the main.scss if you want to get load the whole library. To include the main.scss, you can pull it into your .scss file like this:

@use '~@nuskin/ns-core-styles/src/main';

Please note that as of today, Jan 10, 2020 node-sass does not support '@use' and will fail. Instead you will need to add 'sass' and 'sass-loader' as depedencies.

Further documentation for core-styles can be found in Nu Skin's Storybook under Style Docs/Core Styles. There documentation exists for:

• Buttons and notes of use.
• Colors and notes of use
• CSS Custom Properties (aka CSS Variables) and notes on use
• Global Mixins and notes on use
• Grid Layouts and notes on use
• Typography and notes on use