Helper Classes

• Padding
• Margins
• Borders
• Background colours
• Text colours
• Font overrides
• Radii
• Rounding
• Typefaces
• Font Sizes & Line Heights
• Positioning
• Clearing
• Text Shadow

Helper classes allow a web editor to override certain default characteristics of a site's design. You can use them to specify a button's colour, a box's background, alignment or spacing. They are flexible because they can be added when needed and don't require the site to be coded in a particular way in advance.

Since each helper class does only one thing, they can be 'stacked' to achieve a certain effect, provided they don't conflict. For instance, a link can have 'button tealbg radius nomargin' classes added to it to become a button with a teal background, with a radius and no margin. Like so:

Click me

<a href="#" class="button tealbg radius nomargin">Click me</a>

By changing the helper classes, that button can look quite different:

Click me

<a href="#" class="button bluebg yellowtext radius-16 right">Click me</a>

Helper classes can be applied to almost anything, but should be used carefully. This text has the following helper classes: 'clearboth powderbg-pale v3pad h1pad text-center blueborder radius-16'

<p class="clearboth powderbg-pale v3pad h1pad text-center blueborder rounded">Helper classes can be applied to almost anything, but should be used carefully. This text has the following helper classes: 'clearboth powderbg-pale v3pad h1pad text-center blueborder radius-16'</p>

Typically, the name of a helper class describes its function - for instance, colour classes that end in '-st' are semi-transparent. Find the classes below with what they do alongside.

Padding

<div class="row">
<div class="whiteborder bluebg nomargin"><h4 class="v6pad nomargin">v6pad</h4></div>
<div class="whiteborder bluebg nomargin"><h4 class="v5pad nomargin">v5pad</h4></div>
<div class="whiteborder bluebg nomargin"><h4 class="v4pad nomargin">v4pad</h4></div>
<div class="whiteborder bluebg nomargin"><h4 class="v3pad nomargin">v3pad</h4></div>
<div class="whiteborder bluebg nomargin"><h4 class="v2pad nomargin">v2pad</h4></div>
<div class="whiteborder bluebg nomargin"><h4 class="v1pad nomargin">v1pad</h4></div>
<div class="whiteborder bluebg nomargin"><h4 class="v6top nomargin">v6top</h4></div>
<div class="whiteborder bluebg nomargin"><h4 class="v5top nomargin">v5top</h4></div>
<div class="whiteborder bluebg nomargin"><h4 class="v4top nomargin">v4top</h4></div>
<div class="whiteborder bluebg nomargin"><h4 class="v3top nomargin">v3top</h4></div>
<div class="whiteborder bluebg nomargin"><h4 class="v2top nomargin">v2top</h4></div>
<div class="whiteborder bluebg nomargin"><h4 class="v1top nomargin">v1top</h4></div>
<div class="whiteborder bluebg nomargin"><h4 class="v6bottom nomargin">v6bottom</h4></div>
<div class="whiteborder bluebg nomargin"><h4 class="v5bottom nomargin">v5bottom</h4></div>
<div class="whiteborder bluebg nomargin"><h4 class="v4bottom nomargin">v4bottom</h4></div>
<div class="whiteborder bluebg nomargin"><h4 class="v3bottom nomargin">v3bottom</h4></div>
<div class="whiteborder bluebg nomargin"><h4 class="v2bottom nomargin">v2bottom</h4></div>
<div class="whiteborder bluebg nomargin"><h4 class="v1bottom nomargin">v1bottom</h4></div>
<div class="whiteborder bluebg nomargin"><h4 class="h6pad nomargin">h6pad-left<span class="right">right</span></h4></div>
<div class="whiteborder bluebg nomargin"><h4 class="h5pad nomargin">h5pad-left<span class="right">right</span></h4></div>
<div class="whiteborder bluebg nomargin"><h4 class="h4pad nomargin">h4pad-left<span class="right">right</span></h4></div>
<div class="whiteborder bluebg nomargin"><h4 class="h3pad nomargin">h3pad-left<span class="right">right</span></h4></div>
<div class="whiteborder bluebg nomargin"><h4 class="h2pad nomargin">h2pad-left<span class="right">right</span></h4></div>
<div class="whiteborder bluebg nomargin"><h4 class="h1pad nomargin">h1pad-left<span class="right">right</span></h4></div>
<div class="whiteborder bluebg nomargin"><h4 class="h6left nomargin">h6left</h4></div>
<div class="whiteborder bluebg nomargin"><h4 class="h5left nomargin">h5left</h4></div>
<div class="whiteborder bluebg nomargin"><h4 class="h4left nomargin">h4left</h4></div>
<div class="whiteborder bluebg nomargin"><h4 class="h3left nomargin">h3left</h4></div>
<div class="whiteborder bluebg nomargin"><h4 class="h2left nomargin">h2left</h4></div>
<div class="whiteborder bluebg nomargin"><h4 class="h1left nomargin">h1left</h4></div>
<div class="whiteborder bluebg nomargin"><h4 class="h6right nomargin text-right">h6right</h4></div>
<div class="whiteborder bluebg nomargin"><h4 class="h5right nomargin text-right">h5right</h4></div>
<div class="whiteborder bluebg nomargin"><h4 class="h4right nomargin text-right">h4right</h4></div>
<div class="whiteborder bluebg nomargin"><h4 class="h3right nomargin text-right">h3right</h4></div>
<div class="whiteborder bluebg nomargin"><h4 class="h2right nomargin text-right">h2right</h4></div>
<div class="whiteborder bluebg nomargin"><h4 class="h1right nomargin text-right">h1right</h4></div>
</div>

