Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
app
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

📮 «Печкин» — инструмент для вёрстки писем

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

Демо-письмо: https://sglazov.github.io/pechkin/reference-mail/

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

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

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

    git clone https://github.com/sglazov/pechkin.git my-mails && \ 
    cd $_ && \
    rm -rf ./.git
  2. Перед первым запуском нужно установить зависимости:

    npm i
  3. Запустить сборку с вотчером:

    npm run start
  4. Запустить сборку с минификацией, типографом, инлайнером стилей и без вотчеров:

    npm run build

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

В корне «Печкина» есть директория mails в которой находятся отдельные шаблоны для каждого письма.

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

npm run start

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

Для шаблонизации использован Nunjucks. Файлы разметки живут в app/src/: components — для компонентов, layouts — для лэайута и всё, что с ним связано; письма размещаются в mails/.

Стандартный лйэаут письма находится в app/src/layouts/default.html.

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

Стили

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

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

Графика

Вся графика размещается в app/src/images, собираются в public_html/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                      # Основные задачи
├── resources/                        # Файлы для работы: макеты, данные и проч.
├── .editorconfig                     # Конфигурационный файл IDE
├── .gitignore                        # Список исключённых файлов из Git
├── package.json                      # Файл-конфиг «Печкина»: пакеты, скприты, выходные данные
├── CHANGELOG.md                      # Летопись версий
└── README.md                         # Документация «Печкина» (вы сейчас здесь, кстати)

⚗️ В тему

About

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

Topics

Resources

Stars

Watchers

Forks