Недавно я писал о BluePrint. Пожалуй имеет смысл остановиться подробнее на его использовании.
Инсталляция
Инсталляция – это слишком громко сказано. Нужно просто скачать архив с и распаковать. В архиве содержится несколько папок
- blueprint- собственно папка со стилями
- lib -библиотеки на RUBY, с помощью которых можно что-то с этими стилями делать. Для меня как программиста PHP это было не интересно.
- doc - документация по библиотекам на RUBY
- tests -папка с примерами использования фреймворка
Для реального использования фреймворка нам нужны только 3 файла из папки blueprint
- ie.css
- print.css
- screen.css
Нужно просто положить эти файлы на свой сайт в любое желаемое место и всё. Фреймворк готов к работе, подключаем стили и пользуемся.
Очень краткий обзор стилей
ie.css – название файла говорит само за себя. В ней собрана кучка хаков специально предназначенных для борьбы с глюками особенностями MSIE. Заглянув внутрь этого файла вы поймёте, что таких особенностей довольно много, и каждая из них – это отдельная тема для серии статей. Поэтому отдельно не буду останавливаться на этом файле. Подключается он особенным образом, с использованием условных комментариев :
1 | <!--[if IE]><link rel="stylesheet" href="../blueprint/ie.css" type="text/css" media="screen, projection"><![endif]--> |
print.css – стиль отображения, который будет подключен при отправке на принтер. Попробуйте сверстать страничку и страницу открыть предпросмотр печати. Не знаю как вы, но я был приятно удивлён. Подключается как обычная таблица стиля. Вся магия в словах media="print"
1 | <link rel="stylesheet" href="/css/blueprint/print.css" type="text/css" media="print"> |
screen.css – стиль является компиляцией из нескольких стилей:
- reset.css – сброс дефолтных стилей браузера.
- typography.css – установка типографских стилей.
- forms.css – прикольные стили для использования в формах. Всерьёз думаю использовать.
- grid.css – собственно сеточная система блоков, ниже подробнее о блоках.
Все эти стили в исходном состоянии лежат в папке blueprint/src.
Пробуем сверстать страницу из блоков
Вообще говоря на официальном wiki есть довольно , но он написан на английском. Так что этот раздел можно считать его вольным переводом и адресован людям имеющим проблемы с языком Шекспира.
1. Создадим HTML-файл и включим в его заголовке наши стили:
1 2 3 4 5 6 7 8 9 10 | <html> <head> <link rel="stylesheet" href="../blueprint/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="../blueprint/print.css" type="text/css" media="print"> <!--[if IE]><link rel="stylesheet" href="../blueprint/ie.css" type="text/css" media="screen, projection"><![endif]--> </head> <body> bla-bla-bla </body> </html> |
2. На бумаге составляем желаемую вёрстку и прикидываем желаемую ширину колонок. Ширину стоит мерить в блоках, каждый из которых составляет 1/24 от предполагаемой ширины верстаемой страницы (950px).
3. В теле страницы создаём div контейнер с классом container
1 2 3 | <div class="container"> <p>Здесь будет мой сайт!</p> </div> |
4. Собсвенно строим колонки. Вот пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <div class="container"> <div class="span-24"> Заголовок </div> <div class="span-4"> Левая боковая панель </div> <div class="span-16"> <div class="span-8"> блок 1 </div> <div class="span-4"> блок 2 </div> <div class="span-4 last"> блок 3 </div> <div class="span-16 last"> Главный контент </div> </div> <div class="span-4 last"> Правая боковая панель </div> <div class="span-24"> Подвал </div> </div> |
В этом примере получается примерно следующая структура:
- Заголовок и подвал расположены соответственно в верху и внизу страницы и имеют ширину на всю страницу в 24 блока. Тут всё просто.
- Главная часть страницы состоит из трёх колонок, правой и левой боковых панелей, имеющих ширину 4 блока и центральной части, занимающей оставшиеся 16 блоков.
- Центральная часть опять же состоит из 3 блоков в одну строчку 8+4+4 блоков, а также одного большого блока 16 блоков для основного контента.
При этом, обратите внимание, нет clearing div. Строить страницу можно легко и непринуждённо, главное не забывать у крайних правых блоков добавлять класс last, а также внимательно считать блоки, чтобы нечаянно не зашкалить за 24 колонки.
Вот вроде и всё. =)
Посты по теме:
RSS-подписка
Спасибо, вечером, надеюсь, буду тестить.
тоже попробую, как свободное время будет =)
Что-то я не вкурил. Все эти спаны регулируют ширину блоков, но не привязку на странице. Или я чего-то недопонял?
Привязка получается сама. Просто кидаешь спаны в строчку, заполняешь пространство
Если нужна сложная структура – вкладываешь спаны друг в друга.
Кстати резины тут нет
А резину можно сделать по аналогии)))
Да, интересно вот как насчет резины, т. к. я к примеру в основном делаю резиновые сайты
@ Nayjest:
Резина там не поддерживается. Однозначно.
@ Altesack, как я понимаю, имеет смысл подключать не только эти три файла со стилями, а скопировать всю папку blueprint.
Например, класс showgrid включает “тельняшку”, рисунок которой лежит в blueprint/src/
Там же лежат расширенные forms.css, grid.css, ie.css, print.css, screen.css и другие.