Быстрое введение в BluePrint


FAQ бывает разный

Недавно я писал о BluePrint. Пожалуй имеет смысл остановиться подробнее на его использовании.

Инсталляция

Инсталляция — это слишком громко сказано. Нужно просто скачать архив с официального сайта и распаковать. В архиве содержится несколько папок

  • blueprint- собственно папка со стилями
  • lib -библиотеки на RUBY, с помощью которых можно что-то с этими стилями делать. Для меня как программиста PHP это было не интересно.
  • doc - документация по библиотекам на RUBY
  • tests -папка с примерами использования фреймворка

Для реального использования фреймворка нам нужны только 3 файла из папки blueprint

  • ie.css
  • print.css
  • screen.css

Нужно просто положить эти файлы на свой сайт в любое желаемое место и всё. Фреймворк готов к работе, подключаем стили и пользуемся.

Очень краткий обзор стилей

ie.css — название файла говорит само за себя. В ней собрана кучка хаков специально предназначенных для борьбы с глюками особенностями MSIE. Заглянув внутрь этого файла вы поймёте, что таких особенностей довольно много, и каждая из них — это отдельная тема для серии статей. Поэтому отдельно не буду останавливаться на этом файле. Подключается он особенным образом, с использованием условных комментариев :



print.css — стиль отображения, который будет подключен при отправке на принтер. Попробуйте сверстать страничку и страницу открыть предпросмотр печати. Не знаю как вы, но я был приятно удивлён. Подключается как обычная таблица стиля. Вся магия в словах media="print"

screen.css — стиль является компиляцией из нескольких стилей:

  • reset.css — сброс дефолтных стилей браузера.
  • typography.css — установка типографских стилей.
  • forms.css — прикольные стили для использования в формах. Всерьёз думаю использовать.
  • grid.css — собственно сеточная система блоков, ниже подробнее о блоках.

Все эти стили в исходном состоянии лежат в папке blueprint/src.

Пробуем сверстать страницу из блоков

Вообще говоря на официальном wiki есть довольно толковый туториал, но он написан на английском. Так что этот раздел можно считать его вольным переводом и адресован людям имеющим проблемы с языком Шекспира.

1. Создадим HTML-файл и включим в его заголовке наши стили:




	



    bla-bla-bla

2. На бумаге составляем желаемую вёрстку и прикидываем желаемую ширину колонок. Ширину стоит мерить в блоках, каждый из которых составляет 1/24 от предполагаемой ширины верстаемой страницы (950px).

3. В теле страницы создаём div контейнер с классом container

Здесь будет мой сайт!

4. Собсвенно строим колонки. Вот пример:

Заголовок
Левая боковая панель
блок 1
блок 2
блок 3
Главный контент
Правая боковая панель
Подвал

В этом примере получается примерно следующая структура:

  1. Заголовок и подвал расположены соответственно в верху и внизу страницы и имеют ширину на всю страницу в 24 блока. Тут всё просто.
  2. Главная часть страницы состоит из трёх колонок, правой и левой боковых панелей, имеющих ширину 4 блока и центральной части, занимающей оставшиеся 16 блоков.
  3. Центральная часть опять же состоит из 3 блоков в одну строчку 8+4+4 блоков, а также одного большого блока 16 блоков для основного контента.

При этом, обратите внимание, нет clearing div. Строить страницу можно легко и непринуждённо, главное не забывать у крайних правых блоков добавлять класс last, а также внимательно считать блоки, чтобы нечаянно не зашкалить за 24 колонки.

Вот вроде и всё. =)

Быстрое введение в BluePrint: 17 комментариев

  1. AngelOfFate

    тоже попробую, как свободное время будет =)

  2. Dandr

    Что-то я не вкурил. Все эти спаны регулируют ширину блоков, но не привязку на странице. Или я чего-то недопонял?

  3. Altesack

    Привязка получается сама. Просто кидаешь спаны в строчку, заполняешь пространство

    Если нужна сложная структура — вкладываешь спаны друг в друга.

    Кстати резины тут нет ;)

  4. Nayjest

    Да, интересно вот как насчет резины, т. к. я к примеру в основном делаю резиновые сайты

  5. Dandr

    @ Altesack, как я понимаю, имеет смысл подключать не только эти три файла со стилями, а скопировать всю папку blueprint.
    Например, класс showgrid включает «тельняшку», рисунок которой лежит в blueprint/src/
    Там же лежат расширенные forms.css, grid.css, ie.css, print.css, screen.css и другие.

  6. Андрей

    Как же последний комментарий в тему!
    Я уже подумал что делаю что то нет так, showgrid не работал, а оказывается просто надо было поместить изображение

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

    Ребят, а зачем вам вообще эта тельняшка в рабочем проекте???

  8. Dandr

    @ altesack? затем же, зачем и направляющие в фотошопе и гимпе: выравнивать слои/объекты. Не «на ощупь», а визуально по направляющим.
    По окончании работы тельняшку меняем на фон. :)

  9. Глеб

    Справедливости ради надо отметить, что для Блюпринта есть плагин, который непринужденно делает макет «резиновым».

  10. Юрий

    Мне кажется Вы не правильно используете класс last. прочитайте про его использование

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

    Мне кажется я достаточно прочитал и всё делаю правильно. Если есть конкретная ссылка — буду благодарен.
    Откройте мне глаза.

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