tessl/npm-primeflex

PrimeFlex is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages as well.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Flexbox Utilities

Name: tessl/npm-primeflex
Author: tessl

PrimeFlex provides comprehensive flexbox utilities for controlling flex container and flex item behavior. All flexbox utilities support responsive breakpoints and work together to create flexible layouts.

Flex Direction

.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-column { flex-direction: column; }
.flex-column-reverse { flex-direction: column-reverse; }

Flex Wrap

.flex-wrap { flex-wrap: wrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
.flex-nowrap { flex-wrap: nowrap; }

Justify Content

.justify-content-start { justify-content: flex-start; }
.justify-content-end { justify-content: flex-end; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-around { justify-content: space-around; }
.justify-content-evenly { justify-content: space-evenly; }

Align Content

.align-content-start { align-content: flex-start; }
.align-content-end { align-content: flex-end; }
.align-content-center { align-content: center; }
.align-content-between { align-content: space-between; }
.align-content-around { align-content: space-around; }
.align-content-evenly { align-content: space-evenly; }

Align Items

.align-items-stretch { align-items: stretch; }
.align-items-start { align-items: flex-start; }
.align-items-center { align-items: center; }
.align-items-end { align-items: flex-end; }
.align-items-baseline { align-items: baseline; }

Align Self

.align-self-auto { align-self: auto; }
.align-self-start { align-self: flex-start; }
.align-self-end { align-self: flex-end; }
.align-self-center { align-self: center; }
.align-self-stretch { align-self: stretch; }
.align-self-baseline { align-self: baseline; }

Flex Properties

.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-initial { flex: 0 1 auto; }
.flex-none { flex: none; }

Flex Grow

.flex-grow-0 { flex-grow: 0; }
.flex-grow-1 { flex-grow: 1; }

Flex Shrink

.flex-shrink-0 { flex-shrink: 0; }
.flex-shrink-1 { flex-shrink: 1; }

Flex Order

.flex-order-0 { order: 0; }
.flex-order-1 { order: 1; }
.flex-order-2 { order: 2; }
.flex-order-3 { order: 3; }
.flex-order-4 { order: 4; }
.flex-order-5 { order: 5; }
.flex-order-6 { order: 6; }

Gap Utilities

.gap-0 { gap: 0; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 1rem; }
.gap-4 { gap: 1.5rem; }
.gap-5 { gap: 2rem; }
.gap-6 { gap: 3rem; }
.gap-7 { gap: 4rem; }
.gap-8 { gap: 5rem; }

// Directional gaps
.gap-x-0 { column-gap: 0; }
.gap-x-1 { column-gap: 0.25rem; }
.gap-x-2 { column-gap: 0.5rem; }
.gap-x-3 { column-gap: 1rem; }
.gap-x-4 { column-gap: 1.5rem; }
.gap-x-5 { column-gap: 2rem; }
.gap-x-6 { column-gap: 3rem; }
.gap-x-7 { column-gap: 4rem; }
.gap-x-8 { column-gap: 5rem; }

.gap-y-0 { row-gap: 0; }
.gap-y-1 { row-gap: 0.25rem; }
.gap-y-2 { row-gap: 0.5rem; }
.gap-y-3 { row-gap: 1rem; }
.gap-y-4 { row-gap: 1.5rem; }
.gap-y-5 { row-gap: 2rem; }
.gap-y-6 { row-gap: 3rem; }
.gap-y-7 { row-gap: 4rem; }
.gap-y-8 { row-gap: 5rem; }

Responsive Variants

All flexbox utilities support responsive breakpoints:

// Small screens (≥576px)
.sm\\:flex-row { /* flex-direction: row at sm+ */ }
.sm\\:justify-content-center { /* justify-content: center at sm+ */ }
.sm\\:align-items-center { /* align-items: center at sm+ */ }
// ... all flexbox classes with sm: prefix

// Medium screens (≥768px)
.md\\:flex-column { /* flex-direction: column at md+ */ }
.md\\:justify-content-between { /* justify-content: space-between at md+ */ }
// ... all flexbox classes with md: prefix

// Large screens (≥992px)
.lg\\:flex-row { /* flex-direction: row at lg+ */ }
.lg\\:flex-wrap { /* flex-wrap: wrap at lg+ */ }
// ... all flexbox classes with lg: prefix

// Extra large screens (≥1200px)
.xl\\:justify-content-start { /* justify-content: flex-start at xl+ */ }
.xl\\:align-items-end { /* align-items: flex-end at xl+ */ }
// ... all flexbox classes with xl: prefix

Usage Examples

Centered Content

<div class="flex align-items-center justify-content-center h-screen">
  <div class="p-4 bg-primary text-white border-round">
    Perfectly centered content
  </div>
</div>

Navigation Bar

<nav class="flex align-items-center justify-content-between p-3 bg-primary">
  <div class="flex align-items-center gap-2">
    <img src="logo.png" alt="Logo" class="w-2rem h-2rem">
    <span class="text-white font-bold">Brand</span>
  </div>
  <div class="flex gap-3">
    <a href="#" class="text-white no-underline">Home</a>
    <a href="#" class="text-white no-underline">About</a>
    <a href="#" class="text-white no-underline">Contact</a>
  </div>
</nav>

Card Layout

<div class="flex flex-column gap-3 p-4 surface-card border-round shadow-2">
  <div class="flex align-items-center justify-content-between">
    <h3 class="m-0 text-primary">Card Title</h3>
    <i class="pi pi-star text-yellow-400"></i>
  </div>
  <p class="m-0 text-color-secondary line-height-3">
    Card content goes here with some descriptive text.
  </p>
  <div class="flex gap-2 align-items-center justify-content-end">
    <button class="border-none bg-primary text-white p-2 border-round cursor-pointer">
      Action
    </button>
    <button class="border-1 border-primary text-primary bg-transparent p-2 border-round cursor-pointer">
      Cancel
    </button>
  </div>
</div>

Responsive Flex Direction

<div class="flex flex-column md:flex-row gap-4">
  <div class="p-4 bg-primary text-white border-round">
    Stacked on mobile, side by side on tablet+
  </div>
  <div class="p-4 surface-section border-round">
    Responsive flex layout
  </div>
</div>

Sidebar Layout

<div class="flex min-h-screen">
  <aside class="w-15rem bg-primary text-white p-3">
    <nav class="flex flex-column gap-2">
      <a href="#" class="text-white no-underline p-2 border-round hover:bg-primary-600">
        Dashboard
      </a>
      <a href="#" class="text-white no-underline p-2 border-round hover:bg-primary-600">
        Settings
      </a>
    </nav>
  </aside>
  <main class="flex-1 p-4">
    <h1>Main Content</h1>
    <p>Content area that grows to fill remaining space.</p>
  </main>
</div>

Equal Height Cards

<div class="grid">
  <div class="col-12 md:col-4">
    <div class="flex flex-column h-full p-4 surface-card border-round shadow-1">
      <h3 class="m-0 mb-3">Card 1</h3>
      <p class="flex-1 m-0">Short content</p>
      <button class="mt-3 p-2 bg-primary text-white border-none border-round">
        Action
      </button>
    </div>
  </div>
  <div class="col-12 md:col-4">
    <div class="flex flex-column h-full p-4 surface-card border-round shadow-1">
      <h3 class="m-0 mb-3">Card 2</h3>
      <p class="flex-1 m-0">Much longer content that takes up multiple lines and demonstrates how flex-1 makes all cards equal height.</p>
      <button class="mt-3 p-2 bg-primary text-white border-none border-round">
        Action
      </button>
    </div>
  </div>
  <div class="col-12 md:col-4">
    <div class="flex flex-column h-full p-4 surface-card border-round shadow-1">
      <h3 class="m-0 mb-3">Card 3</h3>
      <p class="flex-1 m-0">Medium length content</p>
      <button class="mt-3 p-2 bg-primary text-white border-none border-round">
        Action
      </button>
    </div>
  </div>
</div>

Install with Tessl CLI