REM

All elements (with very few exceptions) makes use of the REM unit. This unit is based on the font size of the root HTML element, in this case 16px.

Based on this root font size, the design of this template uses a 16 (or 8) pt grid which is super simple to change and/or further develop.

Content wrappers & flex gap

This template makes heavily use of the flex gap CSS attribute and the box model. This is implemented through classes of "Content Wrapper", pre-defined classes having different flex gap spacing sizes.

Content wrappers are categorized into XS to XL, all having different flex gaps between 0.5 REM to 5 REM. These can be used together with the global class "Vertical", which changes the flex direction of the wrapper from horizontal to vertical.

Content wrappers also uses different widths. These can be applied on a content wrapper using a combo class of 25%, 50% or 75% referring to the max-width of the wrapper itself.

Content wrapper styles can be added or modified in the style guide.

Image wrappers

Since a lot of quite large images are used in this design, I felt like some type of skeleton loader was needed. Therefore, most large image elements uses a wrapper class of "Image Wrapper Large", "Image Wrapper Medium" or "Image Wrapper Small", in which an image element with the class of "Image Absolute" is placed.

The "Image Wrapper" has a background of a light gray color and a set height, making it visible for a split second before the absolute positioned image itself is fully loaded.

Image wrapper styles can be added or modified in the style guide.

Sections

A common pattern found in this design is a total margin of 10 REM (160px) between sections. The class of "Section" therefore defaults to 5 REM top margin and 5 REM bottom margin.

However, the "Section" class also defaults to a 10 REM flex gap, making it easy to space out multiple elements consistently using multiple containers inside a single section.

Typography

All headings has default sizes and margins, something that's needed for the rich text elements. However, headings used in the design itself uses pre-made classes of "Display", categorized into sizes of XXS to XXL. These are defaulted to 0 margin and are instead used together with content wrappers for appropriate spacing.

Paragraphs also uses a default margin, while paragraphs used in the design itself uses a class of "Paragraph" defaulted to 0 margin.

Typography styles can be added or modified in the style guide.

Consistent nav-hero-section spacing

In order to get a consistent spacing between the navigation, hero section and any section following the hero, a combo class of "Section After Hero" can be applied to any section following the hero.