⌘ K
esc

    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.1.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.1.0/themes/saga-blue.css">
    <link rel="stylesheet" href="https://unpkg.com/primeflex@3.1.0/themes/arya-blue.css">
    <link rel="stylesheet" href="https://unpkg.com/primeflex@3.1.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/primeflex.scss';
    
    .mybutton {
        @include styleclass('bg-blue-500 text-white 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>
    
    
    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.

    VSCode Extension

    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.