960 Grid System — это очень просто


Оглавление (нажмите, чтобы открыть):

960 Gr >

В этой статье будет описан CSS каркас CSS Framework 960 Grid System, который благодаря быстрой и удобной кроссбраузерной верстке используется многими профессионалами.Дальше будет описаны плюсы и минусы этого CSS каркаса по сравнению с другими.

Итак, благодаря 960 Grid System мы получим удобный для просмотра и неплохо структуризированный сайт, но вот изменить его каркас у нас не выйдет. Так же из стоит отметить ограничение в 960px отображение контента. По этому, используя CSS Framework надо тщательно продумать внешний вид сайта.

Скачать этот CSS-каркас можно с сайта 960 Grid System. В скачаном архиве Вы увидите много папок, нам будут нужны только app_plugins, code, templates.В папке app_plugins — находятся плагины для фотошопа и fireworks, с чей помощью мы сможет работать с дизайном по правилам данного CSS каркаса.

В папке templates — плагины, позволяющие большинству графических редакторов отображать колонки по правилам данного CSS каркаса.В папке code — framework и показательные страницы, которые показывают расположение блоков, в зависимости от выбранного количества колонок. На выбор всего три типа колонок: 12, 16, 24.

CSS Frameworks-Gr > Категория: CSS.

Фреймворк (от англ. framework — каркас)

Вы возможно уже слышали о CSS Frameworks таких как Blueprint, Grid System 960, Elastic и так далее. Также есть мнения что они могут быть хорошей отправной точкой для развития собственных работ и значительно сокращают время вёрстки шаблонов для web сайтов. Но так-ли это на самом деле? В этой статье мы рассмотрим то, как использовать CSS Frameworks на примере одного из наиболее популярных CSS фреймворков Grid System 960.

И так CSS Frameworks – это инструмент который предоставляет web – дизайнеру (разработчику) четкую архитектуру, основанную на довольно точных записанных правилах, которые позволяют выполнять вёрстку шаблонов дизайна для web сайтов не начиная с нуля.

А что такое CSS Frameworks- Grid System 960.

Grid System 960-представляет собой связку таблиц стилей, которые предусматривают общий контейнер расположенный на сетке. Структура делает доступным две стеки: первая сформирована 12 колонками, а вторая 16 колонками. В обеих сетках ширена общего контейнера всегда остаётся 960px.

Почему выбор размера 960px?

Все современные мониторы поддерживают к настоящему времени минимальное разрешение 1024×768 пиксел. Цифра 960 является делимой на 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 и 480. Это даёт намного более гибкие комбинации относительно измерений колонок которые могут быть сделаны.

На изображениях ниже вы можете видеть примеры двух сайтов которые были сделаны с использованием двух разных сеток, первая с 12 колонками вторая с 16.

Как использовать рамки Grid System 960.

Для начала конечно нужно скачать архив CSS framework Grid System 960, и распаковать его, берём оттуда папку css и перемещаем её туда где будут находиться все файлы шаблона. Теперь запускаем ваш любимый редактор(я рекомендую Adobe Dreamweaver) и создаём документ index.html. Подключим к документу index.html все необходимые файлы фреймворка.

Также создадим отдельный css файл “style.css” в котором будут находиться наши собственные правила стилей, сохраняем его в папке path, это сделано для того чтобы не вносить изменения в css файлы фреймворка.

Как выбрать контейнер/сетку для использования.

Теперь мы должны выбрать тип сетки которую хотим использовать 12-колоннок (. Container_12) или 16-колоннок (. Container_16). Мы знаем что обе сетки имеют размерность 960px, разница заключается только в том что 12-колоннок делит размерность на 12, а 16 соответственно на 16.

Класс который выбирает тип сетки выглядит так:

Как установить размер колонок?

Когда мы хотим разделить наш контейнер в несколько столбцов, для этого достаточно просто использовать класс. Grid_XX, в котором “XX” представляет число колонок (сетки выбранной в качестве контейнера). Из которых будет составлен колонка, которую мы хотим получить.

Например, если мы хотим иметь две колонки (боковое меню и содержание) достаточно указать это так:

Класс «grid_7» указывает на то, что у боковой колонки меню должен быть размер равный 7 колонкам выбранной сетки.

Как Вы можете видеть, сумма первой колонки (grid_7) со второй колонкой (grid_5) точно 12, общее количество колонок которые составляют сетку контейнера, который мы выбрали (container_12). Таким образом не нужно знать ширину которую должна иметь каждая единственная колонка, тем самым легче изменять размеры наших колонок во время развития вёрстки.

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

Как вы видите сумма этих трех колонок grid_4 точно 12 (4 + 4 + 4).

Отступы между колонками.

