0
# Layout Utilities
1

2
PrimeFlex provides comprehensive layout utilities for controlling element display, positioning, sizing, overflow, and z-index. All layout utilities support responsive breakpoints.
3

4
## Display
5

6
```scss { .api }
7
.hidden { display: none; }
8
.block { display: block; }
9
.inline { display: inline; }
10
.inline-block { display: inline-block; }
11
.flex { display: flex; }
12
.inline-flex { display: inline-flex; }
13
```
14

15
## Position
16

17
```scss { .api }
18
.static { position: static; }
19
.relative { position: relative; }
20
.absolute { position: absolute; }
21
.fixed { position: fixed; }
22
.sticky { position: sticky; }
23
```
24

25
## Position Values
26

27
```scss { .api }
28
// Top positioning
29
.top-auto { top: auto; }
30
.top-0 { top: 0px; }
31
.top-50 { top: 50%; }
32
.top-100 { top: 100%; }
33

34
// Right positioning
35
.right-auto { right: auto; }
36
.right-0 { right: 0px; }
37
.right-50 { right: 50%; }
38
.right-100 { right: 100%; }
39

40
// Bottom positioning
41
.bottom-auto { bottom: auto; }
42
.bottom-0 { bottom: 0px; }
43
.bottom-50 { bottom: 50%; }
44
.bottom-100 { bottom: 100%; }
45

46
// Left positioning
47
.left-auto { left: auto; }
48
.left-0 { left: 0px; }
49
.left-50 { left: 50%; }
50
.left-100 { left: 100%; }
51

52
// Absolute positioning shortcuts
53
.inset-0 { top: 0px; right: 0px; bottom: 0px; left: 0px; }
54
```
55

56
## Width
57

58
```scss { .api }
59
// Percentage-based widths
60
.w-1 { width: 8.3333%; }      /* 1/12 */
61
.w-2 { width: 16.6667%; }     /* 2/12 */
62
.w-3 { width: 25%; }          /* 3/12 */
63
.w-4 { width: 33.3333%; }     /* 4/12 */
64
.w-5 { width: 41.6667%; }     /* 5/12 */
65
.w-6 { width: 50%; }          /* 6/12 */
66
.w-7 { width: 58.3333%; }     /* 7/12 */
67
.w-8 { width: 66.6667%; }     /* 8/12 */
68
.w-9 { width: 75%; }          /* 9/12 */
69
.w-10 { width: 83.3333%; }    /* 10/12 */
70
.w-11 { width: 91.6667%; }    /* 11/12 */
71
.w-12 { width: 100%; }        /* 12/12 */
72

73
// Fixed and viewport widths
74
.w-auto { width: auto; }
75
.w-full { width: 100%; }
76
.w-screen { width: 100vw; }
77

78
// Content-based widths
79
.w-min { width: min-content; }
80
.w-max { width: max-content; }
81
.w-fit { width: fit-content; }
82

83
// Rem-based widths
84
.w-1rem { width: 1rem; }
85
.w-2rem { width: 2rem; }
86
.w-3rem { width: 3rem; }
87
.w-4rem { width: 4rem; }
88
.w-5rem { width: 5rem; }
89
.w-6rem { width: 6rem; }
90
.w-7rem { width: 7rem; }
91
.w-8rem { width: 8rem; }
92
.w-9rem { width: 9rem; }
93
.w-10rem { width: 10rem; }
94
.w-15rem { width: 15rem; }
95
.w-20rem { width: 20rem; }
96
.w-25rem { width: 25rem; }
97
.w-30rem { width: 30rem; }
98
/* Continues up to w-30rem */
99
```
100

101
## Height
102

