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!