PunBB + PE

Определение

CSS Framework — это библиотека, которая предназначена для создания и внедрения более лёгкого и валидного кода. Общий смысл этой библиотеки схож с PHP или JS библиотек.

Вместо термина CSS Framework часто используют словосочетания Grid Design или Верстка с Сеткой, что сути не меняет. Это пренос приемов "бумажной" верстки на верстку веб-страниц. Валидный код — полезный побочный эффект.

Есть некий универсальный макет (сетка) в который вебмастер вписывает блоки страницы. Этот макет задается подключением стандартных css файлов (собственно фреймворк). На примере 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]-->

Черновая разметка страницы делается с помощью упоминания классов "контейнер", "колонка одинарной ширины", "колонка тройной ширины" и т.д.

Стоит попробовать один из фреймворков и потом недоумеваешь "как же я раньше обходился без этого". Я уверен, если бы Rickard имел под рукой один из фреймворков, мы бы получили движок без тегов <table> и этого неудобного postleft+postright в теме.

На мой взгляд, самые интересные решения это Blueprint и 960.gs. Как правило, фреймворки расчитаны на фиксированый дизайн, но это необязательно. Mark Boulton в последней части своего руководства показывает как расчитать и сделать сетку под плавающий дизайн.

Интересные статьи по теме

Хабрахабр: Grid Design или вёрстка с Сеткой
Хабрахабр: Blueprint
Speckyboy: Top 12 CSS Frameworks and How to Understand Them
Smashing Magazine: Grid-Based Design: Six Creative Column Techniques
Mark Boulton: Five simple steps to designing grid systems