Colour Palette

The following colours are the only ones that should appear on the Liberal Party of Canada website.

Main Colours

	Main Red #d71920		Main Grey #58595b
	Dark Red 1 #b11116		Light Grey 1 #808286
	Dark Red 2 #8b0304		Light Grey 2 #a7a9ac
	Dark Red 3 #670000		Light Grey 3 #d1d3d4
	Dark Red 4 #3c0000		Light Grey 4 #f1f2f2

Accent Colours

	Light Blue #0babe3		Green #6ebf52
	Dark Blue #3d4f5d		Yellow #f9b717

Typography

Headlines

The header tags not only confer special styling on these elements, they aid in SEO and are essential for accessibility. The cascading headers should be used as needed. <h1></h1> tags should be used for the title of the page, or major sections in a document. <h2></h2> for top-level sub headings and so on. In general, you shouldn’t add extra styling on headlines unless using one of the specified classes.

Paragraphs

There are two standard types of paragraphs for body text, the lead paragraph and the normal paragraph. WordPress automatically adds paragraph tags, <p></p> around loose (untagged) text in the editor, so you don’t need to worry about specifically assigning those.

Helper Classes

There are also several helper classes that can be added to headlines and paragraphs by adding class="className" within the opening headline tag, e.g. <h3 class="className">. You can add two classes with a space, like this <p class="className1 className2">

Special Classes

There are also several special paragraph styles that can be used for specific instances. These may be helpful for both blog posts or pages.

Text-alignment classes

Text-alignment classes can be added to the majority of html tags, which aligns the text within that element, including right, left (default), center and justified.

Dramatic Quotes

To produce a dramatic quote effect, wrap the quote in paragraph tags with the class “quote,” <p class="quote"></p>. There are two additional options that can be added, for both the speaker and their accreditation, using nestled span tags within the paragraph tags. This paragraph class is often used with the helper class text-center.

Blockquotes

Blockquotes are a special type of paragraph tag that are meant to be used within the body of page text to bring attention to a paragraph of text. Text in blockquotes should not appear elsewhere in the story or page (unlike pullquotes, below).

Pullquotes

Pullquotes are called using a paragraph class and should be used to reinforce a particular quote or line from the story or page. These, unlike blockquotes, should also appear elsewhere, usually further down, in the natural flow of the article.

Links

Links are created using the <a> tag. The target of the link is defined by the href="". The open and close tags wrap the desired hyperlink text, <a href="">Link Text</a>. Call-to-action buttons can be called by adding additional classes to the <a> tag (see below).

Thumbnail Images

Images can be floated within the body of text, either to the right or left, using the following classes.

Note that when first inserting an image from the WordPress Media Library, there are a lot of the code that can be removed. It can be made as simple as the examples below:

Videos

Videos embed codes from Youtube should always be wrapped in a <div> tag with a videoWrapper class to make the video full-width and responsive. The Youtube embed code can be found under the share link below the video.

Tables & Lists

There are several types of tables and lists that can be used. They are summarized by example below.

Normal Tables

Pricing Tables

Although it looks like a table, it actually an unordered list!

Other Unordered Lists

Although it looks like a table, it actually an unordered list!

Page Structure

Grid System

The Liberal Party of Canada website is built on a “grid” foundation, which means that there are easy to use HTML tags that can add structure, in the form of columns, to a basic page. It’s how the sidebar is positioned on this page, and how the HTML code and Rendered HTML cards are positioned beside each other.

The basics are presented below, but for more details, check out the Foundation doc on the topic.

The grid is 12 across and can be used to split page contents into columns of various size:

This grid is also responsive, and each of the grid columns shrinks as the window shrinks. Also, at certain “breakpoints” these columns instead become stacked rows.

Window larger than breakpoint:

Window smaller than breakpoint:

The breakpoints are dubbed small, medium and large, and loosely correspond to mobile phone, tablet and monitor, respectively. These are used when calling the columns themselves via HTML. Two small-6 columns will each maintain a width of half the page, no matter the window size. Alternatively, large-6 columns will each maintain a width of 50% until the large breakpoint is reached, below which they will become two full-width rows instead.

Below is the required HTML to introduce a row of columns into a page or post. Resize the window to see the difference between the large, medium and small columns.