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

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

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

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

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

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

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

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

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

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

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

Blueprint CSS framework или Полосатые матрасы: 5 комментариев

  1. Dandr

    Интересно, а вот что удобнее в работе: Blueprint CSS framework или 960 Grid System Framework?
    Скоро станет вопрос вёрстки — хочу попробовать. :)

  2. Altesack

    Я для себя решил этот вопрос в пользу Blueprint. Вёрстка блоков принципиально не различается. Зато в Blueprint мне понравился набор CSS на все случаи жизни.

    Например CSS, для нейтрализации глюков IE

  3. Mikeo

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

    clear: both — как раз и делает «очистку»

Комментарии запрещены.