T-blocks 2.0 — обновлённая библиотека готовых блоков Taptop

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, посмотрите на новую ролевую систему в деле и убедитесь, что настройка под фирменный стиль клиента действительно занимает часы, а не дни.