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

Borders & Effects

Name: tessl/npm-primeflex
Author: tessl

PrimeFlex provides comprehensive utilities for borders, border radius, shadows, and visual effects. All border and effect utilities support responsive breakpoints.

Border Width

// All sides
.border-none { border: none; }
.border-1 { border-width: 1px; border-style: solid; }
.border-2 { border-width: 2px; border-style: solid; }
.border-3 { border-width: 3px; border-style: solid; }
.border-4 { border-width: 4px; border-style: solid; }
.border-5 { border-width: 5px; border-style: solid; }
.border-6 { border-width: 6px; border-style: solid; }
.border-7 { border-width: 7px; border-style: solid; }
.border-8 { border-width: 8px; border-style: solid; }

// Top border
.border-top-none { border-top: none; }
.border-top-1 { border-top-width: 1px; border-top-style: solid; }
.border-top-2 { border-top-width: 2px; border-top-style: solid; }
.border-top-3 { border-top-width: 3px; border-top-style: solid; }
.border-top-4 { border-top-width: 4px; border-top-style: solid; }
.border-top-5 { border-top-width: 5px; border-top-style: solid; }
.border-top-6 { border-top-width: 6px; border-top-style: solid; }
.border-top-7 { border-top-width: 7px; border-top-style: solid; }
.border-top-8 { border-top-width: 8px; border-top-style: solid; }

// Right border
.border-right-none { border-right: none; }
.border-right-1 { border-right-width: 1px; border-right-style: solid; }
.border-right-2 { border-right-width: 2px; border-right-style: solid; }
.border-right-3 { border-right-width: 3px; border-right-style: solid; }
.border-right-4 { border-right-width: 4px; border-right-style: solid; }
.border-right-5 { border-right-width: 5px; border-right-style: solid; }
.border-right-6 { border-right-width: 6px; border-right-style: solid; }
.border-right-7 { border-right-width: 7px; border-right-style: solid; }
.border-right-8 { border-right-width: 8px; border-right-style: solid; }

// Bottom border
.border-bottom-none { border-bottom: none; }
.border-bottom-1 { border-bottom-width: 1px; border-bottom-style: solid; }
.border-bottom-2 { border-bottom-width: 2px; border-bottom-style: solid; }
.border-bottom-3 { border-bottom-width: 3px; border-bottom-style: solid; }
.border-bottom-4 { border-bottom-width: 4px; border-bottom-style: solid; }
.border-bottom-5 { border-bottom-width: 5px; border-bottom-style: solid; }
.border-bottom-6 { border-bottom-width: 6px; border-bottom-style: solid; }
.border-bottom-7 { border-bottom-width: 7px; border-bottom-style: solid; }
.border-bottom-8 { border-bottom-width: 8px; border-bottom-style: solid; }

// Left border
.border-left-none { border-left: none; }
.border-left-1 { border-left-width: 1px; border-left-style: solid; }
.border-left-2 { border-left-width: 2px; border-left-style: solid; }
.border-left-3 { border-left-width: 3px; border-left-style: solid; }
.border-left-4 { border-left-width: 4px; border-left-style: solid; }
.border-left-5 { border-left-width: 5px; border-left-style: solid; }
.border-left-6 { border-left-width: 6px; border-left-style: solid; }
.border-left-7 { border-left-width: 7px; border-left-style: solid; }
.border-left-8 { border-left-width: 8px; border-left-style: solid; }

// Horizontal borders (left + right)
.border-x-none { border-left: none; border-right: none; }
.border-x-1 { border-left-width: 1px; border-right-width: 1px; border-left-style: solid; border-right-style: solid; }
.border-x-2 { border-left-width: 2px; border-right-width: 2px; border-left-style: solid; border-right-style: solid; }
.border-x-3 { border-left-width: 3px; border-right-width: 3px; border-left-style: solid; border-right-style: solid; }
.border-x-4 { border-left-width: 4px; border-right-width: 4px; border-left-style: solid; border-right-style: solid; }
.border-x-5 { border-left-width: 5px; border-right-width: 5px; border-left-style: solid; border-right-style: solid; }
.border-x-6 { border-left-width: 6px; border-right-width: 6px; border-left-style: solid; border-right-style: solid; }
.border-x-7 { border-left-width: 7px; border-right-width: 7px; border-left-style: solid; border-right-style: solid; }
.border-x-8 { border-left-width: 8px; border-right-width: 8px; border-left-style: solid; border-right-style: solid; }

// Vertical borders (top + bottom)
.border-y-none { border-top: none; border-bottom: none; }
.border-y-1 { border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; }
.border-y-2 { border-top-width: 2px; border-bottom-width: 2px; border-top-style: solid; border-bottom-style: solid; }
.border-y-3 { border-top-width: 3px; border-bottom-width: 3px; border-top-style: solid; border-bottom-style: solid; }
.border-y-4 { border-top-width: 4px; border-bottom-width: 4px; border-top-style: solid; border-bottom-style: solid; }
.border-y-5 { border-top-width: 5px; border-bottom-width: 5px; border-top-style: solid; border-bottom-style: solid; }
.border-y-6 { border-top-width: 6px; border-bottom-width: 6px; border-top-style: solid; border-bottom-style: solid; }
.border-y-7 { border-top-width: 7px; border-bottom-width: 7px; border-top-style: solid; border-bottom-style: solid; }
.border-y-8 { border-top-width: 8px; border-bottom-width: 8px; border-top-style: solid; border-bottom-style: solid; }

Border Radius

// All corners
.border-noround { border-radius: 0; }
.border-round-xs { border-radius: 2px; }
.border-round-sm { border-radius: 4px; }
.border-round { border-radius: 6px; }
.border-round-lg { border-radius: 8px; }
.border-round-xl { border-radius: 12px; }
.border-round-2xl { border-radius: 16px; }
.border-round-3xl { border-radius: 24px; }
.border-circle { border-radius: 9999px; }

// Top corners
.border-round-top-xs { border-top-left-radius: 2px; border-top-right-radius: 2px; }
.border-round-top-sm { border-top-left-radius: 4px; border-top-right-radius: 4px; }
.border-round-top { border-top-left-radius: 6px; border-top-right-radius: 6px; }
.border-round-top-lg { border-top-left-radius: 8px; border-top-right-radius: 8px; }
.border-round-top-xl { border-top-left-radius: 12px; border-top-right-radius: 12px; }
.border-round-top-2xl { border-top-left-radius: 16px; border-top-right-radius: 16px; }
.border-round-top-3xl { border-top-left-radius: 24px; border-top-right-radius: 24px; }

