0
# PrimeFlex
1

2
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.
3

4
## Package Information
5

6
- **Package Name**: primeflex
7
- **Package Type**: npm
8
- **Language**: CSS/SCSS
9
- **Installation**: `npm install primeflex`
10
- **CDN**: Available via CDN for direct browser usage
11
- **Documentation**: https://primeflex.org
12

13
## Core Imports
14

15
### CSS Import
16

17
```css
18
@import 'primeflex/primeflex.css';
19
```
20

21
### SCSS Import (Full Library)
22

23
```scss
24
@import 'primeflex/styles/lib/primeflex';
25
```
26

27
### SCSS Import (Selective Modules)
28

29
```scss
30
@import 'primeflex/styles/lib/core/flexbox';
31
@import 'primeflex/styles/lib/core/spacing';
32
@import 'primeflex/styles/lib/core/grid';
33
```
34

35
### HTML Link Tag
36

37
```html
38
<link rel="stylesheet" href="https://unpkg.com/primeflex@4.0.0/primeflex.css" />
39
```
40

41
## Basic Usage
42

43
```html
44
<!-- Grid Layout -->
45
<div class="grid">
46
  <div class="col-12 md:col-6 lg:col-4">
47
    <div class="p-3 bg-primary text-white border-round">
48
      Responsive column
49
    </div>
50
  </div>
51
  <div class="col-12 md:col-6 lg:col-8">
52
    <div class="p-3 surface-section border-round">
53
      Another column
54
    </div>
55
  </div>
56
</div>
57

58
<!-- Flexbox Layout -->
59
<div class="flex align-items-center justify-content-between p-4">
60
  <div class="flex align-items-center gap-2">
61
    <i class="pi pi-user"></i>
62
    <span class="font-bold">John Doe</span>
63
  </div>
64
  <button class="bg-primary border-none border-round p-2 text-white cursor-pointer">
65
    Action
66
  </button>
67
</div>
68

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

78
## Architecture
79

80
PrimeFlex is built around several key systems:
81

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

91
## Capabilities
92

93
### Grid System
94

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

97
```scss { .api }
98
// Grid Container
99
.grid {
100
  display: flex;
101
  flex-wrap: wrap;
102
  margin: -0.5rem;
103
}
104

105
// Grid Columns
106
.col { flex: 1 1 0%; padding: 0.5rem; }
107
.col-1 { flex: 0 0 auto; width: 8.3333%; padding: 0.5rem; }
108
.col-2 { flex: 0 0 auto; width: 16.6667%; padding: 0.5rem; }
109
.col-3 { flex: 0 0 auto; width: 25%; padding: 0.5rem; }
110
.col-4 { flex: 0 0 auto; width: 33.3333%; padding: 0.5rem; }
111
.col-5 { flex: 0 0 auto; width: 41.6667%; padding: 0.5rem; }
112
.col-6 { flex: 0 0 auto; width: 50%; padding: 0.5rem; }
113
.col-7 { flex: 0 0 auto; width: 58.3333%; padding: 0.5rem; }
114
.col-8 { flex: 0 0 auto; width: 66.6667%; padding: 0.5rem; }
115
.col-9 { flex: 0 0 auto; width: 75%; padding: 0.5rem; }
116
.col-10 { flex: 0 0 auto; width: 83.3333%; padding: 0.5rem; }
117
.col-11 { flex: 0 0 auto; width: 91.6667%; padding: 0.5rem; }
118
.col-12 { flex: 0 0 auto; width: 100%; padding: 0.5rem; }
119

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

124
[Grid System](./grid-system.md)
125

126
### Flexbox Utilities
127

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

130
```scss { .api }
131
// Flex Direction
132
.flex-row { flex-direction: row; }
133
.flex-row-reverse { flex-direction: row-reverse; }
134
.flex-column { flex-direction: column; }
135
.flex-column-reverse { flex-direction: column-reverse; }
136

137
// Flex Wrap  
138
.flex-wrap { flex-wrap: wrap; }
139
.flex-nowrap { flex-wrap: nowrap; }
140
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
141

142
// Justify Content
143
.justify-content-start { justify-content: flex-start; }
144
.justify-content-end { justify-content: flex-end; }
145
.justify-content-center { justify-content: center; }
146
.justify-content-between { justify-content: space-between; }
147
.justify-content-around { justify-content: space-around; }
148
.justify-content-evenly { justify-content: space-evenly; }
149

150
// Align Items
151
.align-items-stretch { align-items: stretch; }
152
.align-items-start { align-items: flex-start; }
153
.align-items-center { align-items: center; }
154
.align-items-end { align-items: flex-end; }
155
.align-items-baseline { align-items: baseline; }
156
```
157

