Design Principles

The first step to designing your site is to consider a layout which best suits your content and its hierarchy. See basic homepage for homepage design and layout. 


  • Use the column control component to space out content and create various layouts of one, two, three, and four columns

see column control component


Instead of placing new content within the same column, align content by placing each section into separate individual columns.

  • Crop images to be the same ratio to maintain a unified look across columns

See cropping images


Use preset aspect ratios for each cropped image

  • Make sure column layouts are not too narrow for reading the content. 

see stacking screen sizes


Use stacking classes on smaller screens to fix columns that are too narrow for tablet and mobile screens

Ruled Lines

  • Divide content with horizontal rule component to break up sections of content (see horizontal rule) 


  • Use the thick line to divide different content (class: "ruled")
  • Use the thin line to separate related content (class: "ruled-thin")
  • For ruled lines with more space also include margins (class: "margin-top margin-bottom")

Use White Space 

  • Create more white space around elements to improve readability and create a clean look 

see applying margin and padding classes


  • use margins and paddings, sometimes with ruled lines to add white space

Mobile Testing

  • Always consider what your page layout will look like on tablet and mobile devices. 

see different screen sizes


You can adjust the order of your content from left to right for desktop and top to bottom on mobile. 

Consider heading heirarchy

  • The hierarchy of your information should be reflected in the heading styles from largest to smallest (ex. H1, H2, H3, H4, and H5) 

see Heading styles

Organize information

  • Separate content into coloured sections or outlined boxes to highlighted important information 

see coloured boxes & outlines


  • Be consistent in the content type. (ie. all important information in red block, contact info in outline)

Use Images & Banners

  • Add images for more information about your content
  • Add banner images at the top of your pages to enhance your content.

See images