Advanced Customization

The Fundamental UI SASS source is provided so teams can take full advantage of the CSS toolkit used to build the library.

You can:

• Modify globals like breakpoints, spacing, type, and colors
• Override specific component styles
• Access useful functions and mixins
• Generate helper classes from your theme modifications

SCSS src

First, install the NPM package. npm install fundamental-ui --save

The setup below is for Angular CLI apps but the general approach is valid for any framework but the pathing may be slightly different.

You want to store all SASS files together so create a src/scss directory that will hold your custom files, and create a primary application stylesheet — here I am using app.scss.

Modify .angular-cli.json to use this file.

      "styles": [
        "scss/app.scss"
      ],

Also create a file to hold your custom theme properties — here I use scss/_settings.scss.The underscore means that this file is a support file and renders no CSS on it's own.

You should have two files now.

scss
| _settings.scss
| app.scss

Instead of using the compiled, full library, we want to import specific baseline SASS files into the primary SASS file. We are creating a new baseline using default and custom settings. The core SCSS files are the heart of the look and feel, they set the styles for HTML elements only and do some normalization.

src/scss/app.scss

@import "settings";
@import "node_modules/fundamental-ui/scss/core";

Theme