Создание шаблона Tailwind Wireframe для темы Kadence

Несколько дней назад я решил попробовать систему Tailwind на теме Kadence. Я нахожу в этой системе много хорошего. Tailwind позволяет держать ритм вёрстки, а тема Kadence гибкость и скорость загрузки страницы.

Вместе с тем Kadence недавно объявила о хорошей возможность продавать Сhild темы с cloud доступом. Главное задача была использовать как можно меньше кастомизации и больше кастомайзера.

Это не типичная интеграция, она не является предусмотренной самой tailwind. Задача воссоздать похожий стиль, главным образом, что мне нравится в tailwind это то, что все размеры кратны 8, посмотрим можно ли в Kadence управлять всеми параметрами так гибко. 

Выбор Wireframe в Figma

https://www.figma.com/community/file/1137429072536633879

Я немного знаком с tailwind. В комьюнити Figma есть много образцов которые можно использовать. Я выбрал самый простой Minimal Wireframe Kit by Bonnie Hong и Flex UI library for Tailwind CSS by Shuffle оба основаны на Tailwind CSS Design System

Основной целью создания Kadence Tailwind Wireframe Template было помочь мне понять, как использовать ритм стилей Tailwind с темой Kadence затратив как можно меньше времени, усилий и затронув как можно меньше кастомизаций. Я хотел сохранить тему Kadence настолько чистой, насколько это возможно.

Установка кастомайзера

Установка Layout

Я установил ширину General -> Layout 1248px *(Позже я изменил это значение на 1216px)

Content Left/Right Edge Spacing:

Content Top and Bottom Spacing:

*(Позже я изменил это значение на 1216px)

Установка цветов

Оставил без изменений

Установка шрифтов

После небольшого анализа я понял, что достаточно установить заголовки только для H1, H2, H3, H4

Base Font: Inter 16px

Heading 1

Heading 2

Heading 3

Heading 4

Проблема

В Kadence по-умолчанию предусмотрены отступы после заголовков, которые указаны в em что вызывает сложности в установке отступов кратных 8 например для шрифта 60px. 0,5 em для которого 30px вместо требуемых 32px

.single-content h1,.single-content h2,.single-content h3,.single-content h4,.single-content h5,.single-content h6 {
    margin: 1.5em 0 .5em
}

Я не могу сказать, что em это не верный выбор, однако придётся добавлять margin в настройке элемента при вёрстке. Хотя его можно было бы решить добавив margin в кастомайзер.

Как вы думаете стоит ли добавлять возможность пользователю установить свои значения чтобы сохранить чистоту кода?

Установка Кнопки

Border-radius: 6px

Font-size 14 и letter spacing 20 из Figma для всех размеров экрана. (Позже я установил своё значение spacing см. ниже)

Если установить padding в кастомайзере, то он будет влиять только на размер М, выберите как вам удобнее

Значения для кнопок я взял из Flex UI: Large, Medium, Small button соответственно. Выставив значения таким образом моя кнопка будет меняться в соответствии мобильным устройством.

Установка Page layout

Не путать в Layout, данная настройка находится в Posts/Pages Layout -> Page layout ->

Page Title Layout: in content

Default Page Layout: normal

Content Style: unboxed

Content Vertical Padding: disable

На этом заканчиваются установки кастомайзера.

Установка Блоков

В работе с блоками нас интересует отступы. Их условно можно разделить на две части первая это margin/padding которые мы можем очень удобно установить на 4 rem чтобы добиться 64px, а вот отступ между колонками, и как следствие между рядами на tablet и mobile мы можем только предустановить на выбор

Я установил значение No gutter 0px/ Это первое место где мы не можем установить значение кратное восьми.

Мы можем увидеть что в работе с блоками нам не удаётся сохранить и наследование промежуткам кратными 8, поэтому можно использовать section с gap 32 px. О них будет дальше.

Разница использований row от section главным образом в том, что для row удобнее назначать фоновую картинку или цвет на всю ширину для section это недоступно.

Отступы

Не смотря на то, что в шаблоне используется отступы 80px я использовал отступ 64px а точнее 4rem? который так получается потому что выставлен body-font 16px (16*4=64)

Изображение

Я загрузил одно изображение 590 by 425 pixels оно используется сквозь весь шаблон у Bonnie Hong, а в Flex UI тоже нет изображения, которое сохраняет пропорции кратными 8. Возможно это и не нужно. Даже выбор изображения большой отдельный топик.

Создание Wireframe

Теперь когда все базовые настройки применены, мы просто перетягиваем блоки и получаем ожидаемый результат.

Кнопка

Не пугайтесь, по-умолчанию кнопка не наследует стили темы. Переключателем ситуация решется, но до сих пор остаётся не ясным, что это за стили default? Вы знаете?

Давайте сравним

В первой секции мы можем проиллюстрировать моменты, которые не выполнились одной лишь настройкой кастомайзера. Добавим недостающие настройки через настройки элемента (widget).

