Формула для сетки дизайн-макета сайта в Ярославле

Формула для сетки дизайн-макета сайта в Ярославле

При создании дизайна адаптивного сайта придется просчитать 24-колоночную сетку под bootstrap для максимального разрешения
(Ярославль)


Выдано в печать 2015-02-11
Ярославль

В 95% случаев будет достаточно тех сеток, которые можно найти готовыми у меня на сайте или в интернете. Но нелишним будет рассказать, как сетку просчитать: например, специфика сайта может потребовать больших отступов внутри колонок и так далее. В частности, при создании дизайна адаптивного сайта, который должен быть еще и резиновым, придется просчитать 24-колоночную сетку под bootstrap для максимального разрешения (обыычно 1920px).

В качестве примера возьмем макет шириной 1600px и попробуем сделать восьми колоночную сетку.

Формула такая: Ширина экрана 1600 = 8 * (ширина колонки) + 7 * ( две ширины отступа внутри колонки ).

Отступ внутри колонки обычно 5...10 пикселей; наша задача – подобрать такую величину отступа. При которой ширина колонки из этой формулы будет целым числом.

Например, подставим сюда ширину отступа, равную 6 пикселям; тогда ширина колонки будет равна ( 1600 - 7 * 2 * 6 ) / 8 = 189,5 пикселей. Не подходит. То же самое нас ждет и в случае 7 пикселей. А вот при отступе, равном 8 пикселям, всё намного лучше:

Ширина колонки = ( 1600 - 7 * 2 * 8 ) / 8 = 186 пикселей. Вот таким нехитрым способом можно рассчитывать сетки.


Ещё про сетки в дизайне:

Зачем нужна сетка
Выход за границы колонок
Правило плотности
Сетка и настроение
Адаптивная сетка под Bootstrap
Формула для сетки
Метод: если по сетке не получается


Правообладатель: агентство интернет-маркетинга KOKOSOV Design+Marketing, город Ярославль, Большая Октябрьская улица, 28, офис 32. По вопросам информационного сотрудничества обращайтесь по электронной почте: yar@mcocos.ru.


Услуги агентства в Ярославле

Свежее в портфолио:

«Мы долго выбирали подрядчика и не понимали, к кому обратиться. В итоге обратились в студию KOKOSOV и начали с небольшого лендинга. Это оказалось не совсем удачным решением, и мы доработали его до полноценного сайта »
Алексей (Генеральный директор AppCafe). [ Ярославль ]
«Мы получили около 20 набросков логотипа, из которых выбрали два для проработки. Каллиграфия получилась красивая, но выбрал я все-таки более классический логотип со знаком PL »
Дмитрий Агаджанов (Генеральный директор ООО "Покупкалюкс"). [ Ярославль ]