Introduction to Harmony

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.

Accessing Harmony

From within your target application folder, you can find the project’s frontend SCSS templated out into the /scss folder. The templated SCSS code provides a full view on how the application is currently styled, these styles can be manipulated by changing a few lines or adding a few lines to the code within the protected region.

If your Admin section is not styled in your project you will be required to run npm install for your SpringBot project or yarn install for your C#Bot project. You can read the articles Running SpringBot, Running C#Bot for more information on this.

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:

• SpringBot: clientside/src/app/lib/scss
• C#Bot: clientside/src/scss

Architecture

The frontend folders contain the basic file structure.

• The abstracts folder contains small but essential pieces of project styling, such as colour variables, mix-ins and typography size scales. See the Harmony: Abstracts 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.

Imports

Each folder within Harmony includes an import file, such as import-abstracts.scss orimport-components.scss. These files import all of the separate files within the corresponding 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 SCSS variables
• Custom Element Styling
• Custom Component Styling
• Styling custom tiles and importing custom SCSS