Utilities

Gralig provides few utility classes for help you a little bit faster development.

Text

Class Name	Contains
`.gra-center-text`	`text-align: center`
`.gra-right-text`	`text-align: right`
`.gra-left-text`	`text-align: left`
`.gra-bold-text`	`text-weight: bold`
`.gra-normal-text`	`text-weight: normal`
`.gra-thin-text`	`text-weight: lighter`

Display

Class Name	Contains
`.gra-none`	`display: none`
`.gra-block`	`display: block`
`.gra-inline`	`display: inline`
`.gra-inline-block`	`display: inline-block`
`.gra-flex`	`display: flex`
`.gra-flex-col`	`flex-direction: column`
`.gra-flex-row`	`flex-direction: row`
`.gra-flex-ai-c`	`align-items: center`
`.gra-flex-ai-start`	`align-items: flex-start`
`.gra-flex-ai-end`	`align-items: flex-end`
`.gra-flex-ai-sb`	`align-items: space-between`
`.gra-flex-jc-c`	`justify-content: center`
`.gra-flex-jc-start`	`justify-content: flex-start`
`.gra-flex-jc-end`	`justify-content: flex-end`

Position

Class Name	Contains
`.gra-absolute`	`position: absolute`
`.gra-relative`	`position: relative`
`.gra-fixed`	`position: fixed`
`.gra-sticky`	`position: sticky`

Spacing

Paddings

Class Name	Contains
`.gra-pd-left-xxs`	`padding-left: $space-xxs`
`.gra-pd-left-xs`	`padding-left: $space-xs`
`.gra-pd-left-s`	`padding-left: $space-s`
`.gra-pd-left-m`	`padding-left: $space-m`
`.gra-pd-left-l`	`padding-left: $space-l`
`.gra-pd-left-xl`	`padding-left: $space-xl`
`.gra-pd-left-xxl`	`padding-left: $space-xxl`
`.gra-pd-right-xxs`	`padding-right: $space-xxs`
`.gra-pd-right-xs`	`padding-right: $space-xs`
`.gra-pd-right-s`	`padding-right: $space-s`
`.gra-pd-right-m`	`padding-right: $space-m`
`.gra-pd-right-l`	`padding-right: $space-l`
`.gra-pd-right-xl`	`padding-right: $space-xl`
`.gra-pd-right-xxl`	`padding-right: $space-xxl`
`.gra-pd-top-xxs`	`padding-top: $space-xxs`
`.gra-pd-top-xs`	`padding-top: $space-xs`
`.gra-pd-top-s`	`padding-top: $space-s`
`.gra-pd-top-m`	`padding-top: $space-m`
`.gra-pd-top-l`	`padding-top: $space-l`
`.gra-pd-top-xl`	`padding-top: $space-xl`
`.gra-pd-top-xxl`	`padding-top: $space-xxl`
`.gra-pd-bottom-xxs`	`padding-bottom: $space-xxs`
`.gra-pd-bottom-xs`	`padding-bottom: $space-xs`
`.gra-pd-bottom-s`	`padding-bottom: $space-s`
`.gra-pd-bottom-m`	`padding-bottom: $space-m`
`.gra-pd-bottom-l`	`padding-bottom: $space-l`
`.gra-pd-bottom-xl`	`padding-bottom: $space-xl`
`.gra-pd-bottom-xxl`	`padding-bottom: $space-xxl`
`.gra-pd-inline-xxs`	`padding-left: $space-xxs` `padding-right: $space-xxs`
`.gra-pd-inline-xs`	`padding-left: $space-xs` `padding-right: $space-xs`
`.gra-pd-inline-s`	`padding-left: $space-s` `padding-right: $space-s`
`.gra-pd-inline-m`	`padding-left: $space-m` `padding-right: $space-m`
`.gra-pd-inline-l`	`padding-left: $space-l` `padding-right: $space-l`
`.gra-pd-inline-xl`	`padding-left: $space-xl` `padding-right: $space-xl`
`.gra-pd-inline-xxl`	`padding-left: $space-xxl` `padding-right: $space-xxl`
`.gra-pd-block-xxs`	`padding-top: $space-xxs` `padding-bottom: $space-xxs`
`.gra-pd-block-xs`	`padding-top: $space-xs` `padding-bottom: $space-xs`
`.gra-pd-block-s`	`padding-top: $space-s` `padding-bottom: $space-s`
`.gra-pd-block-m`	`padding-top: $space-m` `padding-bottom: $space-m`
`.gra-pd-block-l`	`padding-top: $space-l` `padding-bottom: $space-l`
`.gra-pd-block-xl`	`padding-top: $space-xl` `padding-bottom: $space-xl`
`.gra-pd-block-xxl`	`padding-top: $space-xxl` `padding-bottom: $space-xxl`
`.gra-pd-all-xxs`	`padding-top: $space-xxs` `padding-right: $space-xxs` `padding-bottom: $space-xxs` `padding-left: $space-xxs`
`.gra-pd-all-xs`	`padding-top: $space-xs` `padding-right: $space-xs` `padding-bottom: $space-xs` `padding-left: $space-xs`
`.gra-pd-all-s`	`padding-top: $space-s` `padding-right: $space-s` `padding-bottom: $space-s` `padding-left: $space-s`
`.gra-pd-all-m`	`padding-top: $space-m` `padding-right: $space-m` `padding-bottom: $space-m` `padding-left: $space-m`
`.gra-pd-all-l`	`padding-top: $space-l` `padding-right: $space-l` `padding-bottom: $space-l` `padding-left: $space-l`
`.gra-pd-all-xl`	`padding-top: $space-xl` `padding-right: $space-xl` `padding-bottom: $space-xl` `padding-left: $space-xl`
`.gra-pd-all-xxl`	`padding-top: $space-xxl` `padding-right: $space-xxl` `padding-bottom: $space-xxl` `padding-left: $space-xxl`

