Ben Childs
Mar 4 · 9 min read
Photo by Sai Kiran Anagani on Unsplash

Having just completed a short piece of prototyping work on a public sector project for Hippo Digital, it occurred to me that further information might be helpful to encourage designers to maximise the SASS features built into the GOV.UK Prototype Kit. SASS is a well-established (possibly now ‘essential’) part of many developers’ front-end toolkits but I think for designers using front-end technologies for prototyping, SASS provides significant benefits over CSS that should feel natural to designers. This article highlights some of the SASS features available to designers using the GOV.UK Prototype Kit specifically.

As designers we frequently use rules and metrics, either internalised or in the form of documented styleguides, to design consistent and cohesive experiences. I’ve been fortunate to work with some brilliant developers over many digital projects but even the best ones sometimes fail to notice design inconsistencies to the (fanatical) level of detail that a good designer will do. It’s programmed into our designer DNA to notice that the spacing below one box is very fractionally larger than another or that a paragraph’s line-spacing doesn’t feel cohesive with the vertical spacing of other text. As many digital designers come to use front-end technologies in their design process, they soon understand that the ‘spacing below a box’ is probably an issue with the padding-bottom or margin-bottom value in the CSS. As designers we’re used to monitoring such consistencies regarding spacing, colour values, text sizes, etc., and once we appreciate how CSS can be used to implement these visual attributes the natural next step is to consider, “How can I ensure my carefully established design rules are applied consistently within my CSS?”. I believe SASS provides an excellent solution.

SASS declares itself as “CSS with superpowers”. SASS is a CSS pre-processor which basically means that it takes input that is mostly pure CSS but that can be extended with functions and variables, and then processes this mix of pure CSS and extended features to produce a CSS file that can be interpreted by a browser. One of the huge benefits, especially for designers who may be new to coding in front-end technologies, is that SASS is predominantly written in CSS. It doesn’t feel like learning a new language but rather learning how to extend the underlying CSS language that you already understand. Many popular front-end frameworks (such as Bootstrap or Foundation) are built with SASS in mind and the GOV.UK Prototype Kit is no exception. In practice therefore, designers using the kit for prototyping barely even need to understand what the extended features of SASS are doing… but they do need to know what features are available! The main documentation for the kit focuses on getting it setup and on examples of frequent uses, but when I built a previous prototype using the kit I frequently found myself thinking “I wish there was a SASS function in the kit to do this thing like there is in Foundation”. So when I recently built a new prototype from the ground up, I decided it was worth digging into the GOV.UK Prototype Kit code and uncovering what SASS features are available. There are probably other features that I have missed or that will be added in future but I believe the following ones are the most helpful initially to designers creating GOV.UK Design System compliant designs using the prototyping kit.

How to use this article

I have included basic code snippets below which can be copy/pasted but there’s no ‘syntax highlighting’ and no demonstration of the actual outcomes. Therefore, I’ve built a supporting page demonstrating the below information to better effect (using the GOV.UK Prototype Kit of course). However, as it’s hosted on a free Heroku account, I can’t guarantee the page will always be available (depending whether I’ve hit my monthly limits).

Examples: https://bcuk-govuk-proto.herokuapp.com/sass-for-designers

Note: The SASS examples below only describe the main point. Using them ‘as is’ in your code will demonstrate the point but may look slightly different. To get exactly the same results, examine the SASS/CSS in the supporting page linked above.

Colour

This is an easy place to start as it’s the most explicitly referenced in the documentation. The colour guidelines describe the GOV.UK colour palette and reference the two methods for using colours in SASS — which are predefined variables and a colour lookup function.

Predefined variables

SASS variables enable you to write $variable-name in your code and when the CSS is produced the variable will be replaced with its value (Note: In this case, because all the colour variables are predefined in the kit, you won’t want to define or manipulate the value of the variable but in other scenarios you typically might do). As a means of ensuring colour consistency therefore, these variables are an obvious starting point. For example, to show an ugly paragraph in GOV.UK ‘error red’ text with a GOV.UK ‘brand blue’ border, the SASS could use predefined variables:

p.red-with-blue-border {
color: $govuk-error-colour;
border: 1px solid $govuk-brand-colour;
}

Colour lookup function

The GOV.UK Design System provides a colour guide and palette to ensure consistent brand identity and experience across government digital services. Whilst predefined variables are provided for key colours like standard text, link colour, error colour, etc., the wider colour palette is accessed using a SASS function. The name of the required colour is passed into the function, which looks up and returns the relevant Hex value. For example, to show an ugly list of alternating orange and turquoise coloured items using the govuk-colour() function:

ul.list-with-alternate-colour-items {
li {
color: govuk-colour("orange");
&:nth-child(even) {
color: govuk-colour("turquoise");
}
}
}

Custom tinting and shading functions

Furthermore, the GOV.UK guidelines also advise that if one of the brand colours needs to be lightened or darkened, a tint (or shade) of 25% or 50% should be used. As the resulting Hex colours are not provided for these tints, there’s a significant chance that if these are used then inconsistencies could occur. However, SASS provides a mix() function, so we can use it to build a custom SASS function that takes a Hex colour and lightens or darkens it by 25% or 50%, ensuring that SASS does all the hard work and maintains consistency. (Note: Normally we might create only one function whereby the ‘amount’ of tint might be passed to the function as a second value but in this case we will constrain to either 25% or 50% by providing a separate function for each amount e.g. tint-25, tint-50, etc).

