Taptop выпустил T-blocks 2.0 — вторую версию библиотеки готовых блоков для сборки сайтов на платформе. Обновление — это не просто новые блоки, а полностью переработанная дизайн-система с подробной документацией. Настройка библиотеки под фирменный стиль клиента, которая раньше занимала дни, теперь занимает часы.

Что такое T-blocks

T-blocks — библиотека готовых секций для сборки сайтов на конструкторе Taptop. Все блоки сделаны в единой дизайн-системе — по цветам, отступам, типографике и композиции: их можно свободно комбинировать на одной странице, и они всегда будут выглядеть согласованно.

Библиотека включает 625 готовых блоков двух типов:

• Секции — под все типовые задачи коммерческого сайта: шапки, первые экраны, «о нас», услуги, преимущества, этапы работ, расписание, команда, видео, отзывы, цены, ЧаВо, партнёры, новости и блог, контакты, формы, попапы, приём платежей, подвалы, служебные страницы.
• Низкоуровневые UI-элементы — заголовки, текстовые блоки, разделители, кнопки, карточки, изображения, галереи, слайдеры, аккордеоны, вкладки, соцсети, числовые блоки.

Библиотека блоков T-Blocks 2.0

К библиотеке прилагается UI-kit — визуальный каталог всех токенов и классов дизайн-системы:

• цветовые токены на всех поверхностях;
• типографическая шкала;
• кнопки во всех состояниях, ссылки, карточки, обёртки иконок;
• статусы, размеры, отступы, радиусы;
• адаптационные правила.

Зачем это нужно:

• Экономия времени. Не нужно собирать каждую страницу с нуля: думать над композицией первого экрана, верстать сетку услуг, придумывать, как показать команду или тарифы. Готовые решения уже есть — остаётся выбрать подходящее и наполнить своим контентом. Сайт, который раньше собирался неделю, собирается за день.
• Согласованность дизайна. Когда вы верстаете каждый блок вручную, легко получить сайт, где на одной странице кнопки разного размера, отступы «плюс-минус на глаз», а типографика едет от секции к секции. T-blocks решает это на уровне системы: все блоки уже настроены под общий ритм, и собранная из них страница выглядит цельно без дополнительной вычитки.

Что нового в T-blocks 2.0

Прежняя версия библиотеки уже решала задачу быстрой сборки — но настройка под фирменный стиль клиента опиралась на плоскую палитру цветов и безымянные слои вроде div_1 и container_2. Это предсказуемо, но не всегда быстро и не всегда прозрачно. T-blocks 2.0 сохраняет всё, что уже умела первая библиотека, и добавляет к этому продуманную систему настройки.

Развёрнутый UI-kit с подписанными классами

Главное практическое улучшение — новый UI-kit, где каждый класс назван, показан на примере и снабжён пояснением. Цветовые токены, размеры, отступы, радиусы, типографика, кнопки, ссылки, обёртки иконок, статусы, поверхности — всё разложено по полкам. Открывая UI-kit, вы сразу видите, за что отвечает каждый класс, как он собирается с другими и в каких контекстах применяется.

UI-Kit в библиотеке блоков T-Blocks 2.0

Больше не нужно:

• гадать, какой класс отвечает за приглушённый текст, а какой — за акцентный;
• перебирать варианты кнопок методом проб;
• вспоминать, какой префикс использовать для радиуса или отступа.

Вся система документирована на одной странице.

Ролевая цветовая система

Второе крупное изменение — переход от плоской палитры к семантической системе токенов, знакомой по Material Design и другим современным дизайн-системам. Цветовые классы теперь строятся по схеме c-{тема}-{роль}:

• Темы задают контекст поверхности — светлый фон, primary, secondary, чёрный.
• Роли внутри каждой темы описывают функцию элемента — поверхность, текст, кнопка, ссылка, обводка, статус, контрол.

Такой подход даёт двухуровневую кастомизацию. Меняя цвет одного токена, вы настраиваете конкретную кнопку на конкретной поверхности отдельно от остальных:

