Skip to content

Guia de estruturacao de projetos

Jump to bottom
Vitor Hugo F Lopes edited this page Jan 6, 2022 · 2 revisions

Essa página visa ser um guia para a estruturação de front-end dos projetos.

Criar o projeto a partir do template da F&MD

Para criar os projetos de sites e landing pages na F&MD utilizamos o processo de Scaffolding que visa economizar tempo inicial de configuração do projeto e tempo de desenvolvimento, por conter as partes que são sempre utilizadas.

Podemos criar os projetos de duas maneiras, com ou sem Laravel.

Os projetos COM Laravel são os que utilizaremos algum recurso do backend (Geralmente os Sites), como banco de dados, formulários, áreas gerenciáveis, etc.

composer create-project agenciafmd/starter:dev-master nome-do-projeto

Já os projetos SEM Laravel são os utilizaremos somente o frontend (Geralmente as Landing Pages - LPs).

composer create-project agenciafmd/starter-lp:dev-master nome-do-projeto

Recomendações

Tamanho de arquivos no repositório

Antes de subir o projeto no repositório é muito importante revisar o tamanho de arquivos (principalmente as imagens e videos), pois uma vez o arquivo grande no repositório, cria-se o histórico de versão, portanto mesmo que venhamos a diminuir o tamanho do arquivo, o histórico mantém uma cópia do original para fins de rollback.

Tematização

Nomear cores

Pegar o hexadecimal cor passar no site Name that Color, ele retornará o nome da cor.

Por exemplo o hexa #6195ed será a cor Cornflower Blue.

Essas cores deverão ser definidas no arquivo resources/sass/frontend/_variables.scss.

$cornflower-blue: #6195ed;

Mapear cores nas variáveis do Bootstrap

Após definido os nomes das cores, é necessário atribuirmos nas variáveis do bootstrap no arquivo resources/sass/bootstrap/_variables.scss.

$primary: $cornflower-blue;

Mapear/Instalar fontes no projeto

Olhar no projeto quais fontes são usadas e converter para o formato .woff2 (formato mais otimizado para web, mais performático e mais leve).

Algumas sugestões de sites para conversão de fontes:

Mapear variáveis para geração do @font-face

Pegar os arquivos convertidos e posicionar na pasta resources/fonts.

Atribuir o nome do arquivo sem a extensão .woff2 na propriedade file-name e um nome para o font-family na propriedade family.

$regular-map: (
   family: 'MinhaFonteRegular',
   file-name: 'arquivo-minha-fonte-regular', // WITHOUT FONT EXTENSION
   //weight: '',
   //style: '',
);

Como utilizamos as fontes separadas, por exemplo, minha-fonte-regular.woff2, minha-fonte-light.woff2, minha-fonte-bold.woff2, não precisamos passar o weight, nem o style, pois estes só serão utilizados em caso de import completo da fonte, por exemplo do Google Fonts.

https://fonts.googleapis.com/css?family=Montserrat:200,300,400&display=swap

$regular-map: (
   family: 'Montserrat',
   //file-name: 'example-family-file-name', // WITHOUT FONT EXTENSION
   weight: '200',
   style: 'italic',
);

Mapear fontes nos arrays (maps) de fontes do projeto - $project-fonts

A variável $project-fonts é responsável pela nomenclatura das classes para uso de fontes direto no html, por exemplo regular-font-text.

$project-fonts: ( 
  regular-font: $regular-map, 
);

No arquivo resources/sass/_styles.scss temos um foreach que percorre os items dentro da lista do $project-fonts gerando as classes a partir da chave do item e concatenando com -text. Usando o exemplo acima a geração da classe seria regular-font + -text resultando na classe .regular-font-text.

Sobrescrever as variáveis do bootstrap

Percorrer o arquivo node_modules/bootstrap/scss/variables.scss e verificar o que é possível padronizar/tematizar no projeto sobrescrevendo as mesmas variáveis dentro do nosso arquivo de variáveis resources/sass/bootstrap/_variables.scss.

Isso, além de otimizarmos o desenvolvimento, irá gerar uma visão macro do projeto, entendendo possíveis pontos de atenção antes mesmo do início do desenvolvimento.

Componentes

Os componentes personalizados do frontend seguem a mesma forma de pensar do bootstrap.

Primeiro cria-se a estrutura padrão com suas variações sm e lg e depois suas variações de estilo (cor de fundo, contorno...).

Checklist

  • Ambiente de testes interno - projeto.mixd.com.br
  • Arquivos de PWA e favicon.ico
  • Verificar carregamento das fontes 1.
  • Compatibilidade do site no Safari.
  • Compatibilidade do site no Firefox.
  • Compatibilidade nas resoluções 1366x768, 360x640, 1920x1080, 1600x900, 1440x900, 1280x900 2
  • Rodar npm run prod.
  1. Para validar o carregamento das fontes, desligue a fonte da máquina e recarregue a página.
  2. Essas resoluções não isentam que o site deva ser responsivo e se ajuste a TODOS os tipos de resoluções, são uma prioridade de qualidade em caso de algum layout fora de padrão. Para mais detalhes consulte o GlobalStats.

Features complementares

Tag manager

Solicitar a chave pro pessoal do Marketing pra adiantar pro pessoal do backend

Redes sociais

Ao criar links com redirecionamento para redes sociais, adicionar a cada um o id correspondente. Isso ajudará o Marketing na hora de captar informações quando houver o evento de click.

Clone this wiki locally