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 heavy use of the flex gap CSS attribute and the box model. In some cases, especially for generic elements / layouts, "Content Wrapper" classes are used. These are pre-defined classes with varying flex gap settings.

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 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.

Button icon SVG embeds

Icons used in buttons are embedded SVG's. This is because we want to change the color of both the button text and button icon when hovering the button. This is accomplished using the SVG attribute "currentColor" in the SVG's "fill" property.

The SVG code of an icon can be extracted using the export function in your design tool of choice. Otherwise you're able to use a code (text) editor such as VS Code or an online SVG code exporting tool such as Editsvgcode.com.