CSS Framework может сильно выручить, особенно когда нужно быстро составить структуру страницы. Недавно AngelOfFate писал о 960 Grid System Framework. Довольно удобная в использовании вещь.

А мне подвернулся под руку ещё один: BluePrint, о котором и хочу написать.

Общая суть фреймворка такая же.

Задаётся сетка из 24 колонок, под которую заранее определяются все возможные классы DIV span-1, span-1 … span-24, имеющие разную ширину Если вставляется последний в горизонтали блок – к классу нужно добавлять стиль класса LAST.

Самое главное не забывать ставить LAST и точно считать, чтобы суммарная ширина колонок получилась равной 24-м.

Любопытно, но здесь не нужно вставлять очищающий DIV. Полного понимания на предмет, как это сделано, у меня нет, вся магия в этом коде:

1
2
3
4
5
6
7
8
9

.clearfix:after, .container:after {
  content: "\0020"; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
  overflow:hidden; 
}
.clearfix, .container {display: block;}

Кроме сеточной системы во фреймворке есть свои стили предназначенные для работы с формами, а также своеобразные текстовые стили.

Я пожалуй возьму этот фреймворк на вооружение. 24 колонки – довольно мелкое дробление, позволяющее делать что угодно. Думаю скоро смогу дать ссылку на работающий вариант.

PS: После знакомства с этими фрейморками у меня создалось впечатление, что в принципе сносную сеточную систему можно сделать и самому. Вот одна такая самоделка http://www.theartbox.am/2008/05/20/grid-design/

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

1. Быстрое введение в BluePrint
2. Показать или спрятать DIV

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