Sizing/Spacing

Edit the variables within the variables panel to the change affect the entire library. Here you can also gain a quick overview of all the variables you are currently using in your project.

Containers

class

container-small

class

container-medium

class

container-large

Padding Section

class

padding-section-small

class

padding-section-medium

class

padding-section-large

Padding Size

class

padding-global

class

padding-0

class

padding-tiny

class

padding-xxsmall

class

padding-xsmall

class

padding-small

class

padding-medium

class

padding-large

class

padding-xlarge

class

padding-xxlarge

class

padding-huge

class

padding-xhuge

Margin Size

class

margin-0

class

margin-tiny

class

margin-xxsmall

class

margin-xsmall

class

margin-small

class

margin-medium

class

margin-large

class

margin-xlarge

class

margin-xxlarge

class

margin-huge

class

margin-xhuge

Max Width

class

max-width-full

class

max-width-full-tablet

class

max-width-full-mobile-landscape

class

max-width-full-mobile-portrait

class

max-width-large

class

max-width-medium

class

max-width-small

Gap/Column

variable

gap-col-xxsmall

variable

gap-col-xsmall

variable

gap-col-small

variable

gap-col-medium

variable

gap-col-large

variable

gap-col-xlarge

variable

gap-col-xxlarge

variable

gap-col-grid

Gap/Row

variable

gap-row-xxsmall

variable

gap-row-xsmall

variable

gap-row-small

variable

gap-row-medium

variable

gap-row-large

variable

gap-row-xlarge

variable

gap-row-xxlarge

variable

gap-row-grid