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 theme, like : button tag, anchor tag, paragraph tag. This makes the theme more attractive as the style is common throughout.

Note: Make sure that the path you enter in the json is same as the one that you have given in the router, or else error will be thrown as same path will not be found.

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

Components like accordion, alerts, badges, forms, loaders etc.. are used numerous times and it is essential that we keep the designs of these components to make the theme look more aesthetic.

If you want to add you 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 theme. We have gathered all styles of those components here which includes in making of a web-page. Styles for rtland box 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, contact page, faq , gallery and many more are the common amongst every website.

Note: If you take these pages to add in your website then make sure you add the style from these files as well.

This folder is created to contain all the utility files that we might require while making designs for the theme.

Here we only require variables as utilities so this folder only contains variables.scss file. Variables file contains all the scss variables for colors, fontsize and other scss properties. We do this so that whenever there are any changes in the layout like making it in dark mode, we can easily change the color variable to render changes where these variables are used.

If you want to change the deafult-primary color of the website you can make changes in variables.scss files.