Установка

PrimeFlex - это библиотека утилит CSS, включающая различные вспомогательные средства, такие как система сетки, flexbox, интервал, высота и многое другое.

Скачивание

PrimeFlex доступен в npm, если у вас есть существующее приложение, начните с установки.

npm install primeflex --save

Импорт

Следующим шагом будет добавление primeflex.css в ваше приложение, чтобы включить все утилиты. Если вы предпочитаете выбирать утилиты, вместо этого перейдите к следующему шагу.

"styles": [
    "src/styles.scss",
    "./node_modules/primeflex/primeflex.css"
],

PrimeFlex - это легковесная библиотека, если у вас есть приложение, например, основанное на angular-cli, которое может импортировать scss, вы сможете выбрать необходимые утилиты, чтобы сделать пакет приложений еще меньше.

"styles": [
    "src/styles.scss",
    "./node_modules/primeflex/src/_variables.scss",
    "./node_modules/primeflex/src/_grid.scss",
    "./node_modules/primeflex/src/_formlayout.scss",
    "./node_modules/primeflex/src/_display.scss",
    "./node_modules/primeflex/src/_text.scss",
    "./node_modules/primeflex/src/flexbox/_flexbox.scss",
    "./node_modules/primeflex/src/_spacing.scss",
    "./node_modules/primeflex/src/_elevation.scss"
],

Переменные

Variable	Description	Default
$sm	Breakpoint of screens such as phones.	576px
$md	Breakpoint of screens such as tablets.	768px
$lg	Breakpoint of screens such as notebook monitors.	992px
$xl	Breakpoint of smaller screens such as desktop monitors.	1200px
$gutter	Padding of a grid column.	.5rem
$fieldMargin	Spacing of a field. Can be vertical of horizontal depending on form layout.	.5rem
$fieldLabelMargin	Spacing of a field label. Can be vertical of horizontal depending on form layout.	.5rem
$helperTextMargin	Top spacing of a helper text.	.5rem
$spacer	Base value to use in spacing utilities, view spacing documentation for details.	.5rem

Есть два способа использовать эти переменные, один из вариантов - получить исходный код PrimeFlex с github, скомпилировать свой собственный primeflex и импортировать css-файл. Другой альтернативой является импорт ваших собственных переменных для переопределения значений по умолчанию, если ваше приложение может импортировать файлы scss. Приведенный ниже пример переопределяет точки брейкпоинтов;

$sm:640px;
$md:720px;
$lg:960px;
$xl:1080px;

"styles": [
    "src/styles.scss",
    "src/_overrides.scss",
    "./node_modules/primeflex/src/_variables.scss",
    "./node_modules/primeflex/src/_grid.scss",
    "./node_modules/primeflex/src/_formlayout.scss",
    "./node_modules/primeflex/src/_display.scss",
    "./node_modules/primeflex/src/_text.scss",
    "./node_modules/primeflex/src/flexbox/_flexbox.scss",
    "./node_modules/primeflex/src/_spacing.scss",
    "./node_modules/primeflex/src/_elevation.scss"
],

Display