У вас должны быть установлены:
Далее выполняем:
sudo npm i
gulp build
После выкачивания всех зависимостей проекта и успешной первичной сборки, запустите задачу gulp и можете приступать к верстке.
Также для удобства можете пользоваться этой таблицей.
- компиляция sass в css
- автоматическое проставление inline-стилей
- сжатие изображений и HTML-кода
- отправка готового макета на указанный email
Все стили расположены в папке src/sass. В главном файле main.sass происходит импорт всех нужных модулей. Далее стили компилируются в CSS и кладутся в папку src/css. Оттуда потом сборщик берет все стили и производит внедрение их в HTML-файл, после чего кладет готовый результат в папку dist.
Все исходные изображения хранятся в src/img. При каждом изменении содержимого папки Gulp очищает dist/img и кладет туда сжатые изображения.
index.html:
<html>
<head>
<style>
p { color: red; }
</style>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<p>Test</p>
</body>
</html>
style.css:
p {
text-decoration: underline;
}
Результат:
<html>
<head>
</head>
<body>
<p style="color: red; text-decoration: underline;">Test</p>
</body>
</html>
Для отправки писем используется задача gulp test. Чтобы она работала, вам сначала нужно будет произвести некоторые настройки.
- Зарегистрируйтесь на сайте MailGun.com.
- Вам выдадут бесплатный домен, данные которого необходимо будет добавить в gulpfile.js (войдя под своей учетной записью, подсмотрите нужные параметры на странице с примерами).
На каждый месяц у вас будет лимит - 10.000 писем. Дополнительно ознакомиться с правилами вы можете здесь.
- мысленно вернитесь в конец прошлого века
- верстка только таблицами
- забыть про скрипты
- у каждой таблицы обнулять атрибуты cellpadding и cellspacing, а также коллапсировать таблицу
- однопиксельный прозрачный .gif для отступов (например, img src="blank.gif" style="width:20px;")
- не использовать абсолютное позиционирование
- оформление задавать inline для каждого элемента
- о теге font нужно забыть вовсе
- font-family, font-size и color — в формате #xxxxxx или фактическом, например red
- можно использовать теги b, i, u, strong и др.
- значение _blank атрибута target
- для всех изображений установить ширину и высоту равной фактической (через атрибуты или в стилях)
- если картинка - ссылка, то убираем border (через стили или напрямую) и text-decoration: none;
- фон в виде цвета можно указывать для тела документа, таблицы и ее ячеек
- фон в виде картинок - нельзя
- Верстка почтовых рассылок
- Верстка рассылок — что мы имеем?
- How-to: Правила вёрстки email-писем
- Верстка почтовых рассылок: разбор полетов
- Основы профессиональной верстки электронных писем
- Верстка писем, набор сниппетов
- 5 правил верстки email-писем от Печкина
- Верстка писем и email рассылок. Немного магии Gmail
- Верстка email рассылок от А до Я для чайников
- Mastering HTML Email (5 posts)
- Creating a Simple Responsive HTML Email
- Вёрстка адаптивных email-писем (подробное руководство): часть 1, часть 2
- Things I've Learned About Building & Coding HTML Email Templates
- Creating a Future-Proof Responsive Email Without Media Queries
- Responsive Email Patterns
- A Guide for SVG Support in Email
- Вёрстка писем: 60 полезных ресурсов, руководств и исследований
Если у вас имеются какие-либо вопросы или пожелания, пишите письма на nikbelikov@me.com или воспользуйтесь твиттером.
Copyright (c) 2015 nikbelikov.ru
Данная лицензия разрешает лицам, получившим копию данного программного обеспечения и сопутствующей документации (в дальнейшем именуемыми «Программное Обеспечение»), безвозмездно использовать Программное Обеспечение без ограничений, включая неограниченное право на использование, копирование, изменение, добавление, публикацию, распространение, сублицензирование и/или продажу копий Программного Обеспечения, также как и лицам, которым предоставляется данное Программное Обеспечение, при соблюдении следующих условий:
Указанное выше уведомление об авторском праве и данные условия должны быть включены во все копии или значимые части данного Программного Обеспечения.
ДАННОЕ ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ЯВНО ВЫРАЖЕННЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ, НО НЕ ОГРАНИЧИВАЯСЬ ГАРАНТИЯМИ ТОВАРНОЙ ПРИГОДНОСТИ, СООТВЕТСТВИЯ ПО ЕГО КОНКРЕТНОМУ НАЗНАЧЕНИЮ И ОТСУТСТВИЯ НАРУШЕНИЙ ПРАВ. НИ В КАКОМ СЛУЧАЕ АВТОРЫ ИЛИ ПРАВООБЛАДАТЕЛИ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ПО ИСКАМ О ВОЗМЕЩЕНИИ УЩЕРБА, УБЫТКОВ ИЛИ ДРУГИХ ТРЕБОВАНИЙ ПО ДЕЙСТВУЮЩИМ КОНТРАКТАМ, ДЕЛИКТАМ ИЛИ ИНОМУ, ВОЗНИКШИМ ИЗ, ИМЕЮЩИМ ПРИЧИНОЙ ИЛИ СВЯЗАННЫМ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ ИЛИ ИСПОЛЬЗОВАНИЕМ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ИЛИ ИНЫМИ ДЕЙСТВИЯМИ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ.