Harmony: Abstracts

Introduction

The Harmony abstracts folder contains small but essential pieces of project styling, such as colour variables, mixins and typography size scales. To understand how these fit into Harmony as a whole, don’t forget to read the Introduction to Harmony.

In order to get the most out of the abstracts folder, there are a few core concepts to be understood:

Variables allow us to reuse values of high repetition and efficiently make site-wide changes. Sass uses the $ symbol to make something a variable. Learn more in the Sass Variable documentation.
Mixins create reusable collections of properties that you can pass values into and reuse throughout your site. Learn more in the Sass Mixin documentation.
Utility classes are a feature of scalable CSS that apply a single rule or simple, universal pattern. By default, Codebots projects include bot-written utility classes for layout and spacing to create a consistent design system.

Remember: any overrides or changes you wish to make should not be performed within Harmony. When a project is rebuilt or updated, these styles will be re-written by the bots. Instead, make these changes in your target application abstracts folder. This can be found inside the scss folder.

colors.scss

The _colors.scss file collects the various colour variables which have been set up for the project. To override these colours, simply re-declare the variable’s value in the corresponding target file. New colours can be also added to your own variables sheet and used where you see fit throughout the project.

The file is divided into several commented sections.

Main colours

Section one contains the main colours for the project. These values are set using an RGB declaration, however, all colours in the sheet are also commented with the hexadecimal colour code value as well. The main colours are typically the brand colours associated with a particular project and any auxiliary colours which are associated with the brand or are used for accent purposes.

Accent and support colours

The next section contains the accent or support colours. These colours are usually used for the purposes of highlighting and differentiating the different sorts of modals, alerts and feedback appearing on the application. For example, error messages usually use the variable $color-support-red. Warning messages appear using our support orange and standard messages appear in black with a support blue highlight, and so on.

Greyscale shades

A spectrum of greyscale shades (from white to black) is available in section three.

Colour variables

Colour variables contain three variables which are used to set a percentage value. Their use is essential to create a wider availability of brand colours without forcing the user to input a new RGB value.

Colour variations

Colour variations are used to lighten or darken the colours from the main colour and support colour list. In order to achieve this, the colour variable values applied to the relevant colour. This provides a handy way to create additional accent colours for the project without having to supply a new RGB value, and it keeps the colour palette consistent.

icons.scss

By default, Harmony includes the official Codebots icon suite, Lightning Icons. Typically, icons are used as part of a :before or :after pseudo-class. A mixin to use the icons in this file is available from within the _mixins.scss file. You can append your own additional icons in the corresponding target file.

layout.scss

The _layout.scss file controls the layout utility classes which are used in conjunction with CSS grid. Notable classes include .content-flex and .content-col, which are used as wrapper elements within main content areas to ensure flex-based positioning of elements.

mixins.scss

Mixins are used with the stylesheet in order to speed up the workflow of frontend developers by allowing common CSS declarations to be repeated. Should the mixin change, any declarations using the mixin will follow suit, allowing designers to enable universal changes quickly. Each mixin is commented to show their purpose and usage.

normalise.scss

This file contains small declarations which aid in removing or formalising some of the browser-specific default styling for files. This essentially creates a ‘clean slate’ from which to style, and ensures as much consistency as possible across different browsers.

spacing.scss

The spacing file, contains variables which are used to easily set spacing for elements in the project. Each spacing value is defined by multiplying the unit number by a multiplier, following a Fibonacci sequence. The whole spacing system can be edited simply by changing the unit number.

Aside from the variables which can be used ad-hoc to control spacing, classes are also available which developers can use to quickly control the spacing between elements without ever having to touch the CSS. These classes are used to control margins of an element and have multiple variations for each size (small through to extra large).

typography.scss

The typography file is used to set the primary font family for the application, as well as the heading font family. At the beginning of the file is a section where fonts can be imported.

Also within this file is the type scale. It is based upon a Fibonacci sequence which is then applied to the multipliers. The whole spacing system can be edited simply by changing the unit number.

Default HTML selectors, like p tags, headings and form legends also have their styling set here as well as generic hyperlinks and their hover/active/focus states. Although fonts and their styles can be set on an ad-hoc basis within any given class, best practice is to add those declarations to the typography file within the relevant selector first. This is to preserve the modularity of Harmony styling.

variables.scss

The variables file contains generic variables used within the application that are not required to be within their own sheet. This include variables for responsive breakpoints and the z-index scale.

Styling an Application
Introduction to Harmony

by Tessa Mylonas

03 October 2019

Was this article helpful?

Thanks for your feedback!

If you would like to tell us more, please click on the link below to send us a message with more details.