Создание прототипа с помощью CSS-фреймворка Grid 960

Original author: Adam Hawkins
  • Translation
imageGrid 960 — это CSS Фреймворк, который позволяет разработчикам быстро конструировать прототипы дизайна. Они являются замечательным инструментом для создания макетов. Почему? Потому что они делают за вас всю тяжелую работу, позволяя получить быстрые результаты.

Звучит отлично, но как это делается? В интернете есть большое количество статей, агитирующих за и против использования CSS-фреймворков, но нет ничего в помощь неопытным читателям. Поэтому в сегодняшней статье мы рассмотрим процесс создания прототипа.

Представьте, что вы получили дизайн, и вам нужно сверстать его для клиента. Из этой статьи вы познакомитесь с основами Grid, проектированием сетки дизайна и кодированием прототипа. Мы будем использовать довольно простой дизайн, использующий большинство возможностей Grid 960, который поможет вам получить основную базу знаний для дальнейшей работы. После того, как вы ознакомитесь с представленным ниже дизайном, давайте начнем изучение принципов работы Grid 960.

image

Создание Сетки



Grid 960 работает на основе наследования классов. Этот фреймворк предоставляет две сетки: 12 и 16 колонок. Основной контейнер всегда имеет ширину 960px. Использование числа 960 позволяет применять большинство различных комбинаций колонок, без усложнения работы с ними. Для верстки этого дизайна, мы будем использовать сетку из 12-ти колонок, но мы не будем использовать все 12 колонок. Каждой ячейке сетки назначено свойство margin: 0 10px. Это создает промежуток в 20 пикселей. При создании строки, сумма ширины всех элементов добавляется к 960. Взгляните на демонстрационную страницу Grid 960. Вы увидите сетку со всеми видами комбинаций. Каждая ячейка сетки имеет класс, который определяет, какой она будет ширины. Далее представлена разбивка ширины столбцов для 12-ти колоночной сетки:

  1. 60px
  2. 140px
  3. 220px
  4. 300px
  5. 380px
  6. 460px
  7. 540px
  8. 620px
  9. 700px
  10. 780px
  11. 860px
  12. 940px


Каждая ширина соответствует имени класса, оформленного в виде: grid_X, где X это порядковый номер из представленного выше списка. Если вам нужен блок, шириной 940px, используйте класс grid_12. Откуда же Grid 960 знает, какая должна использоваться ширина? Каждый grid_X представляет собой селектор container_Y .grid_X, где значение Y равно 12 либо 16 колонок.

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

<div class="container_12"> 
  <div class="grid_12"><p>940px</p></div> 
 
  <div class="clear"></div> 
  <div class="grid_6"><p>460px</p></div>  
  <div class="grid_6"><p>460px</p></div> 
 
  <div class="clear"></div> 
</div> 


* This source code was highlighted with Source Code Highlighter.


Когда вы создаете строку в сетке, убедитесь, что все дочерние номера gird_X в сумме дают число колонок, которое вы используете. Это гарантирует правильную ширину. Два дива с классом grid_6, дают в сумме 12. Вы не ограничены только этими значениями, и также можете использовать 6, 4 и 2. Вот и все, сетка готова для контента. Теперь, после того как вы узнали как работает Grid 960, давайте посмотрим как создается макет.

Макет



Визуализировать сетку дизайна довольно легко. Будет одна строка для картинки заголовка, строка для навигации, строка с двумя колонками для статьи заголовка и постера, разделитель, 4 колонки, затем подвал, состоящий из трех колонок.

image

После визуализации, вы должны понимать, как создать сетку макета. Используя значения ширины в имени класса, из приведенного списка, давайте вместе составим код. Помните, что необходимо добавлять очищающий div в конце каждой строки. Не забудьте включить CSS-файлы, входящие в состав Grid 960.

