Setting up SCSS variables

Components, elements and behaviours all come with boilerplate SCSS, which you can easily override to suit your custom styling needs.

Harmony includes an abstracts folder which sets up these default styles, as outlined in Harmony: Abstracts, including custom colours, typography and icons. To override Harmony with your own styles, you simply turn on the relevant protected region and make your changes.

We will be adding these custom styles into our LMS project. Our goal is to style the LMS application to match the following image:

[insert image here of styled page]

Overriding variables

Variables are provided in the templated SCSS files that are found in the abstracts folder. We can change our variables by turning on the protected region and customising our values.

Navigate to /scss/abstracts/. This is your project’s abstracts folder, where we will add our custom values. You should see the following files:

• colors.scss
• functions.scss
• icons.scss
• import-abstracts.scss
• layout.scss
• mixins.scss
• normalise.scss
• spacing.scss
• typography.scss
• variables.scss

Stage 1: Setting up your colours

Let’s start with our colour scheme. The final application will use a blue and green motif.

Open the colors.scss file in your project’s abstracts folder. You can see it contains multiple colour variables that you can choose to override.

Let’s change $color-primary, $color-secondary and $color-brand-01 to match the LMS style.

In your project’s colors.scss file, turn on the Protected Regions: [Set colours, accent colours, and greyscale colours], and replace the following variables with the colours provided.

//Primary and theme colour
$color-primary: rgb(21, 21, 23); // # // Standard dark colour
$color-secondary: rgb(91, 15, 211); // #; // Purple
$color-brand-01: rgb(251, 164, 65); // # // Orange

If you want to change more colours, simply change the variable names that are provided such as $color-brand-02.

Stage 2: Setting up typography

Changing the typography follows the same principles as changing your colours. Simply turn on the protected region in your typography.scss, and override the variables listed in the typography file.

In this situation you will have to turn on two protected regions. The first one is to import your custom font family. Whereas the second protected region will allow you to assign the variable font to the correct font family.

Import Google fonts to use them in your project. Turn on the protected region [Change font imports here] and add the following code:

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,400;0,700;1,500;1,600&display=swap');

Now you can set Open Sans as the body font, and Montserrat as the heading font, increase the base font size to 18px and set the base font weight as 400. Turn on the protected region [Change font family here] and replace the given variables to the following:

$heading-font-family: 'Montserrat', sans-serif;
$body-font-family: 'Open Sans', sans-serif;
$base-font-size: 18px;
$base-font-weight: 400;

The fonts might take some time to load as Megrim is more custom than other fonts.

Appending

You can also extend Harmony by adding your own variables, mixins and functions.

There are situations where you may want to use harmony variables but add more variables to the list.

Stage 1: Variables

The Harmony variables file includes some default spacing variables. However, you may want to add your own additional options.

Go to your target variables.scss folder and turn on the protected region [Change transition times to values here]. Inside this protected region, let’s add our own animation time variables.

For example:

$quick-animation-time: 0.2s;

Stage 2: Mixins

Harmony includes some useful mixins, but you can also add your own. Like appending to variables, turn on the protected region in your project’s mixins.scss file, and add any mixins you find useful to your application.

Stage 3: Icons

By default, Codebots projects are packaged with our Lightning Icons set. However, you can choose to replace the Lightning Icons and use your own icon-font.