Migration Guide

PrimeFlex was initially designed to be a grid library and as of v3 has evolved into a fully features CSS utility library to be the foundation of the PrimeBlocks project. As as result, it has to be rewritten from ground up.

p Prefix

p prefix is removed from all of the classes in favor of the readability.

Responsive Classes

: is now used to define responsive breakpoints.

Before

<div class="p-grid">
    <div class="p-col-12 p-md-6 p-lg-3 p-flex-sm-nowrap">A</div>
    <div class="p-col-12 p-md-6 p-lg-3">B</div>
    <div class="p-col-12 p-md-6 p-lg-3">C</div>
    <div class="p-col-12 p-md-6 p-lg-3">D</div>
</div>
    
After

<div class="grid">
    <div class="col-12 md:col-6 lg:col-3 sm:flex-nowrap">A</div>
    <div class="col-12 md:col-6 lg:col-3">B</div>
    <div class="col-12 md:col-6 lg:col-3">C</div>
    <div class="col-12 md:col-6 lg:col-3">D</div>
</div>
    
Spacing

p prefix is removed.

Elevation

Number of shadow classes have been reduced from 24 to 8 and p is removed.

Display

p-d prefix has been removed from the display classes.

Before After
p-d-none hidden
p-d-inline inline
p-d-inline-block inline-block
p-d-block block
p-d-flex flex
p-d-inline-flex inline-flex
Flexbox

Flexbox classes names have been reimplemented.

Classes
Before After
p-flex-row flex-row
p-flex-column flex-column
p-flex-row-reverse flex-row-reverse
p-flex-column-reverse flex-column-reverse
p-order-0 flex-order-0
p-order-1 flex-order-2
p-order-3 flex-order-3
p-order-4 flex-order-4
p-order-5 flex-order-5
p-order-6 flex-order-6
p-flex-nowrap flex-nowrap
p-flex-wrap flex-wrap
p-flex-wrap-reverse flex-wrap-reverse
p-jc-start justify-content-start
p-jc-end justify-content-end
p-jc-center justify-content-center
p-jc-between justify-content-between
p-jc-around justify-content-around
p-jc-evenly justify-content-evenly
p-ai-start align-items-start
p-ai-end align-items-end
p-ai-center align-items-center
p-ai-baseline align-items-baseline
p-ai-stretch align-items-stretch
p-as-start align-self-start
p-as-end align-self-start
p-as-center align-self-start
p-as-baseline align-self-start
p-as-stretch align-self-stretch
p-ac-start align-content-start
p-ac-end align-content-end
p-ac-center align-content-center
p-ac-around align-content-around
p-ac-between align-content-between
Text

Text classes have been renamed.

Classes
Before After
p-text-left text-left
p-text-right text-right
p-text-center text-center
p-text-justify text-justify
p-text-lowercase text-lowercase
p-text-uppercase text-uppercase
p-text-capitalize text-capitalize
p-text-bold font-bold
p-text-normal font-normal
p-text-light font-light
p-text-italic font-italic