10 марта 2019 г.

8-и пиксельная сетка

Сейчас уже трудно представитьт себе работу без модульной системы, сетки или направляющих. Помню, лет 5 назад, работая на агенство Videinfra, арт-директор прислал мне макет, в котором я увидел всего 4 направляющих и, на мой вопрос "Где сетка?", услышал "Зачем? Вот базовые, от них и...". А уже в то время я не представлял себе макеты без 12-и колоночной сетки.


Но это было тогда. После модульных систем я познакомился с сетками, которые задают размер и интервал, пользовался ими в нескольких проектах, как наследием.

— Творчетво это души свободные порывы или стремление к порядку?













— И то и другое

Почему именно 8-и?


Потому, что это весьма практично и макеты выглядят опрятнее. Например, в статье, Введение в систему 8pt сеток, приводится несколько плюсов, но для меня все они вторичные. Кстати, после этой статьи я и решил попробовать.


Укрепило мои мысли и то, что в верстке моего портфолио я использовал em и rem равные 16px. И в целом я заметил, что неосознанно такая кратность и была.

На практике


На практике я использую группы 8х8 с разделителями и получаются такие ячейки по 64px. Иконки 16x16, 24x24, 48x48, 64x64..., для всех случаев применения. Панели и блоки по контенту. Мэрджины и паддинги кратные 8-и. Инпуты и кнопки 32х32, 40x40 и в редких случаях 56х56. С текстом тоже все хорошо: 1.25/2rem (20/32px), 1.5/2.5rem (24/40px) для обзадцев, 1.5/2.5rem (24/40px), 2/3rem (32/48px), 3/4rem (48/64px) для заголовков и так далее.

Элементы на сетке в 8px

В проектах


В последнем из проектов, ZCTS-online, я использовал сетку с шагом в 8px и остался очень доволен.

Сетка в 8px в проектах

В заключении. Работая некоторое время, я подметил, что да, 8-и пиксельная сетка — это своего рода "залотое сечение" и отлично подходит для решения всех задач верстки. Пользуем.

Плюсануть
Поделиться
Отправить
Класснуть
Запинить