Мы предлагаем:У нас есть:
1 базу данных MySQL(50MB)PHP 5
Прикрепление своих доменовMySQL
Предустановленные движки сайтовPerl
Место под файлы(300MB)Ruby
Бесплатно и без рекламы!
Авторизация:
e-mail: Пароль:
Забыли пароль?    Запомнить  
Все блогиSoftware → Twitter Bootstrap - или "а-а-а, оно шевелится!"
Rss

Я в последнее время всё чаще натыкаюсь на разнообразные средства, которые призваны сделать легче жизнь веб-разработчикам. А именно – веб-дизайнерам. Совсем недавно здесь была статья о проекте, который “представляет вашему вниманию модульную сетку”. Я эту штуку уже видел раньше (хотя понял это не сразу), но тогда не очень представлял, чем она так интересна.

Сейчас я расскажу о куда более серьёзном боекомплекте веб-дизайнера. Модульная сетка входит в него, но это лишь очень малая часть всего, что там есть. Это безумный набор JS-библиотек и CSS-листов, который позволяет с помощью небольшого набора div-контейнеров решать большинство вопросов дизайна интерфейса.

Twitter bootstrap

Собственно, по приведённой ссылке есть полновесное описание того, что это такое. Я приведу здесь лишь несколько ссылок для тех, кто хочет сразу посмотреть на примеры (вместе с кодом). Вот они: основные элементы оформления, элементы интерфейса, плагины на Javascript. Особо обратите внимание на то, как ведёт себя страница, если сильно сжать её по горизонтали – как это происходит на мобильных устройствах. Модули из сложной сетки выстраиваются в простую линейную очередь из крупных (относительно) элементов управления, а контент сайта выводится на всю ширину экрана.
Помимо прочего, там есть классы, которые отображают или не отображают своё содержимое на разных видах устройств (планшеты, смартфоны).

Я никогда не работал с CMS серьёзно. Это было просто чем-то, в чём я иногда любил поковыряться. А иногда этим я мог даже радовать людей – сооружая сайт под сообщество игроков, к примеру. Можете увидеть, что единственный мой сайт на Оксе – сайт гильдии из MMORPG “Аллоды Онлайн” . И хотя я там давненько не играю – там образовалось нехилое сообщество, которое помогает мне тестировать ту ерундень, что я сооружаю на Joomla. Так мы друг другу полезны. И в ближайшее время я собираюсь переклеить сайт с помощью Bootstrap. На это есть ряд причин.

  1. Мне не помешает немного практики ковыряния в сложных конструкциях div-ов и CSS. Это вообще полезный практический навык, и по совместительству “маст-хэв” любого сайтостроителя.
  2. Мобильные устройства с тач-скринами (на iOS и Android, главным образом) получают всё большее распространение, а поддерживать связь с гильдией иногда становится сложно на тех же планшетах и смартфонах – навигация дико неудобная. Вступление в гильдию обязывает поглядывать на сайт каждый день на предмет новостей – и это лишнее удобство для тех, кто в течение дня не может дорваться до компьютера.
  3. У многих компонентов, установленных на сайте, свои, довольно сложные интерфейсы, оформление для которых реализовано в каждом расширении отдельно. И у них частенько встречаются однотипные элементы управления, но в каждом случае они реализованы по собственной системе.

Если поглядеть на то, что установлено на этом сайте (посмотрите заявку, если интересно) – можно заметить, что там много сложных компонентов. Система профилей, событий, форум. Если вы хоть раз видели, сколько классов CSS они вводят для организации интерфейса – у вас точно хоть раз болела голова.

Bootstrap вводит тонну классов сам по себе – но они не привязаны к конкретным областям применения, они могут быть использованы в любом месте страницы, часто даже в хитрых комбинациях. А компоненты, в свою очередь, вводят свои “пакеты с шаблонами”, которые надо подбирать и тонко настраивать под себя, чтобы они хорошо смотрелись. Что если собрать пакеты, которые будут использовать только основной шаблон сайта – сам Bootstrap? Они будут меньше весить, не будут загружать дополнительных файлов, и будут выглядеть единым образом. Мечта, к которой строит стремиться… И Boostrap делает эту мечту заметно ближе к реальности.

Но даже если у вас нету килотонны расширений, Boostrap будет вам полезен при оформлении сайта. Я работаю с шаблоном Strapped, который можно найти здесь. Помимо прочих приятных мелочей bootstrap, в нём можно одним небольшим изменением сделать модули сворачиваемыми, или даже организованными по вкладкам. С помощью него в несколько тыков делается карусель, или разделение контента на аккордеонные блоки, если обычно нужен только один из них (к примеру, в Часто Задаваемых Вопросах). В большинстве случаев нужно только найти соответствующий пример кода на сайте Bootstrap, и скопировать, поставив свой контент.

