Template styles

Style guide

Retrouver ici la base des styles utilisés pour uniformiser les styles de mise en page et de typographie

Structure

Container

.Container-full / max-width: 100%
.Container / max-width: 80rem = 1280px
.Container-md / max-width: 64rem = 1024px
.Container-md / max-width: 48rem = 768px

max-width

mw-xxs  / max-width-xxs
.mw-xs  / max-width-xs
.mw-sm  / max-width-sm
.mw-md  / max-width-md
.mw-lg  / max-width-lg
.mw-xl  / max-width-xl
.mw-xxl   / max-width-xxl

Section background

Spacing

.m-0 / margin-0
0rem
.m-ty / margin-tiny
.125rem
.m-xxs / margin-xxsmall
.25rem
.m-xs / margin-xsmall
.5rem
.m-sm / margin-small
1rem
.m-md / margin-medium
2rem
.m-lg  / margin-large
3rem
.m-xl / margin-xlarge
4rem
.m-xxl / margin-xxlarge
5rem
.m-h / margin-huge
6rem
.m-xh / margin-xhuge
8rem
.m-xxh / margin-xxhuge
12rem
.margin-custom1
Xrem Xrem Xrem Xrem
.margin-custom2
Xrem Xrem Xrem Xrem
.margin-custom3
Xrem Xrem Xrem Xrem
.mt-(size) / margin-top
.mr-(size) / margin-right
mb-(size) / margin-bottom
.ml-(size) / margin-left
.mx-(size) / margin-horizontal
.my-(size) / margin-vertical

padding

.p-0 / padding-0
.p-tiny / padding-tiny
.p-xxs / padding-xxsmall
p.xs / padding-xsmall
.p-sm / padding-small
.p-md / padding-medium
.p-lg / padding-large
.p-xl / padding-xlarge
.p-xxl / padding-xxlarge
.p-h / padding-huge
.p-xh / padding-xhuge
.p-xxh / padding-xxhuge
padding-custom1
padding-custom2
padding-custom3
.pt-(size) / padding-top
.pr-(size) / padding-right
.pb-(size) / padding-bottom
.pl-(size) / padding-left
.px-(size) / padding-horizontal
.py-(size) /  padding-vertical

Typographie

Heading tags

H1 Display

H1

H2

H3

H4

H5
H6

Text size

Font-size xxxl
Font-size xxl
Font-size xl
Font-size lg
Font-size md
Font-size sm
Font-size xs
Font-size tiny

Text weight

Font-weight-bolder
Font-weight-bold
Font-weight-semibold
Font-weight-medium
Font-weight-regular
Font-weight-light
Font-weight-light

Text align

text-align: left
text-align: center
text-align: right

Paragraph

Paragraphe Large / 18px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraphe Regular / 16px
‍Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraphe Small / 14px
‍Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text style

Text link
Text italic
Text uppercase
Text underline
Text line-through
Text nowrap

Rich text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
This is a block quote

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

This is a link inside of a rich text

  • List item
  • List item
  • List item
Placeholder graphic
Image inside of a richtext
Normal buttons
.button.button-secondary.button.button-big
Inverted buttons
.button.invert-colors.button-secondary.invert-colors

Images

Aspect ratio

.img .ratio 1:1
.img .ratio 1:1 .rounded
.img .ratio 1:1 .circle
.img .ratio 16:9
.img .ratio 16:9
.img .ratio 4:3
.img .ratio 4:3 .portrait