Blueprint — довольно интересный фреймворк для верстки сеткой, который я лично считаю удобным, потому как он позволяет довольно просто создавать весьма сложные страницы, при этом не думая об IE.

Со страницы проекта на Google Code скачиваем архив.

В архиве будет папка blueprint/ там и содержатся основные файлы фреймворка, их и подключаем к странице:

<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"> 
&lt!--[if IE]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection">&lt![endif]-->


Фреймворк делит все пространство на вертикальные полосы, по умолчанию их 24, при этом контент разделяет на колонки (класс columns), которые занимают в ширину одну или несколько вертикальных полос.
Все колонки должны находиться внутри слоя с классом container

<div class="container showgrid">
</div>


Также сразу стоит обратить внимание на довольно интересный класс showgrid, он используется во время верстки и показывает на фоне контейнера или другого элемента сетку.
К container также применимы классы cols-14,cols-15...cols-23, которые указывают количество столбцов, т.е. ширину страницы (24 столбца, как я уже говорил установятся по умолчанию).

Разберемся теперь с колонками:

<div class="container showgrid">
  <div class="column span-24 last">
    <h1>Заголовок</h1>
  </div>
</div>


Как видим, колонки обозначаются классом column. Классы span-1,span-2...span-24 используются для обозначения ширины в столбцах. Класс last означает, что колонка не будет дополнятся справа следующим элементом.
В итоге мы получили столбец на всю ширину страницы с заголовком. Теперь немного его усложним, пусть справа тоже будет какая-нибудь информация:

<div class="container showgrid">
  <div class="heading container">
    <div class="column span-20">
	<h1>Заголовок</h1>
    </div>
    <div class="column span-4 last">
	<p>Что-то</p>
    </div>
  </div>
  ...
</div>


Теперь у нас заголовок разделен на две части. Класс heading я добавил для того чтобы в css можно было задать фон для всего заголовка:

.heading
{
  background:#88D;
  padding-top:10px;
}


При помощи классов prepend-x и append-x мы можем дополнять колонку пустыми столбцами слева и справа соответственно (где x — кол-во столбцов).
Например, сделаем чтобы в колонке заголовка был отступ слева в 4 столбца:

<div class="container">  
  <div class="heading container">
    <div class="prepend-4 column span-16">
      <h1>Заголовок</h1>
    </div>
    <div class="column span-4 last">
      <p>Что-то</p>
    </div>
  </div>
</div>


Следует обратить внимание, что сумма ширин столбцов не должна превышать ширины контейнера, при этом prepend и append тоже входят в ширину!

Теперь сделаем страницу с меню слева и справа, контентом в две колонки и подвалом:

<body>
    <div class="container">  
	<div class="heading container">
		<div class="prepend-4 column span-16">
			<h1>Заголовок</h1>
		</div>
		<div class="column span-4 last">
			<p>Что-то</p>
		</div>
		</div>
		<hr class="space"/>
		<div id="view">
		<div class="vp container">
			<div class="menu prepend-1 column span-3">
				<h3>Меню</h3>
				<ul>
					<li>Пункт1</li>
					<li>Пункт2</li>
					<li>Пункт3</li>
					<li>Пункт4</li>
				</ul>
			</div>
			<div class="content column span-16">
				<h2>Content</h2>
				<div class="prepend-1 span-6 colborder">
					<p>Lorus...</p>
				</div>
				<div class="span-7"><p>Ipsium...</p></div>
				
			</div>
			<div class="menu2 prepend-1 column span-3 last">
				<h3>Меню2</h3>
				<ul>
					<li>Пункт5</li>
					<li>Пункт6</li>
					<li>Пункт7</li>
					<li>Пункт8</li>
				</ul>
			</div>
		</div>
	</div>
	<hr class="clear"/>
	<div class="span-24 prepend-1 column last">
		Подвал
	</div>
	</div>
	</body>


Я использовал класс clear у тега hr для того чтобы создать широкую полосу разрыва. Класс colborder который я передаю диву с левой половиной контента добавляет толстую (целый столбец) разделительную полосу справа от колонки. Также есть border — просто линия справа.
Классы push-1...push-4 и pull-1...pull-4 позволяют вталкивать текущий столбец в следующий (push) и и наоборот, оттягивать в предыдущий(pull).
В следующий раз поговорим о типографских классах Blueprint и класах для оформления форм.

Примеры от авторов:


P.S. На хабре уже поднималась тема верстки сеткой.