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
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-4Flexbox 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; }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}; }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}); }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; }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; }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); }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; }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; }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; }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; }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; }List Styling
Control list marker appearance and behavior.
.list-none { list-style: none; }
.list-disc { list-style: disc; }
.list-decimal { list-style: decimal; }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; }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; }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.
Install with Tessl CLI
npx tessl i tessl/npm-primeflex- Workspace
- tessl
- Visibility
- Public
- Created
- Last updated
- Describes
- Publish Source
- CLI
- Badge
