Style Guide

Style Guide

Brand Colors

These are the core colours used by your brand on this website. These colours can be utilized through classes that are prefixed with one of the following: bg- text- border- fill- stroke-

Font Families

Excepteur amet sunt consequat enim proident labore excepteur ex ad sunt ipsum Lorem. Ipsum dolor dolore mollit est culpa mollit. Deserunt duis sit ad mollit sit dolor exercitation.

Typography & Headings

Nostrud reprehenderit sunt excepteur non. Do tempor ad consectetur aliquip laboris. Sint commodo esse nostrud ad mollit voluptate ea dolor Lorem enim adipisicing nulla. Aute duis ullamco consequat pariatur labore aute ipsum dolor et quis anim.

Buttons & Links

To create a button, you can either use the pre-made block in the block editor and add any appropriate utility class OR you may create your own using a link and adding any of the following utility classes. All buttons start with the default .button class and any modifying utility class can be added.

Iconography

To include an icon on your page you will have to follow one of 2 methods:

1: Use the Icon Block found in the block editor and select your icon from the list. Text color and size can be added as utility classes (ex: text-pc-500 icon-lg)

2: Attach your icon using a class to an inline element such as a paragraph, link, or span
Click on an icon to copy it’s class to your pasteboard.

Border Radius

We utilize Tailwind utilities for controlling the border radius of an element. We use custom classes to adjust the drop shadow, values are editable in figma and imported into the development site.

Border Radius

There are 3 main border radius sizes – sm, md, lg. Best used on cards or images that you wish to have softer corners.

Small

This is best used on cards or images that you wish to have softer corners.

.rounded-sm

Rounded

This is best used on cards or images that you wish to have softer corners.

.rounded

Medium

This is best used on cards or images that you wish to have softer corners.

.rounded-md

Large

This is best used on cards or images that you wish to have softer corners.

.rounded-lg

XL

This is best used on cards or images that you wish to have softer corners.

.rounded-xl

XXL

This is best used on cards or images that you wish to have softer corners.

.rounded-xxl

XXXL

This is best used on cards or images that you wish to have softer corners.

.rounded-xxxl

Extreme!

Are you sure about this? Isn’t it a bit extreme?

.rounded-extreme

Light Drop Shadows

Best used on light background for a soft elevation effect.

Dark Drop Shadows

Best used on dark background to make elevation effect more apparent.

Responsive Design

Responsive design is accomplished by designing by screen width.

Screen width Breakpoints are indicated below. These breakpoints can be prefixed to most classes defined in this document, using the breakpoint as the minimum screen width at which to apply the desired style property. (e.g. lg:w-6/12)

Aspect Ratio

Use aspect ratio utilities to control image dimensions

.aspect-auto

Open Laptop

.aspect-portrait

Open Laptop

.aspect-square

Open Laptop

.aspect-video

Open Laptop

Forms

We use Gravity Forms for easy form creation

Contact Us

"*" indicates required fields

Utility Classes

There are an immense amount of these at our disposal, through Tailwind (helper classes we have built into this site). Here are a few of the most common ones to get you going! Tip: They can all be used with a breakpoint utility. For example: md:items-center

Margin

Control the margin on an element using the m{t|r|b|l}-{size} utilities. The size utility is based in rems. 1= .25rem

m-2 m-4 m-6 m-8

mt-2 mr-4 mb-6 ml-8

mx-2 mx-4 my-6 my-8

Padding

Control the padding on an element using the m{t|r|b|l}-{size} utilities. The size utility is based in rems. 1= .25rem

p-2 p-4 p-6 p-8

pt-2 pr-4 pb-6 pl-8

px-2 px-4 py-6 py-8

Flexbox

Utilities for controlling flex items.

flex-row flex-row-reverse flex-col flex-col-reverse

flex-wrap flex-wrap-reverse flex-nowrap

Align & Justify

Utilities for controlling how flex and grid items are positioned along a container’s cross axis.

items-start items-end items-center items-stretch

justify-start justify-end justify-center justify-between

Display

Utilities for controlling the display box type of an element.

block inline-block inline flex

inline-flex grid none

Opacity

Utilities for controlling the opacity of an element.

opacity-0 opacity-5 opacity-10 opacity-20 opacity-30

…

opacity-100

Layout & Columns

Generally we use a 12 column grid system but have the ability to utilize a 5 column set-up for trickier layouts. The columns below list the column size that is being displayed at your current breakpoint. Resizing your window will show you the column size for other breakpoints.

Column size is indicated by w-x/2, w-x/3, w-x/4, w-x/5 or w-x/12.

Breakpoints above can be used to change margins, padding or column-width at different screen sizes

Gap

Click on a gap size below to copy to your pasteboard and view the difference

col-gap-none col-gap-sm col-gap col-gap-lg

5 column

12 column

How to apply width classes

Classes can be written or pasted within the styles entry field. Once entered the style can be easily removed or adjusted. Here are some common layouts that you can quickly apply

Half on Desktop

w-full lg:w-6/12

1/3 on tablet+

w-full md:w-4/12

1/4 on desktop, half tablet

w-full md:w-6/12 lg:w-3/12
customizing column width

Column Editing

Columns can be added, removed or duplicated easily in the block editor interface.

column interface

Column Offsets

Column offsetting can be done by applying left or right margins onto columns

Column Alignment

Column Expand