Developer Docs

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:

Architecture

The frontend folders contain the basic file structure.

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:

On this page