Пользователь
0,0
рейтинг
16 января 2010 в 00:49

Разработка → Все о 960gs — отличном css-фреймворке для построения модульных сеток



Я хочу дать исчерпывающее описание замечательному фреймворку для построения модульных сеток 960gs. Недавно где-то в комментариях сказали, что 960gs сложнее в понимании, чем blueprint, что меня удивило. Я не хочу заниматься сравнением этих фреймворком, хотя бы потому, что они выступают в разных весовых категориях, однако, для построения модульной сетки ничего легче и проще в понимании, чем 960gs я не видела.



Про модульные сетки на Хабре, кажется, писали, да вот что-то поиск подкачал, всякая фигня находится, вроде «Философской геометрии». Вот навскидку несколько ссылок:

Так как я сама программист, то, надеюсь, матерые верстальщики и дизайнеры простят мне некоторые оплошности, если они вдруг допущены ниже по тексту. Весь код я убрала на pastie.org, во-первых, Хабр не дает разместить статью целиком из-за большого количества тегов при подстветке кода, во-вторых, код не будет напрасно раздувать статью.

960gs получил свое название из-за выбора Натаном Смитом (Nathan Smith), автором фреймворка, полной ширины контейнеров по-умолчанию в 960 пикселей. Однако, 960 px – совсем не железное ограничение.


Все элементы 960gs описаны как классы для css. Очевидно, использовать их следует как <тег class=«960gs_someclass»>.
В данной статье я буду использовать код фреймворка с официального сайта, 960.gs/css/960.css. Для чтения и понимания статьи этот код смотреть совсем не обязательно, в конце повествования я остановлюсь на способах получения css-кода подробнее.
В примерах, в качестве элементов разметки, я буду использовать дивы, а, для удобства – называть такие дивы по имени их 960gs-класса. К примеру, див с классом .container_12 я буду называть элементом container. Надеюсь, эта небольшая вольность найдет понимание в глазах гуру от верстки.
Так же, при описании параметров элементов фреймворка, я буду описывать только параметры оригинального css-кода. Разумеется, верстальщик волен менять их или дополнять новыми свойствами так, как ему будет нужно.
При переводе, элемент grid получил название «ячейка», что несколько далеко от дословного «сетка», зато звучит не так уродливо и гораздо ближе к реальному назначению. Сравните: «поместить три сетки в одну строку» и «поместить три ячейки в одну строку».
Надеюсь с шероховатостями покончено, поэтому перехожу непосредственно к теме данной статьи.

Container


Контейнер – корневой элемент разметки 960gs, задающий параметры для модульной сетки. «Корневой элемент» — означает, что только дочерние по отношению к нему элементы фреймворка будут участвовать в формировании модульной сетки, «задающий параметры» — означает, что все элементы фреймворка, что находятся внутри контейнера, подчиняются его параметрам единообразным образом.
Контейнер с 12 колонками может выглядеть так:

Контейнер задает следующие параметры для модульной сетки:

Все остальное оставлено на волю дизайнера.
На одной странице могут находиться сразу сколько угодно контейнеров как с одинаковыми параметрами, так и с разными (очевидно, у дизайнера должны быть очень веские причины использовать несколько разных модульных сеток на одной странице).


Несколько контейнеров удобно использовать, к примеру для того, что бы разделить страницу на области на шапки/основного содержимого/подвала (header/content/footer).

Вложенные контейнеры в рамках идеологии 960gs являются абсурдом (представьте себе вложенные <body> в html), однако путем манипуляций с отступам в css вложить контейнеры друг в друга возможно. Вот только зачем?


В дальнейшем, я буду использовать контейнер с параметрами:
  • Ширина колонки: 60px
  • Кол-во колонок: 12
  • Ширина канавки: 20px
  • Ширина контейнера = (60*12) + (20 * 11) + (20/2 * 2) = 960px

Пример кода контейнера:
<div class="container_12" />



На этапе разработки удобно использовать в качестве background-image контейнера картинку-сетку, взять которую можно, например, на официальном сайте (про это будет написано немного дальше). Правда, только для стандартных 12 и 16 колоночных макетов.
div.container_12 {
    background: #fff url("/img/12_col.gif") repeat-y;
}


