2013-04-21

Twitter Bootstrap 3: сборка и документация

Итак, меня посетила идея сделать мой сайт немного красивее. Однако я не веб-дизайнер, не разбираюсь в современном мире css и javascript и вообще не очень заинтересован в этом. Так что я решил поискать, если ли что-то что может мне помочь.

И похоже есть: Twitter Bootstrap - это фронтенд-фреймворк позволяющий достаточно просто делать симпотичные сайты. Текущая версия 2.3.1, но следующая версия - 3.0.0 на подходе. Так что я решил начать сразу с 3.0 чтобы потом не пришлось переезжать с 2.x на 3.x. Проблема только в том что версия 3.0 еще не выпущена, так что ее невозможно скачать с сайта или хотя бы прочитать документацию. Хотя это решаемо.

Загрузка и сборка

Готовых сборок bootstrap 3 еще не существует, однако весь код доступен в github. Скачаем его:

# Клонируем репозиторий:
git clone git://github.com/twitter/bootstrap.git
cd bootstrap
# Переключаемся на ветку 3.0:
git checkout 3.0.0-wip
# Убедимся что мы действительно в 3.0:
less README.md

Теперь надо скомпилировать javascript. Для этого потребуется несколько утилит из node.js, например jshint. Я не нашел rpm для jshint однако он доступен через npm - пакетный менеджер node.js (блин, у него тоже свой пакетный менеджер?). Я пользуюсь Fedora 18, так что мне npm доступен из стандартного репозитория. Если вы пользуетесь чем-то другим то возможно придется поискать пакет в сторонних репозиториях.

Установим все что нужно:
sudo yum install npm
# (из каталога с bootstrap): установим необходимые утилиты:
npm install

И собирем bootstrap.

make
Ура, сработало... хм, и что дальше?

Документация

В данный момент онлайн-версии докуменации не существует. Если посмотреть в docs/ репозитория github то можно найти достаточно много всего в несколько странном формате, так что нужно было разобраться как этим пользоваться.

Немножко поискав, я выяснил что документация может быть собрано чем-то называющимся Jekyll. Оказалось что это генератор статических сайтов, написан он на Ruby, так что воспользуемся очередным пакетным менеджером (вот блин):

sudo yum install ruby-devel
gem install jekyll

Бинарник jekyll установися в ~/bin/, воспользуемся им:

jekyll . /tmp/bootstrap3-docs/
google-chrome /tmp/bootstrap3-docs/docs/index.html &

Chrome открыл документацию, однако все изображения, стили и многие ссылки были сломаны так как они абсолютные и начинаются с '/'. Это легко исправить запустив локальный веб-сервер:

cd /tmp/bootstrap3-docs
python -m SimpleHTTPServer 8000 &
google-chrome http://localhost:8000/ &

Готово. Теперь мне есть чем заняться прежде чем писать следующий пост. :)