Для создания ровных и красивых сайтов -лучше всего использовать Bootstrap сетку.
Bootstrap сетка - это сетка с определенными расстояниями между линиями.
Стандартизация сетки - позволяет "разговаривать" на одном языке - и верстальщику и дизайнеру. И позволяет ускорить работу над проектом!
Существуют конкретные параметры Bootstrap сетки в PSD формате:
Общая ширина рабочей области: 1920px;
Ширина контейнера с отступами: 1170px;
Ширина колонки без отступов: 68px;
Ширина отступа (Gutter): 15px;
Система сетки: 12-ти колоночная.
Расстояние между колонками а также некоторые размеры вполне могут иметь погрешность +/- 1px в связи с тем, что некоторые нечетные величины не могут быть поделены поровну. Однако это не-критично при разработке PSD-макета.
Существуют правила работы с PSD сеткой Bootstrap
PSD Bootstrup сетка, для создания дизайна сайта - разрабатывалась опираясь на физические свойства сетки CSS фреймворка Bootstrap.
Правило 1
Крайние поля - служат ТОЛЬКО для отступов - и НЕ МОГУТ БЫТЬ ИСПОЛЬЗОВАНЫ для размещения каких либо элементов дизайна или контента сайта.
Правило 2
Можно использовать ЛЮБОЕ КОЛИЧЕСТВО одиночных колонок - для визуализации различных блоков сайта.
Правило 3
Промежутки между колонками ( гаттеры ) - не могут быть использованы для элементов дизайна, а так же текста и вообще любого контента сайта.
Правило 4
Можно спокойно - ВЫХОДИТЬ ЗА РАМКИ СЕТКИ - если нам нужна, какая то не стандартная секция (блок). Т.е. вне рамок Bootstrap-сетки.
Но важно придерживаться - какой либо системы.
Например: Придерживаться центра макета!
Соблюдайте КРАТНОСТЬ ЭЛЕМЕНТОВ , или любой другой логике - при создании не стандартного блока.
Правило 5
Можно и НУЖНО - выходить за рамки Bootstrap сетки.
Что бы дизайн - получался РАЗНООБРАЗНЫМ!
Пример - 1
Пример - 2
Не нужно зацикливаться на использовании Bootstrap-сетки для графики. Жесткие ограничения как правило применяют к плагинам: Карусели, слайдеры и т.д.
Спасибо!
