Готовые страницы

Типографика

Seller 2.0 использует плагин Tailwind CSS Typography (prose) для автоматического улучшения типографики в описаниях товаров и категорий, записях блога, на страницах сайта.

Как это работает?

В настройках темы дизайна есть параметр:

Общие настройки → Оформление сайта → Элементы дизайна → Добавить типографские стили для красивого отображения контента

Настройка: common__design_elements_user_content_prose

Когда настройка включена (по умолчанию включена), шаблоны темы добавляют к пользовательскому контенту класс prose-theme — адаптированный темой вариант типографских стилей Typography. Внутри этого класса элементы h1-h6, p, blockquote, img, table, pre, hr, ul, ol, a получают стилизованное оформление с правильными отступами, размерами шрифтов и межстрочными интервалами.

По условию настройки класс подставляется в описаниях товара (обзор, вкладки, список), описаниях категорий, на страницах брендов и в записи блога. К содержимому страниц приложения «Сайт» (page.html) класс prose-theme применяется всегда, независимо от настройки.

Помимо prose-theme, в собранном CSS темы доступны и стандартные классы плагина Typography — prose, prose-sm, prose-lg, модификатор dark:prose-invert — их можно использовать в собственных шаблонах и HTML-блоках.

Примеры prose-классов

{* Базовый prose *}
<div class="prose">
    <h2>Заголовок</h2>
    <p>Текст с автоматической типографикой.</p>
</div>

{* Крупная типографика на всю ширину: по умолчанию prose ограничивает
   ширину текста (65ch), класс max-w-none снимает это ограничение *}
<div class="prose prose-lg max-w-none">
    <p>Контент на всю ширину контейнера.</p>
</div>

Как отключить?

Есть два способа отключить типографские стили:

  1. Глобально -- выключить настройку common__design_elements_user_content_prose в настройках темы дизайна.

  2. Локально -- обернуть часть контента в класс not-prose. Внутри этого класса типографские стили prose не применяются:

<div class="prose">
    <p>Этот текст стилизован через prose.</p>

    <div class="not-prose">
        <p>Этот текст без стилей prose.</p>
    </div>
</div>

Класс not-prose работает и внутри prose-theme. Его удобно использовать при вставке карточек товаров, слайдеров и других интерактивных блоков внутри текстового контента.