Drupal + Omega + Bootstrap: быстрое создание полностью кастомных тем оформления без верстки (Часть 1. Omega)

Жду продолжения :).

Шикарно. Но так ведь вообще можно обленится.

Все настройки созданной подтемы хранятся в БД или экспортируются в info-файл?

Большое спасибо за замечательную, прекрасно иллюстрированную статью.

Пробовал Omega, но идея группировать CSS-код по media queries, а не по структуре, мне не понравилась. Поэтому я отказался от Omega в пользу минималистичной базовой темы Boron и собственного starter kit'а.

Bootstrap и подобные «CSS-фреймворки» не использую принципиально из-за того, что они идут вопреки семантике. Вместо того, чтобы присваивать определенным блокам нужные свойства, CSS-фреймворк декларирует все возможные сочетания свойств под несемантическими классами. Эти классы нужно вставить в HTML блоков, чтобы свойства применились к ним… Ужасно!

Нет, это, конечно, позволяет по-быстренькому склепать тему оформления, но для серьезной работы не годится (мое личное мнение).

Гораздо более грамотный подход предлагает, например, SASS-фреймворк Susy.

Чтобы блок занял, скажем, четыре колонки, пишем:

----
// Файл: partials/blocks/.block-foo.sass
#block-foo
  +span-columns(2)
----

Чисто, семантично, аккуратно.

Susy позволяет задавать разное количество колонок в зависимости от ширины окна браузера. Я использую следующие диапазоны:
1) 0—400px — мобильники в портретном режиме;
2) 400—600 — мобильники в ландшафтном режиме;
3) 600—800 — планшеты в портретном режиме;
4) 800—1000 — планшеты в ландшафтном режиме;
5) 1000—1200 — нетбуки;
6) 1200—1400 — десктопы.

Напоминаю, что мобильные устройства имеют виртуальное разрешение, отличающееся от физического. Так, на типовом мобильнике с экраном 800×480 пикселов браузер считает, что размер экрана составляет 533×320 пикселов.

По дефолту количество колонок для каждого диапазона соответствует номеру диапазона (например, пять колонок на экране нетбука), но можно использовать и любое другое количество (причем, индивидуального для каждого контейнера и каждого диапазона!). Например:

----
// Файл: partials/blocks/.main-menu.sass
#main-menu

  // Изначально блок занимает всю ширину контейнера,
  // так что задавать значение для первого диапазона не нужно.
  // +at-bp(1)

  // Во втором диапазоне пускай тоже будет во всю ширину.
  +ap-bp(2)
    +span-columns(2)

  // Начиная с третьего диапазона и дальше список должен выстраиваться в строку.
  +from-bp(3)
    ul
     +horizontal-list

  // В четвертом диапазоне у контейнера данного блока должно быть три колонки,
  // из них одну занимает лого, а две других — главное меню.
  +at-bp(4,3)
    +span-columns(2 omega)

  // И так далее
  // ...
----

HTML-код при этом трогать вообще не нужно.

У метода есть несущественный недостаток: в итоговом CSS будут встречаться повторяющиеся участки кода. Из положения можно было бы выйти при помощи @extend, но большого смысла в этом нет, поскольку:
1) повторные куски прекрасно жмутся gzip'ом;
2) на читаемость кода это не влияет, ведь верстальщик работает с SASS, а там повторяются только вызовы mixin'ов, что не нарушает принцип DRY.

Также рекомендую следующие два модуля, для Bootstrap:
Panels Bootstrap Layouts
Views Bootstrap

Спасибо за статью, интересный подход к темизации

Nilard, а Foundation не пробовали? Они как раз быстрым прототипированием хвалятся.

Для Drupal есть базовая тема на Foundation в разработке, обещают скоро зарелизить.

а также можно вставлять любой код без каких-либо ограничений
Удобно очень как, особено потом код искать везде где только можно. В допустимых значениях какого нить филда пхп код найти весело.
Суть — запросы в шаблоне — ХАРАМ!

Сам использую Adaptivetheme для своих проектов, в ней больше гибких настроек, чем в Омеге, есть поддержка panels и Gpanels, и тоже можно гибко настраивать ширину блоков в различных регионов в зависимости от грида. + очень удобная настройка поведения блоков для различных разрешений.