Logo

Documentation v1.0.4

  • Getting Started
  • Customization
  • SASS
Preview Purchase

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.scssfile, 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 variablecomment in _variables.scssfile.

Override Variables

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.

Theme Feel

Good comes with an alternative corporatetheme mode that can be checked through Layout Builder. To use the corporatetheme feel please follow the below steps:
  • Open src/_init.scssto change the components and layouts variables imports.
  • Replace components/variables.customimport with components/variables.corporate.custom.
  • Replace layout/variables.customimport with layout/variables.corporate.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
base A set of reusable and customizable layout elements to build applications layouts of any complexity.
_variables.custom.scss Variables used by layout partials. You can easily change Aside width, header height and other common properties.
_variables.corporate.custom.scss Corporate style layout color preset to be used instead of the default preset _variables.custom.scssimported in src/sass/_init.scss.
_layout.scss Defines main layout and its dependencies.

Compilation

  • Good compiles layout, components(including the Bootstrap & custom components) into the main bundle: dist/assets/css/style.bundle.css.
  • The custom SASS files are compiled separately into CSS folder: dist/assets/css/custom
  • All 3rd-party plugins css files are bundled into the plugins bundle CSS file and globally included in all pages. dist/assets/plugins/global/plugins.bundle.css.
Learn & Get Inspired

Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation
From guides and how-tos, to live demos and code examples to get started right away.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now