Introduction to Harmony
By Nicola D'Andrea and Termporn Sirichindakul 2 April 2020 Techies
Accessing and understanding the base Sass code compiled by the bots
Harmony refers to the base SCSS code which is compiled by the third-generation bots. These SCSS files provide benchmark styles for all components, including CRUD lists and navigation bars.
From within your target application folder, you can find the project's frontend SCSS templated out into the
If your Admin section is not styled in your project you will be required to run
npm installor see the article Running SpringBot.
Upon opening this folder, you will see all the SCSS files associated with the frontend of your application. Each SCSS file is named according to the component of the application it affects. Simply open the relevant SCSS file to see the classes and styles that are being applied.
Any overrides or changes you wish to make should have the protected region turned on. When a project is rebuilt or updated, these styles will be re-written by the bots if you do not turn the protected region on. Any changes you have applied will be deleted.
To find your project SCSS files within your target application folder, navigate to:
The frontend folders contain the basic file structure.
- The abstracts folder contains small but essential pieces of project styling, such as colour variables, mixins and typography size scales. See the Harmony abstracts article for more detail.
- The animations folder contains an extensive animation library, which can be used to animate anything from spinners to buttons to exciting accent elements on an application.
- The behaviours folder includes files for default styles of each behaviour.
- The components folder includes files for default styles of each component, such as navigation, alerts, and modals.
- The elements folder includes files for default styles of each element, such as buttons, inputs and tooltips. See the bot-written Standards for more information on how each element class is used.
- harmony.scss imports all above files, so that they can be compiled into the final css file
Each folder within Harmony includes an import file, such as
import-components.scss. These files import all of the separate files within its directory. In turn, these import files are imported into the
harmony.scss file to create a complete stylesheet. New components SCSS files can be added in the target project version of this file, and will thus be imported into the project CSS file.
The imports within the
main.scss file in the
scss folder of your target project are placed in specific order.
This order means that you only need to override and style once, and can avoid the use of
!important in your code, which is bad practice. For example, elements are imported before components because components are made of elements. This means the element styling can trickle into the components. Component styles trickle into tile styles, and tile styles trickle into page styles.
To understand in more detail how the different files interact with each other, we recommend following these articles in order:
- Setting Up Variables
- Custom Element Styling
- Custom Component Styling
- Styling custom tiles and importing custom SCSS