In this tutorial, we will be discussing on our default HTML version SASS structure. Our default version consists of multiple demo folders; however, each demo is considered independent from each other. Therefore, each demo will have its own SASS folder where you can customize or extend.
Our SASS folder is located in
There are 5 main key points within our SASS structure:
- Variable configurations
We have created a very flexible and efficient file structure framework to enable all our users to be customize and extend Metronic’s styling to fit any project requirements.
All of Metronic’s SASS initialization is located within our
style.scss files. If your project needs additional custom scss files to be imported, you can just add your scss path in either of these 2 files. However, we recommend that you add it at the bottom of the
You can add your own scss file by first creating the file somewhere within your project and then adding this line of code at the bottom each section of our style.scss file.
@import “<your scss file path>”;
When viewing some of our sass files, you may come across some custom scss functions. You will most likely see our
get() function the most. Here’s an example of a
get($aside-config, base, width);
How this read is, the function will get the value set within a variable called
$aside-config with a node or parameter called
base -> width.
Hence, the value our
get() function is calling is located within the
_variables.scss file of our layout that’s pointing to the value of 265px:
// Aside $aside-config: ( // Aside base: ( width: 265px, <-- value returned minimized-width: 70px, zindex: 98, scrollbar-width: 4px ), // Offcanvas Mobile offcanvas-mobile: ( width: 275px, zindex: 1001, bg-color: #ffffff, shadow: 0px 1px 9px -3px rgba(0,0,0,0.75), overlay-bg-color: rgba(#000000, 0.1) ) ) !default;
You can locate all variable files within each main scss folder such as, “components”, “layout”, “pages, or “vendors”. Our variable files will usually be named as _variables.
Most of Metronic’s general styling can be found within our variable files. These variable files consist of key variables such as font sizes, font weights, colors, padding or margins sizes and many more.
These key variables are primarily used for global stylings. So, if your project needs to customize a certain style globally, your first point to look for will be within one of our variable files.
Our layout sass folder is located at
Within this folder, we have all the necessary sass files that controls the layout of your project, or in this case, the selected demo.
In essence, if you need to modify the aside menu with demo 1, then you’ll be looking at
_aside.scss or if you need to modify the header, then
_header.scss and so on.
Components are shared element across all pages within Metronic such as, accordions, buttons, cards, forms, etc. You can locate our components sass within
In our components folder, we have 3 variable files:
In our Bootstrap variables file, we define and override Bootstrap’s default variables to fit the look and feel of each of our demo. We recommend that you use this file as a reference only and not to modify any of the variables defined here.
Our Custom variables file consists of all the values used by our custom components that were created. Values such as, heights and widths, icon sizes, SVG sizes, checkbox configurations, etc. Similar with our Bootstrap variables, we do not recommend modifying anything within this file.
All variables defined within our Demo variables file will be used to override any of our defined values within the Bootstrap and Custom variable files. Therefore, if you want to customize a certain color, we recommend that you copy the variable name from
_variables.demo.scss and then replace the value with the value your project requires.
For example, if you want to change the $success color variable. First, locate the color within
_variables.bootstrap.scss, copy the variable and paste it in
_variable.demo.scss, and replace it the color values and it should look something like this:
// Success colors $success: #1BC5BD; // Bootstrap variable $success-hover: #0BB7AF; // Custom variable $success-light: #C9F7F5; // Custom variable $success-inverse: #FFFFFF; // Custom variable
Please remember to remove the
!default flag with the Demo variables file.
Pages sass files are custom stylings for specific standalone pages within Metronic that does not quite fit within a component or have components within itself. Such as our error or login pages.
Our pages do not have a variables file since each scss file is considered an independent styling file. If you need to modify any of these, you can do so directly within the corresponding file. For example, if you need to modify the font size within our Error 3 page, you can modify our
error-3.scss file directly.
All Metronic 3rd party plugins that were customized to fit the look and feel of each demo is placed within our vendors folder.
Whilst we have a
_variables.scss file within this folder, you may choose to ignore it when customizing your newly included plugins.
When creating new scss files, please remember to import your new scss files within our styles.scss. We have segmented our imports by components, plugins, and layouts for you to include your files at the bottom of corresponding section. For example, if you are adding a new component scss file, add the file path at the bottom of our components import code.
For a video tutorial on this, please have a look here: https://keenthemes.com/tutorials/sass-customization-overview