tgx:ui — Шорткат utility-стилей

tgx:ui#

Шорткат utility-стилей.

<div tgx:ui="df aic jcc"></div>

<div tgx:ui="df aic jcc"></div>

<button tgx:ui="btn btn-primary px:4 py:2">Кнопка</button>

Собирает классы и responsive-модификаторы в короткой форме.

Когда нужно быстро описывать стили и responsive-варианты прямо в шаблоне без длинных CSS-классов.
Когда удобно управлять состояниями (hover, focus, и т.д.) короткими токенами в одном месте.

Базовый формат токена: [breakpoint=]property[:value][.state].
Брейкпоинты: mb|mobile, tb|tablet, lt|laptop, dt|desktop, wd|wide; можно перечислять через запятую (tb,lt=...).
Поддерживаются alias-диапазоны: mb+, tb+, lt+, dt+, wd+ и mb-, tb-, lt-, dt-, wd-.
Состояния задаются суффиксом .state (например .hover, .focus) и могут быть отрицательными через no- (.no-hover).
Для нескольких свойств используйте скобки: (px:4,py:2,bg:xfff).
Числа без единиц переводятся в rem с шагом 0.25rem (4 -> 1rem); модификаторы sm|md|lg|xl меняют множитель.
Цвет в формате xFFF/x112233 автоматически становится #FFF/#112233.
Значения с пробелами передавайте в обратных кавычках: `bg:linear-gradient(90deg,#000,#333) .
Невалидные токены пропускаются, поэтому опечатки в сокращениях приводят к отсутствию ожидаемого стиля.


Частые ошибки#

Путать разделители: для breakpoints используется =, для значения — :, для состояния — .state.
Передавать значения с пробелами без обратных кавычек: токен распадется и правило не применится.


Проверка перед публикацией#

Пример рендерится без ошибок в sandbox.

Значения по умолчанию обработаны (|fallback) там, где данные могут отсутствовать.
Проверено, что все токены tgx:ui записаны в формате [breakpoint=]property[:value][.state] без опечаток.
Проверены responsive и state-варианты (mb/tb/lt/dt/wd, .hover/.focus/.no-*`) на реальной странице.

Шорткат utility-стилей.

<div tgx:ui="df aic jcc"></div>

<div tgx:ui="df aic jcc"></div>

<button tgx:ui="btn btn-primary px:4 py:2">Кнопка</button>

Собирает классы и responsive-модификаторы в короткой форме.

Когда нужно быстро описывать стили и responsive-варианты прямо в шаблоне без длинных CSS-классов.
Когда удобно управлять состояниями (hover, focus, и т.д.) короткими токенами в одном месте.

Базовый формат токена: [breakpoint=]property[:value][.state].
Брейкпоинты: mb|mobile, tb|tablet, lt|laptop, dt|desktop, wd|wide; можно перечислять через запятую (tb,lt=...).
Поддерживаются alias-диапазоны: mb+, tb+, lt+, dt+, wd+ и mb-, tb-, lt-, dt-, wd-.
Состояния задаются суффиксом .state (например .hover, .focus) и могут быть отрицательными через no- (.no-hover).
Для нескольких свойств используйте скобки: (px:4,py:2,bg:xfff).
Числа без единиц переводятся в rem с шагом 0.25rem (4 -> 1rem); модификаторы sm|md|lg|xl меняют множитель.
Цвет в формате xFFF/x112233 автоматически становится #FFF/#112233.
Значения с пробелами передавайте в обратных кавычках: `bg:linear-gradient(90deg,#000,#333) .
Невалидные токены пропускаются, поэтому опечатки в сокращениях приводят к отсутствию ожидаемого стиля.


Частые ошибки#

Путать разделители: для breakpoints используется =, для значения — :, для состояния — .state.
Передавать значения с пробелами без обратных кавычек: токен распадется и правило не применится.


Проверка перед публикацией#

Пример рендерится без ошибок в sandbox.

Значения по умолчанию обработаны (|fallback) там, где данные могут отсутствовать.
Проверено, что все токены tgx:ui записаны в формате [breakpoint=]property[:value][.state] без опечаток.
Проверены responsive и state-варианты (mb/tb/lt/dt/wd, .hover/.focus/.no-*`) на реальной странице.