Margins

• m0top m0bottom m0right m0left
• m1top m1bottom m1right m1left
• m2top m2bottom m2right m2left

<ul class="row medium-block-grid-3">
<li class="blueborder nopadding"><span class="m0top m0bottom m0right m0left block">m0top m0bottom m0right m0left</span></li>
<li class="blueborder nopadding"><span class="m1top m1bottom m1right m1left block">m1top m1bottom m1right m1left</span></li>
<li class="blueborder nopadding"><span class="m2top m2bottom m2right m2left block">m2top m2bottom m2right m2left</span></li>
</ul>

Borders

You can apply borders to an entire element, or apply them to an element on a side-by-side basis. You can also override the border width if desired.

The below styles are subdued, for text boxes.

This has a teal border.

This has a grey border.

This has a blue border.

The below styles are brand colours.

This has a teal border.

This has a grey border.

This has a blue border.

This has a green border.

The below styles illustrate how to apply a border to a particular side. When applying to a single side, you must specify a width. Available widths are: 1, 2, 3.

This has a 1px teal border on the right.

This has a 2px grey border on the left.

This has a 3px blue border on the top.

This has a 2px green border on the bottom.

<p class="tealborder h1pad v1pad">This has a teal border.</p>
<p class="greyborder h1pad v1pad">This has a grey border.</p>
<p class="blueborder h1pad v1pad">This has a blue border.</p>
<p class="borderfull-teal h1pad v1pad">This has a teal border.</p>
<p class="borderfull-grey h1pad v1pad">This has a grey border.</p>
<p class="borderfull-blue h1pad v1pad">This has a blue border.</p>
<p class="borderfull-green h1pad v1pad">This has a green border.</p>
<p class="borderright-teal h1pad v1pad border-1">This has a 1px teal border on the right.</p>
<p class="borderleft-grey h1pad v1pad border-2">This has a 2px grey border on the left.</p>
<p class="bordertop-blue h1pad v1pad border-3">This has a 3px blue border on the top.</p>
<p class="borderbottom-green h1pad v1pad border-2">This has a 2px green border on the bottom.</p>

Background Colours

When using background colours, text placed on top will attempt to intelligently change colour to provide sufficient contrast for readability. This can be overriden with the text colour options.

• transbg

• yellowbg

• yellowbg-light

• cloudbg

• greybg

• greybg-light

• greybg-pale

• whitebg

• tealbg

• tealbg-dark

• tealbg-light

• tealbg-pale

• greenbg

• greenbg-dark

• greenbg-light

• bluebg

• powderbg

• powderbg-pale

• bluebg-st

• tealbg-st

• yellowbg-st

• greenbg-st

• whitebg-st

