, 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 folder in
/src/sass/components/contains SASS code that customizes the core Bootstrap components to match the
Craft's own design system and custom components. Both Craft and
Bootstrap components are customized in
file, Craft deeply customizes the standard
components by following the best practices explained in
the official documentation
Custom variables that used to customize Bootstrap components are marked with
Custom variablecomment in
If you like to change the Bootstrap theme colors, border radiuses, font family and other variables, we suggest using
_variables.custom.scssfile 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
!defaultattribute to prioritize your code change.
Layout related 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:
|Variables used by Layout Partials. You can easily change Aside width, header height and other common properties.
|Defines main layout and its dependencies.
|Defines base markup and styles.
|Defines base layout markup and styles.
|Defines footer markup and styles.
- Craft compiles layout, components(including the Bootstrap & custom components) into the main bundle:
- The custom SASS files are compiled separately into CSS folder:
- All 3rd-party plugins css files are bundled into the plugins bundle CSS file and globally included in all pages.