Layout
Responsivo
Para aplicar classes utilitárias em um breakpoint específico, adicione o prefixo adequado a classe existente.
Grid
Atenção
Em desenvolvimento
Utilitários de grid ver diretrizes
Container
| Classe | Propriedades |
|---|---|
.z--container | width: 100%;margin-left: auto;margin-right: auto;max-width: {token}padding-left: {token}padding-right: {token} |
Row
| Classe | Propriedades |
|---|---|
.z--row | display: flex;flex-wrap: wrap;margin-left: -{token}margin-right: -{token} |
Col
| Classe | Propriedades |
|---|---|
.z--col | position: relative;width: 100%;padding-left: {token}padding-right: {token} |
Display
Utilitários para controlar o tipo de exibição de um elemento
| Classe | Propriedades |
|---|---|
.z--block | display: block; |
.z--inline-block | display: inline-block; |
.z--inline | display: inline; |
.z--table | display: table; |
.z--table-row | display: table-row; |
.z--table-cell | display: table-cell; |
.z--hidden | display: none; |
.z--flex | display: flex; |
.z--inline-flex | display: inline-flex; |
Referências:
Floats
Utilitários para controlar o encapsulamento de conteúdo em torno de um elemento
| Classe | Propriedades |
|---|---|
.z--float-right | float: right; |
.z--float-left | float: left; |
.z--float-none | float: none; |
Referências:
Overflow
Utilitários para controlar como um elemento controla um conteúdo muito grande
| Classe | Propriedades |
|---|---|
.z--overflow-auto | overflow: auto; |
.z--overflow-hidden | overflow: hidden; |
.z--overflow-visible | overflow: visible; |
.z--overflow-scroll | overflow: scroll; |
.z--overflow-x-auto | overflow-x: auto; |
.z--overflow-y-auto | overflow-y: auto; |
.z--overflow-x-hidden | overflow-x: hidden; |
.z--overflow-y-hidden | overflow-y: hidden; |
.z--overflow-x-visible | overflow-x: visible; |
.z--overflow-y-visible | overflow-y: visible; |
.z--overflow-x-scroll | overflow-x: scroll; |
.z--overflow-y-scroll | overflow-y: scroll; |
.z--scrolling-touch | -webkit-overflow-scrolling: touch; |
.z--scrolling-auto | -webkit-overflow-scrolling: auto; |
Referências:
Position
Utilitários para controlar como um elemento é posicionado no DOM
| Classe | Propriedades |
|---|---|
.z--static | position: static; |
.z--fixed | position: fixed; |
.z--absolute | position: absolute; |
.z--relative | position: relative; |
.z--sticky | position: sticky; |
.z--pin-t | top: 0; |
.z--pin-r | right: 0; |
.z--pin-b | bottom: 0; |
.z--pin-l | left: 0; |
.z--pin-y | top: 0;bottom: 0; |
.z--pin-x | right: 0;left: 0; |
.z--pin | top: 0;right: 0;bottom: 0;left: 0; |
.z--pin-none | top: auto;right: auto;bottom: auto;left: auto; |
Referências:
Visibility
Utilitários para controlar a visibilidade de um elemento
| Classe | Propriedades |
|---|---|
.z--visible | visibility: visible; |
.z--invisible | visibility: hidden; |
Referências:
Z-Index
Utilitários para controlar a ordem empilhamento de um elemento
| Classe | Propriedades |
|---|---|
.z--z-{token} | z-index: {token}; |
Tokens:
| Token | Valor |
|---|---|
0 | 0 |
10 | 10 |
20 | 20 |
30 | 30 |
40 | 40 |
50 | 50 |
auto | auto |
Referências: