Twitter Bootstrap, LESS и все все все

lesslogoВесь интернет уже юзает, а я только нашёл замечательную штуку — Twitter Bootstrap. Она позволяет с минимальными усилиями организовать приличный интерфейс для сайта. Одно время я писал про Brueprint CSS, так вот это примерно то же самое, только круче!

С одной стороны это такой же набор классов для организации компоновки элементов на странице как и BluePrint, только ещё плюс набор плагинов jQuery на все случаи жизни, иконок, виджетов и прочего. Twitter Bootstrap больше похож на фреймворк, который выдавал jquery plugins, пока работал.

Надо сказать, что Twitter Bootstrap можно скачать в двух вариантах. Например можно скачать «скомпилированный» архив, с готовыми файлами css, js и прочим. Подключай и используй! Все его возможности описывать не буду, мануал обширен и достаточно неплох, чтобы заниматься пересказами.

Набор классный, но иногда хочется кастомизировать немного виджеты. Ну хотя бы цвет, а то уж больно на твиттер похоже! Можно конечно залезть в дебри минимизированного CSS и искать там, но есть решение по-изящнее.

Для этого есть второй вариант с исходниками, который можно скачать с github. Надо сказать, что исходники написаны на LESS, который похож на продвинутый CSS с возможностью использовать переменные, функции и прочее. На данный момент язык пока прост, и учится за пару часов, но боюсь через пару лет там нагородят ООП и прочие паттерны :)

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

Однако собрать в лоб из исходников Bootstrap у меня не получилось. Есть ощущение, что сначала все файлы less из поставки нужно слить в один. И похоже вручную. Поправьте если я ошибаюсь. По-крайней мере если слить — то всё работает.
UPD: Подсказали(спасибо Александру), нужно компилировать bootstrap.less и responsive.less, там всё включено!

Ссылки по теме

PS
Я, кстати, нигде не писал, что разработчиком этого фреймворка является тот самый Twitter. Да-да!

Twitter Bootstrap, LESS и все все все: 2 комментария

  1. Александр

    Тоже только недавно узнал об бутстрапе от твиттера. И я лично компилирую только файлы bootstrap.less и responsive.less(если нужно для всех типов устройств). В каждом проинклудены все остальные нужные файлы. У меня компилится автоматом при изменении less файлов. Использую SimpLESS.

  2. altesack Автор записи

    Точно! Вижу в bootstrap.less импорт!

Комментарии запрещены.