SCSS files - top

SASS Files are located under /sass folder, and here is the general structure of files of this folder :

• main.scss : the main file
• style-X.scss : sample CSS customization of the template
• _variables.scss : contains variables such as color, font size and font family
• _mixins.scss : mixins, such as buttons behavior and design
• _functions.scss : functions required by this theme
• _components.scss : all available components : buttons, slider, layouts ...
• _sections.scss : section layouts, section cover, default appearance , section header...
• _pages.scss : page layout appearance
• The sub-folder /components, contains page components which are
  • _articles.scss : article layout. Variants are located within the subfolder article
  • _buttons.scss : button layout. Variants are located within the subfolder button
  • _cards.scss : card picture layout. Variants are located within the subfolder card
  • _coveer.scss : the page cover layout
  • _forms.scss : input and forms layout. Variants are located within the subfolder form
  • _images.scss : images and picture layout. Variants are located within the subfolder image
  • _media.scss : customization of Bootstrap 4 media object
  • _menu-icon.scss : the page menu icon
  • _nav-right-dot.scss : the navigation dot at right of the page
  • _page-headers.scss : the page header. Variants are located within the subfolder page-header
  • _sliders.scss : gallery sliders
• initialization and utlities helper, located within init and utilities folder

To edit the template theme color, edit the _variable.scss file and replace the following colors by yours

// colors
$primary:  #D1335B;
$secondary:  #3f4b62;
$yellow: #ffc107;

// white
$white : #ffffff;

// black
$black : #1d1d1d;
$light-black : #2d2d2d;
$medium-black : $black;
$dark-black : #0d0d0d;

// gray
$gray: #8b8b8b;
$white-gray: #f8f9fa;
$light-gray: #e1e1e1;
$medium-gray: $gray;
$dark-gray: #505050;


$theme-colors: (
  primary: $primary,
  secondary: $secondary,
  white: $white,
  black: $black,
);

$bg-colors: (
  primary: $primary,
  secondary: $secondary,
  light-gray: $light-gray,
  white-gray: $white-gray,
  white: $white,
  black: $black,
);

You can add more color variant to $theme-colors but it may increase the main.css filesize.