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">
<!--[if IE]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![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 и класах для оформления форм.
