Top

Popular Search:

- Starter kit
- Element
- components
- forms
- tables

#### SCSS structure

We are use `7-1 tire` `scss` folder structure in our template

We are use `gulp` for the scss to css compilation

Note: First, you must download and install `node.js` You can check it in your terminal window using these commands `node --version` and `npm --version`.

your node version should be `v18.7.0`

If you want to use scss so you need to follow some steps for compilation process

- `npm i` command (install node js)
- `gulp style` command in your terminal

- scss
  - base
    - _reset.scss // customize new classes same like bootstrap class
    - _typography.scss // common tyography scss
  - components // all components scss
    - _according.scss
    - _alert.scss
    - _avatars.scss
    - _badge.scss
    - _bookmark.scss
    - _breadcrumb.scss
    - _builders.scss
    - _buttons.scss
    - _card.scss
    - _color.scss
    - _datatable.scss
    - _datepicker.scss
    - _dropdown.scss
    - _form-builder.scss
    - _form-input.scss
    - _form-wizard.scss
    - _forms.scss
    - _form_builder-2.scss
    - _icons.scss
    - _list.scss
    - _loader.scss
    - _popover.scss
    - _print.scss
    - _radio.scss
    - _ribbon.scss
    - _scrollbar.scss
    - _switch.scss
    - _tab.scss
    - _table.scss
    - _touchspin.scss
    - _tour.scss
    - _tree.scss
    - _typeahead-search.scss
  - layout
    - _box-layout.scss
    - _footer.scss // customize footer scss
    - _grid.scss
    - _header.scss // customize header scss
    - _navs.scss
    - _rtl.scss // all rtl scss
    - _search.scss
    - _select2.scss
    - _sidebar.scss // customize sidebar scss
  - pages
    - _blog.scss
    - _bookmark-app.scss
    - _cart.scss
    - _chart.scss
    - _chat.scss
    - _checkout.scss
    - _comingsoon.scss
    - _contacts.scss
    - _dashboard_2.scss
    - _dashboard_default.scss
    - _ecommerce.scss
    - _email-application.scss
    - _errorpage.scss
    - _faq.scss
    - _file.scss
    - _gallery.scss
    - _general-widget.scss
    - _internationalization.scss
    - _job-search.scss
    - _jsgrid.scss
    - _kanban.scss
    - _knowledgebase.scss
    - _landing.scss
    - _language.scss
    - _learning.scss
    - _login.scss
    - _megaoption.scss
    - _order-history.scss
    - _page.scss
    - _pricing.scss
    - _progress.scss
    - _projectlist.scss
    - _social-app.scss
    - _task.scss
    - _timeline-v.scss
    - _timeliny.scss
    - _user-profile.scss
    - _wishlist.scss
  - themes
    - _dark-sidebar.scss
    - _dark.scss // Dark layout scss
    - _responsive.scss
    - _theme-customizer.scss // customizer scss only
    - _update.scss
  - utils
    - _variables.scss // settings variables here
  - vendors // All plugins scss folder and files here
    - animate.scss
    - aos.scss
    - bootstrap.scss
    - button-builder.scss
    - calendar.scss
    - chartist.scss
    - datatable-extension.scss
    - datatables.scss
    - date-picker.scss
    - daterange-picker.scss
    - dropzone.scss
    - echart.scss
    - feather-icon.scss
    - flag-icon.css
    - icofont.scss
    - image-cropper.scss
    - jkanban.scss
    - mapsjs-ui.scss
    - owlcarousel.scss
    - page-builder.scss
    - photoswipe.scss
    - prism.scss
    - range-slider.scss
    - rating.scss
    - scrollable.scss
    - scrollbar.scss
    - select2.scss
    - simple-mde.scss
    - sticky.scss
    - summernote.scss
    - svg-icon.scss
    - sweetalert2.scss
    - themify.scss
    - timepicker.scss
    - todo.scss
    - tour.scss
    - tree.scss
    - vector-map.scss
    - whether-icon.scss
    - animate
      - _animate.scss
    - aos
      - _animations.scss
      - _core.scss
      - _easing.scss
    - bootstrap
    - button-builder
      - _button-builder.scss
      - _button-builder-colorpicker.scss
    - calendar
      - _default.scss
      - _icon.scss
      - _tui-calendar.scss
      - _tui-date-picker.scss
      - _tui-time-picker.scss
    - chartist
      - _chartist-settings.scss
      - _chartist.scss
    - data-table
    - datatable-extension
    - date-picker
    - daterange-picker
    - date-time-picker
    - dropzone
    - echart
      - _reset.scss
    - feather-icon
      - _feather-icon.scss
    - flag-icon
      - _flag-icon-base.scss
      - _flag-icon-list.scss
      - _flag-icon-more.scss
    - icoicon
      - _icons.scss
    - image-cropper
      - _cropper-custom.scss
      - _cropper-main.scss
    - jsgrid
      - _jsgrid.scss
      - _jsgrid-theme.scss
    - owltheme
    - page-builder
      - _page-builder.scss
    - photoswipe
      - _photoswipe.scss
      - _photoswipe-default.scss
    - prism
      - _prism.scss
    - range-slider
      - _ion.modernskinRangeslider.scss
      - _ion.rangeSlider.scss
    - rating
    - scrollable
      - _scrollable.scss
    - scrollbar
      - _simplebar.scss
    - select2
    - simple-mde
      - _elements.scss
      - _simplemde.scss
    - sticky
      - _sticky.scss
    - summernote
      - _elements.scss
      - _fonts.scss
      - _summernote-bs4.scss
    - svg-icon
      - _svg-icon.scss
    - sweetalert2-master
      - _animations.scss
      - _mixins.scss
      - _toasts.scss
      - _variables.scss
    - themify
      - _core.scss
      - _extras.scss
      - _icons.scss
      - _mixins.scss
      - _path.scss
      - _themify-icons.scss
      - _variables.scss
    - time-picker
      - _timepicker.scss
    - todo
      - _todo.scss
    - tour
      - _tour.scss
    - tree
      - _tree-default.scss
      - _tree.scss
    - vector-map
      - _vector-map.scss
    - whether-icon
      - _whether-icon.scss

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: `#3D434A;` | whole themplate body font color set here
$theme-body-font-color: `#3D434A;` | whole themplate body font color set here

#### For font family

$font-outfit: `'Outfit', sans-serif;` | set Body font family

#### For main color settings

$primary-color: `#7A70BA;` | All color template settings
$secondary-color: `#48A3D7;`
$tertiary-color: `#C95E9E;`
$success-color: `#0DA759;`
$info-color: `#16C7F9;`
$warning-color: `#D77748;`
$danger-color: `#E44141;`
$light-color: `#f4f4f4;`

#### For sidebar settings

$sidebar-width: `255px;` | set sidebar width
$sidebar-background-color: `$sidebar-color;` | 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: `16px 24px;` | set common card spacing
$card-margin-bottom: `30px;` | set common card outside spacing
$card-border-color: `1px dashed $light-gray;` | set card border
$card-border-radious: `17px;` | set card border radius
$card-box-shadow: `0px 9px 20px rgba(46, 35, 94, 0.07);` | set card box shadow