Grid
Source: docs/grid_system.mdv 0.1
Responsividade
A responsividade tem os seguintes breakpoints
xs : only screen and (max-width: 576px)"
sm : "only screen and (min-width: 576.98px) and (max-width: 768px)
md : only screen and (min-width: 768px.98px) and (max-width: 992px)
lg : only screen and (min-width: 992px) and (max-width: 1440px)
xlg : "only screen and (min-width: 1440.98px)
print : "only print
- utiliado somente em impressao
todas as classes que definen tamanho podem ter responsividade aplicada utilizando -xs
-sm
etc
Container
o container somente determina a largura maxima .container
conforme os breakspoints para cada tamanho de tela
.container
- max de 1280 px.container-fluid
- 100%
Grids
grid container - podemos ter grid de uma ou varias colunas, utilizando
.grid .grid-num
- num = numero de colunas, de 1 a 24. exemplo.grid-12
.grid .grid-num-expandable
- permite que items do grid maior que sua coluna aumente o tamanho da coluna.grid .grid-auto-num
- cria automaticamente colunas, com num defininto o tamanho minimo da coluna, de 10 a 2400px exemplo.grid-auto-200
grid items - são os items dentro do grid, que podem ocupar uma ou mais coluna e ou linhas, utilizando as classes
.col-num
- num = o numero de colunas que o elemento ocupa (1-24).row-num
- num = o numero de linhas que o elemento ocupa (1-24)
espacamento - podemos definir os espacos/gaps entre os elementos do grid:
.gap-num
- num = espaco entre as celuas da grid, de 0 a 12 (espaco final multiplos de 4).col-gap-num
- num = espaco entre as colunas, de 0 a 12 (espaco final multiplos de 4).row-gap-num
- num = espaco entre as linhas, de 0 a 12 (espaco final multiplos de 4)
responsividade - grids containers, elementos e espacamentos podem ser utilizados para diferentes tamanho de tela, aplicando -sm
ou -md
etc antes dos num.
Exemplos:
.grid .grid-1 .grid-md-3 .grid-lg-4
- em mobile vai ter 1 coluna, em md (768px) vai ter 3, e adiante 4 colunas.grid .grid-6 .grid-xs-3
- grid vai ter 6 colunas, em mobile vai ter 3.col-1 col-sm-2
- um elemente do grid ocupa 1 coluna, e 2 colunas acima de sm(576).row-2 row-sm-2
- um elemente do grid ocupa 2 linhas, e 3 linhas acima de md(768px).gap-10 .gap-xs-2
- os elementos vao ter uma espacamento normal 40px, em mobile vai ter de 8 pixel
Alinhamento do Grid
Justify/Align tanto definido no grid container como em algum elemento do grid
.j-start
- justify.j-center
.j-end
.j-stretch
.a-start
- align.a-center
.a-end
.a-stretch
responsividade pode ser utilizado aplicando -md
etc antes da centralizacao
.j-start .j-md-center
- ate 760px justifica no inicio, depois justifica no centro no centro
Elements in Rows or Cols using Flex
podemos ter uma linha ou colunas usando o flex, com responsividade podendo ser determinada
.in-cols (.in-cols-sm)
- todos os elementos vao aparecer como colunas, uma do lado da outra.in-rows (.in-rows-sm)
- todos os elementos filhos vao aparecer de linha em linha.gap-2
- o espacamento(margim) entre os elementos.inline (.inline-sm)
- o container se comporta como inline-flex.wrap (.wrap-sm)
- o container se comporta como inline-flex.nowrap, .(nowrap-sm)
- o container se comporta como inline-flex
itens size
.grow-num (.grow-sm-num)
- num de 1 a 5.shrink-num (.shrink-sm-num)
- num de 1 a 5.w-num (.w-sm-num)
- determina a largura/flexbasis, num de 0 a 100, de 10 em 10.h-num (.h-sm-num)
- mesma coisa que w, para quando usamos o .in-rows
order
.order-1, (.order-sm-1)
ordem, de 1 a 24.order--1 (.order-sm--1)
de -1 a -24
Justify/Align Flex container and itens with with
.j-start (.j-sm-start)
- justify-content.j-center
.j-end
.j-stretch
.j-space-between
.j-space-around
.j-space-evenly
.j-stretch
.a-start
- align-itens.a-center
.a-end
.a-stretch
.a-baseline
.ac-start
- align-content.ac-center
.ac-end
.ac-stretch
.ac-baseline
exemplos:
Typography
Source: docs/typography_system.mdText Sizes
os tamanhos das fontes são tanto determinados como classe, ou como css variaveis
tamanho como css var
.titulo{ font-size: var(--fs-md) }
tamanho como classes
.fs-xs
- 0.67em;.fs-sm
- 0.75em;.fs-md
- 1em.fs-lg
- 1.333em;.fs-xlg
- 1.777em;.fs-xxlg
- 2.369em;.fs-xxxlg
- 3.157em;.fs-xxxxlg
- 4.209em;
Others typefaces definition
`
Utilitys
Source: docs/utils.mdmargim with
.mt-1 (.mt-sm-1)
- margin top - 1 a 12.ml-1
- margin left - 1 a 12.mr-1
- margin right - 1 a 12.mb-1
- margin bottom - 1 a 12.mx-1
- margin left and right - 1 a 12.my-1
- margin top and bottom - 1 a 12.mx-auto
- margin top and bottom - 1 a 12
padding with
.pt-1 (.pt-sm-1)
- margin top - 1 a 12.pl-1
- margin left - 1 a 12.pr-1
- margin right - 1 a 12.pb-1
- margin bottom - 1 a 12.px-1
- margin left and right - 1 a 12.py-1
- margin top and bottom - 1 a 12
w-num (.w-sm-num)
width in percent 0-100h-num
height in percent 0-100wv-num
width in viewport 0-100hv-num
height in viewport 0-100wp-num
width in scales pixels 0-24hp-num
height in scales pixels 0-24
.fs-xs (.fs-xs-xs)
.fs-sm
.fs-md
.fs-lg
.fs-xlg
.fs-xxlg
.fs-xxxlg
.fs-xxxxlg
.fs-1 (fs-sm-1)
fontsize 1 a 12 in scalar pixel.fs--1 (fs-sm--1)
fontsize -1 a -12 scalar pixel.fs-1rem
fontsize 1 a 12 in rem.fs--1em
fontsize 1 a 12 in em
line-height
.lh-08 (lh-sm-08)
- line height of 06 - 14 ( significa 0.6 1.4)
text align
.tr (.tr-sm)
text-right.tl
text-left.tc
text-center
.o-10 (o-sm-50)
opacity from 0 to 100 (step of 10)
.d-none (d-sm-block)
.d-block
.d-inline-block
.d-flex
.d-inline-flex
.d-grid
.d-inline-grid
.hidden
.hidden-xs
...
.show
.show-xs
.black
- font colors.white
.green
.gray
.yellow
.bg-black
- background colors.bg-white
.bg-green
.bg-gray
.bg-yellow
Header Date
Source: docs/header_date.mdHeader Reference Year
Source: docs/header_referenceyear.mdHeader Title
Source: docs/header_title.mdEsse elemento corresponde ao título do relatório e a localidade do presente no cabeçalho do relatório.
Legends
Source: docs/legends.mdElementos que deve ser usado para esse tipo de componente: <div>
.
Esse elemento corresponde as legendas dos gráficos e mapas do relatório.
Para adicionar uma nova linha de legenda, deve-se adicionar uma div com class="line" e dentro da mesma duas divs com classe "legend__bullets" e "legend__text".
Section Box Mini Mapa
Source: docs/section_boxminimapa.mdElementos que deve ser usado para esse tipo de componente: <div>
.
Box Mini Map representa uma informação espacializada.
Section Calc
Source: docs/section_calc.mdElementos que deve ser usado para esse tipo de componente: <div>
.
Section Calculo representa os calculos utilizados para compor algum indice ou informação do relatório.
Section Dados Percentuais
Source: docs/section_dadospercentuais.mdElementos que deve ser usado para esse tipo de componente: <div>
.
Tipos de dados percentuais:
- Default:
- Primario:
Section Index
Source: docs/section_index.mdElementos que deve ser usado para esse tipo de componente: <div>
.
Section Index representa um conjunto de informações que se encontram dentro de uma seção, esse componentente é formado por um titulo do indice e o valor do indice.
Section Info-Data
Source: docs/section_infodados.mdElementos que deve ser usado para esse tipo de componente: <div>
.
Info-dados representa uma determinada informação, apresentando o título e o valor em número ou texto informativo referente à ela.
O valor em número pode ter um prefixo, para valores monetários, ou um sufixo para valores de área/volume (R$ e km2) por exemplo.
Para adicionar basta inserir um elemento div
com a classe section__infodata__value--mon
classe section__infodata--little
para km2
Section Listas
Source: docs/section_listas.mdElementos que devem ser usados para esse tipo de componente <div>
Section Lista de Unidades representa as unidades de destinação e as informações referentes a cada uma delas.
Para cada unidade há um ícone, que pode ser um elemento <img>
inserido no conteúdo de um elemento div
com a classe section__list--icon
, e informações adicionais, que podem ser inseridas com formato título + conteúdo, utilizando um elemento <div>
com a classe section__list--item-title
e section__list--item-content
.
Um elemento <div>
com a classe section__source
pode ser adicionado ao fim da lista para indicar fonte.
Section Subtitle
Source: docs/section_subtitle.mdElementos que deve ser usado para esse tipo de componente: <div>
.
Tipos de titulo seção:
- Default: subtitulo da seção apenas com o titulo.
- Primario: titulo-secao com titulo e informativo.
O section subtitle aceita informação abaixo, para adicionar basta inserir uma div com a classe section__subtitle__info
Section Subtitle Item
Source: docs/section_subtitle_item.mdElementos que deve ser usado para esse tipo de componente: <div>
<h3>
.
#formtodo: produzir um texto;
Section Table
Source: docs/section_table.mdElementos que deve ser usado para esse tipo de componente: <div>
<table>
.
#formtodo: produzir um texto;
Section Table Residues
Source: docs/section_table_residues.mdElementos que deve ser usado para esse tipo de componente: <div>
<table>
.
#formtodo: produzir um texto;
Section Table Title
Source: docs/section_table_title.mdElementos que deve ser usado para esse tipo de componente: <div>
com a classe section__table--title
.
Section Title
Source: docs/section_title.mdElementos que deve ser usado para esse tipo de componente: <div>
.
Tipos de titulo seção:
- Default: section__title apenas o titulo.
- Primario: section__title__info com titulo e informativo.
O section title aceita subtitulos tb, para isso basta adicionar uma div com a classe section__title__info