103
```scss { .api }
104
// Percentage-based heights
105
.h-1 { height: 8.3333%; }     /* 1/12 */
106
.h-2 { height: 16.6667%; }    /* 2/12 */
107
.h-3 { height: 25%; }         /* 3/12 */
108
.h-4 { height: 33.3333%; }    /* 4/12 */
109
.h-5 { height: 41.6667%; }    /* 5/12 */
110
.h-6 { height: 50%; }         /* 6/12 */
111
.h-7 { height: 58.3333%; }    /* 7/12 */
112
.h-8 { height: 66.6667%; }    /* 8/12 */
113
.h-9 { height: 75%; }         /* 9/12 */
114
.h-10 { height: 83.3333%; }   /* 10/12 */
115
.h-11 { height: 91.6667%; }   /* 11/12 */
116
.h-12 { height: 100%; }       /* 12/12 */
117

118
// Fixed and viewport heights
119
.h-auto { height: auto; }
120
.h-full { height: 100%; }
121
.h-screen { height: 100vh; }
122

123
// Content-based heights
124
.h-min { height: min-content; }
125
.h-max { height: max-content; }
126
.h-fit { height: fit-content; }
127

128
// Rem-based heights
129
.h-1rem { height: 1rem; }
130
.h-2rem { height: 2rem; }
131
.h-3rem { height: 3rem; }
132
.h-4rem { height: 4rem; }
133
.h-5rem { height: 5rem; }
134
.h-6rem { height: 6rem; }
135
.h-7rem { height: 7rem; }
136
.h-8rem { height: 8rem; }
137
.h-9rem { height: 9rem; }
138
.h-10rem { height: 10rem; }
139
.h-15rem { height: 15rem; }
140
.h-20rem { height: 20rem; }
141
.h-25rem { height: 25rem; }
142
.h-30rem { height: 30rem; }
143
/* Continues up to h-30rem */
144
```
145

146
## Min/Max Width
147

148
```scss { .api }
149
// Minimum width
150
.min-w-0 { min-width: 0; }
151
.min-w-full { min-width: 100%; }
152
.min-w-min { min-width: min-content; }
153
.min-w-max { min-width: max-content; }
154
.min-w-fit { min-width: fit-content; }
155

156
// Maximum width
157
.max-w-full { max-width: 100%; }
158
.max-w-screen { max-width: 100vw; }
159
.max-w-min { max-width: min-content; }
160
.max-w-max { max-width: max-content; }
161
.max-w-fit { max-width: fit-content; }
162
.max-w-none { max-width: none; }
163
```
164

165
## Min/Max Height
166

167
```scss { .api }
168
// Minimum height
169
.min-h-0 { min-height: 0; }
170
.min-h-full { min-height: 100%; }
171
.min-h-screen { min-height: 100vh; }
172
.min-h-min { min-height: min-content; }
173
.min-h-max { min-height: max-content; }
174
.min-h-fit { min-height: fit-content; }
175

176
// Maximum height
177
.max-h-full { max-height: 100%; }
178
.max-h-screen { max-height: 100vh; }
179
.max-h-min { max-height: min-content; }
180
.max-h-max { max-height: max-content; }
181
.max-h-fit { max-height: fit-content; }
182
.max-h-none { max-height: none; }
183
```
184

185
## Overflow
186

187
```scss { .api }
188
.overflow-auto { overflow: auto; }
189
.overflow-hidden { overflow: hidden; }
190
.overflow-visible { overflow: visible; }
191
.overflow-scroll { overflow: scroll; }
192

193
// Directional overflow
194
.overflow-x-auto { overflow-x: auto; }
195
.overflow-x-hidden { overflow-x: hidden; }
196
.overflow-x-visible { overflow-x: visible; }
197
.overflow-x-scroll { overflow-x: scroll; }
198

199
.overflow-y-auto { overflow-y: auto; }
200
.overflow-y-hidden { overflow-y: hidden; }
201
.overflow-y-visible { overflow-y: visible; }
202
.overflow-y-scroll { overflow-y: scroll; }
203
```
204

205
## Z-Index
206

207
```scss { .api }
208
.z-auto { z-index: auto; }
209
.z-0 { z-index: 0; }
210
.z-1 { z-index: 1; }
211
.z-2 { z-index: 2; }
212
.z-3 { z-index: 3; }
213
.z-4 { z-index: 4; }
214
.z-5 { z-index: 5; }
215
```
216

217
## Responsive Variants
218

219
All layout utilities support responsive breakpoints:
220