Grid


Grid – один из двух базовых элементов разметки, предназначенный для расположения html-элеменов на модульной сетке контейнера. Ячейка (grid), всегда ориентирует свое содержимое в горизонтальной плоскости по отношению к контейнеру. Одна ячейка может занимать как одну колонку модульной сетки, так и все сразу, названия классов отражают данное свойство: для ячейки, занимающей одну колонку, класс будет иметь имя grid_1, для ячейки в две колонки – grid_2, для пятиколоночной ячейки — grid_5 и т.д. Следоватльно, в общем виде мы можем представить класс, как grid_X, где X – необходимая нам ширина ячейки в колонках модульной сетки. Рассмотрим пример с сетками grid_1, grid_6 и grid_12 соответственно:

pastie.org/780079

Одна ячейка вполне себе может соседствовать с другими ячейками по горизонтали, при условии, что они все вместе покрывают колонок не более, чем есть в контейнере:

pastie.org/780086


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

pastie.org/780088


Любознательные читатели могут заглянуть в css код и узнать, что формируются канавки с помощью margin’а, в отличие от ячеек, для которых нужен html-элемент. Впрочем, я надеюсь, это было очевидно всем.

Агрессивные верстальщики могут с негодованием переименовать в коде фреймворка все упоминания grid_ на, к примеру, cell_, что, на мой взгляд, ближе к истине, а так же более наглядно.


Clear


Вероятно, все, кто читал предшествующий код заметили, что в нем появился новый элемент:
<div class="clear" />

Clear – второй базовый элемент разметки 960gs. Что бы понять, что же делает clear, рассмотрим следующую ситуацию: я попытаюсь переписать последний пример, не используя clear, для удобства добавив контейнеру красный ободок.

pastie.org/780092

Хм, контейнер не растянулся дочерними ячейками, а остался худеньким и одиноким. Следовательно, первая задача clear – растягивать родительский контейнер до ожидаемых размеров. Теперь, предлагаю посмотреть внимательно на первый пример из раздела grid, в котором каждая ячейка единолично занимает всю строчку. Из этого примера логично сделать вывод, что вторая задача clear – завершать текущую строку, независимо от того, сколько в ней осталось свободных колонок.
Из этих двух правил следует хорошая привычка при работе с 960gs всегда завершать любую строку с помощью clear, даже если эта строка последняя или единственная в контейнере.

Не секрет, что дивы с классом clear используются верстальщиками относительно часто. Для того, что бы избежать возможных конфликтов между кодом всего сайта и кодом 960gs в будущем, вероятно, верстальщику следует либо переименовать в коде css файла фреймворка класс clear на какой-нибудь другой (к примеру, на clr), либо уточнить его, (например, .container_12 .clear). Всё же, по моему мнению, переименование в случае вероятных конфликтов – более подходящий способ.


Далее я перечислю все дополнительные классы для элемента grid. Дополнительные они потому, что существуют только как добавочные классы к основному классу grid_X. К примеру,
<div class="grid_2 alpha" />


Alpha и Omega


Иногда встречаются ситуации, когда необходимо вложить в одну ячейку несколько других. Как пример: нам нужны две очень длинные сплошные ячейки по бокам, в высоту занимающие 10 строк, и по одной ячейке в середине, на каждой из десяти строк.

В таких случаях следует использовать классы alpha и omega. Суть проста – если в ячейку мы вкладываем несколько других ячеек, то у первой вкладываемой ячейки нужно поставить класс alpha, а у последней, очевидно, omega.
pastie.org/780095



Кстати, пример является одним из редких случаев необходимости использования тега <br>.

Если нужно вложить только одну ячейку, достаточно использовать только класс alpha, без omega.


Prefix, Suffix, Push и Pull


Эти четыре дополнительных класса, по сути, являются более абстрактной заменой padding-left, padding-right, left и right соответственно. Стоит отметить, что пользоваться этими классами гораздо удобнее, чем вычислять нужные отступы в уме или на калькуляторе.
Все они имеют названия классов, сходные с названиям классов ячеек: имякласса_X, где Х – количество столбцов модульной сетки.
Рассмотрим простой пример:

pastie.org/780097

А теперь применим к каждой из ячеек со стишком классы prefix_1, suffix_1, push_1 и pull_1 соответственно:

pastie.org/780099

Вот и всё, в статье были перечислены все возможности 960gs, осталось рассмотреть лишь несколько моментов.
Во-первых, скачать код с примерами из статьи можно по адресу www.mediafire.com/?2jfqdxdtqow
Во-вторых, адрес сайта фреймворка: 960.gs. Там же, нажав на download вы получите css файл с двумя видами стилей (12 и 16 колоночными), а так же кучу всего в добавок, включая шаблоны для множества графических редакторов.
В-третьих, по адресу www.spry-soft.com/grids расположен чудесный генератор модульных сеток на основе 960gs, который, в том числе, умеет делать резиновые модульные сетки (!), обязательно оцените эту замечательную вещь. Именно с помощью этого инструмента можно обойти заданное автором ограничение в 960px.
В-четвертых, хочу порекомендовать статью habrahabr.ru/blogs/css/70203 для закрепления материала, если кто-то еще не читал.


На сим позвольте откланяться, желаю интересных и сложных вам проектов в новом году!

UPD:Добавляю (px, em, %) грид-генератор gridinator.com. Спасибо Pendalf.
А также «резиновый» вариант 960gs. www.designinfluences.com/fluid960gs. Спасибо Deavy
Anastasia Bengtsson @Avantasia
карма
106,7
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (83)

  • +1
    >hider

    Наверное имелось ввиду header?

    >http://960.gs/css/960.css.

    точку вынесите за ссылку.

    В остальном — познавательно и интересно. Посмотрю и blueprint :) Спасибо.
    • +2
      Спасибо. Все исправила. :)
    • –21
      Какова вероятность (в процентах) того, что во всей этой длинной статье найдется ну максимум одна ошибка?
      Ответ мужчины:
      — Одна сотая процента
      Ответ женщины:
      — 50%…
      — Почему?!
      — Ну, или найдется, или не найдется...
      • –12
        Минусует, наверное, женская половина )
        Написано было не в обиду ) Шутка :)
      • –9
        Дааа, за спиной тихо-мирно насрали в карму (
        • +2
          вот у меня вопрос — чтож так бояться то за карму за свою, что аж прям расстраиваться и писать об этом всей оббщественности?
          • –6
            Ну да, после 1-го минуса понял — это не Фишки.нет. Длинному анекдоту здесь не место.
            А насчет кармы…
            Вот только написал одну статью. Только хотел её опубликовать — Посмотрел в карму — А там… ну некрасиво там всё выглядит !(
            • +3
              Дело не в женщинах, которые срут вам в карму.

              Просто анекдот не смешной))
            • –1
              за бояны и не такое можно отхлебать
            • 0
              Не место здесь — тупому и старому анекдоту. А коммент может набрать сотню плюсов, даже если он на две страницы (только что в образовании видел).
              • 0
                Пруфлинк!
          • –1
            Хорошо пусть будет несмешной боян — понял, исправлюсь )
        • +1
          Плоский сексистский юмор.
      • –2
        а мне нравится шутка.
  • +1
    Добавьте еще про 960gs fluid в топик
    • +1
      Написано уже, написано. Даже восклицательный знак поставлен. :)
  • –1
    Спасибо за пожелания интересных и СЛОЖНЫХ проектов))
    Лучше было бы интересных)
    • +2
      Сложные проекты только помогают совершнествовать свои умения и знания :) левел-ап.
    • 0
      ой, само отправилось…
      Лучше было бы интересных и ОРИГИНАЛЬНЫХ проектов)
      а сложные проекты всегда найдутся)
  • –1
    960 gs с т.з. дизайна упрощает структуру и сетку для композиции. Если присмотреться, то тут мы увидим и золотое сечение и основы композиции, но самое главное это законы геометрии.

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

    Если же брать за основу расчерченный лист бумаги (например тетрадь) и базировать свой рисунок на готовой сетке, то это «зло» и гибель для художника (дизайнера).

    Как говорится картина начинается с белого холста!
    • 0
      Довольно фанатичный взгляд у вас на работу…
      Чтобы построить сетку по типу той что на нашем любимом хабре особого таланта не надо. Так что все от задачи зависит.
      • 0
        У меня не фанатичный взгляд на работу, я просто заметил, что нужно сначала научится обходится без разного рода линеек и сеток, чтобы научится рисовать, на глаз определять расстояния и пропорции. Ведь это, то без чего дизайнер и художник не может обойтись.

        Это Вы думаете, что особого таланта не нужно, а вот мне кажется, что дизайнер, который рисовал макет хабра на вас обидеться, потому как выходит, что напрасно он 6-7 лет учился, напрасно оттачивал руку и глазомер.

        Ну, что ж минусуйте и бичуйте ибо я не прав — зачем учится рисовать и постигать науки, если все так просто…
        • 0
          я просто заметил, что нужно сначала научится обходится без разного рода линеек и сеток, чтобы научится рисовать
          Тут идёт разговор о модульных сетках, при чём тут рисование? -) Даже рисуя макет сайта, вам нужно знать основы вёрстки, например, отступы между блоками, текстом, изображениями.

          дизайнер, который рисовал макет хабра на вас обидеться, потому как выходит, что напрасно он 6-7 лет учился, напрасно оттачивал руку и глазомер

          Глазомер здесь ни при чём — это математика, уровня 4 класса и знание рендеринга страниц различными браузерами.
        • 0
          Так тут не рисование. Тут верстка :)
          • 0
            Зрите в корень, без макета сайта построенного по принципу модульной сетки от 960 gs Вы не сможете применить на практике верстку с использованием самого css фреймворка
        • –2
          А я не хочу учиться рисовать, но сайты делать надо…
    • –2
      Если же брать за основу расчерченный лист бумаги (например тетрадь) и базировать свой рисунок на готовой сетке, то это «зло» и гибель для художника (дизайнера).

      ерунда! css фреймворк упрощает верстку, а рисование тут не причем. можно нарисовать макет в фотошопе, влючить заранее прочерченные гайды и порезать макет так, как того требует сетка фреймворка.
    • +2
      Мне кажется вы путаете это:


      с этим:
  • 0
    Спасибо, а я и не знал, что ты пишешь здесь)
    В избранное, естественно:)
  • 0
    Очень вовремя. Давно хотелось узнать что же такое эти css-фреймворки, но все как-то руки не доходили. С первого взгляда все предельно просто. Попытаюсь использовать в запланированном сайтике. Спасибо за статью.

    P.S: не часто встретишь пост от девушки на хабре. :)

    P.P.S: Тобиас Саммет рулит! :)
  • +2
    Спасибо за хороший пост!

    Я макета 4 нарисовал на 12 колонках, теперь перешел на 16, сейчас рисую.
    В 12 не всегда весь контент строго умещался. А так еще интересней и верстальщику приятней и быстрей работать.
  • +2
    Большое спасибо за пост, стала понятнее работа с сеткой.
    Кстати, вот еще один универсальный (px, em, %) грид-генератор gridinator.com/
  • 0
    Кстати для тех, кому фиксированная ширина колонок не устраивает, предлагаю «резиновый» вариант 960gs.
  • +2
    Я, если честно, не очень понимаю всех прелестей подобных систем.
    Как дизайнер я использую http://grid.mindplay.dk/.

    Верстальщик же все делает с нуля, либо по своим собственным фреймворкам, потому что некоторые вещи в дизайне, такие как, например, разрыв сетки и выносные элементы, не учитываются в 960.gs (может быть я чего-то не знаю, но раньше было так). Плюс, в таких больших системах, используется много лишнего кода — его нужно либо переписывать, либо, что я больше всего боюсь, верстальщик сочтет, что различия минимальны и использует общие правила для конкретного проекта.
  • +1
    Пожалуйста, обращайте внимание на то, что ширина канавки (средника) традиционно равна интерлиньяжу. К тому же, это не модульная сетка совсем. Это просто колонки. Модульные сетки предполагают кроме вертикального, еще и горизонтальное членение, а также шрифтовую сетку.
  • –1
    Кажется у вас ошибка в листинге pastie.org/780095, у обоих вложенных дивов класс alpha.
    Спасибо, отличная статья!
    • +2
      Это не ошибка, т.к. между этими дивами стоит clear
  • +2
    замечательно, но представьте что вам надо через некоторое время изменить сетку сайта, и у вас колонок стало 13 вместо 12 предыдущих. а у вас кругом в html grid_12, grid_7 или span-5 и так далее. Очень не гибко. Все стили отвечающие за сетку должны быть либо в элементе, например класс sidebar содержит стили с шириной, либо формализованы более асбтрактно чтобы можно было как то менять впоследствии. А здесь вы обречены при переделке сайта переделывать все.
    и второе — что будет если за верстку берется другой человек? Я понимаю что грамотный верстальщик поймет быстро даже незнакомый фреймворк, но даже это неправильно — заставлять другого верстальщика разбираться в фреймворке который ты почему то решил выбрать.
    • –1
      Ну если выбор фреймворка удачный, то другой верстальщик, я думаю, не поленится разобраться.
      • 0
        ну как сказать, удачных фреймворков может быть не один. и если я скажу заказчику оплати мне мне надцать часов поучить классный фреймворк это его вряд ли порадует.
        • 0
          Т.е. вы узнаете и изучаете что-то новое для себя и каждый раз при этом требуете денег от заказчика, считая что вы делаете ему одолжение тем, что согласны изучить это?
          • +2
            позвольте позвольте ) если мне надо сделать к определенному сроку работу и эта работа требует от меня изучить фреймворк — да, возьму деньги за это. и это правильно, потому что бывает так что фреймворк выбран кривой и у меня нету никакого желания его учить. а то о чем вы говорите я делаю в свободное время, но тоже потом продаю как свою квалификацию )
  • –8
    Вообще, я считаю, что CSS-фреймворки — это зло, но чем бы дитя не тешилось:)
    А по делу <div class="clear"></div> — ни один уважающий себя верстальщик такое не напишет. Это давно делается двумя строчками CSS only.
  • –3
    Приятно читать статьи умных девушек :)
  • +5
    У меня есть доклад двухгодичной давности про CSS-фреймворки. Выходит, что с тех пор ничего не изменилось — всё то же безумие с grid_12, column_8 и двумя десятками clear'ов. Это не вёрстка, это хрустальная ваза, которую слелали, поставили на полку и больше не трогают.
    • 0
      хм, а какие-нибудь более-менее серьезные сайты используют Blueprint или 960gs? или тоже все на своих крутятся?
      • 0
        Есть ресурс blueprintsites.com/, но там сплошь хомячки, да мини-сайты на простейших макетах.
      • –4
        на своих? на своих чём? фреймворках? мухахаха
      • +1
        Что такое более-менее серьезные? Зайдите на 960.gs/, там приведен список сайтов, сверстанных на 960gs. modxcms.com — достаточно серьезен?
    • 0
      согласен. я кстати нашел для себя выход использовать LessCss. И просто нужный стиль для колонки получаю формулой и вставляю в нужное место в стилях.
    • +3
      Жалко, что «это» активно пропагандируют. Потому что, приходилось встречался с людьми, которые с подобных постов начинали заниматься «вёрсткой», жалкое зрелище, скажу я вам…
    • 0
      Позволю себе с вами не согласиться. Да, у 960gs есть существенные ограничения по свободе макета. Ну что значит ограничения, скорее, особенности работы. В грубом приближении, информация располагается колонками, и paritet98.ru на них собрать сложновато будет. Однако же, грамотно подойдя к колонкам и рассмотрев их возможности, можно верстать не только скучные n-колоночные, но и вполне занятные макеты (пример — сайт про вино, скриншот которого в заголовке данной статьи).

      Кроме того, тезис о «хрустальной вазе» тоже имеет ограниченное применение. Модульность системы позволяет как угодно вертеть блоками, вставлять и убирать их когда потребуется. Расширять и сужать, если надо. При вдумчивом подходе достигается весьма интересный результат.
      • +2
        «Хрустальная ваза» говорит не о том, что система не гибкая — я уверен, что ребята придумают ещё 100-500 классов, вроде column_1323. Дело в том, что подобные сетки вытаскивают оформительский уровень в документ. Колонка должна быть колонкой, а не сеткой_8, чтобы если нужно будет сделать сетку_6, не пришлось бы копать десяток шаблонов.

        Так что и правда ваза — сделать побольше, пониже или вообще кружку не получится. Проще с нуля написать.
        • +2
          Хорошо. Может быть. Спроектировав дом, надо строить дом. Спроектировав 8 колонок, с чего мне понадобится 10?
          • +3
            Так может говорить фрилансер, который сделал свою работу и счастливо смылся.

            А если у вас живой проект, два идиота-менеджера и креативный дизайнер, то дома никогда не будет. Будут лёгкие конструкции, которые передвигаются часто и хаотично. При этом, подобный хаос не исключает модульной сетки, только контроль за ней будет находиться не в руках Натана Смита, а в ваших.
            • 0
              Весьма категорично высказываетесь. Вывод простой: под задачу и инструмент.
              • 0
                Да, категорично. Исключительно потому, что все наивные ребята ищут серебряную пулю, которая позволит им не думать, а просто «генерить лейауты». Я и предупреждаю, чем придётся пожертвовать ради такой красоты.
                • 0
                  Да, вы правильно говорите, согласен в части «что подобные сетки вытаскивают оформительский уровень в документ.» Этот момент меня действительно печалит. Но будем честны, проекты бывают разные, и в большинстве (у меня нет статистики, конечно, так что это мой чистой воды домысел) случаев, верстка меняется один раз за жизнь проекта: когда создается. Если сайт подходит к редизайну, в большинстве случаев (опять мой домысел) придется все равно переписывать все заново. Действительно «живых» больших проектов, в которых сетка кардинально меняется раз хотя бы в месяц, или раз в полгода, я не видел.

                  Такие посты действительно не новы, и, всякий раз просматривая комментарии, я обнаруживал подобный нашему спор. И всегда был на вашей стороне. Я и сейчас на ней (по поводу выноса оформления в шаблон), но с теоретической точки зрения. Практика же говорит, что такой «сеточный» подход может иметь достойные применения.
            • +1
              Если вы неправильно выбрали инструмент для свой задачи, то виноват не Натан Смит.
              • 0
                Натан Смит вообще отличный парень. Такое придумать — это надо постараться.
                Только говорить (подразумевать), что модульная сетка возможна исключительно с таким подходом — это опасно. Все и правда могут поверить.
                • +1
                  Количество колонок вещь достаточно консервативная. Дизайн блога, какой-нибудь вики может не меняться годами. Лишний уровень абстракции даже может помешать что-нибудь быстро поправить. Чтобы «присобачить сюда банер» придется искать хорошего верстальщика.
            • –1
              Мне кажется сеточные цсс-фреймворки полезны для новичков, чтобы у них в голове завелось понимание отступов и пропорций. С опытом придёт и понимание что сетку надо выносить из шаблона в цсс-фаел.

              Это как дополнительные колёса при учёбе езды на велосипеде.
              • 0
                Мне кажется отступы и пропорции должны жить в голове у дизайнера.
                А верстальщик должен виртуозно работать с кодом. С этими супер-фреймворками получается какая-то путаница: их всё равно будут выбирать верстальщики. Странно, в общем.
                • 0
                  Тут нет пропаганды пихать данный фреймворк во все дырки. Статья написана как пособие по его использованию, не более.
                  • +1
                    Верю :) И не обвиняю в какой-либо пропаганде. Просто высказал своё «будьте бдительны» и дискутирую.
                • 0
                  Заметил одну сранную штуку в западном веб-(2.0)-деве: все подобные фреймворки позиционируются как «для дизайнера».
                  Только под «дизайнером» в этом случае, кажется, подразумевается человек штампующий фиксированные одностраничные-макеты для Wordpress'ов и пр., а потом сам их и «верстающий».
                  • 0
                    Верно подмечено. Дизайнер — это кто-то вроде Энди Кларка, который пропагандирует разработку дизайна прямо в браузере, используя исключительно CSS.
  • +2
    Вот читаю черт знает в какой раз, и вроде бы так все замечательно, написали классы, а оно само уже правильно показано и ровненько стоит. А представим задачу, уменьшить суффиксы и поменять баланс с 8+4 на 6+8, ходить по файлам и менять классы? что-то уже порезано и зашито в блоках, что-то в темплейте, собирай это все как мартышка апельсины вместо переопределения всего в одном .css

    ps: раскладка панелей — это пожалуй самая малая по времени часть работы в верстке, скажем типичная раскладка
    ______
    _ __ _
    ___ __
    ____ _
    

    итого 8 блоков, 8 раз написать float left/right и замерять им ширину — 5-10 минут дел. А над всей страницей сидишь 4-6-8 (клинические случаи с 1.5метровыми макетами не рассматриваем) часов.
    • 0
      прошу прощения, забаранил *с 8+4 на 6+86
    • 0
      Все это зависит от конкретного применения. Не с руки микроскопом гвозди забивать.
  • +4
    Не совсем понял позицую людей, которые однозначно агрессивно настроены против подобного рода систем.

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

    Во-вторых, 960gs и подобные фреймворки — не Золотой Молот (и в статье про это ни слова, кстати), это просто еще один компромисс между множеством факторов в работе дизайнера и верстальщика. Отнеситесь к 960 объективно, как еще одному инструменту, а не как на грязное посягательство на чистый и творческий-творческий труд дизайнера.

    Кстати, споры об инструментах разработки одни из самых бессмысленных, это как спор о том, что лучше, отвертка или молоток.
    • 0
      все мы по по себе знаем, что некомпетентные люди неспособны правильно выбрать инструмент и доверяются подобным постам.
      Они действительно выглядят профессионально (и fw 960 и описание методики), в итоге человек может выбрать его себе и даже не понимать. что оно того не стоило. Данный пост написан про одну сторону монеты, хорошо. что есть те, кто говорит и об острых углах, это правильно, минусы, имхо, нужно сразу же демонстрировать, а не скромно замалчивать. Ну ведь неидеален же, далеко не идеален фреймворк, если не понимаешь, чем грозит его использование — кончится дело головняком.
  • 0
    знаете я давно искал такую статью, спасибо! в избранные
  • +1
    > по адресу www.spry-soft.com/grids/ расположен чудесный генератор модульных сеток на основе 960gs, который, в том числе, умеет делать резиновые модульные сетки (!)

    Там можно генерировать либо фиксированную, либо резиновую, а есть способ сделать сетку с шириной >=960? Т.е. если больше, то тянется, иначе фиксированный размер.
  • 0
    не впервый раз вижу статьи про css-фреймворки и модульные сетки, но до сих пор так и не понял: Зачем?

    Верстаю постоянно, основа — свои наработки.
    Объясните мне, серому человеку! пжлста!
    • 0
      Вот как у вас основа — свои наработки, так и у некоторых основа — модульная система.
  • 0
    Довольно давно уже пользуюсь этой вещой. Вполне удобно, доволен :) Про «Alpha и Omega» не знал — спасибо
  • 0
    Пользуюсь год этой штукой — полностью на нее пересел. По крайней мере помогает саму сетку набросать.

    Очень удобно.
  • 0
    Правда помогает?
    Я вот, несмотря на большой объём верстки, пользуюсь только reset.css и файлом хтмл с доктайпом и главными тегами.
  • 0
    Чтобы показать сетку в бекграунде достаточно добавить родной класc show-grid:

    
    <div class="container_12 show-grid">
    


    В зависимости от выбранного числа колонок отобразится та или иная сетка
  • 0
    Ощибка в примере про alpha / omega. Есть блок альфа, омеги — нет.
  • 0
    "
    этих фреймворком
    Следоватльно
    для того, что бы
    Что бы понять
    Ячейка (grid), всегда
    а так же более
    код заметили
    что бы избежать
    на download вы
    так же кучу
    "

    «я сама программист» — сомневаюсь. Если человек ленится прочитать, хоть раз, что он написал, не затрудняет себя знанием языка, на котором пишет, значит, он — прирожденный копипастер.
    И не уважает читающих.
  • 0
    Статья весьма интересная и информативная ) Жаль что мой провайдер закрыл pastie.org/ и поэтому не видать скриншотов

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