Подключение

PrimeFlex — набор CSS-утилит: сетка, flexbox, отступы, текст, тени. В Q.Palette устанавливать его не нужно: утилиты с префиксом p- (p-grid, p-d-flex, p-mt-2), как в PrimeFlex 2, входят в стили пакета @diasoft/qpalette-prime — и в 7.x, и в 8.x — и поддерживаются командой Q.Palette. Остальные страницы раздела описывают именно их.

UI-сервис

Ничего подключать не нужно — утилиты уже на странице, их отдаёт рутовое приложение вместе с остальными стилями палитры. Раздел styles в angular.json UI-сервиса остаётся пустым, см. Настройка сборки UI-сервиса.

⚠️

Пакет primeflex из npm в UI-сервис не ставьте. Начиная с PrimeFlex 3 классы называются без префикса p- (grid, col-6, mt-2) — с примерами этого раздела и со стилями палитры они не совпадут, а сам файл в сборке UI-сервиса никто не запросит. В 8.x до 8.0.20 рядом с утилитами палитры лежала копия PrimeFlex 4 без префикса; с 8.0.20 она удалена, и вёрстку на классах grid, col-6, mt-2 нужно перевести на p-grid, p-col-6, p-mt-2.

Приложение, которое запускается само по себе

Отдельного импорта для утилит нет — они внутри стилей палитры, которые приложение подключает и так (утилиты — во второй строке, токены темы для них — в первой):

src/styles.scss

@import '@diasoft/qpalette-visual/styles';
@import '@diasoft/qpalette-prime/styles';
@import 'primeicons/primeicons.css';

Брейкпоинты

Адаптивные варианты классов (p-md-6, p-d-lg-none, p-text-sm-center и другие) переключаются на фиксированных ширинах экрана. Утилиты палитры — готовый CSS, переопределить эти значения переменными нельзя.

Суффикс	Ширина экрана	Устройства
`sm`	от 576px	телефоны
`md`	от 768px	планшеты
`lg`	от 992px	ноутбуки
`xl`	от 1200px	мониторы

Отступ колонки сетки (gutter) — 0.5rem.

Display