Кулинарная книга ЮАИ
Современный интерфейс без лишней сложности
Дизайн-система ЮАИ превращает обычный HTML в гибкий, простой и быстрый адаптивный интерфейс для любых экранов и принтеров.
Посмотреть систему Включить редакторБыстрый старт
Привычная схема
.section.col-sm-6 data-e="true"
.col-sm-6
Это раздел которым можно управлять в визуальном редакторе ЮАИ
Меньше правил
Не нужно запоминать сотни компонентов. Основные свойства интерфейса собираются из небольшого набора классов.
Больше свободы
Компоненты не запирают страницу в заранее заданные шаблоны. Это всё ещё HTML.
Один язык
Цвет, граница, фон, размер и отступ используются одинаково во всём интерфейсе.
Простота и универсальность
Один и тот же принцип работает для всей страницы: Берём HTML-элемент и добавляем нужные свойства классами ЮАИ. Как в tailwind только проще. Для поддержки редактором добавляем: data-e="..." true, false, text, image
Система
bg → фон
c → цвет
br → граница
pad → внутренний отступ margin → внешний отступ
size → размер шрифта
Адаптивность
Собственные css стили <style></style> или style="" не будут работать так как ожидается!
Вместо жестко заданных цветов и свойств экрана - все само подстроится:
Фон:
.bg0 - .bg10
Цвет:
.с0 - .с10
Граница:
.br0 - .br10 ( Включить границы для элемента: .br )
.br-dotted - граница точками, br-dashed - пунктиром
Отступы внутренние:
.pad (стандартный) .fluidpad (резиновый) .pad--05s (половина стандартного) .pad--1.5s (полтора стандартного) и т.д.
Внешние отступы
также только: .margin , .fluidmargin ...
Размеры шрифта:
size--1s , size--1.5s, .size--2s ... .size--5s
Размеры элементов:
width--3s height--3s ( элемент 3-го размера). fullwidth - во всю ширину, fullheight - во всю высоту экрана.
Позиционирование
fixed, absolute, relative, sticky, grid, flex, table, block, inline-block, inline
Цветовая система
COLORSОдна цветовая шкала используется для фона, текста и границ.
0
1
2
3
4
5
6
7
8
9
10
11
Заголовок первого уровня
Заголовок второго уровня
Заголовок третьего уровня
Заголовок четвёртого уровня
Большой текст
Обычный текст интерфейса. Хорошая дизайн-система не заставляет автора страницы придумывать каждый размер самостоятельно.
Жирное выделение
Вспомогательная информация
Действия
Кнопка — это не отдельная философия. Это обычный элемент плюс несколько понятных классов.
CONTENT
Компоненты не должны выглядеть как компоненты
Меньше инструкций, меньше элементов, меньше вложенность: быстрее рендер.
Единый язык
.microthumb
Все страницы проекта используют одни и те же правила.
Формы остаются HTML
Поля, списки, переключатели и кнопки не требуют отдельной абстракции.
Система состояний
Операция успешно завершена.
Требуется действие пользователя.
Дополнительные сведения.
Метки
Небольшие визуальные состояния собираются теми же классами.
12
колонок
11
уровней цвета
1
язык интерфейса
0
обязательных фреймворков
Таблицы
Когда нужно показать много структурированной информации, остаёмся в обычном HTML.
| Возможность | ЮАИ |
|---|---|
| HTML | ✓ |
| Адаптивная сетка | ✓ |
| Интерактивность | ✓ |
| UI-фреймворк | не требуется |
Один механизм — несколько компонентов
TOGGLEToggle используется как основа для вкладок и аккордеонов.
Простота
Минимальное количество правил. Человек видит HTML и понимает, что происходит.
Скорость
Не нужно искать отдельный компонент в огромной документации.
Свобода
Система не мешает писать обычный HTML.
Частые вопросы
Тот же механизм может быть обычным раскрывающимся блоком. Если тогглер лендинга не нужен — details и summary.
Нативное раскрытие
Прячем уточнение, не единственную копию смысла.
Для базового toggle, accordion, tabs и modal — нет.
Да. CSS держит базу. JS — прогрессивное улучшение, не условие показа.
Да. Контентные элементы размечаются data-e.
Модальное окно
Даже сложное на вид взаимодействие может оставаться простым HTML.
YUAI Modal
Окно открывается стандартным toggle-механизмом.
COMPONENT
Modal
Один input, несколько label и стандартные классы ЮАИ.
Горизонтальный слайдер
Слайдер работает прокруткой и свайпом.
Контент
Изображения, видео и SVG также являются частью единой модели редактирования.
SVG-компонент
FLEX
Основная компоновка лендинга использует row/col. Дополнительно: гибкий контейнер FLEX.
Относительно и абсолютно
Снизу слева
Подложка даёт высоту.
Ещё строка.
.inset0
Слой на весь родитель.