Setup

PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.

Module Loader

PrimeFlex is available for download at NPM for usage with a module bundler such as webpack.


npm install primeflex --save

After installation you may include the library by importing from node_modules.


/node_modules/primeflex/primeflex.css
    
Load from CDN

PrimeFlex can also be loaded from a CDN using a link tag.


<link rel="stylesheet" href="https://unpkg.com/primeflex@3.0.0/primeflex.css">
            
Themes

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.


<link rel="stylesheet" href="https://unpkg.com/primeflex@3.0.0/themes/saga-blue.css">
<link rel="stylesheet" href="https://unpkg.com/primeflex@3.0.0/themes/arya-blue.css">
<link rel="stylesheet" href="https://unpkg.com/primeflex@3.0.0/themes/vela-blue.css">
            
Variables

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:. :
Reuse Classes

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 mybutton with the built-in features.


@import 'primeflex/utils';

.mybutton {
    @include styleclass('bg-blue-500 text-white hover:bg-blue-600 border-round transition-colors transition-duration-150 p-3 border-none');
}


<button type="button" class="mybutton">My Button</button>

Production Size

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.