@freud-ds/grid
v2.0.8
Published
Zenklub - Freud DS Grid
Downloads
53
Keywords
Readme
Freud DS Grid
Escala e consistência em todos os produtos Zen!
Sobre o Freud
Neurologista e psiquiatra criador da psicanálise. Seus estudos serviram como base pra a evolução da psicologia.
Do mesmo modo, nosso Design System tem como base garantir a evolução dos produtos Zenklub.
Através do Freud DS queremos propagar pelo mundo a importância de criar produtos acessíveis e consistentes.
Projeto @freud-ds/grid
Biblioteca com estilos e configurações de grid
Como instalar a lib em seu projeto Angular
1 - Primeiro instale a biblioteca via npm:
npm i @freud-ds/grid
2 - Importe as variáveis no arquivo angular.json
:
No array de styles adicione o estilo da grid
"node_modules/@freud-ds/grid/scss/grid.scss"
// angular.json
{
...
"projects": {
...
"architect": {
...
"build": {
...
"options": {
...
"styles": [...] <== PASTE HERE
}
}
}
}
}
Utilizando os grids
Estrutura do HTML
Grid fuida, sem limite de tamanho
<div class="freud-grid">
<div class="freud-row">
<div class="freud-col-<NUMERO DE COLUNAS>"></div> <--- Numero de 1 a 12
<div class="freud-col"></div> <--- Sem determinar o numero de colunas é atribuido o maximo(12)
</div>
</div>
Grid fixa, com limite maximo do container em 1320
<div class="freud-grid-fixed">
<div class="freud-row">
<div class="freud-col-<NUMERO DE COLUNAS>"></div> <--- Numero de 1 a 12
<div class="freud-col"></div> <--- Sem determinar o numero de colunas é atribuido o maximo(12)
</div>
</div>
Classes disponíveis
CSS Classes
Classe CSS | Descrição
--- | ---
freud-grid
| Obrigatório, para o elemento de grade de layout
freud-row
| Obrigatório, para agrupar as colunas
freud-col
| Obrigatório, Coluna do grid
freud-col-<NUMBER_OF_COLUMNS>
| Opcional, especifica o numero de colunas de 1 até 12
<SIZE>:freud-col-<NUMBER_OF_COLUMNS>
| Opcional, especifica o numero de colunas em um tamanho de tela ex (sm, md, lg)
freud-col-order-<INDEX>
| Opcional, especifica a ordem da coluna dentro da row
freud-col-align-<POSITION>
| Opcional, especifica o alinhamento da coluna