Overview
Good uses Sass , the most powerful CSS preprocessor for handling the
theme css efficiently. Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
Components
Components folder in
/src/sass/components/ contains Sass code that customizes the core Bootstrap components
to match the Good's own design system
and custom components. Both Good and
Bootstrap components are customized in /src/sass/_variables.scss.
Bootstrap Variables
In
/src/sass/components/_variables.scss file, Good deeply customizes the standard Bootstrap components by
following the best practices explained in the official documentation.
Custom variables that used to customize Bootstrap components are marked with
Custom variable comment in _variables.scss file.
Override Variables
If you like to change the Bootstrap theme colors, border radiuses, font family and other variables, we suggest using
_variables.custom.scss file so you keep your
own changes separated from future updates to avoid conflicts. All variables to override in this file should be set without the !default attribute to prioritize your code change.
Theme Feel
Good comes with an alternative
cool theme mode that can be checked through
Layout Builder.
To use the cool theme feel please follow the below steps:
- Open
src/_init.scssto change the components and layouts variables imports. - Replace
components/variables.customimport withcomponents/variables.cool.custom. - Replace
layout/variables.customimport withlayout/variables.cool.custom.
Layout
Layout and comrelated SASS code is located in
/src/sass/layout/ folder. This folder contains the layout's markup and SASS variables files as explained in the below table:
| File/Folder | Description |
|---|---|
_variables.scss
|
Variables used by layout partials. You can easily change Aside width, header height and other common properties. |
_layout.scss
|
Defines main layout and its dependencies. |
Compilation
- Good compiles layout, components(including the Bootstrap & custom components) into the main bundle:
assets/css/style.bundle.css. - The custom SASS files are compiled separately into CSS folder:
assets/css/custom - All 3rd-party plugins css files are bundled into the plugins bundle CSS file and globally included in all pages.
assets/plugins/global/plugins.bundle.css.
2024©
Keenthemes
