Pixelstrap - Admin Document

SCSS structure

We have used scss for styling the website, as it makes the development process fast and convenient for the developers. Below given is a detailed explanation of the scss folder structure, so that if you want to make any changes in your personal theme then you can make changes easily.

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

You can find scss folder on the following path: public >> assets >> scss

public
- assets
  - 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
      - _general_widget.scss
      - _ecommerce.scss
      - _email-application.scss
      - _errorpage.scss
      - _faq.scss
      - _file.scss
      - _gallery.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
    - app.scss
    - _general.scss
    - style.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: `#1F2F3E;`	whole themplate body font color set here

For font family

$font-Outfit: `Outfit;`	set Body font family
$font-roboto: `Roboto;`	set second font family

For main color settings

$primary-color: `#6271EB;`	All color template settings
$secondary-color: `#FF8575;`
$success-color: `#53A653;`
$info-color: `#01A1B9;`
$warning-color: `#FFAA05;`
$danger-color: `#DC3545;`
$light-color: `#F3F3F3;`

For sidebar settings

$sidebar-width: `253px;`	set sidebar width
$sidebar-background-color: `#FFFF;`	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;`	set common card spacing
$card-margin-bottom: `30px;`	set common card outside spacing
$card-border: `1px solid $light-gray;`	set card border
$card-border-radius: `10px;`	set card border radius
$card-box-shadow: `0px 0px 50px 0px rgba(0, 0, 0, 0.03)`	set card box shadow