Scss folder Structure

We have used scss for styling the website, as it makes the development process fast and convenient for the developers. Below given is a detailed explanation of the scss folder structure, so that if you want to make any changes in your personal theme then you can make changes easily.

You can find scss folder on the following path: theme>public>assets>scss

Explanation:

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

Base 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.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.

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

Components Folder

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.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.

Layout Folder

There are many different components like rtl and box layout are also included in this folder. 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 rtl andbox 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.

Pages Folder

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. blog, contact page, faq , gallery and many more are the common amongst every website.

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

Theme Folder

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

responsive.scssCode that make the website responsive has been also added here in this folder named responsive.scss

Utils Folder

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

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. 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.

Vendors Folder

We have used plugins to give you give a better user experience. And for those plugins to be functional and look attractive these files in vendors are necessary.

Note:Note:Making any changes in these files may result in breaking the plugins. So please avoid making and changes in these files, but if you are using the plugins in your website then make sure to import them in your project.

Next Document