20th Century

Шаблон для быстрого старта верстки почтовых рассылок.

Как начать

У вас должны быть установлены:

Далее выполняем:

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 писем. Дополнительно ознакомиться с правилами вы можете здесь.

Материалы в помощь

Самое важное

мысленно вернитесь в конец прошлого века
верстка только таблицами
забыть про скрипты
<!DOCTYPE html>

Отступы

у каждой таблицы обнулять атрибуты 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

Фон

фон в виде цвета можно указывать для тела документа, таблицы и ее ячеек
фон в виде картинок - нельзя

Статьи

Инструменты

Контакты

Если у вас имеются какие-либо вопросы или пожелания, пишите письма на [email protected] или воспользуйтесь твиттером.

Лицензия

Данная лицензия разрешает лицам, получившим копию данного программного обеспечения и сопутствующей документации (в дальнейшем именуемыми «Программное Обеспечение»), безвозмездно использовать Программное Обеспечение без ограничений, включая неограниченное право на использование, копирование, изменение, добавление, публикацию, распространение, сублицензирование и/или продажу копий Программного Обеспечения, также как и лицам, которым предоставляется данное Программное Обеспечение, при соблюдении следующих условий:

Указанное выше уведомление об авторском праве и данные условия должны быть включены во все копии или значимые части данного Программного Обеспечения.

ДАННОЕ ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ЯВНО ВЫРАЖЕННЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ, НО НЕ ОГРАНИЧИВАЯСЬ ГАРАНТИЯМИ ТОВАРНОЙ ПРИГОДНОСТИ, СООТВЕТСТВИЯ ПО ЕГО КОНКРЕТНОМУ НАЗНАЧЕНИЮ И ОТСУТСТВИЯ НАРУШЕНИЙ ПРАВ. НИ В КАКОМ СЛУЧАЕ АВТОРЫ ИЛИ ПРАВООБЛАДАТЕЛИ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ПО ИСКАМ О ВОЗМЕЩЕНИИ УЩЕРБА, УБЫТКОВ ИЛИ ДРУГИХ ТРЕБОВАНИЙ ПО ДЕЙСТВУЮЩИМ КОНТРАКТАМ, ДЕЛИКТАМ ИЛИ ИНОМУ, ВОЗНИКШИМ ИЗ, ИМЕЮЩИМ ПРИЧИНОЙ ИЛИ СВЯЗАННЫМ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ ИЛИ ИСПОЛЬЗОВАНИЕМ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ИЛИ ИНЫМИ ДЕЙСТВИЯМИ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ.

knyshh / 20th-century Goto Github PK

20th-century's Introduction