PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.
PrimeFlex is available for download at NPM for usage with a module bundler such as webpack.
npm install primeflex
After installation you may include the library by importing from node_modules.
/node_modules/primeflex/primeflex.css
PrimeFlex can also be loaded from a CDN using a link tag.
<link rel="stylesheet" href="https://unpkg.com/primeflex@latest/primeflex.css">
PrimeFlex does not ship with a built-in color scheme by default as it is derived from the Prime UI library. In case you need to use it standalone without a Prime library, include one of the themes from the themes folder.
primeflex/themes/primeone-light.css
primeflex/themes/primeone-dark.css
SASS variables are available to customize and create your own primeflex build. To begin with clone the primeflex repo and then build the primeflex.scss file after your customizations. Refer to Sass documentation for more information about how to build scss files.
| 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. | 1rem |
| $fieldLabelMargin | Spacing of a field label. Can be vertical of horizontal depending on form layout. | .5rem |
| $helperTextMargin | Top spacing of a helper text. | .25rem |
| $spacer | Base value to use in spacing utilities, view spacing documentation for details. | 1rem |
| $separator | Separator between responsive breakpoints like md: and pseudo classes like hover:. | : |
Commonly used class blocks can be merged as a single class to be reused using the styleclass mixin. Import the utils from primeflex/utils to be able to create your own classes based on PrimeFlex classes. Here is how to create a class called mybuttonwith the built-in features.
@import 'primeflex/primeflex.scss';
.mybutton {
@include styleclass('bg-blue-500 hover:bg-blue-600 border-round transition-colors transition-duration-150 p-3 border-none');
}
If the import does not work, update your build configuration to import from node_modules or explicitly use the relative path e.g. ../node_modules/primeflex/primeflex.scss.
<button type="button" class="mybutton">My Button</button>
When using a utility CSS library like PrimeFlex, it is likely to use only a set of classes from the library leaving the rest of the library as unused. To avoid including the unused part from your application, it is strongly recommended to use a tool like PurgeCSS that analyzes your code and generates an optimized primeflex file that only contains the utilities you've used.
The official PrimeFlex extension for VSCode provides code completion and snippets support for the classes. Search for "PrimeFlex" at VSCode marketplace to download and install the extension.