Много уже было сказано про 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. Но это уже совсем другая статья.
Итак, подведем итоги:
- Использование less, вместо css уменьшает длину кода до 30%, а сам код делает более понятным и красивым.
- Также ваш код всегда можно будет передать стороннему разработчику и, чтобы ему вникнуть, достаточно будет почитать документацию на сайте BS.
- Образовывается общая концепция написания кода, что делает его более структурированным и поддающимся впоследствии поддержке.
- Использование JS-скриптов, которые входят в состав BS, решает 90% повседневных задач.
- Скорость верстки увеличивается в разы, так как уже не приходится мучится ни с сеткой, ни с отступами.
- *Радостный смех* Больше никаких overflow:hidden в сетке.
- Всё кроссбраузерно, а кастомизация предустановленных стилей занимает считанные часы. А написание новых требует времени, ведь их ещё приходится отлаживать.
- Только удовольствие — всё время тратится на написание нового кода, а не отслеживание работы существующего.
Автор записи: Евгений Булгаков