221
```scss { .api }
222
// Small screens (≥576px)
223
.sm\\:block { /* display: block at sm+ */ }
224
.sm\\:w-full { /* width: 100% at sm+ */ }
225
.sm\\:absolute { /* position: absolute at sm+ */ }
226
// ... all layout classes with sm: prefix
227

228
// Medium screens (≥768px)
229
.md\\:flex { /* display: flex at md+ */ }
230
.md\\:h-screen { /* height: 100vh at md+ */ }
231
.md\\:relative { /* position: relative at md+ */ }
232
// ... all layout classes with md: prefix
233

234
// Large screens (≥992px)
235
.lg\\:inline-block { /* display: inline-block at lg+ */ }
236
.lg\\:w-6 { /* width: 50% at lg+ */ }
237
.lg\\:sticky { /* position: sticky at lg+ */ }
238
// ... all layout classes with lg: prefix
239

240
// Extra large screens (≥1200px)
241
.xl\\:hidden { /* display: none at xl+ */ }
242
.xl\\:max-w-screen { /* max-width: 100vw at xl+ */ }
243
.xl\\:fixed { /* position: fixed at xl+ */ }
244
// ... all layout classes with xl: prefix
245
```
246

247
## Usage Examples
248

249
### Responsive Visibility
250

251
```html
252
<!-- Show on mobile, hide on desktop -->
253
<div class="block md:hidden">
254
  <button class="w-full p-3 bg-primary text-white border-none border-round">
255
    Mobile Menu
256
  </button>
257
</div>
258

259
<!-- Hide on mobile, show on desktop -->
260
<nav class="hidden md:flex gap-4">
261
  <a href="#" class="text-color no-underline">Home</a>
262
  <a href="#" class="text-color no-underline">About</a>
263
  <a href="#" class="text-color no-underline">Contact</a>
264
</nav>
265
```
266

267
### Full-Height Layout
268

269
```html
270
<div class="min-h-screen flex flex-column">
271
  <header class="p-4 bg-primary text-white">
272
    <h1 class="m-0">Header</h1>
273
  </header>
274
  
275
  <main class="flex-1 p-4">
276
    <div class="h-full flex align-items-center justify-content-center">
277
      <p class="text-center">Content that takes remaining height</p>
278
    </div>
279
  </main>
280
  
281
  <footer class="p-4 surface-section text-center">
282
    <p class="m-0">Footer</p>
283
  </footer>
284
</div>
285
```
286

287
### Modal Overlay
288

289
```html
290
<div class="fixed inset-0 bg-black-alpha-50 flex align-items-center justify-content-center z-5">
291
  <div class="relative w-full max-w-30rem mx-3 bg-white border-round shadow-3">
292
    <button class="absolute top-0 right-0 w-3rem h-3rem flex align-items-center justify-content-center border-none bg-transparent cursor-pointer">
293
      ×
294
    </button>
295
    
296
    <div class="p-6">
297
      <h2 class="m-0 mb-4 text-xl font-bold">Modal Title</h2>
298
      <p class="m-0 mb-6 text-color-secondary">Modal content goes here.</p>
299
      
300
      <div class="flex gap-2 justify-content-end">
301
        <button class="px-4 py-2 border-1 border-surface-300 bg-transparent border-round">
302
          Cancel
303
        </button>
304
        <button class="px-4 py-2 bg-primary text-white border-none border-round">
305
          Confirm
306
        </button>
307
      </div>
308
    </div>
309
  </div>
310
</div>
311
```
312

313
### Sidebar Layout
314

315
```html
316
<div class="flex min-h-screen">
317
  <!-- Sidebar -->
318
  <aside class="w-15rem md:w-20rem bg-surface-section border-right-1 border-surface-200">
319
    <div class="p-4">
320
      <h2 class="m-0 mb-4 text-lg font-bold">Navigation</h2>
321
      <nav class="flex flex-column gap-2">
322
        <a href="#" class="p-2 text-color no-underline border-round hover:surface-hover">
323
          Dashboard
324
        </a>
325
        <a href="#" class="p-2 text-color no-underline border-round hover:surface-hover">
326
          Settings
327
        </a>
328
      </nav>
329
    </div>
330
  </aside>
331
  
332
  <!-- Main content -->
333
  <main class="flex-1 overflow-auto">
334
    <div class="p-4">
335
      <h1 class="m-0 mb-4">Page Title</h1>
336
      <div class="surface-card p-4 border-round shadow-1">
337
        <p class="m-0">Main content area with scrollable overflow</p>
338
      </div>
339
    </div>
340
  </main>
341
</div>
342
```
343

344
### Card Grid with Aspect Ratios
345

