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
We provide the following pre-defined classes to style your text content based on their role. Using one of these classes should suit most of your typical use cases for text content.
Use one of the following classes should you need to modify the font size of any text content. These classes are compatible with the breakpoint variants described below
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
This is best used on cards or images that you wish to have softer corners.
Medium
This is best used on cards or images that you wish to have softer corners.
Large
This is best used on cards or images that you wish to have softer corners.
XL
This is best used on cards or images that you wish to have softer corners.
XXL
This is best used on cards or images that you wish to have softer corners.
XXXL
This is best used on cards or images that you wish to have softer corners.
Extreme!
Are you sure about this? Isn’t it a bit extreme?
Full
This is more intended for images
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
Hamburger Animation
Here are some different versions of the hamburger animation. Use the class hamburger-<number> to indicate which animation you wish to choose. Developers, ensure the correct css file is included.
1.
2.
3.
4.
5.
Forms
We use Gravity Forms for easy form creation
Contact Us
"*" indicates required fields
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. 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
All around
Specific sides
Left and right
Top & bottom
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
Flexbox
Utilities for controlling flex items.
Align & Justify
Utilities for controlling how flex and grid items are positioned along a container’s cross axis.
Display
Utilities for controlling the display box type of an element.
Position
Utilities for controlling the position of an element.
Opacity
Utilities for controlling the opacity of an element.
…
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
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
1/3 on tablet+
1/4 on desktop, half tablet
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