Advanced Customization

The SAP Fiori Fundamentals 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 fiori-fundamentals --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/fiori-fundamentals/scss/core";
@import "node_modules/fiori-fundamentals/scss/helpers";

Note: Helpers is optional here but when used classes will be output specific to your customizations. Like .fd-has-color-action and .fd-has-font-family-header will use your colors and fonts respectively.

Theme

Now we're ready to customize the theme parameters. Any variables in the default _settings.scss can be redefined as can component specific variables.

In your custom _settings.scss file, import the default library settings (with function and mixin utilities) and reserve space for maps and variables. The functions and mixins are not required but will be needed if your variables need them.

scss/_settings.scss

//custom maps go here

@import "node_modules/fiori-fundamentals/scss/core/functions";
@import "node_modules/fiori-fundamentals/scss/core/mixins";
@import "node_modules/fiori-fundamentals/scss/core/settings";

//variables go here

Start with the maps. If you want to change the fonts or any other map, make your changes and include them before the @imports.

Next, modify any variable needed ... or add your own.

//custom maps go here
@import url("//fonts.googleapis.com/css?family=Roboto:400,500,700");
@import url("//fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,700");

$fd-fonts: (
    body: #{"'Open Sans'", sans-serif},
    header: #{"Roboto", sans-serif},
    code: #{"'Courier New'", monospace},
);

@import "node_modules/fiori-fundamentals/scss/core/settings";

//variables go here
$fd-background-color: #efefef;
$fd-ui-header-background-color: rgba(white, 0.1);
$fd-ui-sidebar-background-color: transparent;

NOTE: Do not include the !default flag on your variables.

That's is how you get started for global definitions.

Components

With the above setup, you can access your custom variables and properties in component SCSS as well. Just import your settings file and the functions and mixins. This will be standard for almost all of your component SASS files since you need to access the baseline settings.

src/app/app.component.scss

@import '../../scss/settings.scss';
@import "node_modules/fiori-fundamentals/scss/core/functions";
@import "node_modules/fiori-fundamentals/scss/core/mixins";

header {
  background-color: fd-color(background,3);
  @include fd-type(3,header,light);
}

You will be able to use the SASS helper functions and mixins to return your customizations so you can avoid hard-coding any foundational values like colors, type, etc.

Thanks!