How to...

Use our Sass files to take advantage of variables, maps, mixins, and more.

File structure

It's highly recommended to avoid modifying core files, this means that you need to create your own stylesheet.
For Sass, it's recommended to create a new stylesheet that imports NC4 so you can modify and extend it. Assuming you’re using a package manager like npm, you’ll have a file structure that looks like this:

Your-project/
    └── node_modules/
        └── @vismaux/
            └── dist/
                ├── css      Compiled CSS files. Includes minified files.
                └── fonts    Fonts that you might need
                └── img      Images used in NC4 
            └── src/
                ├── js       Some source JavaScript files for those who need them.
                └── scss     Source Sass files. Use this folder as a load path in Sass.

If you downloaded our source files and you are not using a package manager, you need to manually setup something similar to that structure, keeping NC4's source files separate from your own.

Your-project/
    ├── scss/
    │   └── your-custom-styling.scss
    └── nc4/
        ├── js
        └── scss

Importing

In your sass file your-custom-styling.scss, you need to import NC4's source Sass files. You have two options: include all NC4 styles or choose only the parts you need.

// Option 1 - All NC4 styles 
@import "~@vismaux/nordic-cool/src/scss/nc.light-dark.mode";


// Option 2 - Only the parts your need (eg. buttons)
// 1. Include functions first
@import "~@vismaux/nordic-cool/src/scss/utilities/functions";

// 2. Include any custom variable overrides here
@import "../path-to-file/your-custom-vars.scss";

// 3. Include required NC4 styles
@import "~@vismaux/nordic-cool/src/scss/settings/all";

// 4. Include any NC4 stylesheet needed
@import "~@vismaux/nordic-cool/src/scss/base/all";
@import "~@vismaux/nordic-cool/src/scss/elements/buttons";
// or
@import "~@vismaux/nordic-cool/src/scss/base/reboot";
@import "~@vismaux/nordic-cool/src/scss/base/typography";
@import "~@vismaux/nordic-cool/src/scss/base/local-fonts";
@import "~@vismaux/nordic-cool/src/scss/elements/buttons";

Un-used CSS

We don’t have a prebuilt example for using PurgeCSS with our library, but here are some helpful articles: