|
| [Home](home) | [**Escopo**](escopo) | [Processo](processo) | [Design/Mockups](design_mockups) | [Configuração](configuracao) | [Arquitetura](arquitetura) | [Gerência](gerencia) | [Código](codigo) | [BD](Banco de Dados) | [Qualidade](qualidade) | [Frontend](frontend) | [Backend](backend) |
|
|
| [Home](home) | [**Escopo**](escopo) | [Processo](processo) | [Design/Mockups](design_mockups) | [Configuração](configuracao) | [Arquitetura](arquitetura) | [Gerência](gerencia) | [Código](codigo) | [BD](Banco de Dados) | [Qualidade](qualidade) | [Frontend](frontend) | [Backend](backend) |
|
|
| :----------: | :-------------------------------: | :------------------: | :--------------: | :--------------------------: | :--------------------: | :------------------------: | :--------------: | :---------------: | :--------------------: | :---------------: | :--------------------: |
|
|
| :----------: | :-------------------------------: | :------------------: | :--------------: | :--------------------------: | :--------------------: | :------------------------: | :--------------: | :---------------: | :--------------------: | :---------------: | :--------------------: |
|
|
|
|
|
|
# Setup do Frontend |
|
# Padrões do Frontend
|
|
\ No newline at end of file |
|
|
|
|
|
Esta página visa apresentar os padrões a serem utilizados no desenvolvimento de código do repositório do Frontend da aplicação.
|
|
|
|
|
|
|
|
## Material UI
|
|
|
|
<img src="uploads/ea4cc845721bcd837ce20ac96a64ab26/image.png" width="250px" height="250px" />
|
|
|
|
|
|
|
|
|
|
|
|
No projeto Globo Aplausos Frontend utilizaremos a biblioteca de componentes denominada de Material UI, que fornece componentes prontos e estilizáveis para o uso no desenvolvimento de aplicações React. Desta forma é importante destacar que sempre que possível, deve ser feito o uso dos componentes disponibilizados pela biblioteca, junto de ícones, animações e recursos que forneçam acessibilidade ao usuário.
|
|
|
|
|
|
|
|
Mais informações sobre o Material UI e Material Design podem ser encontrados neste [documentação](https://mui.com).
|
|
|
|
|
|
|
|
## CSS
|
|
|
|
|
|
|
|
A forma de utilização de estilos na aplicação é realizada por meio de CSS normal.
|
|
|
|
|
|
|
|
### Variáveis globais
|
|
|
|
|
|
|
|
Um dos recursos disponíveis dentro da aplicação do Frontend do projeto Globo Aplausos são as variáveis globais de estilo, como por exemplo cores e tamanhos de fonte, que estão declarados dentro do arquivo `global.css` e devem ser utilizados sempre que possível, para que a integridade e padronização de código nos arquivos CSS seja mantida.
|
|
|
|
|
|
|
|
### Responsividade
|
|
|
|
|
|
|
|
Mesmo que a responsividade para mobile não seja o foco da aplicação, ainda é necessário utilizar medidas que prestem suporte a diferentes tamanhos de monitores em aplicações web. Tendo em vista estes fatos, a unidade de medida preferencial que será utilizada dentro dos arquivos CSS é o `rem`, já que ela se adapta de acordo com o tamanho da tela do usuário e também de acordo com as preferências do navegador, proporcionando assim a consistência de telas entre diferentes dispositivos.
|
|
|
|
|
|
|
|
A medida do `rem` é considerada como preferencial pois existem casos em que surja uma necessidade de precisão maior do CSS, no qual é utilizada a medida do pixel. |
|
|
|
\ No newline at end of file |