Skip to content
📮 «Печкин» помогает быстро начать вёрстку писем
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
gulpfile.js
projects/reference-mail
resources
.editorconfig
.gitignore
CHANGELOG.md
README.md
package.json
yarn.lock

README.md

📮 «Печкин»

«Печкин» помогает быстро начать вёрстку писем

Живой пример демо-письма: https://4enki.github.io/pechkin/reference-mail/

Скрин демо-письма Скриншот эталонного демо-письма проекта «Печкин» для быстрого старта вёрстки писем

С чего начать?

  1. Склонировать репозиторий в папку new-mails, перейти в созданную папку проекта, удалить скрытую папку .git:

    git clone https://github.com/4enki/pechkin.git new-mails && cd $_ && rm -rf ./.git
  2. Перед первым запуском нужно установить зависимости (быстрее через Yarn; один раз на проект):

    npm/yarn install
  3. Перейти в дирректорию эталонного письма и запустить сборку с вотчером:

    cd projects/reference-mail
    gulp

Как всё устроено

В корне «Печкина» есть директория projects в которой находятся отдельные проекты каждого письма/рассылки. Пример можно смотреть в projects/reference-mail. Внутри отдельного проекта должен быть файл gulpfile.js.

Запуск сборки с вотчером происходит по команде:

gulp

Шаблонизация

Для шаблонизации использован Nunjucks. Файлы разметки живут в папке отдельного проекта src/templates/, страницы размещаются в src/templates/pages/ и состоят из компонентов (= строк/этажей) src/templates/components/.

Лйэаут письма находится в src/templates/layouts/layout.html.

Набор снипетов-помощников для вывода типовых блоков macro находится в projects/reference-mail/src/templates/utils/utils.html. Пример использования есть внутри этого файла.

Стили

Используемый препроцессор — SASS.

Готовый CSS компилируются в файл src/templates/pages (не попадает в git, смотрите файл .gitignore) и инлайнится в документе с помощью gulp-inline-css.

Графика

Вся графика размещается в src/images, собираются в dist/assets/images/ с сохранением структуры.

Изображения для отдельного блока размещаются в папке src/templates/components/**/images/ и копируются в dist/assets/images/ без сохранения структуры.

Для сжатия растовой графики рекомендуется использовать Squoosh.

Структура папок и файлов

├── gulpfile.js/                      # Конфиг Gulp.js
│   ├── tasks/                        # Gulp-такси
│   │   ├── server.js                 # Таск browser-sync
│   │   ├── styles.js                 # Таск сборки стилей из SCSS для инлайна
│   │   ├── template.js               # Таск шаблонизации: nunjucks, markdown, inline-css
│   │   └── watch.js                  # Бдительные вотчеры изменений
│   ├── utils/                        # Помогаторы
│   ├── paths.js                      # Пути к ресурсам проекта
│   ├── config.js                     # Конфиг gulp-сборки: путь, структура и т.п.
│   └── index.js                      # Основные задачи
├── projects                          # Отдельные проекты писем, рассылки и проч.
│   └── reference-mail                # Пример эталонного письма и стуктуры сборки
├── resources/                        # Файлы для работы: макеты, данные и проч.
├── .editorconfig                     # Конфигурационный файл IDE
├── .gitignore                        # Список исключённых файлов из Git
├── package.json                      # Файл-конфиг «Печкина»: пакеты, скприты, выходные данные
├── CHANGELOG.md                      # Летопись версий
└── README.md                         # Документация «Печкина» (вы сейчас здесь, кстати)

⚗️ В тему

You can’t perform that action at this time.