Статьи

Создавайте организованные сайты быстро с 960 Grid

Февраль 22, 2019

В этой статье я расскажу о силе 960 и покажу, как создать макет из 12 столбцов (или другого размера, если хотите), чтобы вы могли начать работу с сеточными системами. У меня есть полностью функциональный пример CSS и HTML ниже, и вы можете скачать мой шаблон Photoshop для разработки концепций и быстро сократить их для быстрой реализации.

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

Я использую эту систему для быстрого проектирования прототипов. Одним движением руки я могу создать макет, который легко использовать как в программном обеспечении для графического дизайна, так и в веб-дизайне. Просто сообщите (или настройте) файл в Photoshop с сеткой из двенадцати направляющих 80px. Вы можете легко урезать дизайн и выложить его за очень короткое время, быстрее получить одобрение клиента и получить более согласованный дизайн для реализации разработки.

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

Почему 960?

Прежде всего, за последние 10 лет мне еще не пришлось садиться за настольный компьютер или ноутбук с разрешением экрана ниже 960. Хотя я знаю, что у более старых мониторов максимальное разрешение 800px, сетка 960 адаптируется к этому размеру без проблем. Как?

960 делится поровну примерно на дюжину способов:

  • 2 х 480
  • 3 х 320
  • 4 х 240
  • 5 х 192
  • 6 х 160
  • 8 х 120
  • 10 х 96
  • 12 х 80
  • 15 х 64
  • 16 х 60
  • 20 х 48
  • 24 х 40
  • 30 х 32

Что это значит? Вы можете создать систему сетки, которая адаптируется к макету экрана любого размера. Я не использую большую часть приведенной выше ширины столбца (я просто не могу придумать слишком много сценариев, в которых я хотел бы 30 столбцов по 32 пикселя в каждом). Вы можете сделать довольно хорошую систему с помощью всего лишь нескольких.

12 столбцов, чтобы управлять ими всеми

Сейчас я не думаю, что 12 столбцов — это лучшая система сетки. На самом деле, я регулярно работаю с 16 и 24 колонками, но 12 — отличное место для начала. Вот несколько сценариев компоновки с сеткой из 12 столбцов, построенной на сетке размером 960 пикселей:

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

Существуют и другие способы нарезки и нарезки, но вы должны понять, что с помощью нескольких определений CSS вы можете легко и эффективно выстроить свою сетку. Я просто использую 12 столбцов по умолчанию, поскольку они покрывают 99% того, что мне нужно. В экстремальных сценариях, где мне нужен дизайн колонок 16, 20, 24 или даже 30, достаточно легко приспособиться к дизайну, который я собираюсь вам показать.

Постановка макета

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

  1. Полная ширина
  2. Половина ширины
  3. 1/3 ширина
  4. Ширина 2/3
  5. 1/4 ширины
  6. Ширина 3/4

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

С помощью приведенного выше макета у вас есть все ширины столбцов, необходимые для большинства сценариев проектирования. Полная ширина охватывает баннеры и навигацию. 3/4 и 1/4 охватывает статьи с боковой панелью. Другие отлично подходят для выноски и других элементов дизайна.

CSS

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

Итак, давайте посмотрим на начало модели CSS:

[sourcecode language = ”css”]

тело {
минимальная ширина: 960 пикселей;
Маржа: авто;
}

/ * Обертка * /
.строка {
ширина: 960px;
Маржа: авто;
}

[/исходный код]

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

Теперь мы размещаем «желоба» — ширину между столбцами, чтобы наш текст или другие элементы дизайна не располагались друг над другом.

[sourcecode language = ”css”]

/ * Поля столбца * /
.col_12, / * полная ширина * /
.col_9, / * ширина 3/4 * /
.col_8, / * ширина 2/3 * /
.col_6, / * половина ширины * /
.col_4, / * ширина 1/3 * /
.col_3 / * ширина 1/4 * /
{
поле слева: 10 пикселей;
поле справа: 10 пикселей;
дисплей: встроенный;
плыть налево;
}

[/исходный код]

Я пометил каждый номер столбца для удобства, если вы забудете, какой столбец какой. Бывает.

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

[sourcecode language = ”css”]

/* Первый и последний */
.первый {
Запас налево: 0;
}

.последний {
Маржа направо: 0;
}

[/исходный код]

Затем мы устанавливаем нашу фактическую ширину для каждого типа столбца.

[sourcecode language = ”css”]

/ * Ширина столбца с учетом полей * /
.col_12 {ширина: 940 пикселей;}
.col_9 {ширина: 620 пикселей;}
.col_8 {ширина: 700 пикселей;}
.col_6 {ширина: 460 пикселей;}
.col_4 {ширина: 220 пикселей;}
.col_3 {ширина: 300 пикселей;}

[/исходный код]

Теперь давайте соберем все это в единый пакет CSS, который вы можете сохранить и сразу использовать:

[sourcecode language = ”css”]
/ * Исправить ширину тела * /
тело {
минимальная ширина: 960 пикселей;
Маржа: авто;
}

/ * Обертка * /
.строка {
ширина: 960px;
Маржа: авто;
}

/ * Поля столбца * /
.col_12, / * полная ширина * /
.col_9, / * ширина 3/4 * /
.col_8, / * ширина 2/3 * /
.col_6, / * половина ширины * /
.col_4, / * ширина 1/3 * /
.col_3 / * ширина 1/4 * /
{
поле слева: 10 пикселей;
поле справа: 10 пикселей;
дисплей: встроенный;
плыть налево;
}