// Right corners
.border-round-right-xs { border-top-right-radius: 2px; border-bottom-right-radius: 2px; }
.border-round-right-sm { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.border-round-right { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.border-round-right-lg { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.border-round-right-xl { border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
.border-round-right-2xl { border-top-right-radius: 16px; border-bottom-right-radius: 16px; }
.border-round-right-3xl { border-top-right-radius: 24px; border-bottom-right-radius: 24px; }

// Bottom corners
.border-round-bottom-xs { border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; }
.border-round-bottom-sm { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
.border-round-bottom { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; }
.border-round-bottom-lg { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
.border-round-bottom-xl { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
.border-round-bottom-2xl { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }
.border-round-bottom-3xl { border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; }

// Left corners
.border-round-left-xs { border-top-left-radius: 2px; border-bottom-left-radius: 2px; }
.border-round-left-sm { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.border-round-left { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.border-round-left-lg { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.border-round-left-xl { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
.border-round-left-2xl { border-top-left-radius: 16px; border-bottom-left-radius: 16px; }
.border-round-left-3xl { border-top-left-radius: 24px; border-bottom-left-radius: 24px; }

Box Shadow (Elevation)

.shadow-none { box-shadow: none; }
.shadow-1 { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
.shadow-2 { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
.shadow-3 { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }
.shadow-4 { box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); }
.shadow-5 { box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22); }
.shadow-6 { box-shadow: 0 25px 50px rgba(0, 0, 0, 0.35), 0 20px 20px rgba(0, 0, 0, 0.22); }
.shadow-7 { box-shadow: 0 30px 60px rgba(0, 0, 0, 0.40), 0 25px 25px rgba(0, 0, 0, 0.22); }
.shadow-8 { box-shadow: 0 35px 70px rgba(0, 0, 0, 0.45), 0 30px 30px rgba(0, 0, 0, 0.22); }

Image Object Fit

.object-contain { object-fit: contain; }
.object-cover { object-fit: cover; }
.object-fill { object-fit: fill; }
.object-none { object-fit: none; }
.object-scale-down { object-fit: scale-down; }

Image Object Position

.object-top { object-position: top; }
.object-bottom { object-position: bottom; }
.object-center { object-position: center; }
.object-left { object-position: left; }
.object-right { object-position: right; }
.object-left-top { object-position: left top; }
.object-left-bottom { object-position: left bottom; }
.object-right-top { object-position: right top; }
.object-right-bottom { object-position: right bottom; }

Cursor

.cursor-auto { cursor: auto; }
.cursor-default { cursor: default; }
.cursor-pointer { cursor: pointer; }
.cursor-wait { cursor: wait; }
.cursor-text { cursor: text; }
.cursor-move { cursor: move; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-help { cursor: help; }
.cursor-crosshair { cursor: crosshair; }

Pointer Events

.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

User Select

.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }
.select-auto { user-select: auto; }

List Style

.list-none { list-style: none; }
.list-disc { list-style: disc; }
.list-decimal { list-style: decimal; }

Responsive Variants

All border and effect utilities support responsive breakpoints:

// Small screens (≥576px)
.sm\\:border-2 { /* border-width: 2px at sm+ */ }
.sm\\:border-round-lg { /* border-radius: 8px at sm+ */ }
.sm\\:shadow-3 { /* box-shadow: shadow-3 at sm+ */ }
// ... all border/effect classes with sm: prefix

// Medium screens (≥768px)
.md\\:border-none { /* border: none at md+ */ }
.md\\:border-circle { /* border-radius: 9999px at md+ */ }
.md\\:shadow-none { /* box-shadow: none at md+ */ }
// ... all border/effect classes with md: prefix

// Large screens (≥992px)
.lg\\:border-4 { /* border-width: 4px at lg+ */ }
.lg\\:border-round-2xl { /* border-radius: 16px at lg+ */ }
.lg\\:shadow-6 { /* box-shadow: shadow-6 at lg+ */ }
// ... all border/effect classes with lg: prefix

// Extra large screens (≥1200px)
.xl\\:border-1 { /* border-width: 1px at xl+ */ }
.xl\\:border-round { /* border-radius: 6px at xl+ */ }
.xl\\:shadow-2 { /* box-shadow: shadow-2 at xl+ */ }
// ... all border/effect classes with xl: prefix

Usage Examples

Card with Shadow Elevation

<div class="grid">
  <div class="col-12 md:col-4">
    <div class="p-4 surface-card border-round shadow-1 hover:shadow-3 transition-all">
      <h3 class="m-0 mb-2 text-lg font-semibold">Basic Card</h3>
      <p class="m-0 text-color-secondary">Card with subtle shadow that increases on hover</p>
    </div>
  </div>
  
  <div class="col-12 md:col-4">
    <div class="p-4 surface-card border-round shadow-3">
      <h3 class="m-0 mb-2 text-lg font-semibold">Elevated Card</h3>
      <p class="m-0 text-color-secondary">Card with medium elevation shadow</p>
    </div>
  </div>
  
  <div class="col-12 md:col-4">
    <div class="p-4 surface-card border-round shadow-6">
      <h3 class="m-0 mb-2 text-lg font-semibold">High Elevation</h3>
      <p class="m-0 text-color-secondary">Card with strong elevation shadow</p>
    </div>
  </div>
</div>

Button Variants with Borders

<div class="flex flex-wrap gap-3">
  <!-- Solid button -->
  <button class="px-4 py-2 bg-primary text-white border-none border-round cursor-pointer">
    Solid Button
  </button>
  
  <!-- Outlined button -->
  <button class="px-4 py-2 border-2 border-primary text-primary bg-transparent border-round cursor-pointer hover:bg-primary hover:text-white">
    Outlined Button
  </button>
  
  <!-- Rounded button -->
  <button class="px-6 py-2 bg-green-500 text-white border-none border-round-xl cursor-pointer">
    Rounded Button
  </button>
  
  <!-- Circular button -->
  <button class="w-3rem h-3rem bg-red-500 text-white border-none border-circle cursor-pointer flex align-items-center justify-content-center">
    <i class="pi pi-heart"></i>
  </button>
</div>

Image Gallery with Object Fit

<div class="grid">
  <div class="col-12 md:col-6 lg:col-4">
    <div class="border-round overflow-hidden shadow-2">
      <img src="landscape.jpg" alt="Landscape" class="w-full h-12rem object-cover">
    </div>
  </div>
  
  <div class="col-12 md:col-6 lg:col-4">
    <div class="border-round overflow-hidden shadow-2">
      <img src="portrait.jpg" alt="Portrait" class="w-full h-12rem object-cover object-top">
    </div>
  </div>
  
  <div class="col-12 md:col-6 lg:col-4">
    <div class="border-round overflow-hidden shadow-2">
      <img src="square.jpg" alt="Square" class="w-full h-12rem object-contain bg-surface-100">
    </div>
  </div>
</div>

Profile Card with Complex Borders

<div class="p-6 surface-card border-round-lg shadow-3 text-center max-w-20rem mx-auto">
  <!-- Avatar -->
  <div class="relative inline-block mb-4">
    <img src="avatar.jpg" alt="Avatar" class="w-6rem h-6rem border-circle object-cover">
    <div class="absolute bottom-0 right-0 w-1-5rem h-1-5rem bg-green-500 border-circle border-3 border-white"></div>
  </div>
  
  <!-- Content -->
  <h3 class="m-0 mb-2 text-xl font-bold">John Doe</h3>
  <p class="m-0 mb-4 text-color-secondary">Software Engineer</p>
  
  <!-- Action buttons -->
  <div class="flex gap-2 justify-content-center">
    <button class="px-4 py-2 bg-primary text-white border-none border-round cursor-pointer">
      Follow
    </button>
    <button class="px-4 py-2 border-1 border-surface-300 bg-transparent border-round cursor-pointer">
      Message
    </button>
  </div>
</div>

Navigation with Border Accents

<nav class="p-4 surface-section border-bottom-2 border-primary shadow-1">
  <div class="flex align-items-center justify-content-between">
    <div class="text-xl font-bold text-primary">Brand</div>
    
    <ul class="flex list-none m-0 p-0 gap-4">
      <li>
        <a href="#" class="text-color no-underline p-2 border-round cursor-pointer hover:bg-surface-hover">
          Home
        </a>
      </li>
      <li>
        <a href="#" class="text-color no-underline p-2 border-round cursor-pointer hover:bg-surface-hover border-bottom-2 border-primary">
          Active
        </a>
      </li>
      <li>
        <a href="#" class="text-color no-underline p-2 border-round cursor-pointer hover:bg-surface-hover">
          About
        </a>
      </li>
    </ul>
  </div>
</nav>

Alert Messages with Border Styles

<div class="flex flex-column gap-3">
  <!-- Success alert -->
  <div class="p-3 bg-green-50 border-left-4 border-green-500 border-round-right">
    <div class="flex align-items-center gap-2">
      <i class="pi pi-check-circle text-green-500"></i>
      <span class="font-semibold text-green-800">Success!</span>
    </div>
    <p class="m-0 mt-2 text-sm text-green-700">Operation completed successfully.</p>
  </div>
  
  <!-- Warning alert -->
  <div class="p-3 bg-yellow-50 border-left-4 border-yellow-500 border-round-right">
    <div class="flex align-items-center gap-2">
      <i class="pi pi-exclamation-triangle text-yellow-500"></i>
      <span class="font-semibold text-yellow-800">Warning!</span>
    </div>
    <p class="m-0 mt-2 text-sm text-yellow-700">Please review your input.</p>
  </div>
  
  <!-- Error alert -->
  <div class="p-3 bg-red-50 border-left-4 border-red-500 border-round-right">
    <div class="flex align-items-center gap-2">
      <i class="pi pi-times-circle text-red-500"></i>
      <span class="font-semibold text-red-800">Error!</span>
    </div>
    <p class="m-0 mt-2 text-sm text-red-700">Something went wrong.</p>
  </div>
</div>

Floating Action Card

<div class="relative">
  <!-- Background content -->
  <div class="p-6 surface-section border-round">
    <h2 class="m-0 mb-4">Background Content</h2>
    <p class="m-0">Main content area</p>
  </div>
  
  <!-- Floating card -->
  <div class="absolute top-0 right-0 -mt-3 -mr-3 p-4 bg-white border-round shadow-4 pointer-events-auto">
    <div class="flex align-items-center gap-2">
      <div class="w-2rem h-2rem bg-blue-500 border-circle flex align-items-center justify-content-center">
        <i class="pi pi-star text-white text-xs"></i>
      </div>
      <span class="text-sm font-medium">Featured</span>
    </div>
  </div>
</div>

Responsive Border Radius

<div class="p-4 bg-primary text-white border-round-sm md:border-round-lg lg:border-round-2xl">
  <h3 class="m-0 mb-2">Responsive Borders</h3>
  <p class="m-0">Border radius increases with screen size</p>
</div>

Disabled State with Visual Cues

<div class="flex gap-3">
  <button class="px-4 py-2 bg-primary text-white border-none border-round cursor-pointer">
    Active Button
  </button>
  
  <button class="px-4 py-2 bg-surface-200 text-surface-500 border-none border-round cursor-not-allowed select-none pointer-events-none">
    Disabled Button
  </button>
  
  <div class="px-4 py-2 border-2 border-surface-200 text-surface-400 border-round select-none pointer-events-none">
    Disabled Input
  </div>
</div>

Install with Tessl CLI