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.
button
Types
outlined
inverted
Colors
primary
secondary
tertiary
quaternary
Sizes
tag
button-sm
button
button-lg
Icons (see Iconography section below for full list)
licon-arrow-right
icon-arrow-right
icon-checkmark
Links (drop the .button class – Add direct to an anchor)
licon-arrow-right
icon-arrow-right
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.
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
.aspect-square
.aspect-box
.aspect-postcard
.aspect-video
.aspect-box-portrait
.aspect-postcard-portrait
.aspect-video-portrait
Forms
We use Gravity Forms for easy form creation
Contact Us
Contact Us
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. It no breakpoint specified it will affect all screen sizes.
md: Tablet (672px) and up
lg: Desktop (1024px) and up
xl: Widescreen (1344px) and up
xxl: Extra Wide (1644px)
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-8Padding
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-8Flexbox
Utilities for controlling flex items.
flex-row flex-row-reverse flex-col flex-col-reverse flex-wrap flex-wrap-reverse flex-nowrapAlign & 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-betweenDisplay
Utilities for controlling the display box type of an element.
block inline-block inline flex inline-flex grid nonePosition
Utilities for controlling the position of an element.
absolute fixed sticky top-0 bottom-0 left-0 right-0Opacity
Utilities for controlling the opacity of an element.
opacity-0 opacity-5 opacity-10 opacity-20 opacity-30…
opacity-100Layout & 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-lg5 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/121/3 on tablet+
w-full md:w-4/121/4 on desktop, half tablet
w-full md:w-6/12 lg:w-3/12
Column Editing
Columns can be added, removed or duplicated easily in the block editor interface.
Column Offsets
Column offsetting can be done by applying left or right margins onto columns