Dimensionamento
Responsivo
Para aplicar classes utilitárias em um breakpoint específico, adicione o prefixo adequado a classe existente.
Width
Utilitários para definir a largura de um elemento
| Classe | Propriedades |
|---|---|
.z--w-{token} | width: {token}; |
Tokens:
| Token | Valor |
|---|---|
auto | auto |
none | 0 |
1-2 | 50% |
1-3 | 33.33333% |
2-3 | 66.66667% |
1-4 | 25% |
3-4 | 75% |
1-5 | 20% |
2-5 | 40% |
3-5 | 60% |
4-5 | 80% |
1-6 | 16.66667% |
5-6 | 83.33333% |
1-12 | 8.33333% |
full | 100% |
screen | 100vw |
Referências:
Min-Width
Utilitários para definir a largura mínima de um elemento
| Classe | Propriedades |
|---|---|
.z--min-w-none | min-width: 0; |
.z--min-w-full | min-width: 100%; |
.z--min-w-screen | min-width: 100vw; |
Referências:
Max-Width
Utilitários para definir a largura máxima de um elemento
| Classe | Propriedades |
|---|---|
.z--max-w-none | max-width: 0; |
.z--max-w-full | max-width: 100%; |
Referências:
Height
Utilitários para definir a altura de um elemento
| Classe | Propriedades |
|---|---|
.z--h-{token} | height: {token}; |
Tokens:
| Token | Valor |
|---|---|
auto | auto |
none | 0 |
full | 100% |
screen | 100vh |
Referências:
Min-Height
Utilitários para definir a altura mínima de um elemento
| Classe | Propriedades |
|---|---|
.z--min-h-none | min-height: 0; |
.z--min-h-full | min-height: 100%; |
.z--min-h-screen | min-height: 100vh; |
Referências:
Max-Height
Utilitários para definir a altura máxima de um elemento
| Classe | Propriedades |
|---|---|
.z--max-h-none | max-height: 0; |
.z--max-h-full | max-height: 100%; |
.z--max-h-screen | max-height: 100vh; |
Referências: