Helper styles - Road Safety Awards

What are helper styles?

Helper styles are short CSS selectors that can be used across the blocks in our theme to add margins, padding and background colours.

They allow for fine-tuning of spacing without the need to write additional CSS and are there for anyone working on the site.

Here’s an example:

This is a block with helper styles applied.

The column has the classes bg1, ps and br2 applied.

bg1 applies the brand-1 colour as the background
ps adds padding-small to the column
br2 adds a two rem border-radius to the column

This column has:

pm – padding-medium
mtl – margin-top large
bg2 – background two

This column has:

pl – padding-large
bg3 – background three

Helper styles follow a simple set of rules.

Extra-small: xs
Small: s
Medium: m
Large: l
Extra-large: xl
Extra-extra-large: xxl

Below are the CSS rules that govern the sizes, there are two sets, one for padding an one for margins:

–padding-xs: 1rem;
–padding-s: 2rem;
–padding-m: 3rem;
–padding-l: 5rem;
–padding-xl: 8rem;
–padding-xxl: 10rem;

/* Base Margin Variables – changing these affects all the new margin sizes site-wide. */
–margin-xs: 1rem;
–margin-s: 2rem;
–margin-m: 3rem;
–margin-l: 5rem;
–margin-xl: 8rem;
–margin-xxl: 10rem;

Padding classes.

/* Padding Classes */
.plxs { padding-left: var(–padding-xs); }
.prxs { padding-right: var(–padding-xs); }
.ptxs { padding-top: var(–padding-xs); }
.pbxs { padding-bottom: var(–padding-xs); }
.pbthxs { padding-top: var(–padding-xs); padding-bottom: var(–padding-xs); }
.pxs { padding: var(–padding-xs); }

These selectors should be relatively self-explanatory: plus sets padding-left to extra-small, for example.

.pls { padding-left: var(–padding-s); }
.prs { padding-right: var(–padding-s); }
.pts { padding-top: var(–padding-s); }
.pbs { padding-bottom: var(–padding-s); }
.pbths { padding-top: var(–padding-s); padding-bottom: var(–padding-s); }
.ps { padding: var(–padding-s); }

.plm { padding-left: var(–padding-m); }
.prm { padding-right: var(–padding-m); }
.ptm { padding-top: var(–padding-m); }
.pbm { padding-bottom: var(–padding-m); }
.pbthm { padding-top: var(–padding-m); padding-bottom: var(–padding-m); }
.pm { padding: var(–padding-m); }

.pll { padding-left: var(–padding-l); }
.prl { padding-right: var(–padding-l); }
.ptl { padding-top: var(–padding-l); }
.pbl { padding-bottom: var(–padding-l); }
.pbthl { padding-top: var(–padding-l); padding-bottom: var(–padding-l); }
.pl { padding: var(–padding-l); }

.plxl { padding-left: var(–padding-xl); }
.prxl { padding-right: var(–padding-xl); }
.ptxl { padding-top: var(–padding-xl); }
.pbxl { padding-bottom: var(–padding-xl); }
.pbthxl { padding-top: var(–padding-xl); padding-bottom: var(–padding-xl); }
.pxl { padding: var(–padding-xl); }

.plxxl { padding-left: var(–padding-xxl); }
.prxxl { padding-right: var(–padding-xxl); }
.ptxxl { padding-top: var(–padding-xxl); }
.pbxxl { padding-bottom: var(–padding-xxl); }
.pbthxxl { padding-top: var(–padding-xxl); padding-bottom: var(–padding-xxl); }
.pxxl { padding: var(–padding-xxl); }

Examples of padding helper styles

bg1 pxxl

bg1 pxl

bg1 pm

Margin Classes.

/* Margin Classes */
.mlxs { margin-left: var(–margin-xs); }
.mrxs { margin-right: var(–margin-xs); }
.mtxs { margin-top: var(–margin-xs); }
.mbxs { margin-bottom: var(–margin-xs); }
.mbthxs { margin-top: var(–margin-xs); margin-bottom: var(–margin-xs); }
.mxs { margin: var(–margin-xs); }

.mls { margin-left: var(–margin-s); }
.mrs { margin-right: var(–margin-s); }
.mts { margin-top: var(–margin-s); }
.mbs { margin-bottom: var(–margin-s); }
.mbths { margin-top: var(–margin-s); margin-bottom: var(–margin-s); }
.ms { margin: var(–margin-s); }

