Публикация в группе: Otshelnik-Fm - мои работы (код, плагины, дополнения, статьи и руководства)

Категории группы: Другое

Изобретать велосипеды - увлекательное занятие...

Предлагаю вам некое соглашение - его я называю 6px. Информация занимательна, и может будет полезна сторонним разработчикам. Всё что тут приводится - только о margin и padding.


Предыстория:

Я заметил, что у себя в работах, когда верстаю - то просто от балды беру значения отступов "на глаз" и внешние отступы/внутренние начинают свой танец как только всё это начинает работать в комплекте с другими дополнениями...

Медитируя прошлым летом на даче:

 

- я часто думал о дизайн системе - что готовое решение 100% не может удовлетворить потребности и зачастую избыточное.

Рассматривая свой доп, который выводил карточки в личном кабинете я понял - с этими отступами что-то надо делать. Были отступы: margin: 5px 7px 10px 2px; или например такие: padding: 8px 3px 5px 7px; WTF - откуда такие "точные" цифры? и если прошерстить все css файлы - мы увидим что картина везде повторяется - нет единой концепции отступов.


Чуток теории margin:

Что мы знаем о margin? Они схлопываются! Почитать можно здесь. И это визуально показывает нам - что от максимального значения идет схлопывание и зачастую два правила, например у 2х div-ов один над другим:
Верхний margin: 10px 7px 3px 2px; и под ним div margin-top: 11px; - не дадут нам отступа в 3px. И не будет 3+11 = 14px. Это будет 11 пикселей. И раньше, там где этого дива не было с 11 пикселями - дизайн смотрелся более лаконично. А теперь один блок отпрыгнул...


Дизайн система у реколл появляется:

Как сделать универсальным по дизайну - маленькие шаги мы в WP-Recall начали делать уже в 16-й версии: в плагин был внедрен единый стандарт таблиц, форм, уведомлений, большая работа предстоит по формированию единого апи кнопок в 17-й версии плагина.

Но всё это хорошо и по отдельности смотрится неплохо. А когда мы добавляем дополнение - оно выводит свои данные по своему. Я предлагаю не выдумывать все эти отступы, а придерживаться концепции 6px.


Общие принципы соглашения 6px:

6px отлично делится на 2 без остатка и в редком случае нужно будет (кто придерживался 5px - куда вы поделите? 2px сделаете - или 3px? А скорей всего запутаетесь и в одном случае 2px, в другом 5px поделите и получите 3px). Прошло время этих отступов до 6ти пикселей. И точкой отсчета берите 6px.

Блоки, что идут рядом, отделяйте в 6px.
Блоки, что имеют какую-то группировку можно сверху-снизу отступать на 12 (или 18px).
Большие отступы - словно новые разделы - отступы в 18-24 пикселя.


Пруфы:

С этим соглашением не нужно думать о том, какие отступы применять - я успешно в последних дополнениях применяю этот подход и складывая дополнения друг с другом мы получаем более целостную картину.

Theme Control и User Info Tab верстались с применением этого соглашения - посмотрите на целостный дизайн.

Большое дополнение по расширению групп Groups Theme RePlace и все последующие для него - сразу вышли используя это соглашение. И внешний вид - отступы - сразу видно что всё идет один за другим на равном расстоянии. Мне не потребовалось много времени и какие-то макеты в psd - держа в голове соглашение 6px всё становится на свои места самостоятельно.

По мере появления свободного времени я привожу старые дополнения к этому соглашению и картинка становится более приятной.


Детальный разбор:

Давайте посмотрим на Theme Control свёрстанному по этому соглашению:

 

Первые 2 блока (имя автора кабинета и ниже кнопки области menu) - это сама тема ЛК, а третий блок - содержимое вкладок, что выводит WP-Recall. Заметьте как контент внутри вкладки плагином выводится - всё отмерено и содержимое третьего блока гармонично сочетается с первыми 2-мя блоками стороннего решения.


Итак: что надо чтобы следовать соглашению 6px?

Начинайте с 6px как с минимального значения. Для исключительного случая можно поделить его на 2 и применить 3px отступ.

Отступы между группами в 12px или в 18px.

Отступы между другими большими логическими блоками 24px

 

- здесь наглядно показано что всё на местах. И всё что нужно помнить - 6px и его кратные значения!


Не отталкивайте блоки через padding - они не позволят блокам схлопываться. Используйте margin:

 

- мы видим что блоки равномерны по отступам. Если бы мы второй блок пытались позиционировать через padding - то у нас бы вышло всё хуже - значения отступов бы просуммировались. А схлопывание margin нам дало равномерный отступ.


Заключение:

У Контура есть дизайн система на 8px - на тостере недавно увидел в обсуждении. Мне не понравилась эта система прежде всего большим количеством деления: 8px 4px 2px - тут тоже есть куда запутаться.

Моя система проще для понимания 6, 12, 18, 24px и 3px для редких случаев.

Посмотрим кто что скажет - но я за применение этой системы в ядро WP-Recall. Кто против - обоснуйте.

Ну и применение соглашения в 6px сторонними разработчиками - позволит построить из множества дополнений единый и целостный дизайн с любым сторонним дополнением (словно кубики лего - всё стандартизировано и можно строить перфект систему).
В итоге владелец сайта не будет озадачен как "причесать" это всё.

Буду рад мыслям, критике, доводам "За" и "Против" в комментариях. Ну и применению на практике конечно же.

А я наконец-то не только втихоря реализовывал разработку по этому соглашению, но и осилил и надеюсь наглядно показал её преимущества.

4

Автор публикации

не в сети 7 часов

Владимир (Otshelnik-Fm)

3 550
Я завёл себе кота. Время перемен. Скоро
Комментарии: 2029Публикации: 235Регистрация: 27-01-2013Продаж/Покупок: 18175/266