Website Components

Font Samples

SVGs (not images)

Image Sizes

Image size recommendations are tied to responsive breakpoints and container widths. For any given image, the largest image “required” is one that fills the parent container at the parent’s largest width. For images that are not full-width, the largest container width is the top of the sm breakpoint (“tablet”). If you are unsure – uploading an image at 1400px and at the desired aspect ratio is probably fine, because smaller scaled images are automatically created.

Aspect Ratio Calculator

Special Use Images

Websites typically include two types of “hidden” images – social share/search engine result images and favicon images.

Featured Image

When Yoast is added to WordPress, the featured image is also used as the suggested social share image. The critical things to know here:

• We can suggest a social share image, but we cannot force the image
• This image is often, but not always, used for a search engine search result
• Using a letterbox canvas (16:9 – 1200 x 675) with a square composition will generally create the best experience across the largest range of websites
• A featured image should be added to every piece of content

Favicons

All websites should include a range of favicon sizes and favicon naming conventions. These images should be (and have been) included in the “root” directory. E.g. /favicon-96×96.png.

Here is a sample of your favicons.

“Column Classes” – Base 12

Simplified base 12 – look at the 12 digits of your 4 fingers …. that’s base 12! Fun fact – you can easily count to 150 on your fingers, once you learn base 12 counting.

A basic example of columns via Base 12 classes …. If you want 4 columns, that is just like your 4 fingers. Each finger has 3 digits. So, we need a width that is 3 out of 12. W3_12 or col-3 works.

Flex

Flex is the simplest method of creating equal columns. Columns with the class “flex-equal” are always equal widths based on the number of columns and break to 100% for mobile.

Advanced Responsive Columns

The basic “break to 100% for mobile” approach to responsive is generally good. Sometimes, it is better to fine-tune when items break, and what width they break to. A basic example – 4 columns (lg) become 2 rows of 2 (md), and then a single column (100% at sm).

Fixing “Broken” Responsive Columns

The above example works well, until you have columns of unequal heights (which is common). The following columns do not work “as expected” due to how this method works. Items “pull” to the left, but can’t go “up and over” an element next to them. The column “hangs up” on the item next to it, which is taller.

Columns in Columns

One solution is columns in columns. If the columns fall into “neat groups”, this method works incredibly well.

Columns with Offsets

Columns with odd numbers (at a given break point) create another problem – the ugly odd row. The solution here is to add offsets. In this basic example, we start 5 across (lg), then go 50/50 and offset the odd class (md), and then break to 100% (sm). Note – offsets work with the same percentage width, or base 12 classes. E.g. OS6_12 or OS50

Columns with Offsets and Variable Height Dividers

Sometimes columns do not fall into “neat groups”. This problem occurs when we want to go from 5 across, to 3 | 2 across, then 2 | 2 | 1 and finally all 100% width. In these cases, adding margin-bottom through responsive (or a responsive height divider) will fix our “going up and over” problem.

Flex “Grids”

Aspect Ratios

Aspect ratios can be used to create equal-height items.

Aspect ratios can also create responsive containers or dividers (vertical space), as seen below, bordered in light grey.

Common Aspect Ratios

Height via Font Size

Rather than setting height in px for each breakpoint, we can set the height based on em, and a font size. Because a responsive font size framework is already in place, we automatically have a responsive height framework too. See the spacer below, bordered in light grey.