SCSS structure
We are use 7-1 tire scss folder structure in our template
- scss
- base
- components
-
font-awesome
- layout
- pages
- themes
- utils
-
vendors
- chartist
- whether-icon
- chartist
- base
Tips
If you want to add new scss so you can add in _custom.scss file
because we are update template in future at that time you can take
update template easily and use it
only one custom scss file you need to put from your side
Intelligent customization using scss
You can change in assets/scss/utils/_variables.scss file
Common settings
| Variables set | Content |
|---|---|
$theme-body-font-color: #404040; |
whole template body font color set here |
$theme-font-color: #242934; |
whole template body font color set here |
For font family
$font-parkinsans: Parkinsans; |
set body font family |
$font-roboto: Roboto; |
set second font family |
For main color settings
$primary-color: #345463; |
All color template settings |
$secondary-color: #96a65e; |
|
$success-color: #3a983e; |
|
$info-color: #1b8be3; |
|
$warning-color: #dcbe1a; |
|
$danger-color: #e83a2d; |
|
$light-color: #f4f4f4; |
|
For sidebar settings
$sidebar-width: 255px; |
set sidebar width |
$sidebar-background-color: $white; |
set sidebar background color |
$sidebar-shadow: 0 0 11px rgba(69, 110, 243, 0.13); |
set sidebar shadow color |
$sidebar-overflow: auto; |
set sidebar overflow scroll |
$sidebar-z-index: 9; |
set sidebar z index |
For card settings
$card-padding: 20px; |
set common card spacing |
$card-margin-bottom: 20px; |
set common card outside spacing |
$card-border-color: 1px solid $light-gray; |
set card border |
$card-border-radius: 15px; |
set card border radius |
$card-box-shadow: 0px 9px 20px rgba(46, 35, 94, 0.07) |
set card box shadow |