<div class="container_12"> 
  <div class="grid_12"></div> 
  <div class="clear"></div> 
 
   
  <div class="grid_12"></div> 
  <div class="clear"> </div> 
   
  <div class="grid_7"></div> 
  <div class="grid_5"></div> 
 
  <div class="clear"></div> 
   
  <div class="grid_12"></div> 
  <div class="clear"></div> 
   
  <div class="grid_3"></div> 
 
  <div class="grid_3"></div> 
  <div class="grid_3"></div> 
  <div class="grid_3"></div> 
  <div class="clear"></div> 
 
   
  <div class="grid_12"></div> 
  <div class="clear"></div> 
   
  <div class="grid_4"></div> 
  <div class="grid_4"></div> 
 
  <div class="grid_4"></div> 
</div> 


* This source code was highlighted with Source Code Highlighter.


Скелет готов. Пришло время накладывать дизайн. Зеленые панели – это просто блоки с фоновым цветом и высотой. У панели навигации высота не задана. Вместо этого, она будет контролироваться размером внутренних ссылок. Не забудьте добавить картинку заголовка.

div.spacer { 
  background-color: #8FC73E; 
  height: 1em; 

 
div#navbar { 
  background-color: #8FC73E; 
  padding: 10px 0; 


* This source code was highlighted with Source Code Highlighter.


Применение классов для корректировки блоков grid_12 и установка ID

<div class="container_12"> 
  <div class="grid_12"><a href="images/header.png" alt=""/></div> 
  <div class="clear"></div> 
 
   
  <div class="grid_12" id="navbar"></div> 
  <div class="clear"> </div> 
   
  <div class="grid_7"></div> 
 
  <div class="grid_5"></div> 
  <div class="clear"></div> 
   
  <div class="grid_12 spacer"></div> 
  <div class="clear"></div> 
 
   
  <div class="grid_3"></div> 
  <div class="grid_3"></div> 
  <div class="grid_3"></div> 
  <div class="grid_3"></div> 
 
  <div class="clear"></div> 
   
  <div class="grid_12 spacer"></div> 
  <div class="clear"></div> 
   
  <div class="grid_4"></div> 
 
  <div class="grid_4"></div> 
  <div class="grid_4"></div> 
</div> 


* This source code was highlighted with Source Code Highlighter.


Центральным колонкам не требуются никакие эффекты. Добавим немного текста для заполнения дизайна. Прежде, чем приступать к верхней части, взглянем на подвал. На скриншоте подвал однородного цвета. У вас не получится реализовать это с существующим кодом. Оборачивающий div, вокруг этих трех колонок решит проблему. Вы думаете, ничего страшного, просто нужно вставить div. Но этот див поломает сетку, поскольку Grid 960 основывается на родительских и дочерних элементах, при использовании стилей (вспомните селектор container_12 .grid_4 ). В данном случае, проблему поможет решить вложенная сетка, которую Grid 960 позволяет использовать. Создайте вложенную сетку, путем добавления блока grid_12, затем расположите внутри блоки grid_4. При использовании вложенных сеток, дочерние элементы должны иметь специальные классы. Первый дочерний элемент должен иметь класс «alpha», а последний дочерний блок – класс «omega». Отредактируйте разметку для внесения необходимых изменений для подвала.

<div class="grid_12" id="footer"> 
  <div class="grid_4 alpha"></div> 
  <div class="grid_4"></div> 
 
  <div class="grid_4 omega"></div> 
</div> 


* This source code was highlighted with Source Code Highlighter.


div#footer { 
  background-color: #e5e5e6; 


* This source code was highlighted with Source Code Highlighter.


Прекрасно! Теперь у подвала есть заливка однородным цветом, и вы можете указать размеры колонок, если это необходимо. Добавим немного текста для колонок подвала и перейдем к панели навигации. Навигация выполнена в виде простого маркированного списка Добавим немного ссылок и соответствующих стилей.

<div class="grid_12" id="navbar"></div> 
  <ul> 
    <li>Articles</li> 
    <li>Topics</li> 
 
    <li>About</li> 
    <li>Editors</li> 
    <li>Contact</li> 
  </ul> 
 
</div> 


* This source code was highlighted with Source Code Highlighter.


div#navbar ul { 
  list-style: none; 
  display: block; 
  margin: 0 10px; 

 
div#navbar ul li { 
  float: left; 
  margin: 0 1.5em; 
  font: bold 1em Arial; 


* This source code was highlighted with Source Code Highlighter.


Замечательно. Страница скоро будет готова. Все что нам нужно сделать, это создать эффекты блока в верхней секции. Это не так просто, как кажется. Прежде чем мы начнем, вы должны кое-что понять о Grid 960 и CSS-фреймворках в целом.

CSS-фреймворки не решат всех ваших проблем


Внимательные читатели, наверное, уже заметили кое-что. В нашей странице абсолютно отсутствует гибкость. Всем элементам заданы определенные размеры, и изменение этих размеров может повлечь за собой проблемы или даже развалить весь дизайн в целом. Кроме того, в связи с ограничением Grid 960, дизайнеры не могут использовать некоторые из своих идей.

Например, если бы этот же дизайн был шириной в 1000 пикселей. Grid 960 создает сетку шириной 960 пикселей, так что макеты большего размера уже использовать нельзя. Что если вы захотите расширить макет до 1000 пикселей, вместо 960-ти? Можно с уверенностью сказать, что вы не сможете это сделать без реализации нескольких сложных изменений кода.

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

Есть и другая, еще не выявленная, проблема – колонки одинаковой высоты. Поскольку центральные колонки имеют одинаковый фоновый цвет, они выглядят одинаковыми по высоте. В подвале, содержащий блок, устанавливает одинаковый фоновый цвет, позади трех колонок. Grid 960 не поможет вам в создании одинаковых по высоте колонок. Существуют, конечно, способы реализовать это самостоятельно, но поскольку мы просто создаем прототип дизайна, то не будем тратить время на решение мелких проблем в дальнейшем функционировании сайта. На данном этапе, вам нужно понять саму идею.

Есть еще один аспект Grid 960, который следует принять во внимание, прежде, чем мы перейдем к верхней секции. Grid 960 основывается на размерах элементов и отступов, при создании строки правильного размера. Если вы используете рамку или внутренний отступ (padding), макет сломается. Следовательно, если вам нужно их использовать, вы должны предусмотреть это в размере блока, для отражения изменений. Это очень утомительно. Указание размеров элементов в двух местах, всегда будет приводить к путанице, к тому же макет будет гораздо сложнее в обслуживании. Вот и все. Давайте закончим верхнюю секцию.

Верхняя секция


К счастью, вы можете манипулировать колонками одинаковой высоты в верхней секции. Поскольку картинке справа назначена ширина и высота, нам известен размер другой колонки. Создадим эффект блока, с помощью добавления нового дива с рамкой, внутри существующих дивов. Не забудьте указать размеры. Не назначайте padding дивам, потому что это изменит ширину блоков и сломает сетку. Вместо этого, укажите margin дочерним элементам. Это не изменит ширину родительских блоков. Применим margin к строчным элементам. Это создаст желаемый эффект и текст будет отступать от края.

<div class="grid_7 topSection"> 
  <div> </div> 
</div> 
<div class="grid_5 topSection"> 
 
</div> 


* This source code was highlighted with Source Code Highlighter.


Используйте классы, вместо ID, потому что класс topSection применяется к обоим блокам. Это к тому же, упрощает изменение высоты. Выберите значение высоты, и создайте класс.

div.topSection div { 
  border: solid 10px #e5e5e6; 
  height: 280px; 

 
div.topSection div p { 
  margin: 10px; 


* This source code was highlighted with Source Code Highlighter.


Отлично! Давайте посмотрим на нашу работу.

image

Приступаем к наполнению контентом. Заполните левый блок небольшим количеством текста. Только не увлекайтесь, если текста будет слишком много, он вылезет за край блока. Это создает потенциальную проблему в макете. Как вы узнаете, какое количество текста будет слишком большим? В производственном дизайне, для предотвращения этой проблемы, дизайнеру пришлось бы создать функцию, выводящую определенное количество слов.

Теперь, давайте вставим картинку. Только, прежде чем ее вставлять, укажите размеры. Если вы нормальный математик и понимаете боксовую модель, вы, скорее всего, уже знаете, какого размера она должна быть. Если не знаете, запустите Firebug и взгляните на DOM. Включите кнопку Inspect и кликните по блоку, в котором будет размещаться картинка. Откройте вкладку Layout. Firebug отобразит боксовую модель выделенного вами блока.

image

Скриншот показывает размер картинки 360 x 280. Найдите картинку, и создайте стиль. Я решил позволить картинке целиком заполнить весь блок. Если вы хотите создать 10-ти пиксельные отступы, убедитесь в том, что уменьшили размеры по 20 пикселей с каждой стороны.

img#poster { 
  width: 360px; 
  height: 280px; 


* This source code was highlighted with Source Code Highlighter.


У вас должно было получиться следующее. Можете смело менять текст или картинку.

image

Помните об ограничениях


Теперь, когда прототип готов, давайте подведем итоги проделанной работы. Вы научились быстро создавать прототипы дизайна. Grid 960 легко создает сетку для нас. И что же дальше? Естественно, нужно показать клиенту, и послушать, что он скажет. Хотя, есть несколько предостережений. Тестировался ли дизайн в IE6 и IE7? Нет. Нужно ли это делать? Нет. Это только прототип. Конечно же, все особенности браузеров будут учтены, до производства.

А что если клиенты захотят создать более комплексный дизайн? В таком случае, вы быстро обнаружите ограничения фреймворка. Что если дизайн должен быть резиновым или эластичным? Фреймворк не сможет вам в этом помочь, поэтому вам придется делать все с нуля. Помните, что CSS-фреймворки не решат все ваши проблемы, но они могут помочь с некоторыми. Grid 960 также как и другие фреймворки, замечательно подходит для создания прототипов.

Вы, конечно, можете использовать концепцию Grid 960, в дальнейшей разработке кода, но фреймворки не рекомендуется полностью использовать в своих проектах. Помните, что CSS-фреймворки, также как и любой другой инструмент, имеют своих поклонников.

Скачать архив с примером.

Similar posts

AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 51

  • UFO just landed and posted this here
      +2
      Насчет clear-дивов, я сама удивилась. Думала всем блокам float назначен, но сейчас убрала, и все работает.

      А не рекомендуют использовать наверное в связи с его ограничениями, но если ваш проект вписывается, то почему нет.
        +3
        Это не столько ограничения, сколько рекомендации.
        Принимая в расчет минимальное разрешение пользователя в 1024px, сетка получается очень удобной.

        Если требуется другая сетка, то есть генератор www.spry-soft.com/grids/
        Если требуется «резина», то есть fluid 960gs www.designinfluences.com/fluid960gs/
          0
          Спасибо за ссылку на fluid960gs!
        +2
        Немного не про 960 грид но возможно будет полезным, вчера как раз ковырялся с blueprint фрэймворком. К нему есть плагин liquid вроде работает, смотрел на ИЕ6 в том числе, сильно не использовал, пока не надо было.

          +1
          К нему еще есть офигенная штука Boks.
            0
            Ммм, уже пробую. Спасибо!
          0
          Clear-div'ы задают «перенос на новую строку», что неоднократно обсуждается и критикуется в комментариях к оригиналу статьи. Там же дается совет: «You can always hide the overflow of the element in your CSS. Then you will not need to clear it after every row» (сама не пробовала, но возможно сработает).

          На счет рекомендаций не использовать фреймворк «как есть» — все верно. Нельзя выключать собственную голову. Его нужно использовать как инструмент, а не как единственное решение всех проблем.

          Кстати, не понятно почему нигде не указано, что это перевод.
            +2
            вообще-то то указано — тип топика — перевод, автор оригинала и ссылка, все на месте
              0
              Извините, проглядела
            • UFO just landed and posted this here
                0
                Вы меня неправильно поняли. Я имела виду, что нельзя прекращатть думать и своей головой тоже. 960 я сама использую и довольно успешно)
                • UFO just landed and posted this here
                0
                Думаю нельзя использовать фреймворк, не понимая как он устроен. Ну а если понимаешь, то все равно напишешь практически тот же фреймворк…
            • UFO just landed and posted this here
                –2
                Я конечно дико извиняюсь, но Вы вообще сравнивали свой кросспост и то, что получилось на Хабре? Местами можно только догадываться, что имелось в виду (например, разбивка ширины столбцов в начале статьи). Картинки не везде вставлены, местами не влезли в ширину поста… Уважайте читателя, перепроверьте сперва сами все.

                ЗЫ. Ух ты! Посмотрел в ИЕ6, оказывается на Хабре есть реклама от яндекса
                  0
                  Большую часть исправили, молодец. Только с разбивкой ширины все равно как-то непонятно (или я такой трудный?).
                    +1
                    а как вы хотите чтобы она была исправлена? Это обычный список, с порядковой нумерацией и все. У меня в блоге он так смотрится, потому что прописаны соответствующие стили.
                      0
                      Да не берите в голову, я тут сам с собой посовещался и пришел к выводу, что все-таки это я трудный ;)
                  +1
                  Конечно, фреймворк не решит проблем.
                  Я лично грид-метод предпочитаю только на макетах в PSD пользовать.
                  В вёрстке мне проще с нуля часто написать, ну мб с базового шаблона «хедер, нави, контент, футер».
                  Самому надо писать себе фрейм, чтобы он действительно тебя не ограничивал и ускорял работу.
                    –3
                    Те же colspan, только в профиль.
                      0
                      Меня аж передернуло.
                      Зачем Вы так? 21 век на дворе. Веб 2.0+ и всё такое.
                        +1
                        Тогда уж colspan2.0 ))
                        +1
                        Пользуюсь год этой системой, очень нравится. Четко по сетке все. В режиме разработки на проект можно наложить поверх эту самую сетку — я эту идею позаимствовал у самого сайта (с превьюшками) и вообще становится удобно.

                        Штука класс.
                          –2
                          эти фреймворки все — от лукавого
                          смысла в них чуть менее, чем никакого
                          • UFO just landed and posted this here
                              0
                              верстка по сетке — величайшее благо от Макса Билла, Брокмана и компании (кстати насчет всех журналов и газет вы ох, как погорячились)
                              я бы вам про это много рассказал, но речь не об этом

                              я, как видно, не вижу никакого практического применения фреймворкам навроде этого
                              ну да, красиво звучит и идея хорошая, но НЕ ПРАКТИЧНО

                              если есть понимание что и почему, то какой смысл забивать себе голову чужим кодом?

                              • UFO just landed and posted this here
                                  0
                                  я лишь хотел сделать ударение на частице «не».
                                  а вы буквоедство своё оставьте, вон — аж целых четыре запятых пропустили в своём предложении.

                                  далее: какой-никакой прототип за 5 минут может, конечно, и реально создать, но я что-то сомневаюсь.
                                  но вопрос даже не этом, вопрос в том, на кой, простите, черт на макете, подобном приведённому в статье, какая-то сетка?

                                  это дрочерство какое-то, вот.

                                  а словосочетание «работающий во всех браузерах» говорит лишь о низком уровне понимания CSS.
                            –1
                            «Тестировался ли дизайн в IE6 и IE7? Нет. Нужно ли это делать? Нет.»
                            Я конечно понимаю, что в последнее время все гонят на IE — «давайте от него избавимся, не будем поддерживать» и все такое, но… нужно быть реалистом и, если вы следите за статистикой, IE7 сейчас лидирует среди всех браузеров. Поэтому, я считаю, проверять нужно всегда (!) и проверять именно в процессе создания макета, а не когда уже все утверждено и — «ой, а в IE7 что-то развалилось....»
                              +1
                              здесь автор имеет в виду тестирование _прототипа_, не окончательного макета. Естественно после того, как общий вид удовлетворит заказчика, верстка будет откорректирована под IE
                              • UFO just landed and posted this here
                                0
                                IE7 в Рунете потихоньку падает в пользу IE8, особенно сколько домашнего народа щас пересядет под Win 7 с Висты, а кто и с XP, даю руку на отсечение — ХАЛЯВНУЮ бету и РК качали все, кому не лень.
                                IE6 давно падает в пользу обоих.
                                Лидирует FF 3, IE лидирует только суммарно.
                                www.liveinternet.ru/stat/ru/browsers.html?period=month
                                  0
                                  Насчёт руки вы это погорячились :)
                                    0
                                    Это образно. =)
                                  0
                                  прелесть 960gs в том, что он совместим с IE 6,7,8

                                  sonspring.com/journal/960-grid-system

                                  головная боль о правильной сетке пропадает.
                                  0
                                  Очень похоже на blueprintcss
                                    0
                                    Я их буквально недавно кучу перекачала для работы над собственным.
                                    YAML, BlueTrip, BluePrint, 960gs, YUI — там дофига ещё менее популярных.
                                    Они, по-хорошему если судить, все похожи друг на друга, потому как решают практически одни и те же задачи.
                                      0
                                      почему бы не взять из них тех 20 строк кода, которые действительно полезны, и этим ограничиться?
                                        +1
                                        960gs это именно те самые необходимые 20 строк кода.
                                          0
                                          А никто и не пропагандирует их полного использования. Если вам необходимы только 20 строк — откусите лишнее.
                                            0
                                            А кто сказал, что я их буду брать?))
                                            Мне нужен несколько иной функционал, я больше интересуюсь там типографическими приёмами, а не грид-системой.
                                              +1
                                              если интересна типографика — рекомендую посмотреть в сторону YUI reset css.
                                                0
                                                Как вариант, да. Из него просто кое-что взято.
                                            0
                                            И какой из фреймворков вам понравился больше?
                                              0
                                              В плане чистого юза — ни один. Как информаторий — каждый даёт что-то нужное.

                                              habrahabr.ru/blogs/css/70203/#comment_2114208
                                              Моделирую свой на базе построения макета через 12 колонок, ресета Эрика и 18-кратной типографической вертикали, а также подрублен jQ для динамических директив, откидывая лишний гемор.

                                              16 кололнок мне слабопонятны, на них не сделаешь три равных по ширине колонки.
                                              12 же делится и на 2, и на 3, и на 4 и варьировать её можно не хуже в организации инфы.

                                              Ресет Эрика — лаконично, чисто, чётко. Нет тех элементов, чей стиль сбрасывать не обязательно.

                                              18-кратная вертикаль — так называемая базовая типографическая сетка. Повышается читабельность, создаётся единый ритм всех элементов.

                                              Плюс текущая ситуация с фонтами позволяет при должном внимании юзать @font-face без ущерба для здоровья, можно припилить хорошие фришные шрифты вместо старого опостыла.
                                          +1
                                          нарисовал макета 4 на Grid 960, и теперь это незаменимая сетка для меня.
                                            0
                                            тоже использую эх сетку только для дизайна, верстаю сам
                                            0
                                            960.gs в закладки! спасибо.
                                              0
                                              хоть убейте но я не понимаю, для чего эта требудень нужна?

                                              каждый проект индивидуален(и дизайн тоже)
                                              это для шаблонного использования или для чего?
                                              я понимаю когда для редатора при верстке прописываешь снипеты, чтобы не мучаться и долго не кодить, а тут то зачем?
                                                0
                                                Вот что-то типа этого я ждал от книги «Ordering Disorder: Grid Principles for Web Design», но там много бла бла блы без конкретного кода, одна теория. Спасибо большое!!!

                                                Only users with full accounts can post comments. Log in, please.