346
```html
347
<div class="grid">
348
  <div class="col-12 md:col-6 lg:col-4">
349
    <div class="surface-card border-round shadow-2 overflow-hidden">
350
      <!-- Image container with aspect ratio -->
351
      <div class="relative w-full h-12rem overflow-hidden">
352
        <img src="image.jpg" alt="Card image" class="absolute inset-0 w-full h-full object-cover">
353
      </div>
354
      
355
      <div class="p-4">
356
        <h3 class="m-0 mb-2 text-lg font-semibold">Card Title</h3>
357
        <p class="m-0 text-color-secondary">Card description</p>
358
      </div>
359
    </div>
360
  </div>
361
</div>
362
```
363

364
### Sticky Navigation
365

366
```html
367
<div class="relative">
368
  <header class="sticky top-0 z-4 p-4 bg-white border-bottom-1 border-surface-200 shadow-1">
369
    <nav class="flex align-items-center justify-content-between">
370
      <div class="text-xl font-bold text-primary">Brand</div>
371
      <div class="flex gap-4">
372
        <a href="#" class="text-color no-underline">Home</a>
373
        <a href="#" class="text-color no-underline">About</a>
374
        <a href="#" class="text-color no-underline">Contact</a>
375
      </div>
376
    </nav>
377
  </header>
378
  
379
  <main class="p-4">
380
    <div style="height: 200vh;" class="bg-surface-100 border-round p-4">
381
      <p>Scroll to see sticky navigation in action</p>
382
    </div>
383
  </main>
384
</div>
385
```
386

387
### Responsive Container
388

389
```html
390
<div class="w-full max-w-screen mx-auto px-4 md:px-6 lg:px-8">
391
  <div class="py-8 md:py-12 lg:py-16">
392
    <h1 class="m-0 mb-6 text-center text-2xl md:text-4xl font-bold">
393
      Responsive Container
394
    </h1>
395
    
396
    <div class="grid">
397
      <div class="col-12 lg:col-8 lg:col-offset-2">
398
        <p class="m-0 text-center text-lg text-color-secondary line-height-3">
399
          Content centered with responsive padding and maximum width constraints.
400
        </p>
401
      </div>
402
    </div>
403
  </div>
404
</div>
405
```
406

407
### Fixed Action Button
408

409
```html
410
<div class="relative min-h-screen">
411
  <!-- Page content -->
412
  <div class="p-4">
413
    <h1>Page Content</h1>
414
    <p>Main content goes here...</p>
415
  </div>
416
  
417
  <!-- Fixed action button -->
418
  <button class="fixed bottom-0 right-0 m-4 w-4rem h-4rem bg-primary text-white border-none border-circle shadow-3 z-3 flex align-items-center justify-content-center cursor-pointer">
419
    <i class="pi pi-plus text-xl"></i>
420
  </button>
421
</div>
422
```
423

424
### Image Gallery with Overflow
425

426
```html
427
<div class="overflow-x-auto">
428
  <div class="flex gap-3" style="width: max-content;">
429
    <div class="w-15rem h-10rem flex-shrink-0 overflow-hidden border-round">
430
      <img src="image1.jpg" alt="Gallery image" class="w-full h-full object-cover">
431
    </div>
432
    <div class="w-15rem h-10rem flex-shrink-0 overflow-hidden border-round">
433
      <img src="image2.jpg" alt="Gallery image" class="w-full h-full object-cover">
434
    </div>
435
    <div class="w-15rem h-10rem flex-shrink-0 overflow-hidden border-round">
436
      <img src="image3.jpg" alt="Gallery image" class="w-full h-full object-cover">
437
    </div>
438
    <!-- More images... -->
439
  </div>
440
</div>
441
```
442

443
### Layered Content
444

445
```html
446
<div class="relative p-6 bg-blue-500 border-round overflow-hidden">
447
  <!-- Background decoration -->
448
  <div class="absolute top-0 right-0 w-20rem h-20rem bg-blue-400 border-circle opacity-20 -mt-10 -mr-10"></div>
449
  
450
  <!-- Content layer -->
451
  <div class="relative z-1 text-white">
452
    <h2 class="m-0 mb-3 text-2xl font-bold">Layered Design</h2>
453
    <p class="m-0 text-blue-100">Content positioned above background elements</p>
454
  </div>
455
</div>
456
```