CLF4 guidelines

The CLF4 guidelines below are created to help with creating consistency across your website. These should be used with the layout examples. If you have questions please reach out to sfucm@sfu.ca.

Design

Layouts

For best success, design 1-3 column layouts with the narrowest column no less than 33% wide, especially on pages with side navigation. Even on a larger screen size, four column layouts tend to make text illegible and appear disorderly.

When designing layouts, always consider the content and how it will respond on smaller screen sizes.

Avoid excessive header line breaks and difficult to read paragraph rags. Don’t typeset narrow columns when using a page layout with side navigation.

White space

White space, or negative space, is not undesigned space, but rather a vital element to any design. Think of it as the structure that supports the visibility of your content.

Creating white space in AEM requires some effort and consistency:

Column control

Creating rows with column control components is the first step in creating structure to any layout. Ensure that all content is contained within a column control.

Staggered layout

Flowing a section of text from column to column without the use of rows is good for pages with more density such as blogs, papers or articles. Although all layouts use a grid system, staggered content (headers, subheads and paragraphs) will flow from column to column within a single column control.

Grid layout

While staggered content has a role, consider flowing content using rows when scanability of a page is of high importance and content per section is roughly equally in length. Create rows using multiple column controls and flow content from columns to rows.

Grid layouts are more effective with added white space. Use two column controls to create two rows. Add CSS class “margin-top-bottom” to column control.

Spacing vs no spacing:

Column control components provide an option to turn off the default spacing between the gutters and the column control below. Turning off the default spacing seem contrary to the goal of creating white space; when used properly, it provides design flexibility and modern layouts. It is commonly used with banners, grey and red backgrounds with "full width” enabled.  

You many need to add back padding to certain components when no spacing creates an undesired look. For example, if you have an image on the left, and text on the right, no spacing will remove the gutter between the two. Adding padding will separate the text from the images edge.

Use two column controls to create two rows. Add CSS class “margin-top". After enabling no spacing in a column control, add "pad-all" to the text components.

Horizontal rules

Typically horizontal rules are used with paragraphs or headers, but they also can be used to create visible sections on a page. Use a dedicated column control component with added margins to expand the white space around it.

Horizontal rule classes:

  • ruled
  • ruled-below
  • ruled-thin
  • ruled-below-thin

Use a dedicated column control, add CSS class “rule” and “margin-top-bottom” for additional white space.

Margins

Margins are the space around the outside of an element. In CLF4, margin classes increase the margin by 50px. We recommend applying CSS classes to the top and/or bottom of each column control to build white space to around your content.

Margin classes:

  • margin-all
  • margin-top
  • margin-bottom
  • margin-top-bottom
  • margin-left
  • margin-right
  • margin-left-right

Margin moves elements away, while padding shrinks the size of content inside an element.

Padding

Padding increases the space between the element’s (invisible) border and content. It is useful for when you don’t want your content to touch another element when default spacing is turned off or if additional white space is desired. Padding of 50px can be applied to 1-4 sides of most components in AEM.

When adding padding, consider the responsiveness of the page. Avoid applying padding on components in narrow columns. This can lead to awkwardly thin columns of texts on smaller screen sizes.

Padding classes:

  • pad-all
  • pad-top
  • pad-bottom
  • pad-top-bottom
  • pad-left
  • pad-right
  • pad-left-right

Additional classes:

These styles add 50px of space on all sides of the component and/or column control.

  • block grey
  • block red
  • outline

Various padding classes applied to image component.

Background colour

Red block

Big, bold red backgrounds are a core element of the SFU brand that sets us apart from other post-secondary institutions. Apply the CSS classes “red block” to a column control or to a component to feature content, promote a campaign or highlight an action.

Red blocks should be used sparingly for effectiveness and accessibility. Consider centre alignment of text when the block is full width, one column. The content should be brief with one key task. Use one call-to-action button and never hyperlink paragraph text.

Grey block

Use the CSS class “grey block” to create section on a page or soft promote content. Grey blocks should be used moderately.

Consistency

Visual consistency starts with content writing. Consider all the pages of the site when writing, rather than just the page currently being developed. Always keep in mind that your website is one tactic out of several, so be consistent in the language used across your print, socials and digital platforms.

The SFU brand offers enough flexibility for unique layout and design systems for your unit. Nonetheless, content and visual consistency is vital for a user to successfully navigate your site. Each page should be in family with the next.

Create a visual system or a set of rules for particular type of content. For example:

Images:

  • Determine a ratio for all overlay banners and supporting images
  • Decide whether overlay banners are always in black and white and supporting images are in colour
  • Will captions always accompany supporting images?
  • Will headers always appear before or after an image?

Horizontal rules:

  • Should sections on a page be separated by a horizontal rule?
  • Will margins be applied to the top or bottom only?
  • Will thin horizontal rules only be applied to footer or aside content?

Refer to the all the principles of this guideline when developing a system. Consistency around header and text lengths, banners, margins, grids, background colours, etc., does not only benefit the user. With systems in place and decisions already made, adding content will be straight-forward and efficient.