Grid

Source: docs/grid_system.md

v 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.md

Text 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.md

Spacing

margim 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

Sizer

  • w-num (.w-sm-num) width in percent 0-100
  • h-num height in percent 0-100
  • wv-num width in viewport 0-100
  • hv-num height in viewport 0-100
  • wp-num width in scales pixels 0-24
  • hp-num height in scales pixels 0-24

Fonts

  • .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

Opacity

  • .o-10 (o-sm-50) opacity from 0 to 100 (step of 10)

Display

  • .d-none (d-sm-block)
  • .d-block
  • .d-inline-block
  • .d-flex
  • .d-inline-flex
  • .d-grid
  • .d-inline-grid

Hidden

  • .hidden
  • .hidden-xs
  • ...

show

  • .show
  • .show-xs

Colors

  • .black - font colors
  • .white
  • .green
  • .gray
  • .yellow

  • .bg-black - background colors

  • .bg-white
  • .bg-green
  • .bg-gray
  • .bg-yellow

Header Button Menu

Source: docs/header_button_menu.md

Esse elemento corresponde ao botão de menu presente no cabeçalho do relatório.

Header Button Print

Source: docs/header_button_print.md

Esse elemento corresponde ao botão de imprimir presente no cabeçalho do relatório.

Header Button Reports and Panels

Source: docs/header_button_report_panel.md

Esse elemento corresponde ao botão de abrir mais relatórios e painéis. Se encontra no lado superior direito do cabeçalho.

Header Date

Source: docs/header_date.md

Esse elemento corresponde a data e hora em que foi gerado o relatório.

Header Reference Year

Source: docs/header_referenceyear.md

Esse elemento corresponde ao ano de refêrencia do conteúdo presente no relatório.

Header Title

Source: docs/header_title.md

Esse elemento corresponde ao título do relatório e a localidade do presente no cabeçalho do relatório.

Legends

Source: docs/legends.md

Elementos 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.md

Elementos que deve ser usado para esse tipo de componente: <div>.

Box Mini Map representa uma informação espacializada.

Section Calc

Source: docs/section_calc.md

Elementos 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.md

Elementos que deve ser usado para esse tipo de componente: <div>.

Tipos de dados percentuais:

  • Default:
  • Primario:

Section Index

Source: docs/section_index.md

Elementos 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.md

Elementos 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.md

Elementos 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.md

Elementos 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.md

Elementos que deve ser usado para esse tipo de componente: <div> <h3>.

#formtodo: produzir um texto;

Section Table

Source: docs/section_table.md

Elementos que deve ser usado para esse tipo de componente: <div> <table>.

#formtodo: produzir um texto;

Section Table Residues

Source: docs/section_table_residues.md

Elementos que deve ser usado para esse tipo de componente: <div> <table>.

#formtodo: produzir um texto;

Section Table Title

Source: docs/section_table_title.md

Elementos que deve ser usado para esse tipo de componente: <div> com a classe section__table--title.

Section Title

Source: docs/section_title.md

Elementos 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

Guia de Estilo

No matches.