Style Customization

Style Usage

Robust admin lite 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.

Heads Up!

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


                
                    robust-admin-lite/
                    ├── app-assets/
                    |   ├── scss/
                    |   |   ├── bootstrap/
                    |   |   ├── bootstrap-robust/
                    |   |   ├── core/
                    |   |   ├── plugins/
                    |   |   ├── vendors/
                    |   ├── bootstrap.scss
                    |   ├── bootstrap-robust.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-robust bootstrap-robust/ folder contain customized bootstrap scss files for robust admin lite.
2 components components/ folder contain 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.

                
                    robust-admin-lite/
                    ├── 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.

TIP

For theme customization use variables & colors scss files to override bootstrap, robust and colors variables.