Введение в Bootstrap

Март 4, 2013
|

Много уже было сказано про Bootstrap, но на крупных проектах все так же используются самописные фремворки или же, чаще всего, не используется ничего. В статье, я постараюсь объяснить, что это за зверь такой Bootstrap, для чего и когда он нужен и как работает.

Итак, Bootstrap — это LESS/CSS-framework служащий для быстрой и масштабируемой верстки страниц. Включает в себя множество вещей:

  • grid — 12-колоночная (по умолчанию) сетка для раскидывания элементов;
  • reset.css — сброс отступов у элементов;
  • Базовые стили на элементы;
  • Респонзив-стили для адаптивной верстки;
  • и, самое вкусное, подготовленные html/css-паттерны для быстрого создания разнообразнейших блоков на странице;
  • JS-плагины для динамики.

Как видно, перечень воодушевляет. Скорее всего, сразу же захочется его использовать везде, что в корне неправильно. Подключать его на имидж- или промо-сайтах не имеет никакого смысла, так как сетки, так таковой, там нет в принципе, а стилизованные блоки, которые надо будет сверстать, не приснятся разработчикам BS даже в самых страшных снах. Для таких сайтов используется фреймфорк Boilerplate, но о нём позже.

«А где же его тогда использовать?»

Основной краеугольный камень. У нас в студии, BS используется для магазинов, крупных проектов, когда нарисована только часть макетов или когда масштабируемость у проекта будет во все стороны. В первом случае, ещё не известно, что будет нарисовано, но в модульную сетку всегда можно всё вставить без проблем. Во втором случае, даже если почти весь проект переменится, то перестановка активных областей не займёт много времени.

«Вау, круто, с чего начать?»

Вот тут-то и начинается основной затык. Проблема в том, что к BS большинство верстальщиков подходят не с той стороны. Это вызывает у них головную боль и обиду за бесцельно прожитые годы из-за потраченного времени. Используя CSS-версию, вы обрекаете себя на то, чтобы разбираться в 145 кб css-кода, и, что хуже всего, необходимость лезть туда и вносить изменения. А вдруг завтра новая клёвая версия, а вы часть стилей уже BS прописали, и миграция на новую версию не приведёт ни к чему хорошему.

Итак, подходить к этому фреймворку надо со стороны лица, то есть заходим в репозитарий и скачиваем его less-версию. Да, это те же самые 145кб кода, но всё разбито по отдельным файлам и при необходимости, часть его можно отключать или включать, тем самым, коррелируя вес конечного файла, если это необходимо.

Самое клёвое, на мой взгляд,-то, что там есть файл «mixins.less», в котором содержаться все мыслимые и немыслимые css-паттерны для быстрого написания кода. Можно забыть, как вы писали портянку из префиксов для одного аттрибута или втавляли гору кода из CSS Gradient Generator *YES*.

Следующий, не менее клёвый файл — это «variables.less». Там вы управляете вашим проектом. Цвета, шрифты, размеры колонок, пути до картинок — всё находится в одном файле, и теперь не надо прыгать по всем CSSкам и заменять цвета, если надо сделать «чуть-чуть посветлее».

Там же есть ещё один клёвый файл «responsive.less». Хотя, чего говорить, да они все там обалденные и классные, так что стоит просто один раз увидеть.
Итак, responsive. Адаптивная верстка ещё никогда не была такой быстрой и «безболезненной». Не надо городить костылей, не надо подгружать десятки стилей и мучится по поводу совместимости.

В конце стоит сказать непосредственно про сам «bootstrap.less», в котором вы уже управляете подгрузкой необходимых в данный момент стилей.

Все файлы перечислять нет смысла, так как часть из них это подключаемые плагины, а часть — это системные файлы типа «reset.less» и «grid.less», куда лучше не лезть.

Ваши рабочие файлы, которые вы будете изменять — bootstrap и variables. Такой подход является оптимальным, так как в случае выхода новой версии фреймворка, достаточно будет заменить только эти два файла от старой версии. А если что-то необходимо заменить, лучше создать свой файл, к примеру, customize.less, куда уже вносить изменения в стили плагинов.

По соседству с папкой less находится папка js. Там собраны основные плагины, которые используются почти везде — карусели, всплывающие подсказки и окна, навигация по табам и много-много чего. Все они Jquery-плагины, но это для большинства верстальщиков будет являтся плюсом. Просто подключаете и пользуетесь.

«Как подключить?»

Для такого хорошего фреймворка, нужен хороший html-шаблон. На мой взгляд, самый лучший у HTML5 ★ Boilerplate. Скачиваем, берём оттуда index.html и подключаем в него уже BS. Кстати, Boilerplate сам по себе является хорошим фреймворком для всех остальных сайтов, куда невозможно подключить BS. Но это уже совсем другая статья.

Итак, подведем итоги:

  1. Использование less, вместо css уменьшает длину кода до 30%, а сам код делает более понятным и красивым.
  2. Также ваш код всегда можно будет передать стороннему разработчику и, чтобы ему вникнуть, достаточно будет почитать документацию на сайте BS.
  3. Образовывается общая концепция написания кода, что делает его более структурированным и поддающимся впоследствии поддержке.
  4. Использование JS-скриптов, которые входят в состав BS, решает 90% повседневных задач.
  5. Скорость верстки увеличивается в разы, так как уже не приходится мучится ни с сеткой, ни с отступами.
  6. *Радостный смех* Больше никаких overflow:hidden в сетке.
  7. Всё кроссбраузерно, а кастомизация предустановленных стилей занимает считанные часы. А написание новых требует времени, ведь их ещё приходится отлаживать.
  8. Только удовольствие — всё время тратится на написание нового кода, а не отслеживание работы существующего.

Автор записи: Евгений Булгаков

  • http://blog.dominion.ru/2013/03/layout-tool/ Рабочие инструменты для вёрстки – Блог студии Доминион

    [...] Используйте CSS-фреймворки. О вкусах не спорят, но мои два самых любимых — это HTML5 ★ Boilerplate и Bootstrap. Про них я говорил в прошлой статье. [...]

  • Егор

    Спасибо тебе, человечище. Взял на заметку.

  • http://www.facebook.com/people/Евгений-Булгаков/100000705951180 Евгений Булгаков

    Всегда пожалуйста! :-)

Twitter Facebook Flickr