SCSS Structure

---

• public
  • assets
    • scss
      • abstracts
        • _mixin.scss
        • _variable.scss
      • base
        • _reset.scss
        • _typography.scss
      • Components
        • _about.scss
        • _achivement.scss
        • _animated.scss
        • _breadcrumbs.scss
        • _button.scss
        • _categories.scss
        • _discovery.scss
        • _experience.scss
        • _features.scss
        • _loader.scss
        • _modal.scss
        • _newsletter.scss
        • _offer.scss
        • _progress.scss
        • _range.scss
        • _ratio.scss
        • _slider.scss
        • _tap-to-tap.scss
        • team.scss
        • title.scss
      • fether-icon
        • _feather-icon.scss
      • font-awesome
        • animated.scss
        • border-pulled.scss
        • core.scss
        • fixed-width.scss
        • icons.scss
        • larger.scss
        • list.scss
        • mixin.scss
        • path.scss
        • rotated-flipped.scss
        • screen-reader.scss
        • stacked.scss
        • variables.scss
      • layout
      • pages
      • themes
      • app.scss
      • font-awesome.scss
      • landing.scss
      • style.scss

We have created a folder structure that is easy to understand and modify. And here is the explanation for each folder.

In this folder there are only two files: reset.scss and typography.scss.

reset.scss file, as its name says, is made to reset the styling of the pages to start working on it. When we import bootstrap then there are some style which we need to overwrite globally, those overwrites are done here so that we do not have to modify individual components.

typography.scss file has been made to give the default styles to all the commonly used tags through out the template, like : button tag, anchor tag, paragraph tag. This makes the template more attractive as the style is common throughout.

As the name suggests, this folder contains styles for all the components that we have made and used multiple times in the template.

Components like loader, progress, range, ratio, slider etc.. are used numerous times and it is essential that we keep the designs of these components to make the template look more aesthetic.

If you want to add your custom style to any component, files names are given according to the components so that it is easy for you to find the file and modify it.

There are many different components like header, sidebar, footer that are common in all pages of the template. We have gathered all styles of those components here which includes in making of a web-page. Styles for rtl and ltr layout are also included in this folder.

If you wish to make any changes in design on header, footer, sidebar or in the design of rtl and dark modes, look for the files in this folder to modify.

Styles of the pages that you might need to create your own website are given here. All the basic pages like blog, car shop, home , job shop and many more are the common amongst every website.

This folder contains styles for those pages responsible for customizing theme. Like changing layout to dark mode or rtl layout.