1. Добавить у заголовка отступ margin 1rem (16px)
2. Добавить у параграфа отступ margin 3rem (48 px)
3. Изменить ширину секции на всю ширину
4. Изменить ширину внутреннего контента на “наследовать из темы”

Сравним результат

Давайте попробуем сравнить результат и при необходимости внести правки. Секция ниже с ползунком

Не пиксель перфект. Попробуйте поинспектировать главную страницу, что не так?

Секция Hero

Row and Section

Row это хороший и удобный способ на все случаи жизни, кроме одного. Вы не можете установить ширину внутренней section если она является частью Row. Как это понимать?

Смотрите, в Figma левая и правая колонки имеют фиксированный размер 488px-левая и 590px- правая (равная ширине изображения, верно?) когда в kadence blocks мы получим относительную ширину разделив row на проценты, тогда ширина текстовых элементов заполнит всё пространство, другими словами ширина не фиксированная, более того у section нет настройки зафиксировать эту ширину, но у отдельного элемента section — есть.

Вот наша структура секции HERO

Как установить ширину текстовых элементов?

Я приведу несколько способов контролировать ширину внутренней section:

1. Изменить ширину колонки (для row-section) на картинке 45%
2. Добавить padding слева или справа для колонки (для row-section)
3. Добавить ещё один row и установить max-width (row->section->row)
4. Добавить ещё одну section и установить max-width (row->section->section)

Изменить ширину колонки

Данный способ влияет только на одну, в нашем случае левую часть. Мы получим требуемый результат, но правая колонка будет двигаться вслед за ползунком, и картинка не будет в центре как на wireframe. Это легко исправить если картинку выровнять по правому краю. Для этого нужно section с картинкой изменить Inner Block Direction на horizontal тогда выравнивание сработает.

Данный способ ограничен в использовании если нам нужно регулировать ширину сразу двух колонок. К тому же есть проблема с переходом на мобильную версию ведь отступ между колонками в мобильной версии является отступом между мобильными секциями.

Добавить padding

Данный способ относительно не плох, из Figma мы видим что отступ между колонок 112px мы можем смело установить padding справа у первой колонки на 7rem, скорректировать отступ для tablet и mobile. Так же надо установить gutter для row, который может быть выбран только из пресета 0px 20px или 30px.

Опять мы не решаем одним действием проблему для всех медиа запросов.

Добавить ещё один row

Достаточно очевидное решение, которым мы добьёмся нужного результат, но такой способ генерирует много кода для решения одной маленькой задачи. Достаточно вложить в колонку row и выставить max-width у вставленного row.

Добавить ещё один section

Мне нравится это решение, мы можем использовать вложенную section добавить max-width и решить проблему, но всё еще не сможем контролировать ширину колонки и отступ между колонками. Или сможем? Давайте попробуем разобраться в следующей секции, где есть повторяющаяся вложенная секция картинка-текст — feature card.

Секция feature card

Row->Row

Я уверен вы используете этот метод чаще всего. Мы часто используем несколько вложенных row. Поэтому собираем layout по обычно схеме. Установив внутрь row, я размещу ещё один row внутри него чтобы установить ширину max-width для текстовой части. Далее для каждой feature card я так же установлю row.

Данное решение используется на главной посмотрите и поинспектируйте.

Отмечу что код html для всей секции самый длинный

37 lines, 5888 characters

Section->Section

Вы знаете блок section теперь работает как flexbox. Это нам даёт преимущество использовать space-between и gap, который применяется как для расстоянию между колонок в Desktop так и расстоянию в mobile.Поскольку мы используем space-between то gap как раз отступ для мобильной версии. Таким образом одной настройкой мы решаем абсолютно все проблемы.

Новая информация для вас это использование section без row.

Плюс: самый короткий код
Минус: Не установить background

Такая конфигурация значительно меньше по количеству символов сгенерированного html кода в сравнении с предыдущей: всего 4122 символа, что на 30% меньше. Переходите поинспектировать вариант без row сюда

25 lines, 4122 characters

Если вам надо добавить background то без row не обойтись.

Row-Section-Section

Последний вариант самый оптимальный использовать один row чтобы добавить background можно посмотреть здесь и поинспектировать.

Универсальное сочетание первого и второго способов.

Удобная фича если все feature card в одной section то можно в один клик изменить цвет всех текстовых элементов, однако превью отказывается корректно отображать цвет заголовков, хотя на фронте всё правильно.

4644 characters

Вывод

Kadence Theme позволяет контролировать большинство параметров в удобной манере из кастомайзера. При вёрстке макета в стиле Tailwind требуется контролировать значения margin/padding, а более точно требуется держать их кратными 8. Это легко делается для шрифтов 16px и отступами rem.

Второй момент, требуется контролировать ширину колонки и зафиксировать её причём не генерируя большой объём лишнего кода.

Самый оптимальный способ с точки зрения кода и удобства вёрстки это двойное вложение section->section, данный способ ограничивает использование общего background, но через gap и space-between позволяет контролировать отступы молниеносно.