The following code defining the relevant functions is not part of the default Prototype Kit — the functions must be added to the SASS file before they can be used (Note: Usually custom functions are defined towards the top of the SASS file in their own section).

// Lighten a colour by 25% or 50%
// ------------------------------
// Accepts a single colour in Hex format and returns the colour in Hex format mixed with 25% or 50% GOV.UK white
@function tint-25($color) {
@return mix(#ffffff, $color, 25%);
}
@function tint-50($color) {
@return mix(#ffffff, $color, 50%);
}
// Darken a colour by 25% or 50%
// -----------------------------
// Accepts a single colour in Hex format and returns the colour in Hex format mixed with 25% or 50% GOV.UK black
@function shade-25($color) {
@return mix(#0b0c0c, $color, 25%);
}
@function shade-50($color) {
@return mix(#0b0c0c, $color, 50%);
}

We need to pass a Hex value to the tint and shade functions but because the govuk-colour() function returns a Hex value, we can (and should) use that to pass a value directly into the tint-xx() and shade-xx() functions. For example, to create a dark turquoise box with large white text:

div.dark-turquoise-box {
background-color: shade-25(govuk-colour("turquoise"));
color: govuk-color("white");
font-size: 1.5rem;
}

Similarly, we can use the functions to create gradual or repeating colour variations:

ul.list-with-gradual-tints-and-shades {
li {
color: govuk-colour("black");
&:nth-child(3n+1) {
background-color: govuk-colour("yellow");
}
&:nth-child(3n+2) {
background-color: tint-25(govuk-colour("yellow"));
}
&:nth-child(3n+3) {
background-color: tint-50(govuk-colour("yellow"));
}
}
}

Margin and padding spacing

A crucial aspect to achieving design consistency is maintaining visual cohesion with an underlying grid, such as described in the GOV.UK spacing documentation. When describing elements in CSS (or SASS), along with an element’s width it’s typically the margin and padding that have the most impact on conforming to a perceived grid. Additionally, whilst the spacing used for an element should be consistent across desktop usage it’s often preferable to describe different spacing for tablet and mobile. Modern CSS provides for this through media queries but these can feel relatively cumbersome and overly involved to use for prototyping.

The GOV.UK documentation defines a responsive spacing scale that enables designers to quickly create prototypes that are optimised for different platforms and conform to the GOV.UK Design System. Default classes are provided for use within HTML where an element’s margin or padding can be defined, such as:

<p class="govuk-!-margin-9">I have the biggest margin!</p>

However, this adds clutter to your HTML and can’t be used within SASS. It also uses the HTML to define the visual appearance and preferably all appearance criteria should be defined in our CSS. Therefore, to utilise the spacing rules in our SASS, the prototyping kit provides a special kind of function (known as a SASS mixin). Essentially, a mixin can be regarded as a pre-defined function described elsewhere in the code and therefore in addition to calling the function and passing it parameters, the function is preceded by the include command.

The two functions provided by the GOV.UK Prototype Kit are govuk-responsive-padding() and govuk-responsive-margin(), where each takes a first parameter relating to the spacing scale and an optional second parameter that defines where it is applied. These functions together provide flexibility and strict conformance across different devices, whilst ensuring the appearance is described within the CSS (via SASS). The following examples demonstrate some basic usage:

p.box-with-big-padding {
@include govuk-responsive-padding(8);
}
p.box-with-no-bottom-margin {
@include govuk-responsive-margin(0, "bottom");
}
p.box-with-padding-above-and-below {
@include govuk-responsive-padding(3, "top");
@include govuk-responsive-padding(3, "bottom");
}

Sizing and measurements

When designing digital interfaces, the default unit of measurement is the pixel. Pixels are also used for sizing and measurement in CSS, such as font-size: 16px or padding: 20px. This is great for easily migrating design measurements to code but due to issues such as browser rendering/scaling differences and accessibility issues. Therefore, for many years best practice suggested front-end developers describe CSS measurements in a relative unit such as the em which calculates a size relative to the element’s parent. However, in practice the em can get pretty confusing and can easily lead to defining multiple specific rules for the same element depending on where it’s being displayed. Therefore, thankfully, more recent best practice leads us to use the rem unit of measurement which is still relative but whereby everything is sized relative to the root (HTML) element.

From a design perspective though, relative sizing is still a slight headache and can easily introduce inconsistencies because digital designs are usually defined in pixels. Once more though, because SASS can do calculations, the govuk-px-to-rem() function provides an easy way to define elements in pixels but have the final CSS produced in relative units. For example, to show a ‘rem-measured’ hint text boxout with equal padding:

div.hint-text-boxout {
padding: govuk-px-to-rem(16);
font-size: govuk-px-to-rem(16);
h4 {
padding-right: govuk-px-to-rem(4);
font-weight: bold;
}
}

Conclusion

SASS provides designers with an excellent opportunity to quickly and consistently translate their designs as prototypes, and thereby more quickly test, review and iterate them. The examples above are a limited selection of some of the features available to designers in the GOV.UK Prototype Kit, and are representative of similar features in other front-end frameworks. The examples are by no means conclusive nor intended to be applied as they are, but hopefully they provide some insight into how learning a few relatively straightforward SASS methods offers considerable enhancements over standard CSS.

Ben Childs

Written by

UX & Interaction Designer. Data visualiser. WordPress dev. MA Digital Sociology student. Sketcher. Cyclist.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade