⌘ K
esc

    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-1
    p-order-2 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-end
    p-as-center align-self-center
    p-as-baseline align-self-baseline
    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 lowercase
    p-text-uppercase uppercase
    p-text-capitalize capitalize
    p-text-bold font-bold
    p-text-normal font-normal
    p-text-light font-light
    p-text-italic font-italic
    p-text-truncate Removed. Use (overflow-hidden white-space-nowrap text-overflow-ellipsis) instead.