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

Новость не в тему – вышел Bootstrap 3! (уже какое-то время назад)

Из новенького – новый визуальный стиль, много фиксов и мелочей, появление панелей и возможность растянуть группу кнопок на весь блок. В наличии обратной совместимости не уверен, поскольку изменились некоторые термины. К примеру, CSS-суффиксы размеров теперь не целые слова, а сокращения (к примеру, -small стал просто -sm).

Теперь о главном.
Некоторые из вас уже видели первый пост о Twitter Bootstrap. Легко заметить, что за большим удобством и популярностью кроется серьёзный изъян. Однообразие. Его используют очень многие, ничуть не изменяя стилей. Настолько многие, что это вызвало появление проекта Bootswatch. Все понятно из девиза, какое-то время фигурировавшего у них на главной странице: “Saving the Web from default Bootstrap” (Спасаем Веб от стандартного Bootstrap).

Конечно, если все будут пользоваться этими темами, однообразие не сильно спадёт. Но практика показывает, что о таком способе разнообразить стиль своего проекта на Bootstrap знает не очень-то и большой процент его пользователей. Поэтому тема оттуда всё ещё может считаться более-менее оригинальной и редкой. Особенно если её подпилить руками, но это уже опция.

Есть два способа установки тем оттуда. Простой и сложный.

Простой – загрузить оттуда уже собранный bootstrap.css. Стили у собранных файлов описываются в нём и только в нём, остальные файлы (если они вам нужны) можно закачать с сайта основного проекта. В моём случае – оказалось, что в шаблоне bootstrap.min.css содержал склеенные bootstrap.css (стили) и bootstrap-responsive.css (перетекание для мобильных устройств) со сжатием.

Кстати, следите за версиями. Большинство сейчас пользуется Bootstrap 2, а ведь вышел третий, и продвигают именно его. Возможно, это повод перейти на третью версию? Нет, разумеется, для второй стили тоже доступны, но можно не тормозить прогресс…

Сложный (в сущности, ещё один этап перед “простым”) нужен лишь в том случае, если вам нужно внести коррективы. Конечно, вы можете это сделать и после “простой установки”, в скачанном файле. Но возьмите на заметку: немалая часть CSS в Twitter Bootstrap сгенерирована автоматически на основе набора правил. Конечно, вы можете изменять уже переработанные стили, но на это уйдёт больше времени, и таким образом можно упустить немало деталей. Впрочем, сложность второго способа установки может показаться выше.

Чтобы его задействовать, вам (скорее всего) понадобится дистрибутив Linux. Во всяком случае, это “путь наименьшего сопротивления”, потому что сделать это на Windows мне не удалось. Его даже необязательно устанавливать – можно при помощи Unetbootin записать iso-образ (в которых обычно дистрибутивы и распространяются) на флэшку и загружаться с неё. Вам необходимо установить программы “конвейера сборки” Bootstrap. Как это сделать – пошаговой инструкции у меня нет (кое-что из него у меня уже было, а что-то я сделал лишнее), но всё можно найти при помощи Google.

Если у вас получится собрать Bootstrap установленным конвейером, вам понадобятся файлы *.less с Bootswatch. Изменить по желанию, собрать, установить, радоваться собственному стилю!

Я воспользовался простым способом, и изменяю полученные файлы стилей собственноручно. Убитые два дня на настройку сборки “сложным способом” не воодушевили на свершения.

PS: у себя на сайте я использую слегка изменённый “Bootswatch Cosmo”. И шаг за шагом порчу его минимализм, иногда впадая в ярость и стирая половину внесённых изменений. Начитался правил Википедии, а именно страницы про “Правьте смело!” В целом, если кому-то действительно интересно, как сделать собственный стиль из Bootstrap (вывернув до неузнаваемости цвета и оформление просто поменяв несколько строчек и констант), то я поищу, с кем бы можно помучиться над сборкой свежего Bootstrap из исходных LESS-файлов.


Автор: Павел | Дата создания: 14 августа 2013, 13:11 UTC | 0.289


Комментарии(2)
Денис  15 августа 2013, 07:39 UTC  #
0.509
Index

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

Для меня это смотрится не естественно, я в первую очередь определил Bootstrap как средство быстрого прототипирования, но не более того. Когда надо максимально быстро набросать очередной веб-сервис, при этом потратить минимум времени на дизайн, но чтобы не тошнило заказчика первый месяц… Вот Bootstrap идеальный вариант, далее все в том или ином виде корректируется и доводится под конкретные требования.

И я каждый раз удивляюсь, когда вижу голый Bootstrap, потому что как инструмент быстрого получения результата он идеален, но если оценивать с позиции “для готового продукта” – он очень плох, потому что очень сложно сделать те же кнопки, чтоб они везде подходили, т.к. даже каждая кнопка на своем месте требует внимания, именно своего вписывания в общую картину. Иначе работа дизайнера была ба копеечной.

Еще конечно большая ниша всевозможных технических демо, например, даже дипломная работа, куда подходит Bootstrap тоже идеально. Где важно показать, что ваша идея принципиально работает и возможно сделать.

Еще хочу добавить к легкому способу. У Bootstrap хорошая интеграция с rails, где для css файлов тоже может использоваться less, да и сам Bootstrap подключается в виде gem’a. А установка rails хорошо описана под все популярные ОС, обычно это или пара кликов или пара консольных команд (в зависимости от предпочтений). Недавно помогал делать диплом, как раз в связке rails+Bootstrap, вроде проблем у типовой блондинки не возникло с установкой. Во всяком случае устанавливал точно не я :)

Павел  15 августа 2013, 11:12 UTC  #
0.0
2bfe965ab5ef94a0568bc61c36b46d4c

Я пытался собирать ещё вторую версию, причём софтом из репозиториев Ubuntu (во главе с NPM), который оказался явно не тех версий, что ему хотелось бы. В итоге сборка сначала не происходила вовсе ещё на этапе установки зависимостей (высыпая тонну ошибок), потом (после установки откопанной где-то в интернете npm) якобы успешно завершалась с ошибкой о том, что что-то не нашлось. Куда всё это собралось (и собралось ли вообще) – я так и не нашёл.

Почитал про Bootstrap и Rails. Выглядит многообещающе, да. После обновлений попробую собрать там. Это скорее к сложному способу, но легче, можно считать третьим =)


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