Интересный факт, кстати. Joomla 3 имеет интегрированный Bootstrap, модифицированный под её нужды. Но у Joomla 3 большие проблемы с обратной совместимостью для расширений. На Joomla 2.5 можно установить этот плагин. Лично я работаю вот с этим шаблоном, который мне кажется более надёжным способом вшивания Bootstrap. Я не интересовался, что с поддержкой этого набора в других CMS, и если кто-то добавит в комментариях ссылки на подобные средства – я добавлю их в статью. На сайте же есть разбор примера сооружения веб-дизайна на основе Bootstrap без привязки к конкретным CMS – так что такие средства наверняка есть и для Wordpress, и для других.

А чтобы комментарии точно не пустовали, подкину тему для обсуждения.
Как вы думаете – стоит ли сделать шаблон главной страницы Окса с помощью Bootstrap?


Автор: Павел | Дата создания: 28 октября 2012, 16:14 UTC | +1.341


Комментарии(13)
Денис  28 октября 2012, 18:41 UTC  #
0.0
Index

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

На сколько легко внедряется второй дизайн без изменения html-кода?

Денис  28 октября 2012, 18:45 UTC  #
0.0
Index

А какие есть альтернативы, только если говорить о дизайнерских фреймворках для абстрактного html-кода, без привязки к какой-либо CMS?

Денис  28 октября 2012, 18:49 UTC  #
0.0
Index

Меня откровенно заинтересовало, вкупе с вопросом. Я бы сделал первоначальный вариант, т.к. надеюсь что сторонним дизайнерам и генераторам идей будет проще на oxnull внедрять свои идеи. Здесь я в первую очередь имею ввиду Андрей. А там может еще кто примкнет, а то сейчас слишком запутанно. И мне видится решение проблемы как раз через применение чего-то подобного.

Денис  28 октября 2012, 18:56 UTC  #
0.332
Index

Я так понял это набор отдельных блочных элементов, причем их дизайн уже заточен.

Павел  28 октября 2012, 19:19 UTC  #
0.589
2bfe965ab5ef94a0568bc61c36b46d4c

Это большой блок CSS, а также библиотек на JS – с уже готовым оформлением. Поведение части классов CSS определено через подключенный JS – вроде каруселек, вкладок, меню, подсказок, и т. п.
Задача дизайнера – только расположить блоки, и при желании усложнить поведение страницы с помощью скриптов JS, привязанных к отдельным элементам управления. Там хоть AJAX-запросы делай, если умеешь.
Расположение сделано удобным засчёт модульной сетки и, опять же, набора классов из CSS.
Внешний вид, если сильно постараться, можно подкрутить – но мне нравится уже такой. На планшете смотрится неплохо, только движущиеся элементы подтормаживают малость.

Павел  28 октября 2012, 19:31 UTC  #
0.0
2bfe965ab5ef94a0568bc61c36b46d4c

Ах да, там есть и баги. Куда ж без них. Судя по всему, там не выставляются Z-уровни элементов, что иногда при вкладывании один в другой приводит к неадекватным эффектам вроде подсказок ПОД окном, в котором находятся привязанные к ним элементы.
Это относится к плагину Modals, который выводит “всплывающее сообщение”.

Денис  28 октября 2012, 19:34 UTC  #
0.0
Index

Это, наверно, скоро пофиксят. А что с альтернативами? Беглый поиск не помог найти что-либо, а тебе может уже приходилось сталкиваться.

Павел  28 октября 2012, 19:37 UTC  #
0.312
2bfe965ab5ef94a0568bc61c36b46d4c

Нет, не приходилось. Только к конкретным CMS, и это было связано, как правило, с интеграцией системы настроек из админ-панели. Ну, к примеру, смена логотипа, или изменение отдельных текстов, выравнивание, размеры, наличие каких-то компонентов и скриптов.
Я сам этим занимаюсь не так часто, и на Bootstrap-то я наткнулся только потому, что смотрел на третью версию Joomla.

Павел  28 октября 2012, 19:39 UTC  #
0.0
2bfe965ab5ef94a0568bc61c36b46d4c

Есть программные пакеты для генерации наборов с похожим назначением. Взять тот же Artisteer.

Андрей  28 октября 2012, 19:41 UTC  #
0.0
Image

Хм, интересная чтучка. На днях по-колдую.

Cren  29 октября 2012, 04:23 UTC  #
0.0
531350

Довольно интересно, получается, что можно лепить сайт, как на простом конструкторе, расставляя блоки. Возможно, в будущем буду использовать (есть одна задумка).

Павел  29 октября 2012, 12:48 UTC  #
0.0
2bfe965ab5ef94a0568bc61c36b46d4c

Касательно альтернатив – на кое-что всё же наткнулся.

Павел  30 октября 2012, 07:19 UTC  #
0.335
2bfe965ab5ef94a0568bc61c36b46d4c

Один маленький, но отменного качества довесок из значков:
http://fortawesome.github.com/Font-Awesome/
На замену Glyphicons, которые просят размещать ссылку на сайт.
Я, в общем-то, против ссылки ничего не имею, но вектор лучше растра. =)


Простите, Ваш браузер не поддерживает html5
Управление стрелками. Пробел - пауза.