Structure
Skote has managed the scss file in the ( src/scss )
folder.
We have used gulp-sass 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.
Variables Structure
We have defined all the variables in the src/scss/
folder.
_variables.scss
- All bootstrap variables are defined in this file.
Layout Structure
We have added all layouts files in the src/scss/structure
folder.
_footer.scss
- Footer-related scss define in this file.
_horizontal-nav.scss
- Manage Boxed layout scss 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 related scss in this file.
_topbar.scss
- Topbar scss in this file.
_vertical.scss
- vertical layout scss in this file.
Other SCSS file Structure
We have created all the scss files in the src/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.
Quick customization of layout using scss.
You can make changes in the src/scss/_*.scss
file.
Variables |
Description |
$primary: $purple;
$secondary: $blue;
$success: $green;
$info: $teal;
$warning: $yellow;
$danger: $red;
$light: $gray-200;
$dark: $gray-900;
|
You can manage those colors to update the color theme. |
--#{$prefix}font-sans-serif: "Inter",sans-serif
--#{$prefix}font-monospace: "Inter",sans-serif
|
You can set the default font in these variables.
|