Вы здесь

Создание темы самому с помощью Omega, Bootstrap и т.п.

0

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

Не было опыта работы с этими "конструкторами", расскажите пожалуйста у кого есть опыт.

Версия Drupal: 
7.x
Категория: 
Theming
Вопрос задан 13.10.2015 - 08:09

Ответы

2

andreystrelkov 13.10.2015 - 08:09
...в продолжении данной темы, задаюсь вопросом.

Если «вопросы» появились после покупки той темы, то тут будет уместно несколько издевательское — «а что мы тебе говорили, м?!» и куча смайлов :) шучу.

Расскажу (немного оффтопно) про мои поиски и находки, а также скромный опыт в шаблоностроении.

Раньше, когда Bootstrap ещё не был настолько мейнстримом, делал темы только на нём. Причём как самодостаточные, а не суб-темы. Из заготовки на d.org — брал всё лучшее (аля «прикольные функции»), а остальное уже сам собирал. Вполне себе быстро и удобно получалось, особенно после самописных CSS-framework-велосипедов. В основном, это были проекты, типа блогов, корпоративных сайтов и каталогов.

Как-то раз, в рассылке Creative Market, мне попалась на глаза «новая супер-пупер UI из Нью-Йорка». Так и начались мои опыты с Semantic UI. На тот момент одноимённой темы-заготовки на d.org ещё не было.

Сразу зацепили: обилие красивых и проработанных элементов интерфейса, документация и удобно-читаемые названия классов. Короче, всё то, что мне всегда не хватало в Bootstrap (особенно 2.х версии) и допиливалось — у Семантик уже из коробки было доступно. И вот, с того времени только его и использую. Очень помогает, конечно, что тему-заготовку постоянно обновляют и наполняют новыми функциями (но из dev ветки уже почти год вывести не могут). Темизаторский напильник в Семантике почти не достаю, без особых проблем получается делать сайты от лендинга до соц. сети (всё для этого есть) :)

...так, а к чему ты это всё пишешь?

Я всё к тому, что перед любым «шаблоном с нуля» надо чётко понимать: «что это будет за проект», «какие там будут функции и фишки», «как пользователь будет взаимодействовать с UI», «насколько нужно быть непохожим на другие сайты на этом framework», «насколько хорошо я знаю данный CSS-фреймворк» и ещё кучу мелких вопросов. Когда чек-лист будет пройден, можно с уверенностью «отдаваться» какому-нибудь фреймворку и соответственной теме-заготовке... ну или вообще полностью отказаться от всего готового в пользу своего. Осознанный начальный выбор — всегда будет означать победу в будущих обновлениях проекта.

Ответ дан 13.10.2015 - 09:52

Интересный UI. Спасибо за наводку. Хотел только спросить, если ли какие-нибудь статьи или видео по применению данного UI в Drupal?

Комментарий оставлен 13.10.2015 - 10:45

Пока что не находил, да и вообще, по Semantic UI все видео обычно про 1.х ветку (актуальная 2.х), так что, если действительно понравилась, то я бы просто начал с их документации. Порог входа довольно низкий, особенно если «забыть всё, чему учили вас в Bootstrap» :D

Комментарий оставлен 13.10.2015 - 10:50

Так как вы активно пользуетесь данным UI хочу Вас спросить. Как реализовано меню в Семантике? Поддерживает ли много-уровневость или как в Bootstrap (только один уровень вложения)?

Комментарий оставлен 13.10.2015 - 15:11

Да, знаю про этот косяк у бутстрапа. Помню в связи с этим даже факапчик был на одном проекте :) В Семантике, пока что, не было замечено каких-то проблем с меню. Хотя, если так посмотреть, то обычно мне хватает двух уровней за глаза. Поэтому в этом вопросе может быть не точная информация.

Комментарий оставлен 13.10.2015 - 16:30

надо чётко понимать: «что это будет за проект», «какие там будут функции и фишки», «как пользователь будет взаимодействовать с UI», «насколько нужно быть непохожим на другие сайты на этом framework», «насколько хорошо я знаю данный CSS-фреймворк» и ещё кучу мелких вопросов.

+1
Можно крупным банером такие слоганы вывешивать над подобными темами ... ))

Если сайт планируется коммерческий и срочно - лучше заказать шаблон у того же Платона Фёдоровича или других здешних аватаров (внятно сформулировав ТЗ), а потом потихоньку вштыриваццо чего и зачем вам там насочиняли.

Вырезать всякий хлам из готовых тем под конкретный проект - это всегда шило
с Semantic UI (не поленился посмотреть) - это не грозит особо - она и так лысая ... ))

Есть время - можно изучать разные варианты
Нет времени - разумнее заказать - это не шибко много нынче стоит

Комментарий оставлен 13.10.2015 - 16:44

Платон Фёдорович, можете показать ваши работы созданные с помощью данной темы? Можно на почту ipavels(at)ya.ru чтобы не посчитали за пиар.
Спасибо.

Комментарий оставлен 14.10.2015 - 05:48
1

Сложно - понятие относительное. Кто-то за пару часов сделает, кто-то будет неделю мучатся.
Вообще фреймворки типа Бутстрапа ускоряют работу в разы. Тем более тема, которую вы показали, идеально подходит для фреймворков.

Просто начните делать эту тему на любом фреймфорке, к примеру тот-же Бутстрап (потом с него плеваться будете, а сейчас надо научиться работать с фреймворками). Думаю выйдет не долго по времени. В дальнейшем улучшая свои навыки, Вы придёте к тому, что фреймворки сильно ограничивают свободу действий, имея кучу ненужных функций. И потом начнете использовать тулкиты и отдельные библиотеки. Но это потом...

Кстати советую сразу работать с препроцессором - это ещё уменьшит время на разработку и добавить удобств.

Вот мой набор Front-End плюшек на данный момент: SASS (SCSS) + Susy + Bourbon

Ответ дан 13.10.2015 - 09:30
Аватар пользователя SAM
SAM
212
1

Для омеги есть команда drush owiz и создадите свою субтему для омеги (как показывает практика омега должна быть включена), можно переделать кикстарт у омеги (есть дока в официалке) а также придется изучать дополнительно инструментарий с помощью которого сделана омега. Есть в ней готовый руби файл который позволяет поставить нужные гемы.

Ответ дан 13.10.2015 - 22:24
0

Omega

Ответ дан 13.10.2015 - 14:12
-1

вначале вам надо сделать вывод как на шаблоне, а там много элементов. как я понимаю, ваш сайт будет выглядеть примерно как тема, но не будет точной копией, так как там много всего.

когда вы сделаете вывод,скачайте Adaptive Theme и скопируйте at_subtheme из этой темы в главную папку тем, переименуйте папку и файлы в at_subtheme и там еще пару строчек внутри .info.
После включите свою тему подтему ADaptive Theme - и вы получите белый сайт.
начните с фона серого и белого листа подложки wrapper добавьте лого, далее главное меню. в общем стилизуйте все что нужно.

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

Ответ дан 13.10.2015 - 11:28