Documentations

SCSS / CSS

SCSS File Structure

Inside discoverize-html directory that you've extracted before, you will find scss directory. This is where we put all scss files.

discoverize-html/
|-scss/
|--colorshemes/
|--discoverize/

Basicly, all scss files are grouped by 2 group (directory), colorscheme and discoverize. Before we we learn about colorscheme, first let start with scss files within discoverize directory.

scss/discoverize

discoverize-html/
 |-scss/
 |--...
 |--discoverize/
 |---mixins/
 |---_accordion.scss
 |---_bg.scss
 |---_buttons.scss
 |---_card.scss
 |---_close.scss
 |---_collapse.scss
 |---_counter.scss
 |---_dropdown.scss
 |---_expand.scss
 |---_form-check.scss
 |---_form-options.scss
 |---_form-searchbox.scss
 |---_header.scss
 |---_icon.scss
 |---_js_typing.scss
 |---_leaflet.scss
 |---_mixins.scss
 |---_navbar.scss
 |---_overlay.scss
 |---_reboot.scss
 |---_section.scss
 |---_sticky.scss
 |---_swiper.scss
 |---_utilities-extras.scss
 |---_utilities.scss
 |---_variables.scss
 |---_variables-overrides.scss
 |---discoverize.scss

Right inside scss directory is where we declare class / styling for overriding default bootstrap original components or also declaring new components thats not exist in bootstrap. Among those files, there is discoverize.scss file. This is file where we include all required boostrap files + new components.

_variables.scss is where we put variables to overrides default bootstrap config variables. Also to write variables required by new components.

scss/colorschemes

colorschemes directory is where we put scss files related with styling templates such as color, font size and font family.

discoverize-html/
 |-scss/
 |--colorshemes/
 |---default/
 |----_variables.scss
 |----_default.scss
 |---classic/
 |----_variables.scss
 |----classic.scss
 |---minimal/
 |----_variables.scss
 |----minimal.scss

Discoverize preloaded with 3 differents colorschemes. each colorscheme directory consist of 2 scss files: _variables.scss and {colorscheme}.scss.

  1. {colorscheme}.scss is where we import scss/discoverize.scss

    @import "variables";
  
@import "../../discoverize/discoverize";

  2. _variables.scss is where we declare variables required for styling the templates

INTRODUCTION - Tooling Setup
SCSS - Customizing