<ul class="large-block-grid-4 medium-block-grid-3 small-block-grid-2">
<li class="whiteborder transbg"><h4 class="h1pad v4top block">transbg</h4></li>
<li class="whiteborder yellowbg"><h4 class="h1pad v4top block">yellowbg</h4></li>
<li class="whiteborder yellowbg-light"><h4 class="h1pad v4top block">yellowbg-light</h4></li>
<li class="whiteborder cloudbg"><h4 class="h1pad v4top block">cloudbg</h4></li>
<li class="whiteborder greybg"><h4 class="h1pad v4top block">greybg</h4></li>
<li class="whiteborder greybg-light"><h4 class="h1pad v4top block">greybg-light</h4></li>
<li class="whiteborder greybg-pale"><h4 class="h1pad v4top block">greybg-pale</h4></li>
<li class="whiteborder whitebg"><h4 class="h1pad v4top block">whitebg</h4></li>
<li class="whiteborder tealbg"><h4 class="h1pad v4top block">tealbg</h4></li>
<li class="whiteborder tealbg-dark"><h4 class="h1pad v4top block">tealbg-dark</h4></li>
<li class="whiteborder tealbg-light"><h4 class="h1pad v4top block">tealbg-light</h4></li>
<li class="whiteborder tealbg-pale"><h4 class="h1pad v4top block">tealbg-pale</h4></li>
<li class="whiteborder greenbg"><h4 class="h1pad v4top block">greenbg</h4></li>
<li class="whiteborder greenbg-dark"><h4 class="h1pad v4top block">greenbg-dark</h4></li>
<li class="whiteborder greenbg-light"><h4 class="h1pad v4top block">greenbg-light</h4></li>
<li class="whiteborder bluebg"><h4 class="h1pad v4top block">bluebg</h4></li>
<li class="whiteborder powderbg"><h4 class="h1pad v4top block">powderbg</h4></li>
<li class="whiteborder powderbg-pale"><h4 class="h1pad v4top block">powderbg-pale</h4></li>
<li class="whiteborder bluebg-st"><h4 class="h1pad v4top block">bluebg-st</h4></li>
<li class="whiteborder tealbg-st"><h4 class="h1pad v4top block">tealbg-st</h4></li>
<li class="whiteborder yellowbg-st"><h4 class="h1pad v4top block">yellowbg-st</h4></li>
<li class="whiteborder greenbg-st"><h4 class="h1pad v4top block">greenbg-st</h4></li>
<li class="whiteborder whitebg-st"><h4 class="h1pad v4top block">whitebg-st</h4></li>
</ul>

