SCSS

Breakpoints

ZiON is using Media Queries with superpowers.

Default breakpoints for zion, inspired by bootstrap 4:

$mq-breakpoints: (
    mobile:  544px,
    tablet:  768px,
    desktop: 992px,
    wide:    1200px
);

Read MQ documentation for using mq()

Layout helpers:

• .full-height Make the section full height for desktop devices
• .v-center Make the inner content centered
• .perpendicular Rotate the object 90deg

Padding Helpers:

• .breathing-padding Give a padding around the block
• .section-padding-x2 Give a larger padding to top and bottom
• .section-padding-half Give samaller padding to top and bottom
• .p-b-0 No padding to bottom
• .p-t-0 No padding to top
• .p-l-0 No padding to left
• .p-r-0 No padding to right
• .p-a-0 No padding

Margin Helpers:

• .spacer Give a margin to the top
• .spacer-x2 Give a larger margin to top
• .spacer-half Give samaller margin to top
• .p-b-0 No margin to bottom
• .p-t-0 No margin to top
• .p-l-0 No margin to left
• .p-r-0 No margin to right
• .p-a-0 No margin

Bacground Colors Helpers:

• .background-primary
• .background-gray-0
• .background-gray-1
• .background-gray-2

Font Colors Helpers:

• .color-primary
• .color-gray-0
• .color-gray-1
• .color-gray-2

Style Helpers:

• .box-shadow-wide
• .radius-primary
• .radius-capsule
• .radius-square
• .radius-round
• .opacity-75

Typography Helpers:

• .font-heading
• .font-italic
• .font-bold
• .l-h-1 line height 100%
• .l-h-2 line height 125%

Font size Helpers:

• .fs--1
• .fs-0
• .fs-1
• .fs-2
• .fs-3
• .fs-4
• .fs-5
• .fs-6
• .fs-7
• .fs-8