Dev Guide

Resources

This site uses:

DEV AND CMS guidelines https://shorturl.at/WCqTW

Section Naming Convention https://tmpww.sharepoint.com/sites/delivery/SitePages/Section-Naming-Convention.aspx

Flexspan

Hereaus CMS Guide https://shorturl.at/WCqTW

Variables

$xxs 320px

$xs 360px

$s 550px

$sm 600px

$m 768px

$ml 960px

$l 1000px

$xl 1200px

$xxl 1400px

→ All should be converted in REM - Usage: $m: rem(768);

Spacing utilities

Margin Top and Bottom

.margin-y-auto .margin-y-0 .margin-y-1 .margin-y-2 .margin-y-3 .margin-y-4 .margin-y-5

Margin Left and Right

.margin-x-auto .margin-x-0 .margin-x-1 .margin-x-2 .margin-x-3 .margin-x-4 .margin-x-5

Margin Top

.margin-t-auto .margin-t-0 .margin-t-1 .margin-t-2 .margin-t-3 .margin-t-4 .margin-t-5

Margin Bottom

.margin-b-auto .margin-b-0 .margin-b-1 .margin-b-2 .margin-b-3 .margin-b-4 .margin-b-5

Margin Right

.margin-r-auto .margin-r-0 .margin-r-1 .margin-r-2 .margin-r-3 .margin-r-4 .margin-r-5

Margin Left

.margin-l-auto .margin-l-0 .margin-l-1 .margin-l-2 .margin-l-3 .margin-l-4 .margin-l-5

Padding Top and Bottom

.padding-y-0 .padding-y-1 .padding-y-2 .padding-y-3 .padding-y-4 .padding-y-5

Padding Left and Right

.padding-x-0 .padding-x-1 .padding-x-2 .padding-x-3 .padding-x-4 .padding-x-5

Padding Top

.padding-t-0 .padding-t-1 .padding-t-2 .padding-t-3 .padding-t-4 .padding-t-5

Padding Bottom

.padding-b-0 .padding-b-1 .padding-b-2 .padding-b-3 .padding-b-4 .padding-b-5

Padding Right

.padding-r-0 .padding-r-1 .padding-r-2 .padding-r-3 .padding-r-4 .padding-r-5

Padding Left

.padding-l-0 .padding-l-1 .padding-l-2 .padding-l-3 .padding-l-4 .padding-l-5

→ Breakpoint Usage with Margin and Padding Mixins

The generated classes can be used for responsive design by combining them with breakpoints. For instance, to apply a top margin of 2rem on larger screens, use the class
.margin-t-2 for default styling and .margin-t-2-m (or similar, depending on your breakpoint) for medium screens and above only

.margin-t-2

.margin-t-2-md

Generic utilities

.background-text

.background-red

.background-white

.background-black

.background-blue

.background-softBlue

.background-paleBlue

.background-lightBlue

.background-deepBlue

.background-darkBlue

.text-primary

.text-secondary

.text-primary-contrast

.text-accent

.text-text

.text-red

.text-white

.text-black

.text-blue

.text-softBlue

.text-paleBlue

.text-lightBlue

.text-deepBlue

.text-darkBlue

.border-primary

.border-secondary

.border-primary-contrast

.border-accent

.border-text

.border-red

.border-white

.border-black

.border-blue

.border-softBlue

.border-paleBlue

.border-lightBlue

.border-deepBlue

.border-darkBlue

.border-bottom-primary

.border-bottom-secondary

.border-bottom-primary-contrast

.border-bottom-accent

.border-bottom-text

.border-bottom-red

.border-bottom-white

.border-bottom-black

.border-bottom-blue

.border-bottom-softBlue

.border-bottom-paleBlue

.border-bottom-lightBlue

.border-bottom-deepBlue

.border-bottom-darkBlue

→ Use container mixim to generate any container width;

.container-1440

.container-large

.container-medium

.container-1000

.container-600