/* Первый и последний */
.первый {
Запас налево: 0;
}

.последний {
Маржа направо: 0;
}

/ * Ширина столбца с учетом полей * /
.col_12 {ширина: 940 пикселей;}
.col_9 {ширина: 620 пикселей;}
.col_8 {ширина: 700 пикселей;}
.col_6 {ширина: 460 пикселей;}
.col_4 {ширина: 220 пикселей;}
.col_3 {ширина: 300 пикселей;}

[/исходный код]

Смотрите таблицу 960, 12 столбцов в действии!

Теперь давайте применим это на практике. Сохраните приведенный выше код как документ CSS и назовите его «960-12-col.css». В этой же папке скопируйте и вставьте следующий HTML-код:

[sourcecode language = ”htmtl”]

<! DOCTYPE html PUBLIC «- // W3C // DTD XHTML 1.0 Transitional // EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
<html xmlns = «http://www.w3.org/1999/xhtml»>
<Голова>
<meta http-equ = «Content-Type» content = «text / html; charset = utf-8» />
<title> Пример 960, сетка с 12 столбцами </ title>
<link rel = «stylesheet» type = «text / css» href = «960-12-col.css» />
<Стиль>
/ * Поля столбца * /
.col_12, / * полная ширина * /
.col_9, / * ширина 3/4 * /
.col_8, / * ширина 2/3 * /
.col_6, / * половина ширины * /
.col_4, / * ширина 1/3 * /
.col_3 / * ширина 1/4 * /
{
высота: 50px;
Запас-топ: 10px;
край дно: 10px;
выравнивания текста: центр;
отображения: настольные ячейки;
вертикально-Align: центральное;
}
</ Стиль>
</ HEAD>

<Тело>
<div class = «row»>
<div class = «col_12 first» style = «background-color: # 936»> <p> Вот столбец полной ширины </ p> </ div>
</ DIV>
<div class = «row»>
<div class = «col_9 first» style = «background-color: # 3F6»> <p> Вот столбец шириной 3/4 </ p> </ div>
<div class = «col_3 last» style = «background-color: # 6CC»> <p> И его аналог шириной 1/4 </ p> </ div>
</ DIV>
<div class = «row»>
<div class = «col_8 first» style = «background-color: # CF0»> <p> Вот столбец шириной 2/3 </ p> </ div>
<div class = «col_4 last» style = «background-color: # 9CC»> <p> И его аналог шириной 1/3 </ p> </ div>
</ DIV>
<div class = «row»>
<div class = «col_4 first» style = «background-color: # 9CC»> <p> Сначала я на 1/3 ширины </ p> </ div>
<div class = «col_8 last» style = «background-color: # CF0»> <p> И я последний шириной 2/3 </ p> </ div>
</ DIV>
<div class = «row»>
<div class = «col_6 first» style = «background-color: # 9CC»> <p> Хотите развлечься? </ p> </ div>
<div class = «col_6 last» style = «background-color: # CF0»> <p> Конечно, я пойду на поводу! </ p> </ div>
</ DIV>
<div class = «row»>
<div class = «col_3 first» style = «background-color: # CF0»> <p> Вот столбец шириной 1/3 </ p> </ div>
<div class = «col_3» style = «background-color: # 9CC»> <p> Я тоже столбец шириной 1/3! </ p> </ div>
<div class = «col_3 last» style = «background-color: # 9CC»> <p> Я последний 1/3 ширины: ^ (</ p> </ div>
</ DIV>
<div class = «row»>
<div class = «col_4 first» style = «background-color: # CF0»> <p> Можем ли мы сделать 1/4 столбца </ p> </ div>
<div class = «col_4» style = «background-color: # 9CC»> <p> Конечно, мы можем сделать 1/4! </ p> </ div>
<div class = «col_4» style = «background-color: # 9CC»> <p> Я разделяю это мнение! </ p> </ div>
<div class = «col_4 last» style = «background-color: # 9CC»> <p> Почему я всегда последний? : ^ (</ P> </ DIV>
</ DIV>
<div class = «row»>
<div class = «col_12 first» style = «background-color: # 936»> <p> Вот столбец нижнего колонтитула полной ширины </ p> </ div>
</ DIV>
</ Body>
</ Html>

[/исходный код]

Убедитесь, что таблица стилей в строке 7 совпадает с сохраненным вами файлом CSS. Откройте его в браузере, и вы увидите сетку в действии:

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

Разметка в HTML выше добавляет несколько вещей, чтобы сделать сетку легко видимой. Вы можете удалить или закомментировать раздел <style> в заголовке.

Графический дизайн с сеткой из 960, 12 столбцов

Итак, я не мог оставить вас только с шаблоном CSS. Я пошел дальше и вручил вам мой шаблон Photoshop. Скачайте, сохраните и посмотрите . Все стандартные макеты столбцов находятся там, так что вы можете увидеть, как они сочетаются друг с другом.

Руководства помогут вам заблокировать дизайн и упростить его перевод в графический код. Я разрабатываю макет в Фотошопе и затем отправляю клиенту на проверку. Как только мы пройдем через десятую комиссию по утверждению и дадим окончательный дизайн, я, наконец, раскрою его на код и переведу на страницу.

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

Наслаждайся и дай мне знать, что ты думаешь!

40
Share: