Documentation

PrimeBlocks for JSF consists of copy paste ready UI blocks crafted with PrimeFlex where theming and interactivity is provided by PrimeFaces.

Compatibility

PrimeBlocks library can be used with any version of PrimeFaces and JSF.

What is a Block?

A UI block is a set of html elements styled with the PrimeFlex CSS utility library. A block can also contain PrimeFaces components in addition to regular elements. The blocks are designed to be used easily by simply moving the block code to your own application. This is achieved by defining the styling in the markup without using a custom css declaration. In cases where a block requires interactivity such as toggling the visibility of a menu or a sidebar, defining a data-pb-styleclass attribute combined with primeblocks.js manages the events and animations. This script simply adds interactivity to elements that have this attribute.

Run the Samples

PrimeBlocks are distributed as a maven project, download the file from PrimeStore, extract the contents of the zip file and execute the following commands to run the application at http://localhost:8080/primeblocks.

mvn jetty:run
    
    

Setup

PrimeFlex

PrimeFlex v3.0+ needs to be included in your application to begin with. First copy the primeflex.css file to a folder such as resources/primeflex/primeflex.css and include it to your template. PrimeFlex css file can also be accessed at resources/primeblocks-app/css/primeflex/primeflex.css.

<h:outputStylesheet name="primeflex/primeflex.css" />

Theming

Blocks utilize color classes for background, text color, border color and pseudo states. Prior to PrimeFaces v11, a theme file from PrimeFlex needs to be added to your application and beginning with PrimeFaces v11, each PrimeFaces theme will include the CSS variables for PrimeBlocks theming so this step won't be necessary as color values will be derived from the PrimeFaces theme being used. Initially download one of the themes from PrimeFlex to a location like resources/primeflex/ and then include them to your template. An example using saga would be the following. Note that themes are also available at resources/primeblocks-app/css/primeflex/themes folder.

<h:outputStylesheet name="primeflex/saga-blue.css" />

PrimeBlocks.js

Many of the blocks like a navbar may require interactivity for opening or hiding a menu. A handy script called primeblocks.js looks for elements with data-pb-styleclass attribute to bring interactivity easily. The directive adds a click event to its host and manages the enter/leave animation of a target. The script file is located at resources/js/primeblocks.js, copy this file to a location like a folder such as resources/js/primeblocks.js and include it via script tag.

<h:outputScript name="js/primeblocks.js" />

Try a Block

That's it, now you can use the copy icon of a block demo and paste it to your application to get started.

Containers

A container is a wrapper of a UI block usually define the paddings, margins and also the background for some block types. Each demo in the samples have a section called containerClass that define the container. When a block is copied to your application, containers are not included as it depends on your application layout so it is highly suggested to paste the block into a container element, you may choose the exact container class in the sample, use one of the built-in containers or create your own.

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 in 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.