158
[Flexbox](./flexbox.md)
159

160
### Spacing Utilities
161

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

164
```scss { .api }
165
// Padding (scale: 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 2rem, 3rem, 4rem, 5rem)
166
.p-0 { padding: 0; }
167
.p-1 { padding: 0.25rem; }
168
.p-2 { padding: 0.5rem; }
169
.p-3 { padding: 1rem; }
170
.p-4 { padding: 1.5rem; }
171
.p-5 { padding: 2rem; }
172
.p-6 { padding: 3rem; }
173
.p-7 { padding: 4rem; }
174
.p-8 { padding: 5rem; }
175

176
// Directional Padding
177
.pt-{0-8} { padding-top: {scale}; }
178
.pr-{0-8} { padding-right: {scale}; }
179
.pb-{0-8} { padding-bottom: {scale}; }
180
.pl-{0-8} { padding-left: {scale}; }
181
.px-{0-8} { padding-left: {scale}; padding-right: {scale}; }
182
.py-{0-8} { padding-top: {scale}; padding-bottom: {scale}; }
183

184
// Margin (includes auto and negative values)
185
.m-{0-8} { margin: {scale}; }
186
.m-auto { margin: auto; }
187
.-m-{1-8} { margin: -{scale}; }
188
```
189

190
[Spacing](./spacing.md)
191

192
### Color System
193

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

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

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

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

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

219
[Colors](./colors.md)
220

221
### Typography
222

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

225
```scss { .api }
226
// Text Alignment
227
.text-left { text-align: left; }
228
.text-center { text-align: center; }
229
.text-right { text-align: right; }
230
.text-justify { text-align: justify; }
231

232
// Font Weight
233
.font-light { font-weight: 300; }
234
.font-normal { font-weight: 400; }
235
.font-medium { font-weight: 500; }
236
.font-semibold { font-weight: 600; }
237
.font-bold { font-weight: 700; }
238

239
// Font Size
240
.text-xs { font-size: 0.75rem; }
241
.text-sm { font-size: 0.875rem; }
242
.text-base { font-size: 1rem; }
243
.text-lg { font-size: 1.125rem; }
244
.text-xl { font-size: 1.25rem; }
245
.text-2xl { font-size: 1.5rem; }
246
.text-3xl { font-size: 1.875rem; }
247
.text-4xl { font-size: 2.25rem; }
248
```
249

250
[Typography](./typography.md)
251

252
### Layout Utilities
253

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

256
```scss { .api }
257
// Display
258
.hidden { display: none; }
259
.block { display: block; }
260
.inline { display: inline; }
261
.inline-block { display: inline-block; }
262
.flex { display: flex; }
263
.inline-flex { display: inline-flex; }
264

265
// Position
266
.static { position: static; }
267
.relative { position: relative; }
268
.absolute { position: absolute; }
269
.fixed { position: fixed; }
270
.sticky { position: sticky; }
271

272
// Width/Height
273
.w-full { width: 100%; }
274
.w-screen { width: 100vw; }
275
.w-auto { width: auto; }
276
.h-full { height: 100%; }
277
.h-screen { height: 100vh; }
278
.h-auto { height: auto; }
279
```
280

281
[Layout](./layout.md)
282

283
### Border & Effects
284

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

287
```scss { .api }
288
// Border Width
289
.border-none { border: none; }
290
.border-1 { border-width: 1px; border-style: solid; }
291
.border-2 { border-width: 2px; border-style: solid; }
292
.border-3 { border-width: 3px; border-style: solid; }
293

294
// Border Radius
295
.border-round { border-radius: 6px; }
296
.border-round-sm { border-radius: 4px; }
297
.border-round-lg { border-radius: 8px; }
298
.border-round-xl { border-radius: 12px; }
299
.border-circle { border-radius: 9999px; }
300

301
// Shadows
302
.shadow-none { box-shadow: none; }
303
.shadow-1 { box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
304
.shadow-2 { box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
305
```
306

307
[Borders & Effects](./borders-effects.md)
308

309
### Animation & Interaction
310

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

