SCSS
Structure
Doctorly has managed the scss file in the
(admin/resources/scss) folder.
We have used vite for scss compilation. You can add your custom scss in
the custom.scss file instead of doing changes in the
app.scss or other scss files as it will create conflicts in
future updates.
scss
All
the components scss files are here.Variables Structure
We have defined all the variables in the
resources/scss/ folder.
_variables.scss- All bootstrap variables are defined in this file.
_variables-dark.scss- All dark theme variables are defined in this file.
Layout Structure
We have added all layouts files in the resources/scss/structure
folder.
_footer.scss- Footer-related scss define in this file.
_general.scss_horizontal-nav.scss- Horizontal navbar scss managed in this file.
_layouts.scss- Manage Boxed layout scss in this file.
_page-head.scss- Manage page heading scss in this file.
_right-sidebar.scss- Manage right sidebar scss in this file.
_topbar.scss- Topbar scss in this file.
_two-column.scss- Vertical layout scss in this file.
Other SCSS file Structure
We have created all the scss files in the resources/scss folder.
- components
- All components related scss files are created in this folder.
- fonts
- All fonts are imported in this scss file.
- pages
- All the pages related to scss are written in this folder and page wise scss created i.e. _authentication.scss, _chat.scss, _dashboard.scss etc
- plugins
- All the plugins ( Apex chart, ckeditor, full calendar etc ) are created in the plugins folder.
- icons.scss
- All icons scss are imported in this file.