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 VUD 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 VUD library 
            └── 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 VUD's source files separate from your own.

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

Importing

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

// Option 1 - All VUD styles 
@import "~@vismaux/vud/src/scss/vud.light-dark.mode";


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

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

// 3. Include required VUD styles
@import "~@vismaux/vud/src/scss/settings/all";

// 4. Include any VUD stylesheet needed
@import "~@vismaux/vud/src/scss/base/all";
@import "~@vismaux/vud/src/scss/elements/buttons";
// or
@import "~@vismaux/vud/src/scss/base/reboot";
@import "~@vismaux/vud/src/scss/base/typography";
@import "~@vismaux/vud/src/scss/base/local-fonts";
@import "~@vismaux/vud/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: