or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

animation-interaction.mdborders-effects.mdcolors.mdflexbox.mdform-layout.mdgrid-system.mdimage.mdindex.mdlayout.mdlist-style.mdmisc.mdoverflow.mdspacing.mdtypography.mduser-select.mdzindex.md
tile.json

tessl/npm-primeflex

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/primeflex@4.0.x

To install, run

npx @tessl/cli install tessl/npm-primeflex@4.0.0

index.mddocs/

PrimeFlex

PrimeFlex is a comprehensive CSS utility library designed as a lightweight, responsive framework that provides essential utility classes for modern web development. It offers a complete set of flexbox utilities, grid system, spacing utilities (margin/padding), typography helpers, color utilities, display controls, positioning tools, and responsive breakpoint classes that enable rapid UI development without writing custom CSS.

Package Information

  • Package Name: primeflex
  • Package Type: npm
  • Language: CSS/SCSS
  • Installation: npm install primeflex
  • CDN: Available via CDN for direct browser usage
  • Documentation: https://primeflex.org

Core Imports

CSS Import

@import 'primeflex/primeflex.css';

SCSS Import (Full Library)

@import 'primeflex/styles/lib/primeflex';

SCSS Import (Selective Modules)

@import 'primeflex/styles/lib/core/flexbox';
@import 'primeflex/styles/lib/core/spacing';
@import 'primeflex/styles/lib/core/grid';

HTML Link Tag

<link rel="stylesheet" href="https://unpkg.com/primeflex@4.0.0/primeflex.css" />

Basic Usage

<!-- Grid Layout -->
<div class="grid">
  <div class="col-12 md:col-6 lg:col-4">
    <div class="p-3 bg-primary text-white border-round">
      Responsive column
    </div>
  </div>
  <div class="col-12 md:col-6 lg:col-8">
    <div class="p-3 surface-section border-round">
      Another column
    </div>
  </div>
</div>

<!-- Flexbox Layout -->
<div class="flex align-items-center justify-content-between p-4">
  <div class="flex align-items-center gap-2">
    <i class="pi pi-user"></i>
    <span class="font-bold">John Doe</span>
  </div>
  <button class="bg-primary border-none border-round p-2 text-white cursor-pointer">
    Action
  </button>
</div>

<!-- Typography and Spacing -->
<div class="text-center p-6">
  <h1 class="text-4xl font-bold text-primary m-0 mb-3">Welcome</h1>
  <p class="text-lg text-color-secondary line-height-3 m-0">
    This is a responsive design using PrimeFlex utilities.
  </p>
</div>

Architecture

PrimeFlex is built around several key systems:

  • Modular SCSS Architecture: 25 core utility modules that can be imported selectively
  • Responsive Design: Mobile-first breakpoint system (sm, md, lg, xl) with consistent utility variants
  • State Management: Hover, focus, and active state variants for interactive elements
  • Theme System: Light/dark theme support using CSS custom properties
  • Grid System: 12-column responsive grid with flexbox implementation
  • Form Layout System: Specialized utilities for organizing form elements and inputs
  • Utility-First Approach: Thousands of pre-built utility classes for rapid prototyping
  • Customization: Configurable variables, prefixes, and selective module importing

Capabilities

Grid System

12-column responsive grid system with flexbox implementation. Provides flexible layout capabilities with responsive breakpoints and gutter controls.

// Grid Container
.grid {
  display: flex;
  flex-wrap: wrap;
  margin: -0.5rem;
}

// Grid Columns
.col { flex: 1 1 0%; padding: 0.5rem; }
.col-1 { flex: 0 0 auto; width: 8.3333%; padding: 0.5rem; }
.col-2 { flex: 0 0 auto; width: 16.6667%; padding: 0.5rem; }
.col-3 { flex: 0 0 auto; width: 25%; padding: 0.5rem; }
.col-4 { flex: 0 0 auto; width: 33.3333%; padding: 0.5rem; }
.col-5 { flex: 0 0 auto; width: 41.6667%; padding: 0.5rem; }
.col-6 { flex: 0 0 auto; width: 50%; padding: 0.5rem; }
.col-7 { flex: 0 0 auto; width: 58.3333%; padding: 0.5rem; }
.col-8 { flex: 0 0 auto; width: 66.6667%; padding: 0.5rem; }
.col-9 { flex: 0 0 auto; width: 75%; padding: 0.5rem; }
.col-10 { flex: 0 0 auto; width: 83.3333%; padding: 0.5rem; }
.col-11 { flex: 0 0 auto; width: 91.6667%; padding: 0.5rem; }
.col-12 { flex: 0 0 auto; width: 100%; padding: 0.5rem; }

