Сетки для индизайна
Алгоритм расчета сетки на формат.
Размер формата делим так чтобы получилось целое число, это будет кол-во строк в формате.
Например 297мм / 3 = 99 (99 строчек по 3мм, 3мм это increment в Id)
Шаг1
Подбираем отступы сверху и снизу чтобы получалось четное кол-во строк внутри маргинов.
Например 9 мм (3 строки) сверху и 18мм (6 строк) снизу
Шаг2
Делаем сетку без отступов чтобы она сходилась с бйэслайн грид.
Например 9 rows
Шаг 3
Растаскиваем направляющие на 1строку выше и одну строку ниже
Шаг 4
Меняем маргины на финальное значение чтобы они начинались с модуля а не с отступа. Записываем полученные отступы.
Шаг 5
Считаем кол-во получившихся rows и gutters.
Полученные значения
incerment 3mm
margins 12mm top, 21mm bottom
9 row, 6mm gutter
Сетки 1600х900
Отступы по 50px сверху и снизу
incr. 8px 6rows 16gutter
incr. 6px 7rows 42gutter
incr. 6px 5rows 12gutter
icnr. 6px 15rows 36gutter
Отступы по 55px сверху и снизу:
incr. 5px 16rows 10gutter от маржинов
Сетка на А4 вертикальный (297мм):
increments: 3мм или 1,5
margins: 12мм сверху и 21 снизу
9 rows 6мм gutter от margins отмеряем
i=2mm
MT=10mm
MB=11mm
R=14, 7
G=4mm
A4 горизонтальный в квадраты
i=2
MT=10
MB=12
MI,MO=6
G=4
Columns =6
R=4
*Еще мельче R=8 G=4, column 12 G=4
MT=14
MB=16
MI,MO=12
C=6
G=4
R=4
I=2 mm
Сетка А4 горизонтальный:
incerments : 2мм
margins 6мм сверху и 8мм снизу
10 rows 4мм gutter от margins отмеряем
i=2
G=4
MT=16
MB=18
R=3
Математика
1600х1350
Делим 1350px так чтобы получилось целое число, полученное значение это increments
1350px /5=270 строк (i=5)
Корректируем число чтобы оно делилось на нужное кол-во модулей без остатка.
270 строк -10 строк=260строк если хотим 20 модулей (MD) 260/20=13 все верно
10 строк которые мы вычли это 10xI=50 px (общее кол-во пикселей на margin)
50px/2(верх отступ и нижний отступ)= 25px (это Mt и Mb) или можно распределить 40px (Mt) и 10px (Mb) например или 30px (Mt) и 20px (Mb)
Считаем реальный отступ MT=Mt+i=25+5=30px, MB=Mb+i= 25+5=30
G=2i (G - гаттер)= 10px
Итог:
1350px
i=5
MT=30
MB=30
G=10
R=20
R(ROW по итогу)
Обозначения
i - increments
Mt,Mb - margins top, margins bottom не истинные
MT,MB - margins top,bot истинные
G - gutter
R - ROW
MD - модуль сетки без отступов
Размер формата делим так чтобы получилось целое число, это будет кол-во строк в формате.
Например 297мм / 3 = 99 (99 строчек по 3мм, 3мм это increment в Id)
Шаг1
Подбираем отступы сверху и снизу чтобы получалось четное кол-во строк внутри маргинов.
Например 9 мм (3 строки) сверху и 18мм (6 строк) снизу
Шаг2
Делаем сетку без отступов чтобы она сходилась с бйэслайн грид.
Например 9 rows
Шаг 3
Растаскиваем направляющие на 1строку выше и одну строку ниже
Шаг 4
Меняем маргины на финальное значение чтобы они начинались с модуля а не с отступа. Записываем полученные отступы.
Шаг 5
Считаем кол-во получившихся rows и gutters.
Полученные значения
incerment 3mm
margins 12mm top, 21mm bottom
9 row, 6mm gutter
Сетки 1600х900
Отступы по 50px сверху и снизу
incr. 8px 6rows 16gutter
incr. 6px 7rows 42gutter
incr. 6px 5rows 12gutter
icnr. 6px 15rows 36gutter
Отступы по 55px сверху и снизу:
incr. 5px 16rows 10gutter от маржинов
Сетка на А4 вертикальный (297мм):
increments: 3мм или 1,5
margins: 12мм сверху и 21 снизу
9 rows 6мм gutter от margins отмеряем
i=2mm
MT=10mm
MB=11mm
R=14, 7
G=4mm
A4 горизонтальный в квадраты
i=2
MT=10
MB=12
MI,MO=6
G=4
Columns =6
R=4
*Еще мельче R=8 G=4, column 12 G=4
MT=14
MB=16
MI,MO=12
C=6
G=4
R=4
I=2 mm
Сетка А4 горизонтальный:
incerments : 2мм
margins 6мм сверху и 8мм снизу
10 rows 4мм gutter от margins отмеряем
i=2
G=4
MT=16
MB=18
R=3
Математика
1600х1350
Делим 1350px так чтобы получилось целое число, полученное значение это increments
1350px /5=270 строк (i=5)
Корректируем число чтобы оно делилось на нужное кол-во модулей без остатка.
270 строк -10 строк=260строк если хотим 20 модулей (MD) 260/20=13 все верно
10 строк которые мы вычли это 10xI=50 px (общее кол-во пикселей на margin)
50px/2(верх отступ и нижний отступ)= 25px (это Mt и Mb) или можно распределить 40px (Mt) и 10px (Mb) например или 30px (Mt) и 20px (Mb)
Считаем реальный отступ MT=Mt+i=25+5=30px, MB=Mb+i= 25+5=30
G=2i (G - гаттер)= 10px
Итог:
1350px
i=5
MT=30
MB=30
G=10
R=20
R(ROW по итогу)
Обозначения
i - increments
Mt,Mb - margins top, margins bottom не истинные
MT,MB - margins top,bot истинные
G - gutter
R - ROW
MD - модуль сетки без отступов
