Новый блог, Новая тема

Блог должен быть не только интересным, но и удобным. Удобным местом как для публикации статей, так и получения фидбека. Опыт использования Blogger показал, что для многих эта площадка была не удобна, да и для меня — тоже.

Решение перенести все на Drupal для меня, как Drupal разработчика, являлось очевидным, но не таким простым. К сожалению, не удалось перенести комментарии, но лучше было решиться на это сейчас, на начальном этапе жизни блога. Вторым важным вопросом был выбор темы оформления. Не найдя ничего подходящего, я решил сделать свою базовую тему со всем необходимым.

Как, наверное, уже стало понятно, вы сейчас смотрите на результат этой затеи. Тема получила название Glook и доступна в песочнице. За это время написание новых статей отошло на второй план, но сам процесс был очень полезен с точки зрения изучения Drupal. Дальнейшее повествование описывает использованные технологии, подходы, встретившиеся проблемы и их решения.

Какой должна быть хорошая тема для блога

Требования, которые ставились при разработке темы:

• Тема должна быть законченной, полностью готовой к использованию;
• При этом, тема должна быть универсальной, кастомизируемой;
• Тема должна быть красивой, современной, аккуратной и не перегруженной;
• Тема должна соответствовать современным стандартам и подходам — HTML5, CSS3, Responsive;
• Тема должна быть простой и легкой, и в работе и освоении.
• И, самое главное, тема должна помогать восприятию содержимого, а не акцентировать внимание на оформлении.

Полностью удовлетворить все эти условия оказалось непросто, поэтому кое в чем пришлось пойти на компромисс. Но общий дух задумки, как мне кажется, сохранился.

Реализация

В качестве базовой темы была использована HTML5 — это бекпорт системной темы из Drupal 8. По сути, она заменяет старые добрые элементы разметки на более семантичные аналоги из HTML5.

CSS слой находится под контролем SASS и Compass — просто незаменимой сейчас связки для любого фронтэнд разработчика. Так же это дает дополнительную гибкость при кастомизации. Все основные параметры темы, такие как размеры, цвета, шрифты — заданы переменными.

Следующим уровнем идет UI, и тут выбирать особо не пришлось. Самостоятельно разрабатывать оформление для элементов интерфейса — это большой труд, а из существующих вариантов практически безоговорочно лидирует Bootstrap. Это современный UI фреймворк, красивый и простой в использовании и потому очень популярный. Был разработан в Twitter и используется такими компаниями как Github, Disqus, DigitalOcean, Google и многими другими. Bootstrap прекрасно документирован, имеет множество расширений и инструментов для быстрого внедрения. За время работы над темой сам Bootstrap успел обновиться до версии 3.1 и обзавестись официальными исходниками на SASS. Но так как вносить существенные изменения в фреймворк не планировалось, в теме используются уже скомпилированные файлы.

Конечно, мне не первому пришла в голову мысль использовать Bootstrap вместе с Drupal, существует несколько похожих проектов, в том числе довольно популярная тема Bootstrap. Категорически рекомендую, тема отличная и довольно качественно сделана, просто для моих целей она не подходила. Она более оптимальна для визуального использования, а не в качестве базовой темы. По моей задумке, общее оформление должно напоминать стиль, который использует Google, и который лично я считаю довольно удобным. Так же важным моментом было оптимальное использование пространства, адаптация под мобильные устройства и устройства с экранами, обладающими высокой плотностью пикселей. Учитывая все эти факторы, было принято решение изобретать свой велик. И первым же колесом которое крутилось в обратную сторону стал сам принцип совмещения стилей и разметки. Если обычно мне приходилось писать CSS для готовой разметки, то в случае с Bootstrap, CSS уже был, и требовалось наоборот, добавить соответствующие классы в саму разметку. Надо отметить, что это помогло мне существенно продвинуться в понимании API темизации Drupal, хотя кое-что я все же позаимствовал из упомянутой выше темы.

Макет страницы (page layout) в Drupal может управляться несколькими способами:

• Для Compass существует расширение Susy, реализующее сетки, и по началу использовались именно они (забегая вперед, скажу, что в последствии, они были выпилены).
• Так же свои сетки есть у Bootstrap, и так как он уже присутствует в теме, ничего не мешает использовать этот функционал;
• В самом Drupal тоже могут быть различные механизмы вывода: регионы, Pannels, Display suite;

Идеального и универсального поведения с помощью сеток добиться так и не удалось, да и было бы неправильно использовать их для этого. И тут, совершенно случайно, был обнаружен кандидат на статус официального стандарта w3c для работы с лейаутами — Flex box model. Штука несложная, напоминает табличную модель с различными интересными плюшками, поддерживается в Compass и всеми современными браузерами, даже сами знаете каким. Вот оно — простое и логичное решение одной из самых неразрешимых проблем человечества :). При этом, весь код привязан к одному классу layout-flex, что, при необходимости, позволяет использовать альтернативный способ разметки, например на сетках, как и было изначально.

Дополнительные фишки

В тему интегрирован сторонний скрипт для сворачиваемого главного меню на маленьких разрешениях — slimMenu. Для нормальной работы скрипта нужно установить модуль jQuery Update и выбрать версию jQuery не ниже 1.7, аналогичная зависимость требуется и для Bootstrap.

Меню в свернутом и развернутом состояниях

Принимая во внимание основное назначение темы — контенто-ориентированные сайты, не лишним будет и хороший механизм подсветки синтаксиса в коде. Для этих целей, из множства конкурентов, был выбран Prism.

Пример подсветки php кода

Конкретно для этого сайта, был использованн классный иконочный шрифт Font Awesome, но в саму тему он не включен. Зато включен другой, совсем маленький шрифт из 11 иконок для различных типов файлов. Сами иконки придуманы и отрисованы мной, и выдержаны в стиле иконок, которые идут вместе с Bootstrap. Шрифт может использоваться стандартным бутстраповским образом, а так же по умолчанию иконки добавляются к ссылкам на файлы.

Примеры ссылок на различные тыпы файлов

Возможно, имеет смысл сделать этот шрифт отдельным проектом, так как он может использоваться отдельно от темы и от Drupal. Что думаете? Похожая история была с оформлением редактора BUEditor, которое переросло в самостоятельный модуль GMarkdownEditor.

Текущее состояние и итоги

Сейчас работа над темой перешла в стадию тестирования в боевых условиях. Уже запланировано ее использование на еще нескольких проектах, и до релиза пока еще далеко.

Подводя итоги, хотел бы отметить, что разработка действительно хорошей темы — это долгий и сложный процесс, и очень важно соблюсти баланс между универсальностью и функциональностью. Glook рассчитана на подкованного во фронтэнде разработчика, но тем не менее, может быть быстро развернута без дополнительных навыков. Тема не перегружена дизайнерскими элементами и прекрасно подходит для сайтов, где главным является содержимое.