Setup

Structure

config - Configure usage of the library, this is the only folder you need to edit.
themes - Add custom themes, easiest way is to copy a core theme and modify it
_theme-custom.scss
_library-import.scss - All import settings
_variables-general.scss - General variables
extensions - Extend the library however you want
source - Don't edit this

Import

Import _library-import.scss to use the whole library in your project.

Import _variables-general.scss and {theme-file}.scss if you only want to import the variables into a component.

_library-import.scss

/* General Variables Override */ @import '_variables-general.scss'; /* Selected theme */ @import 'themes/_theme-custom.scss'; // @import '../source/themes/_theme-light.scss'; // Default light theme // @import '../source/themes/_theme-dark.scss'; // Default dark theme /* Includes the entire source code (Besides the variables) */ @import '../source/_source.scss'; /* Includes all extensions */ @import '../extensions/gui-components/_index.scss';

_variables-general.scss

/* ----- Importing all general variables ----- */ @import '../source/_variables-general.scss'; /* ----- Add any override below ----- */