Stack admin manages all theme scss files in src/scss/ folder and users scss files inside
assets/scss/ folder. Both src/scss/ and assets/ folders can be found in
root of the downloaded package.
Gulp command for scss compile will generate all css files in app-assets/css.
SCSS files structure of src/scss/ folder
stack_admin/
├── src/
| ├── scss/
| | ├── bootstrap/
| | ├── bootstrap-extended/
| | ├── components/
| | ├── core/
| | | ├── colors/
| | | | ├── palette-variables.scss
| | | ├── variables/
| | | | ├── _variables.scss
| | | | ├── _components-variables.scss
| | ├── pages/
| | ├── plugins/
| ├── bootstrap-extended.scss
| ├── bootstrap.scss
| ├── colors.scss
| ├── components.scss
| ├── custom-rtl.scss
| Folder/Files | Details |
|---|---|
| bootstrap |
bootstrap/ folder contain Bootstrap core scss files, that can be updated with future
bootstrap updates.
|
| bootstrap-extended |
bootstrap-extended/ folder contain customized bootstrap scss files for stack admin.
|
| components | components/ folder contain stack admin all custom components and pages scss files. |
| core | scss/core/ folder contain colors, layouts, menu, mixins and variables folder. |
| pages | pages/ folder contains all pages specific scss files. |
| plugins | plugins/ folder contains all vendors scss files. |
| bootstrap-extended.scss |
bootstrap-extended.scss file is for those bootstrap components which are customized for
this theme. It include all files from bootstrap-extended/ folder.
|
| bootstrap.scss |
bootstrap.scss file is bootstrap file which includes all the core bootstrap files from
bootstrap/ folder. It extends the default bootstrap variable by using file
scss/core/variables/_variables.scss
|
| colors.scss |
colors.scss file includes all colors palette related files from
scss/core/colors/ folder.
|
| components.scss |
components.scss file includes all theme components files from
scss/components/ folder.
|
| custom-rtl.scss | custom-rtl.scss file contain custom rtl layout related scss only. |
To customize the theme default color and styling You can change following files
scss/core/variables/_variables.scss, scss/core/variables/_components-variables.scss &
scss/core/colors/palette-variables.scss as per your preferred colors & styling.
It is not recommend to change any scss files inside src/scss/ folder apart from following
scss/core/variables/_variables.scss,
scss/core/variables/_components-variables.scss &
scss/core/colors/palette-variables.scss scss files to avoid future update conflicts. If you still
modify any other files, it may requires to merge it manually with future updates.
-
_variables.scss: file contain bootstrap variables which overrides default bootstrap variables, You can use any bootstrap variable to customize it. By using this file you can change bootstrap primary, secondary, success, danger etc... colors & lot more. -
_components-variables.scss: file contain theme components variables, You can customize it based on your preferences. -
palette-variables.scss: file contain all colors variables, You can customize it based on your preferences.
Always take back-up of following files scss/core/variables/_variables.scss,
scss/core/variables/_components-variables.scss &
scss/core/colors/palette-variables.scss scss files if you are changing them as some times it
require manual merge when we release new updates.
If you are not familiar with SCSS, you can write your own css in assets/css/style.css file, it
will overrides theme default css.
CSS files structure for assets/ folder.
stack_admin/
├── assets/
| ├── css/
| | ├── style-rtl.css
| | ├── style.css
| ├── js/
| | ├── scripts.js
If you are familiar with SCSS, Use assets/scss folder's style.scss / style-rtl.scss file to write
your custom scss. Stack admin sass-compile command will compile this files and generate css files
under assets/css/ folder.
If you are not familiar with SCSS, Use assets/css folder's style.css/style-rtl.css file to write
your custom css.
You can add your new files or folder in assets/ folder to avoid any future conflicts or merge.