Layout

Os tokens de layout são utilizados para definir as propriedades do Grid.


Container - área do layout que contêm os elementos principais de uma interface.
Columns - largura das colunas muda de acordo com o tamanho do grid que no responsivo pode possuir 4, 8 ou 12 colunas.
Margin - espaçamento externo do grid possuem valosres fixos com base nos breakpoints.
Gutters - espaços entre as colunas, e possuem valores fixos baseados nos breakpoints.

layout.xs

Token

Valor

layout.xs.breakpoint.min
var(--layout-xs-breakpoint-min)
$layout-xs-breakpoint-min		320px
layout.xs.breakpoint.max
var(--layout-xs-breakpoint-max)
$layout-xs-breakpoint-max		575px
layout.xs.container
var(--layout-xs-container)
$layout-xs-container		100%
layout.xs.columns
var(--layout-xs-columns)
$layout-xs-columns		4
layout.xs.margin
var(--layout-xs-margin)
$layout-xs-margin		24px
layout.xs.gutters
var(--layout-xs-gutters)
$layout-xs-gutters		16px

layout.sm

Token

Valor

layout.sm.breakpoint.min
var(--layout-sm-breakpoint-min)
$layout-sm-breakpoint-min		576px
layout.sm.breakpoint.max
var(--layout-sm-breakpoint-max)
$layout-sm-breakpoint-max		767px
layout.sm.container
var(--layout-sm-container)
$layout-sm-container		100%
layout.sm.columns
var(--layout-sm-columns)
$layout-sm-columns		8
layout.sm.margin
var(--layout-sm-margin)
$layout-sm-margin		24px
layout.sm.gutters
var(--layout-sm-gutters)
$layout-sm-gutters		16px

layout.md

Token

Valor

layout.md.breakpoint.min
var(--layout-md-breakpoint-min)
$layout-md-breakpoint-min		768px
layout.md.breakpoint.max
var(--layout-md-breakpoint-max)
$layout-md-breakpoint-max		959px
layout.md.container
var(--layout-md-container)
$layout-md-container		100%
layout.md.columns
var(--layout-md-columns)
$layout-md-columns		8
layout.md.margin
var(--layout-md-margin)
$layout-md-margin		40px
layout.md.gutters
var(--layout-md-gutters)
$layout-md-gutters		16px

layout.lg

Token

Valor

layout.lg.breakpoint.min
var(--layout-lg-breakpoint-min)
$layout-lg-breakpoint-min		960px
layout.lg.breakpoint.max
var(--layout-lg-breakpoint-max)
$layout-lg-breakpoint-max		1199px
layout.lg.container
var(--layout-lg-container)
$layout-lg-container		100%
layout.lg.columns
var(--layout-lg-columns)
$layout-lg-columns		12
layout.lg.margin
var(--layout-lg-margin)
$layout-lg-margin		40px
layout.lg.gutters
var(--layout-lg-gutters)
$layout-lg-gutters		16px

layout.xl

Token

Valor

layout.xl.breakpoint.min
var(--layout-xl-breakpoint-min)
$layout-xl-breakpoint-min		1200px
layout.xl.breakpoint.max
var(--layout-xl-breakpoint-max)
$layout-xl-breakpoint-max		1439px
layout.xl.container
var(--layout-xl-container)
$layout-xl-container		1280px
layout.xl.columns
var(--layout-xl-columns)
$layout-xl-columns		12
layout.xl.margin
var(--layout-xl-margin)
$layout-xl-margin		40px
layout.xl.gutters
var(--layout-xl-gutters)
$layout-xl-gutters		32px

layout.xxl

Token

Valor

layout.xxl.breakpoint.min
var(--layout-xxl-breakpoint-min)
$layout-xxl-breakpoint-min		1440px
layout.xxl.container
var(--layout-xxl-container)
$layout-xxl-container		1600px
layout.xxl.columns
var(--layout-xxl-columns)
$layout-xxl-columns		12
layout.xxl.margin
var(--layout-xxl-margin)
$layout-xxl-margin		64px
layout.xxl.gutters
var(--layout-xxl-gutters)
$layout-xxl-gutters		32px