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

Недавно я писал о 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-файл и включим в его заголовке наши стили:

<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. Собсвенно строим колонки. Вот пример:

<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 колонки.

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

Посты по теме:

Blueprint CSS framework или Полосатые матрасы

Категории Веб-программирование |
автор: altesack / Четверг, Май 14, 2009 / 17 комментов »

Вы можете оставить коммент, или сделать trackback с вашего блога.

17 комментов

Dandr пишет 14.05.2009 в 12:03

Спасибо, вечером, надеюсь, буду тестить.

AngelOfFate пишет 14.05.2009 в 15:44

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

Dandr пишет 15.05.2009 в 18:50

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

Altesack пишет 15.05.2009 в 20:21

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

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

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

Dandr пишет 15.05.2009 в 20:52

А резину можно сделать по аналогии)))

Nayjest пишет 18.11.2009 в 18:36

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

Altesack пишет 18.11.2009 в 20:39

@ Nayjest:
Резина там не поддерживается. Однозначно.

Dandr пишет 23.12.2009 в 01:12

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

Андрей пишет 10.09.2010 в 15:18

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

altesack пишет 10.09.2010 в 19:02

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

Dandr пишет 11.09.2010 в 13:19

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