React - Cion Document

SCSS structure

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

We are use 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 v22.13.1 latest

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

npm i command (install node js)

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

For font family

$font-nunito: `'Nunito Sans';`	set Body font family
$font-secular: `'Secular One';`	set second font family

For main color settings

$primary-color: `#33BFBF;`	All color template settings
$secondary-color: `#FF6150;`
$success-color: `#4AAD8A;`
$info-color: `#9560DD;`
$warning-color: `#feb858;`
$danger-color: `#f1523d;`
$light-color: `#f5f6f9;`

For sidebar settings

$sidebar-width: `320px;`	set sidebar width
$sidebar-background-color: `$main-body-color;`	set sidebar background color
$sidebar-shadow: `0 16px 15px 15px rgba($primary-color, 0.03)`	set sidebar shadow color
$sidebar-overflow: `auto;`	set sidebar overflow scroll
$sidebar-z-index: `9;`	set sidebar z index

For card settings

$card-padding: `18px;`	set common card spacing
$card-margin-bottom: `30px;`	set common card outside spacing
$card-border-color: `1px solid $light-gray;`	set card border
$card-border-radious: `10px;`	set card border radius
$card-box-shadow: `4px 4px 0px -1px rgba(0, 0, 0, 1)`	set card box shadow