• c-bg-bt-pr — основная кнопка на светлом фоне;
• c-bl-bt-pr — та же кнопка на тёмном фоне;
• c-pr-bt-pr — та же кнопка на primary.

Классы кнопок в библиотеке блоков T-Blocks 2.0

Кнопки на разных поверхностях перестают быть заложниками одного глобального «синего»: у каждой поверхности своя настраиваемая палитра, а логика ролей общая для всех тем.

Появились роли для поверхностей

В новой системе явно выделены роли поверхностей:

• surface и surface-lvl-2 — вложенные уровни фона внутри каждой темы. Дают возможность корректно строить сложные композиции с иерархией: секция → карточка → плашка внутри карточки. Раньше такие вложения приходилось собирать вручную, подбирая оттенки на глаз — теперь для каждого уровня есть свой токен, и сборка предсказуема.
• text, text-muted, text-subtle, text-gentle — приглушённость текста, тоже стандартизированная как система ролей.

Роли поверхностей в библиотеке блоков T-Blocks 2.0

Hover-состояния встроены в систему как парные роли и не требуют ручной дописки.

Полная русская локализация

Все блоки заполнены русскоязычным контентом. Названия слоёв в панели редактора — тоже на русском: «карточка», «кнопка меню», «ссылки 2-го уровня» вместо технических div_1, container_2. Это особенно заметно в клиент-моде: клиент открывает панель слоёв и сразу видит структуру блока, легко находит нужный элемент для правки.

Приоритет в развитии

T-blocks 2.0 становится основным направлением развития библиотек Taptop. Набор блоков будет регулярно пополняться новыми секциями и вариациями. Пользователи, работающие на новой библиотеке, будут получать обновления и расширения в первую очередь.

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

К обновлению выпущены два гайдлайна:

• Короткий — для быстрого старта, чтобы понять базовые принципы и приступить к работе.
• Полный, разделённый на две части — для глубокого погружения: часть 1 про цветовые токены и компоненты, часть 2 про лейауты, отступы и составные конструкции.

Гайдлайн в библиотеке блоков T-Blocks 2.0

В гайдлайнах разобрана вся логика ролевой системы и приведены рабочие примеры настройки.

Как начать работать

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

Сценарий 1: сначала собрать, потом настроить. Открываете client-mode и просто добавляете блоки на страницу — шапку, первый экран, услуги, форму, подвал. Расставляете в нужном порядке, наполняете реальным контентом клиента. Когда структура сайта готова, переходите в дизайн-эдитор и меняете цветовую палитру, шрифты и типографику под фирменный стиль клиента — все ранее добавленные блоки автоматически подхватывают новые настройки. Удобно, когда сначала хочется увидеть содержание сайта в целом, а вопросы визуального стиля решить потом.

Сценарий 2: сначала настроить, потом собрать. Открываете UI-kit и настраиваете дизайн-систему под бренд клиента заранее: задаёте цвета для всех четырёх поверхностей (светлой, тёмной, primary, secondary), выбираете шрифты, настраиваете размеры заголовков и радиусы. Затем идёте собирать страницы — все добавляемые блоки сразу приходят в фирменном стиле, без необходимости что-либо перекрашивать. Удобно, когда фирменный стиль клиента уже утверждён и хочется сразу видеть сайт в финальном виде.

Оба сценария рабочие — библиотека одинаково хорошо поддерживает и «сборку в чужом стиле с перекраской в конце», и «полную настройку под клиента заранее». Внутри одного проекта можно свободно переключаться: настроил основу в UI-ките, собрал каркас в client-mode, вернулся в UI-kit подкрутить палитру, продолжил сборку.

Попробуйте T-blocks 2.0 в своём следующем проекте — откройте UI-kit, посмотрите на новую ролевую систему в деле и убедитесь, что настройка под фирменный стиль клиента действительно занимает часы, а не дни.