.whitetext { color: #fff !important; } .cloudtext { color: #fff5de !important; } .greentext { color: #00b18f !important; } .bluetext { color: #003E51 !important; } .tealtext { color: #007B81 !important; } .sagetext { color: #bad1ba !important; } .orangetext { color: #F88F23 !important; } .blacktext { color: #000 !important; } .wolfpacktext { color: #F26532 !important; } .powdertext { color: #9ab7c1 !important; } .yellowtext { color: #FFCD00 !important; }

Text Colours

<div class="caption"><h4 class="bluetext">bluetext</h4></div>
<div class="caption"><h4 class="tealtext">tealtext</h4></div>
<div class="caption"><h4 class="greentext">greentext</h4></div>
<div class="caption"><h4 class="sagetext">sagetext</h4></div>
<div class="caption"><h4 class="orangetext">orangetext</h4></div>
<div class="caption"><h4 class="blacktext">blacktext</h4></div>
<div class="caption"><h4 class="wolfpacktext">wolfpacktext</h4></div>
<div class="caption bluebg"><h4 class="powdertext">powdertext</h4></div>
<div class="caption bluebg"><h4 class="yellowtext">yellowtext</h4></div>
<div class="caption tealbg"><h4 class="cloudtext">cloudtext</h4></div>
<div class="caption bluebg"><h4 class="whitetext">whitetext</h4></div>

Font Overrides

Fonts can be overridden from the default styles, if needed.

<div class="caption"><p class="size-18 serif">This is a paragraph with the style overridden - Serif.</p></div>
<div class="caption"><p class="size-18 serif-bold">This is a paragraph with the style overridden - Serif bold.</p></div>
<div class="caption"><p class="size-24 origo">This is a paragraph with the style overridden - Origo.</p></div>
<div class="caption"><h6 class="sans">This is a header with the style overridden - Sans.</h6></div>
<div class="caption"><h6 class="sans-bold">This is a header with the style overridden - Sans bold.</h6></div>

Radii

Radius can be applied to divs (boxes) or buttons. Simply add a class of 'radius' to round the corners.

<div class="row">
<div class="large-3 columns v2pad radius-16 tealbg-light">16px Radius</div>
<div class="large-3 columns v2pad radius-12 tealbg-light">12px Radius</div>
<div class="large-3 columns v2pad radius tealbg-light">8px (normal) Radius</div>
<div class="large-3 columns v2pad radius-4 tealbg-light">4px Radius</div>
</div>

Rounding

Images can be rounded by adding a class of 'rounded'. It works best on square images otherwise you end up with an oval, which is not the intended effect.

<img src="https://placeimg.com/400/400/animals" alt="rounded image" class="rounded">

Typefaces

.sans

.sans-bold

Font Sizes & Line Heights

You can override font sizes in steps of 2px from 12px-24px and steps of 4px from 24px-64px. Additionally, you can set your font to 72px. This should not be used regularly, only for special circumstances.

This is a regular paragraph.

This is a regular paragraph - size-12.

This is a regular paragraph - size-14.

This is a regular paragraph - size-16.

This is a regular paragraph - size-18.

This is a regular paragraph - size-20.

This is a regular paragraph - size-22.

This is a regular paragraph - size-24.

This is a regular paragraph - size-28.

This is a regular paragraph - size-32.

This is a regular paragraph - size-36.

This is a regular paragraph - size-40.

This is a regular paragraph - size-44.

This is a regular paragraph - size-48.

This is a regular paragraph - size-52.

This is a regular paragraph - size-56.

This is a regular paragraph - size-60.

This is a regular paragraph - size-64.

This is a regular paragraph - size-72.

<p>This is a regular paragraph.</p>
<p class="size-12">This is a regular paragraph - size-12.</p>
<p class="size-14">This is a regular paragraph - size-14.</p>
<p class="size-16">This is a regular paragraph - size-16.</p>
<p class="size-18">This is a regular paragraph - size-18.</p>
<p class="size-20">This is a regular paragraph - size-20.</p>
<p class="size-22">This is a regular paragraph - size-22.</p>
<p class="size-24">This is a regular paragraph - size-24.</p>
<p class="size-28">This is a regular paragraph - size-28.</p>
<p class="size-32">This is a regular paragraph - size-32.</p>
<p class="size-36">This is a regular paragraph - size-36.</p>
<p class="size-40">This is a regular paragraph - size-40.</p>
<p class="size-44">This is a regular paragraph - size-44.</p>
<p class="size-48">This is a regular paragraph - size-48.</p>
<p class="size-52">This is a regular paragraph - size-52.</p>
<p class="size-56">This is a regular paragraph - size-56.</p>
<p class="size-60">This is a regular paragraph - size-60.</p>
<p class="size-64">This is a regular paragraph - size-64.</p>
<p class="size-72">This is a regular paragraph - size-72.</p>

You can also adjust the default spacing between lines in a similar fashion.

This is a regular paragraph.

This is a regular paragraph - line height lh-12.

This is a regular paragraph - line height lh-14.

This is a regular paragraph - line height lh-16.

This is a regular paragraph - line height lh-18.

This is a regular paragraph - line height lh-20.

This is a regular paragraph - line height lh-22.

This is a regular paragraph - line height lh-24.

This is a regular paragraph - line height lh-32.

This is a regular paragraph - line height lh-36.

This is a regular paragraph - line height lh-48.

This is a regular paragraph - line height lh-60.

This is a regular paragraph - line height lh-72.

<p>This is a regular paragraph.</p>
<p class="lh-12">This is a regular paragraph - line height lh-12.</p>
<p class="lh-14">This is a regular paragraph - line height lh-14.</p>
<p class="lh-16">This is a regular paragraph - line height lh-16.</p>
<p class="lh-18">This is a regular paragraph - line height lh-18.</p>
<p class="lh-20">This is a regular paragraph - line height lh-20.</p>
<p class="lh-22">This is a regular paragraph - line height lh-22.</p>
<p class="lh-24">This is a regular paragraph - line height lh-24.</p>
<p class="lh-32">This is a regular paragraph - line height lh-32.</p>
<p class="lh-36">This is a regular paragraph - line height lh-36.</p>
<p class="lh-48">This is a regular paragraph - line height lh-48.</p>
<p class="lh-60">This is a regular paragraph - line height lh-60.</p>
<p class="lh-72">This is a regular paragraph - line height lh-72.</p>

Positioning

To position an element to the left or right on a page, you add a class that "floats" that object right or left.

Since content aligns to the left by default, when using a 'left' class, subsequent content will align to that object. When using a 'right' class, the content will wrap around that object.

<div class="row">
<div class="left">
<img src="https://placeimg.com/200/200/animals" alt="image">
<div class="caption tealbg">
<p>This box is floated left.</p>
</div>
</div>
<p>This paragraph is not floated left.<br>
But here, to Alice's great surprise, the Duchess's voice died away...</p>
</div>

You can also move content to the left and right within a single row, without using columns. Since some items (like paragraphs are considered "block-level" elements, they have to be forced to display inline to achieve the effect we want.

<div class="row">
<div class="left">
<img src="https://placeimg.com/200/200/animals" alt="image">
<div class="caption tealbg">
<p>This box is floated left.</p>
</div>
</div>
<p class="inline">This is not floated left.</p>
<div class="right">
<img src="https://placeimg.com/200/200/animals" alt="image">
<div class="caption tealbg">
<p>This box is floated right.</p>
</div>
</div>
<p class="inline right">This is floated right.</p>
<p><strong>This paragraph is not floated, and is inserted after the right-hand box and paragraph.</strong><br>
But here, to Alice's great surprise, the Duchess's voice died away...</p>
</div>

Clearing

In order to move content away from floated elements, you have to "clear" them: you can use 'clearleft', 'clearright' or 'clearboth'.

<div class="large-4 columns radius tealbg caption">
<p>This is a paragraph in a column.</p>
</div>
<div class="left greybg radius caption">
<p>This is in a box floated left.</p>
</div>
<div class="tealbg-pale radius caption">
<p>This isn't cleared or floated.</p>
</div>
<div class="clearleft tealbg-light radius caption">
<p>This is in a box with a clearleft class.</p>
</div>

Using 'clearright' is useful when the right-floated element is very large.

<div class="large-6 right greybg radius caption">
<p>This is in a box floated right.<br>
But here, to Alice's great surprise, the Duchess's voice died away...</p>
</div>
<div class="tealbg radius caption">
<p>This isn't cleared.</p>
</div>
<div class="clearright tealbg-light radius caption">
<p>This is in a box with a clearright class.</p>
</div>

<div class="row">
<div class="left">
<img src="https://placeimg.com/200/200/animals" alt="image">
<div class="caption tealbg">
<p>This box is floated left.</p>
</div>
</div>
<p class="inline">This is not floated left.</p>
<div class="right">
<img src="https://placeimg.com/200/200/animals" alt="image">
<div class="caption tealbg">
<p>This box is floated right.</p>
</div>
</div>
<p class="inline right">This is floated right.</p>
<p class="clearboth"><strong>This has a clearboth class, and is inserted after the right-hand box and paragraph.</strong><br>
Minions ipsum tank yuuu! Ti aamoo! Ti Aaaaaah butt chasy me want bananaaa!</p>
</div>

Text Shadow

This is a useful functionality if you need to put text on top of an image background.

The above text is hard to read; a subtle shadow will help. There are four classes, each making the shadow progressively darker:

• textshadow-quarter
• textshadow-half
• textshadow-threequarter
• textshadow-full

Use the following code, changing to the class that represents the opacity you prefer.

<div style="background-image: url('/AssetFactory.aspx?did=39276'); background-size: cover; background-repeat: none;" class="v3pad">
<h3 class="yellowtext v5top origo size-52 textshadow-quarter">quarter - Carve your path with confidence.</h3>
</div>