Modern admin manages all scss files in app-assets folder and it also allows users to add their own scss files inside assets folder. Both app-assets and assets folders can be found in root of the downloaded package.
Grunt command for scss compile will generate all css files in app-assets/css.
It is not recommend you to change any scss files inside app-assets core files as it will get replace in next updates.
SCSS files structure for modern assets.
modern_admin/
├── src/
| ├── scss/
| | ├── bootstrap/
| | ├── bootstrap-extended/
| | ├── core/
| | ├── plugins/
| | ├── vendors/
| ├── bootstrap.scss
| ├── bootstrap-extended.scss
| ├── components.scss
| ├── colors.scss
| ├── custom-rtl.scss
Following is the details of what all scss folders.
| # | Folder/Files | Details |
|---|---|---|
| 1 | bootstrap | bootstrap/ folder contain Bootstrap 4 core scss files, that can be updated with future bootstrap updates. |
| 1 | bootstrap-extended | bootstrap-extended/ folder contain customized bootstrap scss files for modern admin. |
| 2 | components | components/ folder contain modern admin all custom components and pages scss files. |
| 2 | core | core/ folder contain colors, layouts, menu, mixins and variables folder. |
| 3 | plugins | plugins folder contains all vendors scss files. |
SCSS files structure for assets.
Users can add their changes or new scss files in assets/scss folder to avoid any unwanted behavior. We recommend you to not change any files in app-assets for future release safe updates.
Grunt command for scss compile will generate all css files in assets/css.
modern_admin/
├── assets/
| ├── scss/
| | ├── variables/
| | ├── colors/
Use the variables/ and colors/ folder for in code assets/scss folder for template variable customization, it will override code scss variables.
For theme customization use variables & colors scss files to override bootstrap, modern and colors variables.