Использование CSS-констант, классов и переменных для размеров типографики

Привет всем знатокам и новичкам в семье Insight! :blush:
Сегодня хочется поделиться с вами нашим способом/инструкцией для более простой работы с размерами шрифтов. :sunglasses:

  1. Таблица
  • Чтобы удобнее работать с таблицами, можно и нужно прописывать CSS-классы в поле для классов, как на фото:

  • А стиль ячейки и стиль заголовка стоит задавать через CSS-свойства с переменной, которая берёт своё название от класса:
    Снимок экрана 2022-12-07 в 18.46.19

  1. Все виджеты, обладающие значком “(х)” для перехода к выпадающему списку констант, как на картинке ниже:
    Снимок экрана 2022-12-07 в 18.48.13
  • Для настройки размеров типографических элементов внутри панелей параметризации виджетов необходимо создать набор констант в разделе констант в редакторе, названия констант и классов, которые на скрине (h1, h2, h3 и тд) можно изменять на те, которые вы создадите в теме проекта:
    image2022-11-10_17-35-12

  • В настройке размеров текста в виджете нажимаем на иконку (x) и выбираем необходимую константу:
    image2022-11-10_17-39-15

  1. Виджеты без панелей параметризации
    Для виджетов без панелей настройки используем классы через CSS class в разделе “Стиль”:
    image2022-11-10_17-41-59

  2. Как работать с классами типографики через css style
    Для использования классов типографики в разделах css style необходимо использовать следующую конструкцию:
    Снимок экрана 2022-12-07 в 18.55.02

Таким образом, ваши виджеты будут лучше адаптироваться под разные разрешения экранов и будет намного проще переписать классы в теме проекта, чем переписывать на каждом виджете. Пример таблицы соответствий констант, классов и стилей приведён ниже (вы можете написать свои классы, а не использовать те, что на картинках ниже):
Снимок экрана 2022-12-07 в 18.57.53

Спасибо за внимание!

4 лайка

Подробнее тут: Типографика и константы