Top

SCSS structure

We are using 7-1 tire scss folder structure in our template

Note: First, you must download and install node.js You can check it in your terminal window using these commands node --version and npm --version.

your node version should be v22.13.1

If you want to use scss so you need to follow some steps for compilation process

  • npm i command (install node js)
  • scss
    • base
      • _reset.scss
      • _typography.scss
    • components
      • _according.scss
      • _buttons.scss
      • _call-list.scss
      • _call.scss
      • _dropdown.scss
      • _loader.scss
      • _msg.scss
      • _tabs.scss
      • _tootip.scss
      • _tour.scss
      • _uodate.scss
    • layout
      • _content.scss
      • _customizer.scss
      • _dark.scss
      • _forms.scss
      • _grid.scss
      • _login.scss
      • _login2.scss
      • _rtl.scss
      • _sidebar.scss
    • pages
      • _inner-pages-responsive.scss
      • _inner-pages.scss
      • _landing-page.scss
      • _landing-responsive.scss
      • _landing.scss
    • utils
      • _helpers.scss
      • _variables.scss
Tips

If you want to add new scss so you can add in _custom.scss file

because we update template in future at that time you can take update template easily and use it

only one custom scss file you need to put from your side

Intelligent customization using scss

You can change in assets/scss/utils/_variables.scss file

For font family

Variables set Content
$font-1: Manrope,sans-serif; set Body font family
$font-inter: Inter,sans-serif; set second font family

For sidebar settings

$sidebar-spacing: 25px; set sidebar spacing
$contant-spacing: 45px; set contant spacing
$left-sidebar-spacing: 30px; set left sidebar spacing