Сетка
Сетка охватывает полный диапазон экрана от 320 пикс. до 1440 пикс.
Важно отметить
Макеты мобильных версий будут готовиться в 360 пикс., а 320 пикс. будут дополнительными макетами.
Для тестирования планшетных версий дополнительно будут предоставляться макеты в разрешении 768 пикс.
Свойства сетки
Интерфейс или контент не может выходить за границу 1440 пикс. Исключением служат блоки со сплошной заливкой или паттерном. Контент в таких блоках все равно ограничен шириной 1440px.
Система отступов
Легенда
HTML-страница
Уникальный блок <div></div>
Блок с CSS классом
Отступ padding
Отступ margin
Контент
Контейнер .ds_container
Контейнеры не имеют фиксированной ширины, но имеют фиксированные отступы и фиксированный межколоночный интервал (gap) для каждой адаптации.
Пример как не нужно делать
1 блок = 1 контейнер, применяется не для всего контента!
Внешний отступ .ds_block_spacings
Создает адаптивный внешний отступ блока.
Внутренний отступ .ds_block_spacings_inset
Создает адаптивные отступы внутри блока. Применяется для всех дочерних элементов первого уровня.
Внутренний тестовый отступ .ds_text_spacings
Убирает отстпы для первого и последнего элемента в тексовой колонке. Для первого элемента убирает margin-top, для последнего элемента убирает margin-bottom.
Отступы без класса
Колоночный интервал .ds_gap
Создает адаптивный межколоночный интервал. Применяется для всех дочерних элементов первого уровня.
Контейнер для контента .ds_padding
Создает отступ (padding) внути блока.
Еще один пример с колонками
