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

[seo2z]

Благодарю, хороший материал! То, что нужно и как раз вовремя! Пожалуй, сэкономлю 20 тысяч и натяну дизайн на друпал сам.

[sirko_el]

Очень хороший подход. Только нужно подготовить дизайнера и заказчика к тому, что будет использорваться bootstrap, который накладывает некоторые ограничения на дизайн.

[EzS]

Только нужно подготовить дизайнера и заказчика к тому, что будет использорваться bootstrap, который накладывает некоторые ограничения на дизайн.

Например, какие?

[sirko_el]

Например при использовании grid, элементы должны быть расположены по правилам грида, а не «там где захотелось». Та к же, как пример, могу привести то, что дизайнер должен знать об унификации отступов и расстояний (margin, padding) у всех элементов. В противном же случае простая и быстрая верстка превратится в сложную и мучительную.
Из личного опыта.

[ZiggiPop]

Например при использовании grid, элементы должны быть расположены по правилам грида, а не «там где захотелось». Та к же, как пример, могу привести то, что дизайнер должен знать об унификации отступов и расстояний (margin, padding)

Есть подозрение, что через какое-то время без всего этого любая верстка превратится в сложную и мучительную.

[sirko_el]

Я полностью согласен. Но в различных проектах часто упускается этот момент, и тогда страдают все. Вот и решил напомнить. А вслучае с использованием bootsrap потери времени, при невыполнении вышеописанного условия просто колосальные.

[EzS]

Для дизайнеров есть Twitter bootstrap grid template. Нормальные дизайнеры всегда работают с сеткой

[copyhold]

| Нормальные дизайнеры всегда работают с сеткой
Глупости какие...!

[Valeratal]

спасибо, интересный пост

[ambientos]

И чем это легче, чем обычный путь создания темы?

[EzS]

Для меня, лично, ничем. Я делаю свои темы с тем же Twitter bootstrap. Самое простое решение — тема Bootstrap и ничего лишнего. если нужны регионы, можно поставить свои.

Я, честно говоря, не вижу смысла в модуле Block Class, к чему нагружать систему лишним модулем, если можно переопределить вывод конкретного блока или оттемизировать шаблон вывода блока.

По поводу

Обратите внимание, что для использования JS-компонентов Bootstrap необходимо подключить jQuery 1.7.x с помощью модуля jQuery Update.

Стоит уточнить, что минимальная версия jQuery для работы с Twitter bootstrap — 1.7, я включаю 1.8, сайт Bootstrap использует версию 1.9

[Nilard]

Для меня, лично, ничем. Я делаю свои темы с тем же Twitter bootstrap. Самое простое решение — тема Bootstrap и ничего лишнего. если нужны регионы, можно поставить свои.

Ну а кто мешает, пожалуйста. Появился способ автоматизировать часть рутины — я просто рассказал о нем. Я тоже создавал вручную поля в нодах, пока не появился CKK, делал функции вывода страниц и блоков до Views, расставлял регионы руками, пока не появилась Omega. Одним готовые решения облегчают жизнь, другие выбирают собственные велосипеды.

Я, честно говоря, не вижу смысла в модуле Block Class, к чему нагружать систему лишним модулем, если можно переопределить вывод конкретного блока или оттемизировать шаблон вывода блока.

Ну например если у вас пара десятков типовых блоков часть из которых нужно загнать в well, а часть нет. Для каждого создавать отдельный шаблон, просто чтобы добавить класс? Или городить в CSS конструкции вида #block-block-1, #block-block-2, #block-block-3, ..., #block-block-N { ... }? Переопределить template_preprocess_block? Ну так пожалуйста, никто не запрещает. Block Class последний вариант и использует, какая разница будет это в теме или в отдельном модуле?

Когда возникла необходимость (в связи с переходом на Bootstrap) добавлять классы блокам, я тоже недолго думая добавил их в препроцесс. Потом задумался об автоматизации и написании простенького модуля. Потом поискал готовое решение, и нашел его в виде уже готового простенького модуля Block Class, который меня полностью устраивает. Ну а теперь делюсь этим с остальными.

Стоит уточнить, что минимальная версия jQuery для работы с Twitter bootstrap — 1.7, я включаю 1.8, сайт Bootstrap использует версию 1.9

Спасибо, я и имел в виду минимальную версию, внес уточнение в пост.

[Ubran_Hera]

>Я тоже создавал вручную поля в нодах, пока не появился CKK

Комментарий хороший, так что не в упрёк вам, а просто для информирования публики:

Модуль Content Construction Kit (CCK) сейчас называется Fields и является частью ядра (начиная с 7 версии).

drupal.org/project/cck

Для использующих Drupal это стало приятной неожиданностью примерно 5 (пять) лет назад.

groups.drupal.org/fields-core

Ваш капитан очевидность

P.S.
А статья — да, тоже интересная, есть над чем поразмыслить.

[E_STRICT]

Не совсем понял, зачем это. Омега и bootsrap это два совершенно разных фреймворка, со своими сетками. В чем смысл их совместного использования. На drupal.org есть уже несколько тем на базе bootstrap. Чем они не подходят?

[Nilard]

Кажется, я рассказал об этом в первом абзаце.

Расскажу еще раз, может быть более популярно. Лично мне сетка в Bootstrap нравится больше, а качество кода и компонентов у Bootstrap намного выше. Но у Omega есть отличный функционал, который позволяет менять расположение регионов просто в настройках темы, не прибегая к правке кода page.tpl.php, чего в других темах нет. Скрестить этот функционал Omega с возможностями Bootstrap и есть цель моей статьи.

[RomeO_rzn]

Подскажите, а в zone--content.tpl.php не нужно ли заменить
class="grid-<?php print $columns; ?>"
на
class="span<?php print $columns; ?>"?

[Nilard]

В шаблоне zone--content.tpl.php эти классы используются при выводе системных «хлебных крошек» и сообщений:

    <?php if ($breadcrumb): ?>
      <div id="breadcrumb" class="grid-<?php print $columns; ?>"><?php print $breadcrumb; ?></div>
    <?php endif; ?>    
    <?php if ($messages): ?>
      <div id="messages" class="grid-<?php print $columns; ?>"><?php print $messages; ?></div>
    <?php endif; ?>

Т. к. мы отключили вывод этих системных компонентов при настройке темы в первой части статьи в разделе 6. Toggle advanced elements (включение/отключение дополнительных элементов), то приведенная выше часть кода ни на что не влияет, ее можно просто удалить.

Ну а если не планируете переопределять вывод этих компонентов с помощью Delta Blocks, то тогда да, необходимо будет заменить.