Blog Web Standards

Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia

Estamos desenvolvendo os e-mails utilizando o Foundation for Mails, e notei algo que pode ser muito útil.

Por padrão, esse framework gera o HTML minificado (sem espaços, tudo em uma mesma linha), o que não é interessante, principalmente para peças de e-mail marketing, pois algum programador irá precisar editá-lo depois. Sempre importante pensar no fluxo do projeto e na manutenção! Impossível mudar conteúdo de uma peça de email quando está tudo minified.

No site do Foundation, pode ver toda a documentação e processo inicial, mas vou colocar rapidamente os passos aqui, o que estou utilizando:

  1. Versão SASS – http://foundation.zurb.com/emails/docs/sass-guide.html
  2. Crie todo o código necessário enquanto roda no terminal “npm start”
  3. Desenvolva seu código 🙂
  4. Finalize a operação no terminal
  5. Na raiz do projeto encontre o arquivo com o nome “gulpfile.babel.js”
  6. Faça uma busca por: “collapseWhitespace” (sem as aspas)
  7. Provavelmente o valor esteja “true”. Mude para “false” (sem aspas)
  8. Volte para o terminal e rode o comando “npm run build” (sem aspas)

Agora é só ir na pasta /dist e conferir o trabalho final. Código organizado e com todo CSS inline. Dúvidas? Pode colocar aí nos comentários!

A grande vantagem de usar essa metodologia do Foundation é a facilidade de se produzir e-mails responsive. Vale a pena!