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>src>assets>scss
- assets
- scss
- base
- chartist
- component
- feather-icon
- flag-icon
- font-awesome
- ico-icon
- layout
- pages
- themes
- ultils
- vendors
- base
- 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.
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.
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, loadersetc. . 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.
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.
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.
Code 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.
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: 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.