Как вы делаете адаптивность на Друпале?

Question

[Andrew Chil]

Всем привет!

Интересует как делают опытные люди сайты на Drupal адаптивными? Какие темы, модули выбираете для этого?
Желательно по шагово...
Я столкнулся с проблемой следующего типа.
Сделал свой первый небольшой сайт на Друпал, сделал все на теме zen (читал что она адаптивная).
На сайте создал свой тип материала, свой вид (возможно еще что-то надо было ?!) - картинки с текстом, которые выводятся по три колонки.
И вот вопрос, как сделать, например, чтобы те три колонки становились в одну на меньшем экране? Знаю, что можно css-ом, но тогда зачем эта адаптивная тема zen?
С чего вообще начинать адаптивность в друпале (чувствую, что я что-то пропустил)?
Заранее огромное спасибо за советы)

Answer 1

[UksusoFF]

htmlbook.ru/css/value/media
habrahabr.ru/company/paysto/blog/254871

Comments

[Andrew Chil]

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

[UksusoFF]

Andrew Chil: ну давайте разберемся в терминологии: frontender.info/adaptive-vs-responsive-terminology
У друпала для обычных тем используется тот же HTML и CSS что и в любой другой CMS.
Если взять за основу Zen и правильно просто дописать ей оформление, то все должно работать.
Фишка в том чтобы у вас в контенте и обоих боковых колонках все было тоже "резиновое".

[Andrew Chil]

Если взять за основу Zen и правильно просто дописать ей оформление - имееться ввиду медиа-запросы? Я знаю как адаптивность сделать media, но спрашиваю может в Друпале есть более автоматизовано решение.

[UksusoFF]

Andrew Chil: имеется ввиду стили для контента, медиа-запросы там уже написаны.

[Andrew Chil]

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

[UksusoFF]

Andrew Chil: что в вашем понимании не корректно? Скриншот хотя бы увидеть, а лучше ссылку на пример.
Если вы хотите чтобы оно сворачивалось в одну кнопку как это модно сейчас делать, то подключите например getbootstrap.com/components/#navbar

[Andrew Chil]

UksusoFF: Добавил скрин, там меню слетает в сам низ под контент

[UksusoFF]

Andrew Chil: "это нормально", допишите стили для меню или https://www.drupal.org/project/responsive_menus

[Andrew Chil]

Вот это мне надо было услышать - "это нормально", думал что не правильно что то делал. Спасибо)
А поднять его position: absolute и top задать?

[UksusoFF]

Andrew Chil: у вас оно не помещается на ширину экрана - слишком много пунктов меню.
Или уменьшить размер текста и padding\margin или, что более приемлемо, свернуть это все в одну кнопку как написано выше.

[Andrew Chil]

UksusoFF: Это понятно, но меню от этого не поднимется вверх.

[UksusoFF]

Andrew Chil: поднятие меню проблемы не решит, поднять меню вы можете в настройках admin/structure/block

[Andrew Chil]

UksusoFF: У меня меню в блоках отображается как выключенное, включаю появляется еще одно сбоку вертикально (меню точно то). Что я сделал не так?

[UksusoFF]

Andrew Chil: /admin/appearance/settings/zen Включить/выключить отображение

[Andrew Chil]

UksusoFF: Оно включено у меня, но в блоках пишет что нету, как бы независемое

[UksusoFF]

Andrew Chil: ну так выключите и включите в блоках

[Andrew Chil]

UksusoFF: Это нормально что оно вертикальное тепер и все стили слетели?

[UksusoFF]

Andrew Chil: если вы его засунули куда-то кроме Navigation блока, то да.

[Andrew Chil]

UksusoFF: Поставил в Navigation но оно все равно внизу на маленьких екранах

[UksusoFF]

Andrew Chil: https://www.drupal.org/project/responsive_menus

[Andrew Chil]

UksusoFF: Я понял, спасибо за терпенее)

[UksusoFF]

Andrew Chil: ну еще вот такой вариант: xandeadx.ru/blog/css/772

[UksusoFF]

Выглядит вот так: habrastorage.org/files/4ea/de8/cc5/4eade8cc57cf49a...
vzradio.ru

[Andrew Chil]

UksusoFF: Спасибо)

Answer 2

[afi13]

Вы можете использовать какой-либо front-end framework, например возьмите готовую тему Bootstrap или Zurb Foundation. Создайте для нее свою кастомную сабтему и меняйте все что вам надо. В обоих фреймворках без проблем можно сделать три колонки переходящие в одну, просто добавлением необходимых классов. Подробней можно посмотреть в документации Bootstrap и Foundation.
В обратном случае используйте media. Подробней о responsive в Drupal можно прочитать в книге. Еще посмотрите статью на хабре

Comments

[Andrew Chil]

Спасибо за отзыв, буду читать)

Answer 3

[Сергей]

Адаптивности добиваются через css в любом случае, просто в zen эти правила уже описаны и вам не нужно придумывать свой велосипед. в zen это сделано через правило @media, смотрите css файлы темы.

Comments

[Andrew Chil]

И как сделать три колонки, например, адаптивними? Нужно просто их клас вставить в media?

[Сергей]

нет, нужно описать общие правила для трех колонок, затем через media screen определить при каких разрешениях три колонки должны выстроиться в одну

[Andrew Chil]

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

[Сергей]

потому что там сайдбары и контент имеют разную ширину в зависимости от разрешения экрана

[Andrew Chil]

Понятно)
Спасибо за отзыв!