Margins

Class Name	Contains
`.gra-mg-left-xxs`	`margin-left: $space-xxs`
`.gra-mg-left-xs`	`margin-left: $space-xs`
`.gra-mg-left-s`	`margin-left: $space-s`
`.gra-mg-left-m`	`margin-left: $space-m`
`.gra-mg-left-l`	`margin-left: $space-l`
`.gra-mg-left-xl`	`margin-left: $space-xl`
`.gra-mg-left-xxl`	`margin-left: $space-xxl`
`.gra-mg-right-xxs`	`margin-right: $space-xxs`
`.gra-mg-right-xs`	`margin-right: $space-xs`
`.gra-mg-right-s`	`margin-right: $space-s`
`.gra-mg-right-m`	`margin-right: $space-m`
`.gra-mg-right-l`	`margin-right: $space-l`
`.gra-mg-right-xl`	`margin-right: $space-xl`
`.gra-mg-right-xxl`	`margin-right: $space-xxl`
`.gra-mg-top-xxs`	`margin-top: $space-xxs`
`.gra-mg-top-xs`	`margin-top: $space-xs`
`.gra-mg-top-s`	`margin-top: $space-s`
`.gra-mg-top-m`	`margin-top: $space-m`
`.gra-mg-top-l`	`margin-top: $space-l`
`.gra-mg-top-xl`	`margin-top: $space-xl`
`.gra-mg-top-xxl`	`margin-top: $space-xxl`
`.gra-mg-bottom-xxs`	`margin-bottom: $space-xxs`
`.gra-mg-bottom-xs`	`margin-bottom: $space-xs`
`.gra-mg-bottom-s`	`margin-bottom: $space-s`
`.gra-mg-bottom-m`	`margin-bottom: $space-m`
`.gra-mg-bottom-l`	`margin-bottom: $space-l`
`.gra-mg-bottom-xl`	`margin-bottom: $space-xl`
`.gra-mg-bottom-xxl`	`margin-bottom: $space-xxl`
`.gra-mg-inline-xxs`	`margin-left: $space-xxs` `margin-right: $space-xxs`
`.gra-mg-inline-xs`	`margin-left: $space-xs` `margin-right: $space-xs`
`.gra-mg-inline-s`	`margin-left: $space-s` `margin-right: $space-s`
`.gra-mg-inline-m`	`margin-left: $space-m` `margin-right: $space-m`
`.gra-mg-inline-l`	`margin-left: $space-l` `margin-right: $space-l`
`.gra-mg-inline-xl`	`margin-left: $space-xl` `margin-right: $space-xl`
`.gra-mg-inline-xxl`	`margin-left: $space-xxl` `margin-right: $space-xxl`
`.gra-mg-block-xxs`	`margin-top: $space-xxs` `margin-bottom: $space-xxs`
`.gra-mg-block-xs`	`margin-top: $space-xs` `margin-bottom: $space-xs`
`.gra-mg-block-s`	`margin-top: $space-s` `margin-bottom: $space-s`
`.gra-mg-block-m`	`margin-top: $space-m` `margin-bottom: $space-m`
`.gra-mg-block-l`	`margin-top: $space-l` `margin-bottom: $space-l`
`.gra-mg-block-xl`	`margin-top: $space-xl` `margin-bottom: $space-xl`
`.gra-mg-block-xxl`	`margin-top: $space-xxl` `margin-bottom: $space-xxl`
`.gra-mg-all-xxs`	`margin-top: $space-xxs` `margin-right: $space-xxs` `margin-bottom: $space-xxs` `margin-left: $space-xxs`
`.gra-mg-all-xs`	`margin-top: $space-xs` `margin-right: $space-xs` `margin-bottom: $space-xs` `margin-left: $space-xs`
`.gra-mg-all-s`	`margin-top: $space-s` `margin-right: $space-s` `margin-bottom: $space-s` `margin-left: $space-s`
`.gra-mg-all-m`	`margin-top: $space-m` `margin-right: $space-m` `margin-bottom: $space-m` `margin-left: $space-m`
`.gra-mg-all-l`	`margin-top: $space-l` `margin-right: $space-l` `margin-bottom: $space-l` `margin-left: $space-l`
`.gra-mg-all-xl`	`margin-top: $space-xl` `margin-right: $space-xl` `margin-bottom: $space-xl` `margin-left: $space-xl`
`.gra-mg-all-xxl`	`margin-top: $space-xxl` `margin-right: $space-xxl` `margin-bottom: $space-xxl` `margin-left: $space-xxl`

Colors

Class Name	Contains
`.gra-blue-color`	`color: $color-blue`
`.gra-green-color`	`color: $color-green`
`.gra-yellow-color`	`color: $color-yellow`
`.gra-red-color`	`color: $color-red`
`.gra-blue-bg`	`background-color: $color-blue`
`.gra-green-bg`	`background-color: $color-green`
`.gra-yellow-bg`	`background-color: $color-yellow`
`.gra-red-bg`	`background-color: $color-red`

Others

Class Name	Contains
`.gra-width-100`	`width: 100%`
`.gra-height-100`	`height: 100%`
`.gra-bg-cover`	`background-size: cover`
`.gra-bg-contain`	`background-size: contain`
`.gra-bg-norepeat`	`background-repeat: no-repeat`