Blueprint

    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 и класах для оформления форм.

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


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

    Комментарии 73

      0
      под кат
        0
        сделано
          0
          Ну тогда нате плюсик :)
            +2
            еще демо впишите, куда-нибудь повыше. сначала я (и многие другие) хочу увидеть пример, а не код ;)
              0
              Только хотел спросить пример )
          0
          От нашего верстальщика который игнорирует сей замечательный ресурс, в лице меня получите плюс)))
            +2
            Самородок ваш верстальщик. Молчаливый самородок.
          • НЛО прилетело и опубликовало эту надпись здесь
              +5
              Хорошее было выступление на РИТе по поводу CSS-фреймворков… Не верстайте так… пожалуйста…
              • НЛО прилетело и опубликовало эту надпись здесь
                  +1
                  Нескромно, но всё же: речь, видимо, идёт об этом докладе — http://pepelsbey.net/2008/04/css-framewo…
                    0
                    приятный доклад
                    хоть какая-то систематизация знаний о этих "фреймворках" :)
                      0
                      Хороший доклад! Спасибо!
                    0
                    А можно поподробнее, что конкретно было по этой теме?
                      0
                      Тоже весьма заинтересован в более подробном описании темы. Поделитесь информацией.
                      Результаты гугла Второй результат ведет на данный топик :)
                        0
                        Спасибо )
                          0
                          Весьма и весьма интересно. Спасибо. Однако все же у меня язык не поворачивается называть фреймворком набор базовых классов :)
                            0
                            Однако это соответствует базовому определению фреймворка ;) Но я понимаю о чём вы…
                        +2
                        Для общего представления познавательно да.....
                        У меня только один вопрос - а этот код вообще читабельным хоть как то можно назвать? Грязь получается ужасная, ей богу - таблицы и то лучше выглядят, чем миллион дивов у каждого из которых миллион классов.

                        Никогда не буду так верстать, это - издевательство над программерами.
                          0
                          От бы теперь и демку ;)
                            0
                            Чтобы открыть firebug и ауеть, ага...
                            0
                            Не совсем понимаю, как эта сетка может облегчить вёрстку? ну есть Css файлы и есть макет в JPG и чего?
                              0
                              Ну если дизайнер будет делать только макет с фиксированными колонками и привязанный к сетке Blueprint, а верстальщику не жаль будет пихнуть в макет лишние 12К CSS, тогда будет полчаса экономии в работе над версткой. Может быть.
                              +1
                              По-моему, это называется - "от чего ушли". Чем такой метод верстки отличается от табличного, кроме как названиями тегов?
                                0
                                А чем был плох табличный метод, кроме названия тегов?
                                Он был замечатеоен, но нес в себе семантику, которая тогда никого не интересовала.
                                DIV элемент не семантичный и его выравнивание по сетке на смысл документа с человеческой или машинной точки зрения не влияет.
                                Так что, все в порядке! :)
                                • НЛО прилетело и опубликовало эту надпись здесь
                                    0
                                    Так в том-то и дело, что CSS Framework делает DIV семантичным за счет жесткой установки имен классов.
                                      0
                                      Имена классов не имеют смысла для машины, если речь не идет о микроформатах.
                                        0
                                        Да машине-то вообще все пофигу :) Уход от табличной верстки стал необходим для того, чтобы HTML код служил только для разметки содержимого по логическим блокам, а не для визуального оформления, функции которого перешли к CSS.
                                        В случае с фреймворком, мы возвращаемся назад - начинаем использовать в HTML управляющий отображением код. Это не важно, что мы используем DIVы вместо . Важно, что смысл разделения верстки на разметку и стилизацию потерялся.
                                          0
                                          Как раз машине (конкретно, парсеру) не пофигу. Вы, видимо, хотете меня запутать :)
                                          Табличная верстка и CSS не альтернативы, т.е. можно легко совместить и табличную верстку и CSS. И это будет работать хорошо.

                                          В случае с фреймворком, содержание и оформление разделены, т.к. стили по прежнему в CSS.
                                            +1
                                            Вы, видимо, не совсем понимаете смысл идиомы "табличная верстка". Это не код, в котором есть теги tr и td. Это когда свойства таблиц используются для управления отображением сайта - для его разметки и позиционирования элементов. Таблицы вполне имеют право на жизнь - для отображения табличных данных, но использовать их для позиционирования элементов - неэффективно, так как делает вертку сложной для чтения, а также затрудняет процесс модификации дизайна.
                                            Так что верстка при помощи таблиц и при помощи CSS - альтернативы по способу позиционирования элементов.
                                            В случае с фреймворком содержание и оформление совсем не разделены, поскольку фреймворк можно рассматривать, как статичный набор правил, а верстку под фреймворк, как семантическую (использующую статичный набор правил).
                                            Чтобы модифицировать позиционирование элементов на сайте, сверстанном под фремворк, нужно разобраться в прописанных в HTML коде ссылках на элементы фреймворка, что крайне неудобно.
                                            Так понятнее?
                                              0
                                              Я прекрасно понимаю, о чем Вы говорите. Просто я местами не согласен с этим. А спорить смысла не вижу - не продуктивно. Все равно, каждый останется при своем мнении и ни один новый сайт от этого не появится :)
                                  0
                                  Совсем недавно попался проект на доработку, в котором использовался blueprint.
                                  Не сказал бы что очень удобная вещь. Многого не хватает, приходится дописывать, что в итоге вносит путаницу.
                                    +1
                                    Особенно "приятно" будет разбираться с названиями классов. Я бы назвал это не фреймворком, а жестким каркасом, так как
                                    "частое отсутствие семантики в именовании элементов по причине абстрактности макета и универстальности предполагаемого решения", для меня сводит все удобства на нет

                                    Было бы интереснее посмотреть на он-лайн макетирование в браузере (как реформатор — http://www.artlebedev.ru/tools/technogrette/etc/reformator/).
                                    +2
                                    CSS-фреймворк вообще (ИМХО) звучит по меньшей мере забавно. Думается что для начала работы достаточно ластика и каких-то базовых общих классов. Все остальное рисуется под конкретный проект. Причем без особых трудностей, довольно быстро и прозрачно (т.е. без лишнего мусора). Следуя тенденции жду следующим XHTML фреймворк :-)
                                      0
                                      Скажите пожалуйста, а верстка сеткой и Blueprint в частности позволяют верстать масштабируемые по горизонтали шаблоны? Ну, в общем, адекватно ли эта штука себя ведет при задании ширины колонок в процентах? А если нужно резинить только некоторые колонки?
                                        0
                                        немного комментариев на эту тему:
                                        http://groups.google.com/group/blueprintcss/browse_thread/thread/138dd9bcf2e679df#
                                        • НЛО прилетело и опубликовало эту надпись здесь
                                            +12

                                            Резинобетон

                                            Автор/авторы: Анатолий Ефимочкин, патентный поверенный РФ; Николай Матвеев
                                            Содержание: Это новый строительный материал. Он создан на Ярославском заводе резинотехнических изделий ( заявка 2001121437 ).

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

                                            Летающая подводная лодка


                                            Проект летающей подводной лодки Ушакова
                                            Летающая подводная лодка в Википедии

                                            Глухонемой певец


                                            Глухонемой певец. Жестовое пение
                                            Сергей Перевалов - победитель II Всероссийского фестиваля жестового пения. ( Личности Иркутска )

                                            Не стоит ограничивать свое восприятие мира. В нем столько удивительных вещей... дошло? :)
                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                +3
                                                это самый шедевральный ответ на комментарий!
                                                  +1
                                                  Вы вдвоем с предыдущим оратором так классно откомментировались, что даже похоже на специально организованный трюк. Я уже третий раз пацатлом сегодня от прочтения коммента и ответа на него.
                                                    0
                                                    Великолепный ответ!
                                                0
                                                Добавте пожалуйста парочку реальных примеров, где данный фреймворк применяется, желательно один как минимум чтобы был резиновый.
                                                  0
                                                  blueprint вроде пока не поддерживает резиновость, если не прав поправьте
                                                    0
                                                    он фиксированный. резиновый вот: http://builder.yaml.de/#

                                                    а из демки Blueprint я сверстал тему для Drupal за полчаса, до этого не зная движка темизации Drupal и не зная Blueprint :)
                                                    http://akzhan-mdev.mhost.ru/.masterflow/release-1.1
                                                    0
                                                    демо в студию, плиз!
                                                      0
                                                      На мой взгляд:

                                                      1) Применение фреймворка снижает семантичность верстки и вообще возвращает к жизни вопрос о семантическом и формительском коде

                                                      2) Сетчатый дизайн легко верстать и без фреймворка, если принцип сетки известен верстальщику и понят дизайнером. Для начала можно один расковырять один-два фреймворка, посмотреть, как что устроено, но дальше лучше самому, больше пользы.

                                                      3) Лучший фреймворк - тот, который пишешь сам. А то вообще получается, пять лет назад верстали в программах (кто в Дримвивере, кто в Netscape Composer, кто во Фротнпейдже), щас с фреймворками та же фигня.

                                                      В целом я не против фреймворков в образовательных или «огнетушительных» целях.
                                                        –1
                                                        1) Применение фреймворка снижает семантичность верстки и вообще возвращает к жизни вопрос о семантическом и формительском коде


                                                        Не согласен. CSS и элемент DIV не несут смысловой нагрузки. Поэтому снижения семантичности не происходит.

                                                        Просто разработчик начинает меньше понимать. Тут я согласен. Но ничего не поделаешь. Приходится как-то обстрагироваться и от алгоритма рендеренга HTML и от внутренних структур DOM и от реализации методов HTTP, не говоря уже о машинных командах процессора, к которым все в итоге сведется.

                                                        2), 3) - вопрос консерватизма и личных страхов, кои не обходят и меня, заставляя порой подробно изучать код используемой CMS (хотя накой он мне?) и верстать в блокноте.
                                                          0
                                                          А TR и TD несут смысловую нагрузку?
                                                          Не буду распыляться и тут же спрошу по поводу вашего комментария:

                                                          А чем был плох табличный метод, кроме названия тегов? Он был замечатеоен, но нес в себе семантику, которая тогда никого не интересовала.


                                                          Вы, пардон, о какой семантике табличных макетов говорите?
                                                            0
                                                            На оба вопроса один ответ. Смысл TR - table row - строка таблицы, TD - table data - табличные данные.
                                                            В тоже время DIV это "лось... просто лось".
                                                              0
                                                              И с каких пор элементы макета — это табличные данные?

                                                              DIV — это division (часть, раздел, секция), а
                                                                0
                                                                Табличные данные это содержимое элемента TD, таков его смысл или, если хотите семантика.
                                                                В <div id="header"> в общем случае никакого смысла нет, если парсер не понимает соответствующий микроформат.
                                                                То, что по этому поводу думает вебмастер, ни на что не влияет, поэтому он может "шапку" обозначить любым именем, будь то header, head, hdr1, top или shapka.
                                                                Когда мы говорим о семантике, имеем в виду понимание смысла машиной, а не человеком. Последний смысл поймет при любой верстке... закон жизни. :)
                                                                  +1
                                                                  Ох, грустно-то как…

                                                                  Табличные данные — это, пардон, Excel'евские таблицы, если вы не в курсе. Именно такой тип данных размечается элементом TABLE и никакой другой. Иначе нарушается семантика этого элемента, т.е. то, для чего он придуман.

                                                                  А машина не умеет понимать смысл. Только человек может понять какие данные каким образом нужно размечать, в нашем случае — это будет верстальщик.

                                                                  http://www.ehow.com/how_2112770_use-posh… // пункт 2
                                                                  http://www.webdesignfromscratch.com/html… // целиком

                                                                  И на этом давайте завершим, а то и правда — слишком грустно вас слушать, руки опускаются.
                                                                    –1
                                                                    Да, мы в общем-то говорим об одном и том же.
                                                                    Только причины, по которым мы не верстаем таблицами разные.

                                                                    Вообще, это всегда довольно смешно, когда люди, споря до хрипоты, пытаются доказать друг другу одну и ту же точку зрения, аппелируя к разным источникам и опыту. :-)
                                                                0
                                                                Пардон, съелся код:

                                                                DIV — это division (часть, раздел, секция), а <div id="header"> — это секция «шапка» вашего макета.
                                                          0
                                                          Прикольно на первый взгляд, попробую...
                                                              0
                                                              Так [if IE] можно подключать стили для MSIE только если верстать в Quirks Mode. Если верстать в Standard Mode полсе выхода MSIE8 будет плохо.
                                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                                  0
                                                                  В MSIE8 большинство хаков для MSIE6 и MSIE7 будут ненужны.
                                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                                      0
                                                                      Не смешно судить по костюму по его рукаву.

                                                                      Я к тому, что лучше подключать так: [if IE lt 8].
                                                                      • НЛО прилетело и опубликовало эту надпись здесь
                                                                0
                                                                Мда ... у ленивых нет покоя... css fw...
                                                                  0
                                                                  код конечно ужасный. с нуля написать было бы значительно проще и без такого количества мусора, а так как у почти каждого нормального верстальщика/кодера есть свои шаблоны для определенного случая, то время сводиться лишь к подгонке.
                                                                  да и вообще что-то слабо понимается смысл ксс-фреймворков. для чего? зачем?
                                                                    0
                                                                    А вот мне всегда инетересно было... а зачем это все?

                                                                    т.е. грамотный верстальшик без сложных проблем сделает такое чудо - ибо очень часто попадается. Здесь вроде да, удобно и т.д. и т.п., тока вот демку которую я поглядел - она статична, не резиновая, а от статичности вроде давно уже все октказались? или нет?

                                                                    А вот без статичности я не видел css-ок - обычно при верстке именно в неее - в резиновость все и упирсается, а разместить n блков div-а с фиксированными размерами с моей точки зрения достаточно просто даже не для профи CSS.

                                                                    Это не критика, просто реально интересно зачем? Если не сочтете сложным - объясните?
                                                                      0
                                                                      Это всё затем, что мне вчера дали полуготовые страницы, написанные вот на этом самом блупринте :)
                                                                      Просто, похоже, это существует в мире, и иногда на нас падает…
                                                                      Придётся знать в лицо.
                                                                      А кстати — это ещё научит аккуратно организовывать свой CSS.
                                                                        0
                                                                        Могу предложить один из вариантов зачем этот фреймворк может быть полезен.
                                                                        При переходе от десктоп java-приложений использующих GridLayout'ы, переписать код, который будет генерить веб-представление намного легче при таком подходе.

                                                                        Ну и, в-общем, при динамической генерации хтмл-кода, такой фреймворк облегчит жизнь в разы. Не удивлюсь, если его (или его подобие) используют в GWT (google web toolkit).
                                                                        0
                                                                        Все аргументы "за" верстку таблицами от неумения верстать блоками. Почему люди не могут понять принципа отделения контента от оформления?
                                                                        Попробуйте поменять местами колонки в таблице не трогая HTML?

                                                                        В данном же фреймфорке тоже все прописано в HTML - class="column span-24 last", а если завтра у меня этот элемент уже не будет колонкой и не будет последней (last)? Мне переписывать все шаблоны?

                                                                        Просто создатели таких вещей не понимают, что HTML не должен быть привязан к визуальной структуре! Любой элемент может меняться при смене дизайна - сегодня это колонка, завтра строка, послезавтра квадратный блок в углу браузера. Зачем же я его изначально буду называть "column"?
                                                                        • НЛО прилетело и опубликовало эту надпись здесь
                                                                            0
                                                                            twitter.github.com/bootstrap/ — может он и ничего, но я все же пользуюсь Bootstrap Twitter
                                                                            jkeks.ru/jkeks.ru/archives/1853 — вольный перевод Bootstrap
                                                                              0
                                                                              когда писался этот пост, Bootstrap не было и в помине)

                                                                            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                                            Самое читаемое