Style Guide & Class System
This style guide is to help you understand what makes up the layout and design of this website, as well as outline the classes used for the key components you'll use to make changes or additions.
Text
Text styles have been set using the Body (All Pages) HTML Tag. However, I've also applied these same styles to classes.
This is so that you can replicate the style of a heading on another element that doesn't natively have those styles.
For example, if you wanted to style a call-to-action heading the same as the H1, as you can only have one H1 on each page.
Extra Large
Nulla quis lorem ut libero malesuada feugiat.
Nulla quis lorem ut libero malesuada feugiat.
Nulla quis lorem ut libero malesuada feugiat.
Nulla quis lorem ut libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta.
Nulla quis lorem ut libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta.
Nulla quis lorem ut libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
- Vestibulum ac diam sit amet quam vehicula elementum eget malesuada sed sit amet dui.
- Donec rutrum congue leo eget malesuada.
- Quisque velit nisi, pretium ut lacinia in, elementum id enim.
- Vestibulum ac diam sit amet quam vehicula elementum eget malesuada sed sit amet dui.
- Donec rutrum congue leo eget malesuada.
- Quisque velit nisi, pretium ut lacinia in, elementum id enim.
"Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus."
Rich Text
Rich Text elements allow you to style their content independantly from the rest of the website using a Next selector.
For more information, visit Webflow University.
This is a Rich Text Element
Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec sollicitudin molestie malesuada.
Nulla quis lorem ut libero malesuada feugiat.
Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.
Pellentesque in ipsum id orci porta dapibus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.
Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Donec rutrum congue leo eget malesuada.
Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
Donec sollicitudin molestie malesuada. Nulla porttitor accumsan tincidunt.
Proin eget tortor risus.
Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat.
- Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.
- Nulla porttitor accumsan tincidunt.
- Quisque velit nisi, pretium ut lacinia in, elementum id enim.
- Proin eget tortor risus.
- Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.
- Nulla porttitor accumsan tincidunt.
Buttons
These are the different styles of buttons currently used throughout the website.
You can edit them here to make changes across the site.
Colors
I've setup a basic color palette to make updating the site as easy as possible. You can learn how to edit the color swatches here.
Forms
I've setup the forms to have the Form class, which is a 2 column grid that allows you to have both half-width and full-width fields within a Field Wrap.
Grids
Grids are generally used for basic layouts, however, you can put a grid within another grid cell, this allows for more complex designs.
Grids are by default set to wrap into a single column grid on Tablet. However, if you'd like to prevent this, I suggest creating a combo class such as 2 Grid Tab 2 Grid
Columns
Columns are extremely useful for more complex layouts.
To use them, you'll need a container element with the class 12 Columns.
Then for each column, you'll need a child element with the class Column along with the size of that column, for example 7 Column.
Columns don't all immediately change to full width on Tablet, like grid cells do. Resize your screen to have a look at how they respond.
Other cool stuff!
Here's just a few notes on how to use some other useful classes.
This is some centered text
The Text Center class can be applied to a parent element or any text element.
It's been set to align left on Mobile Landscape (and Mobile Portrait by inheritance).
This is some more centered text
The Center Content class is similar to Text Center, however, instead of only aligning text to the center, it center aligns all content both horizontally and vertically.
Just like the Text Center class, it also aligns left on Mobile Landscape.
Paragraphs, titles and other elements have a predefined margin applied to them, so that they space appropriately throughout the website. However, sometimes you may have a Paragraph as the last element in a div and want there to be no space below it. That's where the No Margin global class comes in. Apply it to anything that has a margin you'd like removed and it'll do it's job well!
Spacers
Spacers are useful for adding white space to your layout, without creating custom classes for spacing. Although, the more you use; the greater the webpage will be which can hinder performance and load times.