CSS Style Guide
A detailed guide to all the RTSL site styles and how to use them
Spacing
The goal of this guide is to have a living reference document to refer to when creating new pages within the RTSL framework, and avoid reinventing the wheel when styles already exist.
It roughly follows the structure of Atomic Design, — starting with the smallest elements like spacing and type sizing (atoms), components like link styles (molecules) and finally the largest layout blocks (organisms).
If you have any questions, please contact [email protected].
All spacing is based on the unit-less line-height of 1.6, to make it proportional to the text size, specified in rem units. With the browser default font size of 1rem this makes the regular spacing 1.6rem (1rem ⨉ 1.6 = 1.6rem). It’s used as a CSS variable, var(--space-r), and can be used in Elementor by selecting the custom value (pencil icon) in fields.
There are then sizes based off this to give a scale of sizes:
--space-xs |
XS: Extra small space | 0.4rem | |
--space-s |
S: Small space | 0.8rem | |
--space-r |
R: Regular space | 1.6rem | |
--space-m |
M: Medium space | 3.2rem | |
--space-l |
L: Large space | 4.8rem | |
--space--r |
-R: Negative Regular Space | -1.6rem |
Negative regular space can be useful in grid layouts to close up gaps, such as a specific element that you want to ignore the grid gap for a specific element.
Note: Utopia is being considered for use in the future.
Typescales
The typescale is the amount at which text is sized up or down from the 1rem base size.
- For viewport widths up to 767px (Mobile) the scale is
1.2. This means that a heading 3 is 1.25x the base font size, heading 2 is 1.25 x 1.25x and so on. - For viewports wider than 768px (Tablets and Desktop) the scale increases to
1.333.
This means that type sizes have a hierarchical relationship, and reduces the amount of scaling for mobile.
--type-step-4 |
Type Step 4 |
--type-step-3 |
Type Step 3 |
--type-step-2 |
Type Step 2 |
--type-step-1 |
Type Step 1 |
--type-step-0 |
Type Step 0 |
--type-step--1 |
Type Step -1 |
Note: Utopia is being considered for use in the future.
Typefaces
RTSL uses just two typefaces. These are set in the main CSS file, so you shouldn’t need to import them or specify them in Elementor.
Public Sans
Used for all body copy.
RTSL Spline Sans
For all headings. This is a modified version of Spline Sans that reduces the size of the punctuation marks. If you need to edit the font further, you can use this glyphs file.
Typography
Always use semantic HTML, and the site styles will apply accordingly. These are extended with classes to achieve specific formatting. Avoid using Elementor’s styling options, as this adds extra page weight, and makes it tricky to maintain consistency.
<p> |
Body text is set to use Public Sans at the browser default (16px) at 1rem. Headings are then sized up from that using the type scale. |
Body Text |
<h1> |
Heading level one |
Red eyebrow is added automatically. Note that headings should be in sentence case |
<h2> |
Heading level two |
|
<h3> or .intro |
Heading level three |
|
<h4> |
Heading level four |
Same size as Body Text |
<h5> or .subtext |
Heading Five |
Used for content such as job titles |
|
|
Hanging quote marks are added automatically around the <p> tag. Using <strong> styles the persons name within <cite>. |
|
|
Adding the class fr uses guillemets instead of latin quotes. |
|
|
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. |
|
We're given many opportunities to interact with other countries and immediately put into action the skills we've learned. |
Intended for emphasising the start of paragraphs. Add a class bold-start to a text block so that instances of bold text are coloured RTSL Purple. |
<ul class="checklist"> |
|
Adding a class of checklist to a unordered list shows tick icons instead of bullets. |
<ul class="bullets"> |
|
Adding a class of bullets to an unordered list increases the standard size of the bullets. |
<ol class="footnotes"> |
|
Adding a class of footnotes to an ordered list adds sutble number styling. |
<button> ,<input type="submit"> or<a href="" class="button">…</a> |
All three types of button have identical styling, with hover and focus transition. | |
<a href="" class="button cta">…</a> |
Call to action button | Use only once per page - has hover transition |
<a href="" class="button download-button">…</a> |
Download button link | For when links need to be styled as download buttons - has hover transition |
<input type="text" placeholder="Text field"> |
Standard text field |
Links
There are four levels of links, depending on their context. In all cases, the color var(--rtsl-link) is used as a visual cue, along with the onward arrow on larger contexts.
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
For when the link is a complete sentence on it’s own line, such as ‘Read more’. Applying a class of more-link to the parent will style all links without the underline, adding the onward arrow instead:
<p class="more-link"><a href="…">…</a></p>
4. Download Links
A variation of a more link to signify a download (instead of a webpage), Apply a class of download to either the parent, or directly to the link tag. Where possible, add the file format and size in brackets. If you italicise this information it will automatically be formatted like this:
<a class="download" href="…" download="">
One Page Factsheet
<em>(PDF 142k)</em>
</a>
4. Card Links
When an entire section (such as a banner) is a link, apply a class of card to link tag and it 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. (more detail on card elements to come)
<a href="…" class="card">
<div class="summary">
…
</div>
<figure><img src="…" /></figure>
</a>
Layout
Resolve to Save Lives uses an 11 column CSS grid when the browser window is 999px or more wide. Smaller windows get a single, centred column with a max-width of 35rem.
The outer columns (1 & 11) are flexible margins that constrain the width of the layout once it’s wider than the maximum width (82rem). By including this area in the grid, we can specify content to align with the edges (such as full width sections with a different background colour).
While you can also use an Elementor container set to ‘boxed’ with a 9 equal column grid, it 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, using the minimal amount of containers.
To start, select the parent 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 relevant class, using this formula:
col-[start column]-[number of columns to span]. So if we applied the classcol-2-3, the element would start on column 2 and span 3 columns. - If you don’t specify a column, it will automatically use
col-4-4(off centre column suitable for text). - You can also use the grid to affect nested elements, by adding the class
subgrid. Note that with CSS subgrid the column numbering starts at 1, regardless of the parent column.
You can also copy and paste existing Elementor blocks for ease – see layout patterns below (view on desktop to see the columns properly).
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-6
col-1-7
col-1-7
Layout Patterns
These layout patterns can be copied and pasted to other pages within the Elementor UI.
Hero Blocks
Hero blocks all follow the same pattern of headings on the left, image on the right. There are four variations: Standard, Priority page, Strategy Page, and Regional Office.
Images use a ratio of 3:2, and use the Featured Image. An animated mask is applied dynamically (with the current exception of Priority pages), but must use the shortcode instead of an Elementor Image block.
Standard hero heading
Standard hero subheading, set as a H3
Priority Page Hero
The mask for the hero image on these pages is not yet animated. Planned for the future.
Priority hero Heading
Priority hero subheading, set as a H3
Strategy Page Hero
This hero includes three extra text blocks for: Challenge, Solution, Impact. The breadcrumbs only show the parent priority.
The challenge
Challenge text
The solution
Solution text
The impact
Impact text.
Regional Office Hero
As the image is contained in an abstracted country shape, the image ratio is 1:1. The image is shown in a faded circle behind the shape.
RTSL: Regional office location
Regional office subheading, set as H3
Image caption.
Level two headings are full width (col-2-9)
Level three headings are indented
Body text is generally laid out in col-3-5. This asymmetric position gives a more interesting layout than a common centred column.
Zig-zag image & text
This pattern flows blocks of images & text from side side in a zig-zag, to create a more interesting layout.
We work with global and local partners to develop cardiovascular disease prevention programs based on current evidence-based practices that address the needs of the population and the health system. Our global partners include the World Health Organization, John’s Hopkins University, the Global Health Advocacy Incubator, the U.S. Centers for Disease Control and Prevention and the Pan American Health Organization.
Sliders
Not quite a carousel, these allow banner type boxed content to be scrolled horizontally. Ideally a maximum of 3 cards. If you add the class reverse to the card, it will use white text and arrow, allowing you to use a dark background.
6 step guide to scale up
Is your country, district or program ready to take control of high blood pressure?
It’s time to go digital
Design the best digital tool to support your hypertension (or other NCD) management program—with step-by-step guidance from the world’s leading experts.
Putting life-saving blood pressure control medication within reach
Our report on strategies to improve access to medicines to treat high blood pressure in low- and middle-income countries
Animations
Simple, subtle animations can be added to elements using the following classes:
| Base class | + Animation name | + Duration* | + Delay** |
|---|---|---|---|
animate |
poppulseslide-leftslide-rightslide-upfade-inrotate-leftrotate-right
dash |
duration-60sduration-30sduration-20sduration-10sduration-5s
*By default, animations are set to last .5 seconds |
delay-1delay-2delay-3delay-4delay-5delay-6delay-7delay-8delay-9delay-1s
**By default, animations have no delay. |
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:
[ wpcode id="15676" ]This adds javascript to detect 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.
Example with ‘pop’ animation and increasing delay on each subsequent item:
