CSS Style Guide

Contents

The Baseline

Rather than use arbitrary amounts in pixels, the spacing between lines (the ‘baseline’) is used to govern all the spacing in the Resolve to Save Lives site. 

As well as the line height (or ‘leading’) it’s the padding inside containers, spacing in between elements and column/row gaps in grids and flexboxes.  It’s set as a CSS variable, var(--baseline), and can be used in Elementor by selecting the custom value (pencil icon) in fields.

Values are in rem‘s to be harmonious with the text size. The only exception is with line-height itself, which is always written ‘unitless’ to make it proportional to the text size.

There are then sizes based off this to give smaller or larger sizes:

--baseline Baseline 1.6rem
--baseline-x2 Double Baseline 3.2rem
--baseline-x3 Triple Baseline 4.8rem
--baseline--1 Negative Baseline (-1) -1.6rem
--baseline-half or --grid Half Baseline 0.8rem

Negative Baseline can be useful in layouts to close up gaps, such as a specific element in a grid layout that you want to ignore the grid gap.

Typography

<p>

Body text is set to use the browser default (16px) at 1rem. Headings are then sized up from that using a scale of 1.414.

Body Text
<h1>

Heading One

Red eyebrow is added automatically
<h1 class="longform">

Heading One

Longform heading one - for when longer titles are needed
<h2>

Heading Two

Red eyebrow is added automatically
<h3>

Heading Three

<h4>

Heading Four

Same size as Body Text
<h5> or .subtext
Heading Five
Used for content such as job titles
<blockquote> 
        <p>…</p>
        <cite>
          <strong>…</strong>
        …
        </cite>
</blockquote>

We're given many opportunities to interact with other countries and immediately put into action the skills we've learned.

Dr. Elizabeth Nzioka Epidemiologist, PHEOC, Ministry of Health, Kenya
Hanging quote marks are added automatically. Using <strong> styles the persons name.
<blockquote class="fr"> 
        <p>…</p>
        <cite>
          <strong>…</strong>
        …
        </cite>
</blockquote>

Nous avons de nombreuses occasions d'interagir avec d'autres pays et de mettre immédiatement en pratique les compétences que nous avons acquises.

Dr. Elizabeth Nzioka Épidémiologiste, PHEOC, Ministère de la Santé, Kenya
Adding the class fr uses guillemets instead of latin quotes.
<blockquote class="noquotes"> 
        <p>…</p>
</blockquote>

We're given many opportunities to interact with other countries and immediately put into action the skills we've learned.

Quotation marks can hidden by adding a class of noquotes to either the blockquote or parent widget in Elementor. Useful for highlighting text that isn't a direct quote.
<ul class="checklist">
  • We achieved 50% faster
  • We improved things by and amazing 66%
  • Using 30% fewer things
Adding a class of checklist to a unordered list shows tick icons instead of bullets.

Links

There are four types of links, and their styling changes slightly depending on context. In all cases, the color var(--rtsl-light-purple-1) is used as a visual cue.

1. Inline Links

The simplest of these are inline links which appear within the body of text. These should always describe where the link goes (no ‘read more’ or ‘click here’), underlined for usability, and never set to open in a new tab.

2. ‘More’ Links

Sometimes, a link will be a complete sentence on it’s own line, such as in a list of ‘Further Reading’.  An underline is potentially too visually noisy here, applying a class of more_link to the widget block will style all links without the underline. A chevron arrow is added at the end to signify that it’s a link:

3. Download Links

If a link is to a download (instead of a webpage), such as a PDF, applying a class of download to either the widget block containing the link, or directly to the link tag, will style the link with a download arrow. Where possible, show the file format and size after the link:

One Page Factsheet (PDF 142k)

4. Card Links

When an entire card or banner is a link, applying a class of card to link tag will style it as a white rounded card with the onward arrow and hover transitions, This also works on Elementor Containers, if the HTML tag is set to ‘A (Link)’ under Layout > Additional Options.

Layout

Resolve to Save Lives uses an 11 column CSS grid when the browser window is 999px or more wide. The outer columns (1 & 11) are flexible margins that constrain the width of the layout once it’s wider than 82rem. By including this area in the grid, we can specify content to align with the edges. You do not have to use the classes however – you can use a container set to ‘boxed’ with 9 equal columns grid layout, and it will be sized exactly the same. However, Elementor’s UI does not provide access to all of CSS Grid’s capabilities (such as column spanning, or specifying the same row to overlay elements). By using classes, we can create layouts quickly that are consistent across the site. To start, select the main container in Elementor:
  • In Layout > change Content Width to ‘full-width‘ instead of ‘boxed’ (Leave the layout method as Flex)
  • Under Advanced > CSS Classes, add the class main-grid
Then to lay out elements inside the container, add the class (col-), followed by the start column (1-11), and how many columns it should span (1-11). So to start at column 2, and span 3 columns, you would use the class col-2-3.

Example Grid configurations:

				
					col-1-11
				
			
				
					col-2-9
				
			
				
					col-2-3 
				
			
				
					col-4-5
				
			
				
					col-9-2

				
			
				
					col-2-3

				
			
				
					col-5-3

				
			
				
					col-8-3

				
			
				
					col-1-1
				
			
				
					col-2-1

				
			
				
					col-3-1

				
			
				
					col-4-1

				
			
				
					col-5-1

				
			
				
					col-6-1

				
			
				
					col-7-1

				
			
				
					col-8-1

				
			
				
					col-9-1

				
			
				
					col-10-1

				
			
				
					col-11-1

				
			
				
					col-2-2

				
			
				
					col-5-6

				
			
				
					col-4-2

				
			
				
					col-6-7
				
			
				
					col-1-7
				
			
				
					col-1-7
				
			

There are additional classes that can add more functionality:

Patterns

Standard pattern for Headers with Hero images. Both the image and the container for the text have a class of row-1, so that they appear on the same row, overlapping.

Main Heading level one

Longer page summary text with a class of intro

Not everything needs to be created using classes – some pages will require custom styling that won’t apply any where else.

Animations

Simple, subtle animations can be added to elements using the following classes:

Base class + Animation name + Duration* + Delay**
animate pop
pulse
slide-left
slide-right
slide-up
fade-in
rotate-left
rotate-right dash
duration-60s
duration-30s
duration-20s
duration-10s
duration-5s

*By default, animations are set to last .5 seconds

delay-1
delay-2
delay-3
delay-4
delay-5
delay-6
delay-7
delay-8
delay-9
delay-1s

**By default, animations have no delay.
Use this to stagger animations.
Times without the 's' for seconds are in milliseconds

So, if you wanted an element to fade in over 5 seconds, but delay it’s start by .2 seconds, you would add the following classes:

animate fade-in duration-5s delay-2

If a user has the prefers reduced motion setting on, the animation is set not to load, and the opacity of the element is set to 1 to ensure it’s visible.

Note: that in order to trigger animations on scroll, you will need add a shortcode block to the page, and add the shortcode:

This will add a javascript that detects when an element with a class of animate appears within the top 75% of the window, and adds a class of start to trigger the animation. The class isn't removed until refresh, so that the animation only plays once.