UI-KIT и PUG фреймворк

Документация

База

Блоки

Лендинг

Страница ЖК

Поиск квартир

Страница бесед

Страница квартиры

Секции

Страницы

Скрыть/Показать навигацию

Общие рекомендации

Не хранить фискированные значения в миксинах

По возможности на загоняйте текст в миксины. Они должны принимать переменные.

Неправильно:

mixin button(link)
	a.button(href=link) Отправить

Правильно:

mixin button(link, title)
	a.button(href= link) #{title}

Если у вас в миксине большой блок текста, подумайте, можно ли его вынести в переменную.

Если в миксин надо передать большой блок текста или секцию с разметкой можно воспользоваться "Mixin Blocks". Документация по нему: https://pugjs.org/language/mixins.html#mixin-blocks

Если нельзя - тогда это просто кусок шаблона который надо пдключать через include

Делить миксины по файлам

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

forms.pug
errors.pug
other.pug

Валидация форм

Когда убирать ошибки. Например пользователь отправил пустую форму. Мы показали ему ошибку "Email не может быть пустым". Убирать ошибку у поля необходимо в следующих случаях:

Если пользователь просто выбрал поле в фокус - то не стоит убирать ошибку. По возможности показывайте и скрывайте ошибку плавно. Через fadeIn и fadeOut.

Если у формы 2 поля для ввода, например email и пароль, и оба требуют заполнения то лучше при первой проверке сразу же показать ошибку для обоих полей. Нежели сначала показать ошибку насчет пустого Email, и только при повтроной отправке показывать ошибку для пустого Пароля. Идеально - показывать ошибку еще до отправки формы. Просот в момент если пользователь выбрал Email, ничего не ввел и переключился на пароль - запускать проверку на заполенность или валидность заполнения данного поля.

Формы должны отправляться не только по клику на кнопку, но и по нажатию на Enter.

Также сейчас у нашей формы не работает отправка по Enter. Поэтому все таки стоит ловить событие on('submit'), делать preventDefault И после когда надо делать уже настоящую отправку после валидации, то вызывать ее через $('form').unbind('submit').submit();

unbind() - Убирает предыдущий обработчик для события. Для того чтобы не запустить бесконечный цикл проверки и отправки формы.

Навигация - ссылки или списки

Если у вас только один уровень навигации тогда делаем просто ссылками внутри контейнера. Если в навигации будет вложенность. Второй уровень или более - тогда можно использовать списки.

Текст внутри div

Текст внутри div или span это нормально. Если речь не идет о абзацах. Во всех остальных случаях не имеет смысла дополнительно, робко оборачивать текст в абзацы, списки и другие теги - только ради их присутствия. Так как потом приходится избавляться от лишних отступов у абзацев или списков. Поэтому если в контейнере присутствует только одна строка текста, то нет никакого смысла оборачивать ее в тег <p> или в список.