Alguns padrões dos projetos da Din Digital.
O que todo projeto deve seguir está comentado aqui.
Essa guideline não está finalizada e sempre adicionamos novas ideias/padrões/etc para nos ajudar no desenvolvimento.
Infos sobre como escrevemos CSS.
A partir de Janeiro de 2017 utilizaremos as metodologias SMACSS e BEM para a escrita de CSS em junção com o Sass - na extensão .scss. Projetos que antecedem essa data não seguem nenhuma dessas metodologias, mas podemos aplicá-la quando necessário.
Temos um repositório bootstrap que serve como exemplo para iniciar projetos dessa forma. Os outros bootstraps - Blade e Laravel - serão atualizados em breve.
Também temos uma uma guideline que te mostra como modularizamos as classes do projeto.
E como sempre estamos abertos a sugestões de novos patterns, como Atomic Design e outros.
Aninhamento: procure nunca passar de 4 níveis, mesmo que 3 já esteja bom.
Levamos a sério a semântica do HTML5, então fique à vontade para usar e abusar.
Existem projetos que utilizamos template engines, como Blade, EJS, Jade/Pug e etc.
Desenvolvemos a estrutura visando a acessibilidade. Temos um repositório com mais informações sobre como escrever e onde buscar mais infos.
Em nossos bootstraps temos um padrão de arquivos JS para a parte de montagem do website.
Caso encontre uma melhor forma de se trabalhar somos totalmente abertos a novas ideias.
O Din Style é um repositório que tem como proposta a padronização da parte de frontend dos projetos da Din e também para funcionar como um help para o pessoal de backend.
Muitos dos desenvolvimentos seguem um padrão, e por isso é importante que cada membro da equipe esteja alinhado um com o outro.
Portanto o Din Style é um miniplugin que nos ajudará com a montagem. Atualmente ele não está padronizado com BEM e SMACSS, mas já temos planos para atualiza-lo.
Sinta-se livre para avalia-lo e nos dar dicas de onde e como melhora-lo.
Existem projetos de diversas agências com diferentes designers que criam as artes e mandam pra gente. Em alguns projetos existem as versões desktop e mobile, mas em outros somente a desktop. Nesse caso nós sempre devemos conversar sobre como deve ser o responsivo, pois sempre fazemos o responsivo dos sites, mesmo quando não existe no layout.
Mas no geral segue o que for mais simples. Ex.: se existe uma grid com 4 elementos no desktop, no tablet mudaríamos para 2 e no celular para 1.
Sim, montamos e-mails também. Para isso, montamos um bootstrap para nos auxiliar. Nele existe alguns caminhos mais rápidos para o desenvolvimento e testes.
- Crossbrowser: o GP sempre define isso na descrição do projeto no Asana, mas se houver dúvida e/ou no achar, é só perguntar, mas normalmente IE10+
- Pixel Perfect: devemos ser fiéis ao layout
- Links: quando formos montar algo que seja um link, coloque no
hrefumLINK-HERE, ou em títulosTITLE-HEREpara que a pessoa que esteja integrando o site não se perca e/ou não se esqueça - Português ou Inglês?: De preferência inglês, mas o importante é que o entendimento esteja claro para todos
- Devemos sempre pensar além do design, ou seja, transições, efeitos e etc. não são enviados no layout, por isso temos que pensar sempre no usuário final