// Responsive Variants (prefix with sm:, md:, lg:, xl:)
// Example: .md\\:col-6, .lg\\:col-4

Grid System

Flexbox Utilities

Complete flexbox utility system for flex containers and flex items. Covers flex direction, wrapping, justification, alignment, ordering, and flex properties.

// 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-nowrap { flex-wrap: nowrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }

// 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 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; }

Flexbox

Spacing Utilities

Comprehensive spacing system with padding and margin utilities using a consistent scale. Supports directional spacing, auto margins, and negative margins.

// Padding (scale: 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 2rem, 3rem, 4rem, 5rem)
.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }
.p-5 { padding: 2rem; }
.p-6 { padding: 3rem; }
.p-7 { padding: 4rem; }
.p-8 { padding: 5rem; }

// Directional Padding
.pt-{0-8} { padding-top: {scale}; }
.pr-{0-8} { padding-right: {scale}; }
.pb-{0-8} { padding-bottom: {scale}; }
.pl-{0-8} { padding-left: {scale}; }
.px-{0-8} { padding-left: {scale}; padding-right: {scale}; }
.py-{0-8} { padding-top: {scale}; padding-bottom: {scale}; }

// Margin (includes auto and negative values)
.m-{0-8} { margin: {scale}; }
.m-auto { margin: auto; }
.-m-{1-8} { margin: -{scale}; }

Spacing

Color System

Extensive color system with theme colors, surface colors, and alpha variants. Includes text colors, background colors, and border colors with state variants.

// Theme Colors (blue, green, yellow, cyan, pink, indigo, teal, orange, purple, gray, red, primary)
// Shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900
.text-{color}-{shade} { color: var(--p-{color}-{shade}); }
.bg-{color}-{shade} { background-color: var(--p-{color}-{shade}); }
.border-{color}-{shade} { border-color: var(--p-{color}-{shade}); }

// Surface Colors (0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900)
.text-surface-{shade} { color: light-dark(var(--p-surface-{shade}), var(--p-surface-{inverse})); }
.surface-{shade} { background-color: light-dark(var(--p-surface-{shade}), var(--p-surface-{inverse})); }

// Special Colors
.text-primary { color: var(--p-primary-color); }
.bg-primary { background-color: var(--p-primary-color); color: var(--p-primary-contrast-color); }
.surface-ground { background-color: light-dark(var(--p-surface-50), var(--p-surface-950)); }
.surface-section { background-color: light-dark(var(--p-surface-0), var(--p-surface-950)); }
.surface-card { background-color: light-dark(var(--p-surface-0), var(--p-surface-900)); }

// Alpha Colors (10, 20, 30, 40, 50, 60, 70, 80, 90)
.bg-white-alpha-{opacity} { background-color: rgba(255,255,255,{opacity/100}); }
.bg-black-alpha-{opacity} { background-color: rgba(0,0,0,{opacity/100}); }

Colors

Typography

Typography utilities for text styling including alignment, decoration, transform, font weights, sizes, and line heights.

// Text Alignment
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

// Font Weight
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

// Font Size
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }

Typography

Layout Utilities

Display, positioning, sizing, and overflow utilities for controlling element layout and behavior.

// Display
.hidden { display: none; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }

// Position
.static { position: static; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

// Width/Height
.w-full { width: 100%; }
.w-screen { width: 100vw; }
.w-auto { width: auto; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }
.h-auto { height: auto; }

Layout

Border & Effects

Border utilities, border radius, shadows, and visual effects for styling element appearance.

// Border Width
.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 Radius
.border-round { border-radius: 6px; }
.border-round-sm { border-radius: 4px; }
.border-round-lg { border-radius: 8px; }
.border-round-xl { border-radius: 12px; }
.border-circle { border-radius: 9999px; }

// Shadows
.shadow-none { box-shadow: none; }
.shadow-1 { box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.shadow-2 { box-shadow: 0 2px 6px rgba(0,0,0,0.12); }

Borders & Effects

Animation & Interaction

Animation utilities, transitions, transforms, and interaction states for dynamic user interfaces.

// Transitions
.transition-none { transition: none; }
.transition-all { transition: all 150ms ease; }
.duration-75 { transition-duration: 75ms; }
.duration-100 { transition-duration: 100ms; }
.duration-150 { transition-duration: 150ms; }

// Transforms
.scale-0 { transform: scale(0); }
.scale-50 { transform: scale(0.5); }
.scale-100 { transform: scale(1); }
.rotate-90 { transform: rotate(90deg); }
.rotate-180 { transform: rotate(180deg); }

// Keyframe Animations
.fadein { animation: fadein 150ms linear; }
.fadeout { animation: fadeout 150ms linear; }
.scalein { animation: scalein 150ms linear; }

Animation & Interaction

Overflow Control

Utilities for controlling content overflow behavior on both axes.

.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }

// Axis-specific variants
.overflow-x-auto { overflow-x: auto; }
.overflow-y-hidden { overflow-y: hidden; }

Overflow

Z-Index Management

Stack order control for layered layouts and overlapping elements.

.z-auto { z-index: auto; }
.z-0 { z-index: 0; }
.z-1 { z-index: 1; }
.z-2 { z-index: 2; }
.z-3 { z-index: 3; }
.z-4 { z-index: 4; }
.z-5 { z-index: 5; }

Z-Index

Form Layout System

Specialized utilities for organizing form elements with consistent spacing and alignment.

.field { margin-bottom: 1rem; }
.field > label { display: inline-block; margin-bottom: 0.5rem; }
.formgroup-inline { display: flex; flex-wrap: wrap; align-items: flex-start; }
.field-checkbox { display: flex; align-items: center; }

Form Layout

Image Background Utilities

Control background image repeat, sizing, and positioning for responsive designs.

.bg-cover { background-size: cover; }
.bg-contain { background-size: contain; }
.bg-center { background-position: center; }
.bg-no-repeat { background-repeat: no-repeat; }

Image

List Styling

Control list marker appearance and behavior.

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

List Style

User Selection Control

Control text selection behavior within elements.

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

User Select

Miscellaneous Utilities

Interactive controls including appearance, cursor, pointer events, and opacity.

.appearance-none { appearance: none; }
.cursor-pointer { cursor: pointer; }
.pointer-events-none { pointer-events: none; }
.opacity-50 { opacity: 0.5; }
.outline-none { outline: none; }

Miscellaneous

Configuration

Customization Variables

// Core Configuration
$prefix: '' !default;                    // Class prefix
$separator: '\\:' !default;             // Responsive/state separator

// Breakpoints
$sm: 576px !default;
$md: 768px !default;
$lg: 992px !default;
$xl: 1200px !default;

// Spacing
$spacer: 1rem !default;                  // Base spacing unit
$gutter: 0.5rem !default;               // Grid gutter

// Spacing Scale
$space-scales: 0, 0.25, 0.5, 1, 1.5, 2, 3, 4, 5 !default;

Theme Integration

// Light Theme Import
@import 'primeflex/styles/lib/themes/primeone-light';

// Dark Theme Import  
@import 'primeflex/styles/lib/themes/primeone-dark';

// Custom Theme Variables
:root {
  --p-primary-color: #3B82F6;
  --p-primary-contrast-color: #ffffff;
  --p-surface-0: #ffffff;
  // ... additional theme variables
}

Responsive System

All utility classes support responsive variants using a mobile-first approach:

  • sm: ≥576px
  • md: ≥768px
  • lg: ≥992px
  • xl: ≥1200px

Syntax: {breakpoint}\\:{utility} (e.g., md\\:col-6, lg\\:text-center)

State Variants

Interactive state variants for enhanced user experience:

  • hover: hover\\:{utility} - Applies on hover
  • focus: focus\\:{utility} - Applies on focus
  • active: active\\:{utility} - Applies when active/pressed

Available for color utilities and select other utilities.