313
```scss { .api }
314
// Transitions
315
.transition-none { transition: none; }
316
.transition-all { transition: all 150ms ease; }
317
.duration-75 { transition-duration: 75ms; }
318
.duration-100 { transition-duration: 100ms; }
319
.duration-150 { transition-duration: 150ms; }
320

321
// Transforms
322
.scale-0 { transform: scale(0); }
323
.scale-50 { transform: scale(0.5); }
324
.scale-100 { transform: scale(1); }
325
.rotate-90 { transform: rotate(90deg); }
326
.rotate-180 { transform: rotate(180deg); }
327

328
// Keyframe Animations
329
.fadein { animation: fadein 150ms linear; }
330
.fadeout { animation: fadeout 150ms linear; }
331
.scalein { animation: scalein 150ms linear; }
332
```
333

334
[Animation & Interaction](./animation-interaction.md)
335

336
### Overflow Control
337

338
Utilities for controlling content overflow behavior on both axes.
339

340
```scss { .api }
341
.overflow-auto { overflow: auto; }
342
.overflow-hidden { overflow: hidden; }
343
.overflow-visible { overflow: visible; }
344
.overflow-scroll { overflow: scroll; }
345

346
// Axis-specific variants
347
.overflow-x-auto { overflow-x: auto; }
348
.overflow-y-hidden { overflow-y: hidden; }
349
```
350

351
[Overflow](./overflow.md)
352

353
### Z-Index Management
354

355
Stack order control for layered layouts and overlapping elements.
356

357
```scss { .api }
358
.z-auto { z-index: auto; }
359
.z-0 { z-index: 0; }
360
.z-1 { z-index: 1; }
361
.z-2 { z-index: 2; }
362
.z-3 { z-index: 3; }
363
.z-4 { z-index: 4; }
364
.z-5 { z-index: 5; }
365
```
366

367
[Z-Index](./zindex.md)
368

369
### Form Layout System
370

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

373
```scss { .api }
374
.field { margin-bottom: 1rem; }
375
.field > label { display: inline-block; margin-bottom: 0.5rem; }
376
.formgroup-inline { display: flex; flex-wrap: wrap; align-items: flex-start; }
377
.field-checkbox { display: flex; align-items: center; }
378
```
379

380
[Form Layout](./form-layout.md)
381

382
### Image Background Utilities
383

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

386
```scss { .api }
387
.bg-cover { background-size: cover; }
388
.bg-contain { background-size: contain; }
389
.bg-center { background-position: center; }
390
.bg-no-repeat { background-repeat: no-repeat; }
391
```
392

393
[Image](./image.md)
394

395
### List Styling
396

397
Control list marker appearance and behavior.
398

399
```scss { .api }
400
.list-none { list-style: none; }
401
.list-disc { list-style: disc; }
402
.list-decimal { list-style: decimal; }
403
```
404

405
[List Style](./list-style.md)
406

407
### User Selection Control
408

409
Control text selection behavior within elements.
410

411
```scss { .api }
412
.select-none { user-select: none; }
413
.select-text { user-select: text; }
414
.select-all { user-select: all; }
415
.select-auto { user-select: auto; }
416
```
417

418
[User Select](./user-select.md)
419

420
### Miscellaneous Utilities
421

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

424
```scss { .api }
425
.appearance-none { appearance: none; }
426
.cursor-pointer { cursor: pointer; }
427
.pointer-events-none { pointer-events: none; }
428
.opacity-50 { opacity: 0.5; }
429
.outline-none { outline: none; }
430
```
431

432
[Miscellaneous](./misc.md)
433

434
## Configuration
435

436
### Customization Variables
437

438
```scss { .api }
439
// Core Configuration
440
$prefix: '' !default;                    // Class prefix
441
$separator: '\\:' !default;             // Responsive/state separator
442

443
// Breakpoints
444
$sm: 576px !default;
445
$md: 768px !default;
446
$lg: 992px !default;
447
$xl: 1200px !default;
448

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

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

457
### Theme Integration
458

459
```scss { .api }
460
// Light Theme Import
461
@import 'primeflex/styles/lib/themes/primeone-light';
462

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

466
// Custom Theme Variables
467
:root {
468
  --p-primary-color: #3B82F6;
469
  --p-primary-contrast-color: #ffffff;
470
  --p-surface-0: #ffffff;
471
  // ... additional theme variables
472
}
473
```
474

475
## Responsive System
476

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

479
- **sm**: ≥576px
480
- **md**: ≥768px  
481
- **lg**: ≥992px
482
- **xl**: ≥1200px
483

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

486
## State Variants
487

488
Interactive state variants for enhanced user experience:
489

490
- **hover**: `hover\\:{utility}` - Applies on hover
491
- **focus**: `focus\\:{utility}` - Applies on focus
492
- **active**: `active\\:{utility}` - Applies when active/pressed
493

494
Available for color utilities and select other utilities.