Предопределенные настройки столбцов имеют определенный отступ между ними. Каждый класс gr > имеет 10 px . отступа и справа и слева. Если мы хотим убрать например отступ у первой и последней колонки нашего макета, надо добавить класс “alpha” это уберёт отступ с левого края и “omega” для правого.

Мы в примере сделали, так что у первой колонки не будет отступа слева, а у последней справа.

В случае если мы захотим оставить одну или несколько пустых пространств до и после колонки.

Для того чтобы оставить одно или более пустых мест до или после колонки, надо использовать классы “prefix_XX” или “suffix_XX”, в место XX надо указать количество колонок которые вы хотите оставить пустыми.

Давайте посмотрим пример:

В этом примере мы установили, что перед колонкой grid _7 будет находиться пустое пространство равное одной колонке, и также после колонки grid _3 будет одна пустая колонка.

Не забывайте что сумма всех колонок, в том числе и пустых должна быть равна 12 (gr >

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


960 Gr > Задать вопрос

Интересно мнение о таком css-фреймворке (да забавное название) как 960 Grid System. Вроде для дизайна шалон хороший, но вот для верстки не знаю.
Напрягает даже не то, что надо подключать маленький js-файлик, а то оправдан ли геморой использования стандартного css с разметкой.
Вобщем как говориться, «нас и тут не плохо кормят», стоит ли заморачиться? Поделитесь опытом, мыслями на этот счет.

1 ответ 1

Использую похожий по смыслу blueprint. Если для вас обычная верстка с нуля, блоками, не является раздражающим, ужасным, скучным и нудным процессом, то css фреймворки вам ни к чему. Если вам нравиться накидать 4-5 div’ов и иметь кроссбраузерную структуру сайта, то заморачиваться стоит, тем более что после того как вы просто прочитаете css все станет понятно.

Работаем с сеткой и «960 Gr > Опубликовано 21 апреля 2009 в категории Дизайн → 13 комментариев

— «С чего начать работу над макетом сайта?». Вопрос на который каждый дизайнер скорее всего ответит по своему. Лично я склоняюсь к тому что все зависит от того, над сайтом какого типа нам придется работать. Так ли нужна строгая модульная сетка, скажем, промо-сайту нового товара/услуги и что без нее будет делать информационный портал или блог? (пример ниже)

Определившись с функционалом страницы не лишним будет создать черновой прототип, либо по-старинке на бумаге, либо в программах вроде «Axure RP». В любом случае, при работе над чистовым вариантом нам понадобится сетка. И в этом моменте не лишним будет воспользоваться как «960 Grid System» (http://960.gs), с уже готовыми шаблонами для фотошопа, иллюстратора и пр., так и скриптом для создания заданного макета сетки в случае если рабочая область шире стандартных 960 пикселей .

Говорят цифры.
Все современные мониторы работают в разрешениях начиная, как минимум, с 1024×768. Стандартная ширина рабочей области макета в 960 пикселей делится на 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 и 480. Что делает работу с такой сеткой очень гибкой.

Стандартные размеры. 12 и 16 колонок.
Сетка на 12 колонок разбита на равные части по 60 пикселей каждая, соответственно 16ти колонная сетка будет по 40 пикселей. Стандартный отступ слева и справа каждой колонки — 10 px., или 20 в сумме. Для нестандартных размеров стоит воспользоваться небольшим скриптом, работающим на основе этой системы (линк ниже) .

Коротко о главном.
Работа c четко заданной сеткой не только сделает конечный продукт более структурированным и понятным конечному пользователюи, но и ощутимо сэкономит время при разработке как дизайнеру, так и кодеру.

960 или 980.
Ширина сайта в 960 пикселей так же оптимальна для мобильных устройств и планшетов (тот же iPad и большинство нетбуков). При создании макета шириной в 980 и более возможна, а в некоторых случаях и неизбежна, ситуация когда контент будет упираться в края экрана. Это также стоит учитывать.

Шаблоны 960 Gr > 2020-01-12 2820

Предоставляем вам возможность бесплатно скачать 3 шаблона 960-Grid-System на 12, 16 и 24 колонки в формате .xsf, для разработки макетов сайтов, интерфейсов программ и приложений в GIMP.

1,0,1,0,0

2,1,0,0,0

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

3,0,0,1,0

Каждый файл в архиве представляет собой изображение размером 1020×1020 px, состоящее из двух слоёв: Background и Grid.

Формат файла — .xsf. Размер архива – 10 кб.

960 Grid System — это очень просто

Самое важное в веб-дизайне это Grid System. Это основа и фундамент вашего будущего сайта, интерфейса, приложения.

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

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

Сетки — это вообще отдельная культура. Есть огромное количество книг, материалов, статей на эту тему. Сетки используются не только при создании сайтов, но и в графическом дизайне. И я вам рекомендую глубоко и досконально изучить данный вопрос. Благо в сети огромное количество материалов на эту тему.

Используя сетку, вот так вот легко и просто вы сможете аккуратно позиционировать текст, задавать размеры, выбирать отступы.

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

Кстати, с системой сеток нас познакомили еще в ранней школе. Все помнят тетради в клеточку? В линейку?

Как видите, без сетки — никуда. Она присутствует даже в школьных тетрадях. И создана для того, чтобы облегчать нам жизнь.

Особенно в веб-дизайне сетка важна в работе с текстом. На это тоже обращайте пристальное внимание. Иначе макет может быть с виду казаться ровный, но если внимательно рассмотреть типографию, то все криво будет плясать и скакать по всему сайту, что очень быстро расскажет о вашем непрофессионализме и незнании вопроса. Суть в том, что когда вы работаете в тексте и выбирайте межстрочный интервал (отступ), текст везде должен быть на линии четко, если вы хотите ровный сбалансированный макет.

Baseline

Есть такое понятие как «Базовая линия» (англ. baseline, или линия шрифта) — воображаемая прямая линия, проходящая по нижнему краю прямых знаков без учёта свисаний и нижних выносных элементов. В строке символы текста стоят на базовой линии, а нижние выносные элементы текста «свисают» с неё.

Baseline желательно тоже подчинять определенной сетке. Он задает вертикальный ритм.

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

Какой у вас может возникнуть нюанс?

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

Мастер Йода рекомендует:  Глубокое изучение встроенной ленивой загрузки изображений и фреймов

Особенно это плохо смотрится если текст довольно мелкий:


Как я решаю эту проблему? В таких случаях, я делаю меньше отступ. И подбираю его по схеме, чтобы только каждая вторая линия стояла ровно на линии сетки.

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

Но имейте в виду, что эта не панацея, подходов и правил и разных сеток огромное количество. Я лишь даю базовые подсказки, от которых вы должны отталкиваться. Многие начинающие веб-дизайнеры игнорируют такие элементарные правила как работа с сеткой и на выходе мы получаем кривые, разношерстные и неприятные макеты. Где потом верстальщики хватаются за голову и не знают как нормально все это сделать и по итогу, точно так же на глаз, делают тяп-ляп. И тем более когда мы живем в мире адаптивного веб-дизайна, сетки являются чуть ли неотъемлемой частью веб-разработки.

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

Модульная сетка используется типографами, графиками, фотографами и дизайнерами выставок для решения двух- и трехмерных визуальных задач. График и типограф с помощью модуля делают рекламу, проспекты, каталоги, книги, журналы, дизайнер выставок создает концепцию экспозиции, стендов, рекламных дисплеев и так далее. Структурируя при помощи модульной сетки плоскости и пространство, дизайнер получает возможность организовать тексты, фотографии и графические изображения по принципам объективности и функциональности. Сокращается число форматов для изобразительных элементов. Величина иллюстрации определяется в соответствии с ее значением для данной темы. Сокращение визуальных элементов и включение их в модульную систему создает впечатление продуманного единства, прозрачности, ясности, возникает порядок в оформлении. Логично организованный дизайн поддерживает достоверность информации и располагает к ней читателя. Информация с ясно и логически расположенными заголовками, подзаголовками, текстами, иллюстрациями и подписями к ним не только быстрее и легче читается, она лучше понимается и откладывается в памяти. Это научно доказанный факт, и дизайнер должен постоянно держать его в уме.
Из главы «Для чего нужен модуль». Книга Йозефа Мюллера-Брокманна «Модульные системы в графическом дизайне. Пособие для графиков, типографов и оформителей выставок»

Вариантов сеток огромное количество. Именно благодаря ним, журналы, веб-страницы, книги, получаются стильными, красивыми, оригинальными.

Вы должны четко понимать как вы будите использовать сетку и какие элементы в ней располагать.

С чего же начать?

Конечно, сразу новичкам будет довольно сложно все это понять. Но я предлагаю начать изучения сеток с самого простого. Первое и самое нужное, что понадобиться веб-дизайнеру это сетка 960 grid. Научитесь сначала работать с этой сеткой, практикуйтесь и постепенно изучайте другие виды сеток.

960 grid system

960 grid system — это пожалуй самая распространенная система сеток для веб-дизайна. Более подробную информацию можно узнать на официальном сайте 960 grid и там же скачать исходники сетки. Если очень вкратце, то принцип работы с этой сеткой очень хорошо объясняется в этом видео:

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

Если говорить совсем просто, то на выходе ваш макет должен иметь вот такой вид:

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

Поэтому вам надо много практики и изучений данного вопроса.

Прежде чем начать создавать макет веб-сайта, определитесь какую сетку вы будите использовать.

1. Для начала создайте горизонтальный ритм. Какая ширина сетки? Сколько колонок? Какие отступы? В этом вам помогут генераторы сеток онлайн. (Modulargrid, gridcalculator и др.)

2. Дальше создайте вертикальный ритм для Baseline.

Использование сетки при передаче макетов в верстку

После того, как вы создали сетку в макет, и хотите передать исходник ее не стоит удалять из слоев. Оставьте слой сетки активным слоем и чтобы ее было видно. А еще лучше передавать сетку верстальщикам в виде отдельной спецификации. Вы можете приложить к основному jpg макета дополнительный jpg с сеткой. Можно еще прописать на нем основные размеры — например шаг, отступ, ширину колонки, размеры шрифтов. Тогда соответствие вашего макета и верстки станет более точным.

Опять же в помощь могут прийти генераторы сеток онлайн, которые помогут вам сгенерировать все необходимые данные для верстальщика.

Не всегда все начинается с сетки

Еще хотел бы добавить важный момент, что при создании дизайна ( в частности если вы разрабатываете еще что-то кроме сайтов и приложений) , не всегда лучше начинать именно с сетки. Для начала лучше начать с бумажного эскиза или наброска композиции, а уже после этого когда вы знаете, что хотите получить, подобрать или построить сетку. Бываеет, так, что например рисуешь дизайн обложки к журналу по сетке, все ровно, красиво, но когда отключаешь сетку, композиция выглядет иначе. Поэтому учитывайте в первую очередь свое визуальное восприятие. Если отключая сетку, вы видите, что , что-то не так, возможно стоит переделать как надо без сетки, а потом уже подогнать и расчитать новую сетку, которая бы соответстовала вашей правильной композиции и отступам.

Полезные книги

Хочу еще порекомендовать полезные книги о сетках в графическом дизайне.

Gr >Йозеф Мюллер-Брокманн «Модульные системы в графическом дизайне»

Книга для начинающих графиков, типографов и оформителей выставок.

Эта книга — настоящий рай для перфекционистов. Представляет собой подробное пособие, которое необходимо читать даже тем, кто знает советы о вёрстке наизусть. Книга не просто детально и убедительно доказывает универсальность модульного метода, но и поможет структурировать все знания в систему.

The complete guide to CSS grid

Полное руководство по CSS сетке. Отличный материал для дизайнеров и разработчиков.

Аллен Хёрлберт — Сетка

Книга Аллена Хёрлберта «Сетка» (аналогично предыдущей), даже на русском.

Модульные сетки: Проектирование многополосных изданий

Лаптев, Владимир Владимирович

Сетки, креативные решения для графических дизайнеров

Making and Breaking the Grid
Автор: Timothy Samara


Полезные инструменты

Еще хочу поделиться полезными ресурсами для построения сеток.

Modulargrid
http://modulargrid.org/#app

Генератор модульных сеток. Приложение позволяет задавать Baseline, ширину и высоту модуля, количество модулей, отступы, общую ширину. Можно все это сохранить как PNG паттерн или photoshop паттер или даже маску. Можете поиграться с параметрами и наглядно понять как создается сетка и из каких частей она состоит.

Gridcalculator
http://gridcalculator.dk/

Более простое приложение. Помогает быстро делать расчет сеток для веб-сайтов и приложений под разные разрешения экранов.

Gridinator

Удобный инструмент, позволяет генерировать сетку с параметрами pixel widths, em widths, percentage widths. Есть экспорт сетки в CSS, html, image.

GridDesigner
http://grid.mindplay.dk

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

Gridlover
https://www.gridlover.net/try

Хорошее приложение, которое поможет создать вертикальный ритм для текста. Но как вы можете заметить, Baseline тут действует иначе. Это больше вариант CSS вертикального ритма. Программа при увеличении/уменьшении размера отступов строк автоматически подгоняет размеры шрифтов, чтобы текст не слипался или наоборот не был слишком большим. Программа наглядно поможет вам понять, как это работает в CSS.

У вас остались вопросы? Или хотите что-то добавить важное к этой главе? Оставьте свой комментарий.

Переход с системы 960 Grid на ZURB Foundation

Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)

960gs был хорош! Когда большинство посетителей вашего сайта использовали настольные компьютеры с мониторами как минимум в 1024 пикселя, 960gs сделал разработку кода сайта совершенно простым. Однако с наступлением быстрого распространения устройств и преобладание медиа-запросов, сайты с фиксированной шириной стали значительно менее эффективны, чем адаптивные макеты.

В этом материале я опишу, как перейти с сайта с фиксированой шириной 960gs на фреймворк ZURB Foundation. Не отвлекаясь слишком много, я хочу быть справедливым к 960gs и упомянуть adapt.js, который является ответом этого фреймворка на отзывчивый веб-дизайн. А пока, эта статься покроет основы сетки Foundation, как она сравнима с сеткой 960gs и некоторые дополнительные параметры Sass в Foundation. В этом уроке, предполагается, что вы уже знакомы с 960gs и рассматривали Foundation, как способ прийти к отзывчивому дизайну.

Сетка

Для начала, вам нужно будет понять основы концепции строк и столбцов в Foundation. Условно, 960gs использует один мегаконтейнер и полагаться на каждую комбинацию DIV для создания строки. Вот так:

У вас может быть

В Foundation нет мегаконтейнера, вместо этого есть строки и строки, содержащие столбцы, а столбцы должны быть равны 12. Каждый столбец определяется добавлением класса columns , сопровождаемого хотя бы одним классом для определения ширины этого столбца.

Пойдём коротким путём, собственно для чего мы тут, сетка Foundation подобна строкам и прослойкам Twitter Bootstrap, за исключением того, что Foundation даёт вам возможность определять ширину столбцов на нескольких размерах экранов.

Вы заметите запись medium-6 . Это означает, что на среднем экране (однако это определено, по умолчанию 641px), вы увидите шесть столбцов шириной или в половину доступной ширины. Можно добавить другой класс, чтобы указать, сколько столбцов должна быть ширина div на других размерах экранов, включая малые ( small ) и большие ( large ). Вот как это будет выглядеть:

Foundation ориентарована в первую очередь на мобильные устройства. Кодим на маленькие экраны, а большие устройства наследуют эти стили. Настройка для больших экранов не обязательна. источник

По умолчанию Foundation разработан в концепции сначала для мобильных. Для сеток это означает, что может использоваться только класс small , чтобы определить ширину столбца для маленьких экранов, а все устройства больше наследуют от него, если класс medium или large отсутствуют. С другой стороны, если вы используете только класс medium , то макет для малых экранов по умолчанию преобразует DIV в штабелированные одноколоночные строки (эквивалентно small-12 ), которые по умолчанию применяется к столбцам для малых экранов.

«Эквиваленты» сетки 960

С учётом этого, основные изменения вашего макета заключаются в следующем: во-первых, div с классом container можно удалить. Далее, вокруг DIVа grid_# , который делает «строки», вам понадобится создать div с классом row . Отдельные DIVы содержащие классы grid могут быть изменены на medium-# .

Этим вы получите нечно ужасное, что-то вроде вашего старог макета на 960gs при просмотре на устройствах выше 640 пикселей и ниже этой ширины, у вас будет только стопка строк в полную ширину, что означает, что каждый div столбца будет 100% ширины.

Вот некоторые другие понятия 960gs переведенные в манере Foundation:

Вложенность

В 960gs, вложенность можно сделать добавив alpha в первый столбец строки и omega в последний, эффективно удалив горизонтальные поля. При таком подходе, вложенные строки должны быть суммой ширины столбца, в котором находятся вложенные столбцы.

В Foundation, вложенность делается за вас, вам нужно только вставить одну строку вместо колонны. Дополнительные классы не нужны. Другое главное отличие состоит в том, что каждая вложенная строка снова будет иметь 12 столбцов для доступного пространства. Таким образом, строка внутри medium-6 позволит вам разделить эти шесть столбцов на 12.

Создание промежутков

Префикс и суффикс в 960gs были полезной фишкой классов для создания пустого пространства в вашем макете и обеспечивали средство для центрирования. У Foundation есть те же возможности, используя Offsets.

Порядок исходного кода

Это фактически почти то же самое в обоих фреймворках. Упорядочивание исходника позволяет создавать столбцы в любом порядке в вашем HTML, но показывать его в другом порядке слева направо. Для этого вы можете использовать классы push и pull .


Ещë почитать

Foundation покрывает все возможности 960gs и даже больше. Посмотрите их доки, чтобы узнать что ещë на нём можно сделать.

Точки разметки экранов Foundation

И главная причина, по которой вы переходите на что-то вроде Foundation — отзывчивость. Вы знаете о контрольных точках large , medium и small , но есть также xlarge и xxlarge . Вот что относятся к этим классам устройств:

Класс точки Ширина области просмотра
small 120em (1920px)
xxlarge > 120.063em (1921px)

Обратите внимание, что в HTML можно использовать только small , medium и large классы. Если вам нужно использовать xlarge или xxlarge , или вы хотите настроить эти точки, вы можете использовать Sass для адаптации Foundation в соответствии с вашими потребностями.

Параметры Sass

Foundation построен для работы с Compass и Sass. Если вам удобен Sass, это может облегчить процесс разработки, больше узнать о начале работы с Sass и Foundation.

Ключевым профи для использования Sass является то, что вместо добавления в ваш HTML классов, специфичных для Foundation, вы можете просто расширить атрибуты Foundation на основе существующей разметки. Например, существующий div с классом news может быть сделан для имитации div’а grid-6 columns .

Вот полный пример того, как это может выглядеть, допустим у вас такой HTML:

Чтобы достичь разделения 50/50 для .news и .events , ваш Sass будет выглядеть так:

Это равносильно изменению разметки вот так:

Включение дополнительных точек устройств

Если вы захотели включить другие точки ширины в SCSS, вы можете просто использовали этот метод:

Что аналогично этому:

Метод SCSS хорош, потому что он не захламляет классы в HTML и позволяет вам быть более семантическим.

Избегаем повторяющихся стили

Есть ещë одна более важная вещь. которую нужно знать об этом методе. Если вы компилируете ваш CSS в раздельные, дополняющие файлы стилей, но хотите использовать смешивание ( mixins ) в Foundation, вам надо будет импортировать то, что нужно, но избежать повторяющихся стилей Foundation. Чтобы избежать добавления лишних стилей в выходной CSS, вам нужно указать переменную $include-html-classes как false , вот как это выглядит:

Обратите внимание, что способы могут отличаться в зависимости от вашей настройки. Это позволит вам использовать всё: смешивания, функции и настройки в Foundation, без необходимости дублировать все CSS. Это удобно, если на странице, с которой вы работаете уже есть CSS. Этот метод можно использовать, например, в качестве места для хранения всех ваших переопределений для конкретной страницы или подмножества страниц.

В заключение

Это всего лишь верхушка айсберга: у Foundation и Sass гораздо больше возможностей, и у обоих есть большое количество разработчиков, которые продолжают делать их более продвинутыми, хорошими и лучше.

The 960 Grid System Made Easy

The first time I discovered the 960 Grid System, I was immediately excited about the possibilities of implementing complex layouts so easily.

However, since I was fairly new to web design at the time, when I downloaded the files, I quickly became overwhelmed at how complicated the whole thing seemed.

With all this code, how could this be the easy way to create a layout?

This article is for web designers and front-end web developers who are interested in grid-based layout systems but are at a loss on how to decipher them.

We’ll focus specifically on the 960 Grid System, but after reading this guide, you’ll find that most of the other grid systems out there are similar and will make much more sense after you understand a few basic principles.

Grid-Based Design

Before we get into the specifics of the 960 Grid System, let’s briefly discuss grid-based design in general. The idea is certainly not something that originated on the Web. In fact, it stems from one of the oldest and most basic design principles: alignment.

Our brains like to simplify things to make them readily understandable. This is why we try to impose order on things that seem chaotic, like seeing a face in the craters on the moon.

Naturally, the easier it is to impose order, the quicker our brains can identify a pattern and move on. Grids are so organized and orderly that they require almost no interpretation our part.

Consider the two page layouts represented in the image below.

Though both of these images are simply a gathering of rectangles, the layout at the top seems fundamentally better than the one on the bottom. We can instantly recognize a pattern, accept it, and move on.

The image on the bottom, however, is visually unsettling by comparison. There’s no clear pattern, order, or goal–it’s just looks like a random assortment of shapes.

Our eyes have a tendency to frantically search for fractions of a second while we attempt to identify a trend, which increases the time necessary to take in the scene as a whole.

It’s interesting to note that random can still be beautiful. Random definitely has its place in nature, art, and even design, but it’s no way to logically organize information.


The point is that grids are among the simplest and strongest ways to create order on a page. They may seem cold and rigid, but remember that they are both extremely efficient and effective, and can even be quite flexible if you don’t let your imagination get bogged down by the necessary structure.

Why Do I Need a Grid System?

The 960 Grid System–and other tools and systems like it–provide a fast and easy way to create grid-based layouts using CSS. They do this by providing cross-browser-tested and optimized preset column widths for you to set your content into. These grids can help you save on your online marketing budget.

Before CSS3, it wasn’t exactly easy to break up a page into columns without getting into tedious math.

For instance, if you have a 1,000-pixel wide container and you want to split it up into three columns, that’s 333 and 1/3 pixel per column (not exactly a nice whole number). Further, columns broken up like this would crash into each other, so a margin must be added on each side. If we add a 10-pixel margin to each side of every column, we must also subtract that 20 pixels from the width of each column. This gives us 3 columns roughly 313 pixels wide each with a margin of 10 pixels on each side (even then you’re at 999px and not 1,000px).

Want 4 columns in a row below that? Then you have to start the process over and subtract 80px of margin from 1,000px for a total of 920px and divide that by 4 to get a column width of 230px.

Finally, if you want to add a sidebar that’s a third of the total width of the page, you have to create a column that’s 750px for the content and one that is 250px for the sidebar, then subtract 40px of margin to get one 730px column and one 230px column.

Confused yet?

Other web designers were too. It’s not exactly rocket science, but it’s also not something you want to go through again and again for each project that you create.

The solution? Find someone else to figure out all these crazy column widths, throw them into a CSS document, and let you download it free. (That person happens to be Nathan Smith, creator of the 960 Grid System).

The 960 Grid System

The 960 Grid System is simply a way to lay out websites using a grid that is 960 pixels wide.

The reason it’s 960 pixels wide is because the number 960 makes for a lot of clean divisions utilizing whole numbers when factoring in column widths and margins. And it fits nicely on the majority of screens.

The 960 GS comes in two primary variants: a 12-column grid and a 16-column grid (a 24-column version is included as well for those that really need extra control).

In the 12-column version, the narrowest column is 60 pixels wide. Each column after that increases by 80 pixels.

So the available column widths are: 60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 and 940.

Similarly, in the 16-column version, the narrowest column is 40 pixels wide and each column after that increases by 60 pixels.

So the available column widths are: 40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880 and 940.

CSS Classes Now in Session

When you look at the diagrams above, consider each of the dark blue horizontal bars as a CSS class in the 960 Grid System.

To create an object in your layout that is the width of one of those bars, you simply assign the proper class to your div–that’s it!

The classes are conveniently named according to their size with the grid_1 CSS class being the narrowest and grid_12 CSS class being the widest ( grid_16 is the widest in the 16-column version).

So to reuse our image from above, take a look at the available columns now, but this time, think about them using their respective CSS classes instead of pixel widths.

This naming system makes it incredibly easy to hash out complicated layouts in seconds flat. To fill a page’s width, the trick to keep in mind is that the numbers assigned to your selected classes must equal 12 in the 12-column version and 16 in the 16-column version.

For instance, using the 12-column version, if you have 3 divs of text that you want to be displayed side-by-side in a 3-column layout, simply assign the grid_4 >

Similarly, assigning the grid_4 CSS >

To make sure you’re referring to the proper classes, be sure to place your 12-column elements inside a div with the class container_12 and your 16-column classes inside a div with the class called container_16 .

If you’ve never worked with the 96 GS before, I hope you’re having your “aha” moment right now regarding just how easy it is to spec out a layout in no time at all using this system.

Push Me, Pull Me

The 960 Grid System allows you to reposition elements independently by pushing or pulling them horizontally along the page. This is accomplished by using the push and pull CSS classes.

For instance, consider the two examples in the image below. The first example is a basic 4-column layout using only the grid_3 class.

However, in the second version, I’ve pushed the first column and pulled the last column, resulting in their positions jumping over one column from where they would normally lie in the layout.

Keep in mind that you can push items as far as you want. If I had wanted to push an element two columns over, I would’ve implemented the class push_2 , and so on.

The push/pull system has major implications for how you lay out a page in your HTML document.

For instance, in the example below, imagine the website’s name is typed out in a logo and placed as the first element on the page.

As the most important element on the page, you’d like to keep the logo as the first item in your HTML markup, but visually, you actually want it to appear in the center of the page.


Before pushing/pulling:

To visually position the logo element in between the two text columns, you would use the following HTML:

This results in the layout shown in the image below.

After pushing/pulling:

Despite the fact that the logo comes first in our markup, it will be visually positioned in the center of our page.

Wide Open Spaces

You’ll often find that you want to create empty space in a layout (negative space is a good design device). To accomplish this, apply the prefix and suffix classes to your divs. These are implemented very similar to the push and pull classes.

For instance, to leave a blank space that is the width of one column before an element, use prefix_1 class, or after an element using suffix_1 class.

As you can see, the example above uses a suffix _3 class to create an empty space the width of three columns after it.

The Beginning and The End

The final bit of knowledge you’ll need to know is that you are provided with the alpha (“first”) and omega (“last”) classes that must be applied to any grid units that are the children of other grids.

Obviously, the alpha class will be applied to the first child and the omega class to the last child.

Essentially, these classes provide a margin fix so that you can nest grid units inside of other grid units.

Let’s Review

Armed with this newfound knowledge, you should now be a 960 Grid System expert.

To review, there are basically only 5 concepts you need to remember:

  1. Use the container_12 class for the 12-column version and the container_16 for the 16-column version.
  2. Use the classes grid_1 , grid_2 , grid_3 , etc. to set your column widths. If you want to fill a page horizontally, make sure the numbers add up to 12 or 16 (i.e. grid_4 + grid_2 + grid_6 = 12).
  3. Use the push and pull classes to independently position items on the page, regardless of their position in your page’s markup.
  4. Use the prefix and suffix classes to create empty spaces in your layout.
  5. Use the alpha and omega to fix the margins for any nested grid units.

There is also a CSS reset included with the 960 Grid System. This is a completely optional file based on the ever popular Eric Meyer CSS reset. If you like it, keep it. If not, trash it!

960 Grid System Resources

Now that you’re an expert on grid-basedd web design and the 960 Grid System, here are a few tools and resources to check out to further your understanding.

Fluid 960 Grid System

An awesome fluid version of 960 GS! Fluid web layouts readjust the layout to fit the page. This can make for some really complicated code, but using this system means that it will do all the heavy lifting for you.

The 1KB CSS Grid

An extremely lightweight grid system that is basic and easy to understand. It’s highly customizable but defaults to 960px.

Variable Grid System

A simple and flexible CSS grid builder based on the 960 Grid System.

Grid-Based Design Gallery

If you’re skeptical about the 960 Grid System and what grid-based design can offer you as a web designer, check out this design gallery. As you can see, with a little imagination and ingenuity, the possibilities are endless.

Typogridphy

From the site: “Typogridphy is a CSS framework constructed to allow web designers and front-end developers to quickly code typograhically pleasing grid layouts.”

Tiny Fluid Grid

This is a grid-builder for a fluid version of the 1KB Grid System above.

Off the Grid

Admittedly, even with all the possibilities and flexibility provided by a grid system like 960 GS, you’re still being placed under restrictive confines. No one is suggesting that all websites should be created on a grid–this would definitely lead to a widespread lack of creativity and lack of variation in page layouts. Whether your web designer uses a grid or not is a question you may want to ask before the project starts.

Further, as you experiment with 960 GS, you’ll find that there are numerous ways to break the layout that will force you to rethink your designs.


The 960 Grid System–and others like it–merely provide a strong foundation for the numerous times you’ll find yourself building a site that doesn’t break the mold with innovation, but instead needs to convey information clearly and logically in a way that is familiar to a large number of users. These are great to use for large sites such as one for a college.

Your Thoughts on Grid Systems?

Leave a comment below and let us know what grid system you prefer and if the information above helped you in your quest to decipher the 960 Grid System. What’s good about grid systems? What’s bad about them? Share your thoughts an opinions below.

Related Content

  • A Brief Look at Grid-Based Layouts in Web Design
  • The Evolution of Web Design
  • The Brads – Alignment in Design
  • Related categories: Web Design and Web Development

We’ve driven over 4 million leads for clients in the last five years.

Очередной блог фрилансера

коротко и полезно о веб-разработке

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

Grid 960 — это CSS Фреймворк, который позволяет разработчикам быстро конструировать прототипы дизайна. Они являются замечательным инструментом для создания макетов. Почему? Потому что они делают за вас всю тяжелую работу, позволяя получить быстрые результаты.

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

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

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

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

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

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

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

Макет

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

Перевод статьи «Prototyping With The Grid 960 CSS Framework«, автор Adam Hawkins

Рассказать друзьям

Понравилась статья? Лучший способ сказать спасибо — поделиться ссылкой в социальных сетях:

Адаптивные системы сеток

26 августа 2013 | Опубликовано в Веб-дизайн | 3 Комментариев »

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

Skeleton

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

Основная цель — внедрять семантическую разметку HTML, используя Cacc Mixins. Начните с прочтения документов и изучения некоторых примеров. Скачать сетку можно здесь.

Simple Grid

Если вы приверженец минимализма, то это то, что вам нужно.

Profound Grid

Одной из уникальных особенностей этой сетки есть то, что она использует отрицательные значение полей для расчета колонок и ваш резиновый сайт будет выглядеть одинаково во всех браузерах.

Griddle

Сетки для веб-дизайнеров и веб-сайтов, которые ставят акцент на современные браузеры . Эта система сеток использует смешанные функции — использование усиленных «inline-block» и «box-sizing» свойств и придает разметке новые особенности, что традиционная float разметка не может дать.

Extra Strength Responsive Grids

Сети дополнительной силы реагирования — эта система для вас, если вы чувствуете, что другие системы сеток слишком ограничены и, если вы отдали приоритет адаптивной верстке.

Proportional Grids

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

Dead Simple Grid

Если вы просто хотите несложную адаптивную сетку, то эта сетка для вас, которая имеет только два CSS класса.

Responsive Grid System

Эта сетка дает вам немного больше гибкости по сравнению с другими системами сеток, потому что она дает вам выбор в использовании любого количества столбцов, которые вам нужны. П опрощайтесь с диктаторскими ограничениями 12-колоночных и 16-колоночных систем.

rwdgrid

rwdgrid — адаптивная сетка CSS, которая основана на 960 Grid System.

CSS Smart Grid

CSS Smart Grid опирается на 960 Grid System. Весит всего 1.2KB.

Gridlock

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

Мастер Йода рекомендует:  Высокий заработок в интернете
Добавить комментарий