Система сеток 960

Скачать - CSS, эскиз и шаблоны для: Acorn, Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Photoshop, QuarkXPress, Visio, Exp Design. Репозиторий на GitHub.


Скачай систему сеток 960


Интервью о 960grid.ru

Презентация 960grid.ru

Adapt.js - Адаптивные CSS

Генератор индувидуальных CSS

Скрипт наложения сетки - так нагляднее


Суть

Система сеток 960 - это попытка ускорить разработку сайтов благодаря применению форматов, рассчитанных на ширину в 960 пикселей. Есть два варианта: 12 и 16 колонок, которые могут быть использованы раздельно или вместе. Узнать больше.

Форматы

Сетка из 12 колонок поделена на части шириной в 60 пикселей каждая. Сетка из 16 колонок состоит из 40-пиксельных подразделений. Каждая колонка имеет отступы в 10 пикселей по обе стороны, что создаёт 20-пиксельное расстояние между колонками. Посмотреть как это выглядит.

Назначение

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


Больше колонок

Тем, кто больше привык разрабатывать сетку из 24 колонок, мы предоставили альтернативную версию. Она состоит из колонок шириной в 30 пикселей, с 10-пиксельными расстояниями между ними, а также 5 пикселей по обе стороны для запаса. В случае с браузером Chrome это помогает избежать касаний текста самим браузером, а также рассчитано на работу с iPhone, где строчные "i" и "l" могут быть усечены. Посмотреть как это выглядит.

Исходный порядок

За счёт использования классов push_XX и pull_XX элементы могут быть перегруппированы вне зависимости от того порядка, в котором они появились в разметке. Это позволит вам вписать более уместную информацию в HTML без ущерба для точности в макете страницы. Например, загляните в исходный код этой страницы, чтобы посмотреть как была изменена позиция тэга H1.


Тулкит "Keynote Wireframe" — 12 колонок  

Стилизация форм при помощи CSS — 12 колонок  


Помощник — 12 колонок  

Тракт — 12 колонок  


Музыка Sony — 16 колонок  

Drupal — 12 колонок  


Дистрибутив Fedora — 16 колонок  

Студии 5на5 — 12 колонок  


Хью Гриффит — 12 колонок  

Паноетик — 12 колонок  


Портальный фреймворк — 12 колонок  

Коричневые вещи — 16 колонок  


СМИ-блог Twitter — 12 колонок  

Обновлённый Бостон — 16 колонок  


51бит — 12 колонок  

onehub — 16 колонок  


Четыре кухни — 12 колонок  

Второй парк — 16 колонок  


Диалог "Десять-семь" — 12 колонок  

Мечты "Пиксель" — 16 колонок  


Тэпботс — 12 колонок  

VCU Катар — 12 колонок  


Американский институт архитекторов — 12 колонок  

Программа "Пульс" — 16 колонок  


Филл Коффман — 12 колонок  

От сердца — 16 колонок  


Недвижимость "Чёрный виноградник" — 12 колонок  

Упрощённая безопасность — 16 колонок  


Лучший Офис — 12 колонок  

ОгоТемы — 16 колонок  


Код

Весь код смотрите на демо-странице.

Справа пример того, как код работает. Контейнер определяет сколько колонок у нас будет в итоге - 12 или 16. Чаще всего вам всего лишь нужно будет указать имя класса grid_XX, где XX указывает ширину колонки.

Если сетка содержит потомка, первый потомок в ряду будет классом alpha, а последний потомок в ряду требует имя класса omega. Также, если вы хотите вставить пустое пространство перед сеткой или после неё, используйте класс prefix_XX или suffix_XX.

<div class="container_12">
<div class="grid_7 prefix_1">
    <div class="grid_2 alpha">
        ...
    </div>
    <div class="grid_3">
        ...
    </div>
    <div class="grid_2 omega">
        ...
    </div>
</div>
<div class="grid_3 suffix_1">
    ...
</div>
</div>

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. Подобное свойство числа даёт большие возможности по работе с ним.

Авторы

Я черпал вдохновение от: Кой Вин, Кэмэрон Мол, Олав Bjørkøy, Брендон Шауер, Джефф Крофт, Марк Болтон, и Эрик Мейер. Их работы сподвигли меня создать что-то своё. Так сказать, я стою на плечах гигантов.


Расширения

В дополнение к дизайну шаблонов существуют ещё дополнения для Photoshop и Fireworks. Скачать можно здесь. DMXzone также создал расширение и шаблон для DreamWeaver. Для членов их сайта они доступны бесплатно.

Руководства

В Депо Веб-дизайнеров написали статью о создании более компактного кода путём непосредственной стилизации тэгов. В "Сетевых руководствах" есть инструкции и видео. ОгоТемы опубликовали сообщение, которое назвали “Почему мы любим 960grid.ru.” Есть также статьи на Испанском [1] [2] и Шведском [1] [2].

Вариации

Система сеток 960 бесплатна для использования и может быть многократно использована для ваших нужд. Уже были отделены несколько проектов, включая версии, которые были разработаны мягкими и эластичными. Система так же была адаптирована как тема для Drupal.


HTML - CSS - 508 — Система сеток 960, выполненная Нейтаном Смитом.
Безопасный хостинг
Под лицензией GPL и MIT. Эффекты наложения от jQuery.
Объявления от Fusion