.mlm { margin-left: var(–margin-m); }
.mrm { margin-right: var(–margin-m); }
.mtm { margin-top: var(–margin-m); }
.mbm { margin-bottom: var(–margin-m); }
.mbthm { margin-top: var(–margin-m); margin-bottom: var(–margin-m); }
.mm { margin: var(–margin-m); }

.mll { margin-left: var(–margin-l); }
.mrl { margin-right: var(–margin-l); }
.mtl { margin-top: var(–margin-l); }
.mbl { margin-bottom: var(–margin-l); }
.mbthl { margin-top: var(–margin-l); margin-bottom: var(–margin-l); }
.ml { margin: var(–margin-l); }

.mlxl { margin-left: var(–margin-xl); }
.mrxl { margin-right: var(–margin-xl); }
.mtxl { margin-top: var(–margin-xl); }
.mbxl { margin-bottom: var(–margin-xl); }
.mbthxl { margin-top: var(–margin-xl); margin-bottom: var(–margin-xl); }
.mxl { margin: var(–margin-xl); }

.mlxxl { margin-left: var(–margin-xxl); }
.mrxxl { margin-right: var(–margin-xxl); }
.mtxxl { margin-top: var(–margin-xxl); }
.mbxxl { margin-bottom: var(–margin-xxl); }
.mbthxxl { margin-top: var(–margin-xxl); margin-bottom: var(–margin-xxl); }
.mxxl { margin: var(–margin-xxl); }

Examples of margin helper styles

bg1 pm mtxl

bg1 pm mtl

bg1 pm mbxl

Border Radius

Border Radius
.br1 { border-radius: 1rem; }
.br2 { border-radius: 2rem; }
.br3 { border-radius: 3rem; }
.br4 { border-radius: 4rem; }
.br5 { border-radius: 5rem; }
.br6 { border-radius: 6rem; }
.br7 { border-radius: 7rem; }
.br8 { border-radius: 8rem; }
.br9 { border-radius: 9rem; }
.br10 { border-radius: 10rem; }

Examples of border radius helper styles

br1 bg2 pl

br5 bg2 pl

Background colours

