How to extend the framework

The Framework has a variety of ways of grouping components and variables to easily import specific groups or to import as individual components. This method of getting the Framework should be used when any customisation is needed to the Framework, for example, overriding a variable, mixin, utility or component.

Import Framework Groups

The Framework has 2 groups:

1. Variables Group
2. Components Group

Variables Group

The variables group contain all the dependent frameworks, utilities and variables that the Framework uses.

@charset "utf-8";

@import "frameworks/bootstrap";
@import "frameworks/font-awesome";
@import "utilities/utilities";
@import "variables";

// source: node_modules\@web-dev\digital-framework\src\scss\_digital-framework-variables.scss

Components Group

The components group contains all of the theme override variables, the components and the override utilities

@import "theme-variables";
@import "components/components";
@import "utilities/utils/utils";

// source: node_modules\@web-dev\digital-framework\src\scss\_digital-framework-components.scss

Importing individually

To keep the page weight low, it is recommended to only import components that are being used for that site.

For a small site that just uses a header, footer and hero, the rest being content, a lot of unused assets will increase the weight of the page for no reason, importing individual components solves this.

Keep the same order as the components Group and replace components import with the components needed.

@import "digital-framework-variables";
@import "theme-variables";

// Replaced @import "components/components";
@import "components/navigation-bar";
@import "components/hero";
@import "components/footer";

@import "utilities/utils/utils";

Other Use cases

Theme overriding

Theme overriding can be used to quickly change the look and feel of a site.

@import "digital-framework-variables";

// Theme variables overrides
$slb-theme-primary: colour(yellow);

@import "digital-framework-components";

Mixin overriding

Override any mixin used in the Framework, including the bootstrap mixins.

@import "digital-framework-variables";

// Theme mixins overrides
@mixin display( $display: block ) {
    display: $display;
}

@import "digital-framework-components";