Once again there are two ways to change template style. One from dist/assets/css/style.css folder another one is from src/assets/scss/** folder.

If you want to change style from dist folder, just go to the style.css file and change anything you want to change.

If you want to change style from src/assets/scss/** you have to install npm packages. Then you have to run npm run build (this command will compile all files to dist folder) after that you have to run npm run dev (this command will launch local server and watch for any changes of src files). see installation.

We organize our scss files with the combination of SMACSS (Scalable and Modular Architecture for css) & BEM (Block Element Modifier) style guide.

• scss - The folder contains SCSS files and subfolder, as listed below:
  • bootstrap - folder contains all bootstrap files in scss folder and any modification of bootstrap files located in bootstrap.scss file. After changing in bootstrap.scss file, you have to run npm run build command.
  • components - All component styles are located here.
  • fonts - All CSS styles for Google Fonts and Bootstrap Icons are defined in this directory.
  • global - Styles include setting heading sizes, default link styles, default font styles, and body backgrounds.
  • layouts - This directory organizes high-level, reusable style components that define the visual structure of site. It ensures consistency across pages while allowing flexibility for section-specific variations. for ex: header style, navigation style and footer style.
  • utilities - A collection of atomic, reusable style classes for common design patterns. For ex: animation, background, border style, text color etc.
  • vendor - Contains third-party CSS libraries.
  • style.scss - The root Sass file that compiles all styles into a single CSS bundle.