Background Colors
.bg1 { background-color: var(–brand-1); color: #fff !important; }
.bg2 { background-color: var(–brand-2); color: #fff !important; }
.bg3 { background-color: var(–brand-3); color: #fff !important; }
.bg4 { background-color: var(–brand-4); color: #fff !important; }
.bg5 { background-color: var(–brand-5); color: #fff !important; }
.bg6 { background-color: var(–brand-6); color: #fff !important; }
.bg7 { background-color: var(–brand-7); color: #fff !important; }
.bg8 { background-color: var(–brand-8); color: #fff !important; }
.bgw { background-color: #fff; }

The above sets the background colour of the element using the brand-colour variables. Note that you may need to remove the colour element if your background colour is light.

/* Background Headings */
.bg1 h1, .bg1 h2, .bg1 h3, .bg1 h4, .bg1 h5, .bg1 h6,
.bg2 h1, .bg2 h2, .bg2 h3, .bg2 h4, .bg2 h5, .bg2 h6,
.bg3 h1, .bg3 h2, .bg3 h3, .bg3 h4, .bg3 h5, .bg3 h6,
.bg4 h1, .bg4 h2, .bg4 h3, .bg4 h4, .bg4 h5, .bg4 h6,
.bg5 h1, .bg5 h2, .bg5 h3, .bg5 h4, .bg5 h5, .bg5 h6,
.bg6 h1, .bg6 h2, .bg6 h3, .bg6 h4, .bg6 h5, .bg6 h6,
.bg7 h1, .bg7 h2, .bg7 h3, .bg7 h4, .bg7 h5, .bg7 h6,
.bg8 h1, .bg8 h2, .bg8 h3, .bg8 h4, .bg8 h5, .bg8 h6 { color: #fff !important; }

Examples of background colours

bg1 pm

bg2 pm

Boxes and tiles

.boxed { box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px; }
.boxed p:last-of-type { margin-bottom: 0; }
.boxed a.button { margin-top: 2rem; }

Examples of boxes

boxed pm

boxed pm bg2

boxed pm br2

Text colours and font sizes (use carefully)

.txt1 { color: var(–brand-1) !important; }
.txt2 { color: var(–brand-2) !important; }
.txt3 { color: var(–brand-3) !important; }
.txt4 { color: var(–brand-4) !important; }
.white-text { color: #fff !important; }

Change the text colour via CSS rather than via the colour picker (which outputs a span class.

/* Font Sizes */
.fs1 { font-size: 1rem; }
.fs2 { font-size: 2rem; }
.fs3 { font-size: 3rem; }
.fs4 { font-size: 4rem; }
.fs5 { font-size: 5rem; }
.fs6 { font-size: 6rem; }
.fs7 { font-size: 7rem; }
.fs8 { font-size: 8rem; }
.fs9 { font-size: 9rem; }
.fs10 { font-size: 10rem; }

Change the font sizes using the above.

/* Alignments */
.tac { text-align: center; }
.tal { text-align: left; }
.tar { text-align: right; }
.av, .av .grid { vertical-align: middle; align-items: center; }
.vt { vertical-align: top; }
.vb { vertical-align: bottom; }

Examples of colours and alignments

boxed pm txt1 tac

boxed pm txt2 bg1 fs3

boxed pm bg2 fs2

Grid gaps

/* Grid Gaps */
.gg0 .grid { grid-gap: 0rem; }
.gg1 .grid { grid-gap: 1rem; }
.gg2 .grid { grid-gap: 2rem; }
.gg3 .grid { grid-gap: 3rem; }
.gg4 .grid { grid-gap: 4rem; }
.gg5 .grid { grid-gap: 5rem; }
.gg6 .grid { grid-gap: 6rem; }
.gg7 .grid { grid-gap: 7rem; }
.gg8 .grid { grid-gap: 8rem; }
.gg9 .grid { grid-gap: 9rem; }
.gg10 .grid { grid-gap: 10rem; }

The grids below allow you to override the standard repeat(x, 1fr) default.

/* Grids */
.grid-1 { grid-template-columns: repeat(1, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }

Examples of grid gaps and grids

This is gg0

Note that gg (grid gap) must be applied to the section in Additional CSS classes at the bottom of the block editor.

This is gg6

This is gg8

Column spans

/* Columns spans */

When applied to a column style, these make individual columns span more than one column.

.col.col-span-2 { grid-column: span 2; }
.col.col-span-3 { grid-column: span 3; }
.col.col-span-4 { grid-column: span 4; }

@media (max-width: 576px) {
.col.col-span-2, .col.col-span-3, .col.col-span-4 { grid-column: span 1; }
}

Examples of column spans

This is col-span-3. Note that when using this, it’s best to set the column layout; this block is set to repeat( 4,1fr )

This has no col-span

This can get complex, so use it wisely. This has col-span-3

Row Span

/* Row spans */

.col.row-span-2 { grid-row: span 2; }
.col.row-span-3 { grid-row: span 3; }
.col.row-span-4 { grid-row: span 4; }

/* Row spans for smaller screens – this resets everything back to span one column on mobiles */
@media (max-width: 576px) {
.col.row-span-2, .col.row-span-3, .col.row-span-4 { grid-row: span 1; }
}

Examples of row span

This is row-span-2. Again, this block is set to 1fr 1fr 1fr in the column layout.

This is some content

This is row-span-2

This is some content

All the helper styles.

Base scale factor
:root { –scale-factor: 1; /* This is used to scale down the OLD padding and margins using media queries for smaller screens. Note the media queries at the bottom of this file */

Base Padding Variables – changing these affects all the new padding sizes site-wide.
–padding-xs: 1rem;
–padding-s: 2rem;
–padding-m: 3rem;
–padding-l: 5rem;
–padding-xl: 8rem;
–padding-xxl: 10rem;

/* Base Margin Variables – changing these affects all the new margin sizes site-wide. */
–margin-xs: 1rem;
–margin-s: 2rem;
–margin-m: 3rem;
–margin-l: 5rem;
–margin-xl: 8rem;
–margin-xxl: 10rem;

/* Media Query scaling */
–tablet-scale: 0; /* Divide by this for max-width: 768px */
–mobile-scale: 1.5; /* Divide by this for max-width: 576px */

}

/* That’s it.
* You don’t need to change anything below this line.
——————————————————————————-*/