Scss-файл и верстка шаблона писем

[Sogl]

Приветствую!

В первую очередь, огромное спасибо за фреймворк!

У меня вопрос. В php-фреймворке, который использую, я могу создавать tpl-шаблоны и стилизовать их с помощью scss.

Выглядит это примерно так. Сам шаблон: http://www.koala-framework.org/documentation/kwf_general_features/mails/kwf_mail_template

Стилизация: http://www.koala-framework.org/documentation/kwf_general_features/mails/styling

В Вашем фреймворке я не нашел никого упоминания об scss. Можно как-то его создать/получить? Однако, как я понял, в итоге все равно все стили записываются в html через инлайнер. Может быть, записать вообще все в tpl-шаблон?

[dudeonthehorse]

Да, для отправки из Коалы можно всю заинлайненную кашу кода загонять в tpl файл. Использование препроцессоров в моей версии фреймворка пока что не планируется. Но можно пообщаться на эту тему с @csscoderRU. Он как раз раз собирался в своем форке использовать scss и jade. Ну или это можно прикрутить самостоятельно. Если это так важно.

[Sogl]

Ну пока интересует сам вопрос наличия scss файла со всеми стилями. Как понимаю, процесс перевода css в scss через онлайн-утилиты невозможен. По идее, ничего не мешает внести чистый css в scss, но в таком файле уже мало смысла будет. Только как workaround в моем случае.

Решил протестировать через tpl, внес стили. Пока решил не заморачиваться с картинками. Кстати, их можно как-то инлайн использовать, тот же base64?

Результат в gmail: Все отобразилось корректно.

Теперь "любимый" Outlook 2010. При отсутствии файла видим вот что: Видно, что основной контейнер нехило разъехался так по ширине.

Кнопка без скругления (ну да ладно, это не столь критично):

Ниже:

Могу оформить issue отдельно, если в этом есть необходимость.

[dudeonthehorse]

Повторюсь, я не вижу смысла использовать препроцессоры. Тем более на уровне Коалы. Можно прописать alt для изображений. И там будет осмысленный текст если картинка не загружена. Что касается разъехавшейся картинки, все просто. Прописываем ей через атрибуты width="270" и в аутлуке все станет ровно. Мелкое упущение. К тому же я планирую скоро обновить шаблон существенно его переписав.

[dudeonthehorse]

Что касается кнопки, скругления в аутлуке и не нужны. Письма - не то место, где нужен пиксель перфект. Отсталыми почтовиками можно и пренебречь.

[Sogl]

Прописываем ей через атрибуты width="270" и в аутлуке все станет ровно.

Было так: <img src="images/main/cover.jpg" width="600">

Стало так: <img src="images/main/cover.jpg" width="270" alt="Изображение отсутствует">

Результат:

Также я внес папку с изображениями в папку с tpl-файлами шаблонов, однако изображения почему-то так и не подхватились.

Что касается кнопки, скругления в аутлуке и не нужны. Письма - не то место, где нужен пиксель перфект. Отсталыми почтовиками можно и пренебречь.

Согласен.

[dudeonthehorse]

Это не cover расфигачила письмо. А вторая картинка в двухколоночном блоке. И 270 px надо задать ей. Неподхват картинок только из-за проблем с путями может быть. Моя хата с краю.

[Sogl]

Было:

<img src="https://d13yacurqjgara.cloudfront.net/users/14604/screenshots/1764344/helpcreature_1x.png" style="width:100%;">
<img src="https://d13yacurqjgara.cloudfront.net/users/3139/screenshots/1015141/email_id.jpg" style="width:100%;">

Сделал сначала так:

<img src="https://d13yacurqjgara.cloudfront.net/users/14604/screenshots/1764344/helpcreature_1x.png" style="width:100%;">
<img src="https://d13yacurqjgara.cloudfront.net/users/3139/screenshots/1015141/email_id.jpg" style="width:270px;">

А потом так:

<img src="https://d13yacurqjgara.cloudfront.net/users/14604/screenshots/1764344/helpcreature_1x.png" style="width:270px;">
<img src="https://d13yacurqjgara.cloudfront.net/users/3139/screenshots/1015141/email_id.jpg" style="width:270px;">

Результат не изменился совершенно.

[dudeonthehorse]

Прописываем ей через атрибуты width="270" и в аутлуке все станет ровно.

Тут нет слова style

[Sogl]

Сорри за невнимательность.

Теперь все работает как надо: Создать pull request?

Планируется ли добавление дополнительных готовых шаблонов в будущем?

[dudeonthehorse]

Да, будет несколько шаблонов. Корректировку внесу.

[Sogl]

Корректировку внесу.

Сразу тогда отмечу, что width="270" надо задавать для обеих картинок, иначе все равно будет криво: ширина восстанавливается, но правая остается больше левой.

[dudeonthehorse]

Все верно.