Responsive grid layout with percentage and fraction-based columns.
Overview
Pure Admin uses a custom flexbox grid system with intuitive naming. Columns use pc-col-{size} for percentages
and pc-col-{x}-{y} for fractions.
Key Features
- Gutter: 0.8rem (8px) per side, 1.6rem (16px) total gap
- Percentage columns: 5% increments (5, 10, 15... 100)
- Fraction columns: Halves, thirds, quarters, fifths, sixths, twelfths
- Responsive: All columns have breakpoint variants
- Offsets: Left margin in 5% increments
Breakpoints
| Prefix | Min Width | Example |
|---|---|---|
sm
| 576px |
pc-col-sm-50
|
md
| 768px |
pc-col-md-50
|
lg
| 992px |
pc-col-lg-50
|
xl
| 1200px |
pc-col-xl-50
|
Basic Usage
Two Equal Columns
Three Equal Columns
Four Equal Columns
Auto Width Column
Percentage Columns
Fraction Columns
Halves (1/2)
Thirds (1/3, 2/3)
Quarters (1/4, 3/4)
Fifths (1/5, 2/5, 3/5, 4/5)
Sixths (1/6, 5/6)
Twelfths (1/12, 5/12, 7/12, 11/12)
Responsive Grid
Stack on mobile, columns on larger screens. Resize your browser to see the effect.
Mobile-First Pattern
Full width on mobile, 50% on medium screens and up:
Progressive Columns
Different layouts at each breakpoint:
Responsive Fractions
Fractions also support breakpoints:
Offsets
Centering with Offsets
Asymmetric Layouts
Row Alignment
Control horizontal and vertical alignment of columns
Horizontal Alignment
.pc-row--center
.pc-row--end
.pc-row--between
.pc-row--around
Vertical Alignment
.pc-row--top
.pc-row--middle
.pc-row--bottom
No Gutter
Default (with gutter)
No Gutter
Visibility Utilities
Show/hide elements at different breakpoints
| Class | Description |
|---|---|
.pc-hide
| Always hidden |
.pc-show
| Always visible |
.pc-hide-{bp}
| Hidden at breakpoint and up |
.pc-show-{bp}
| Visible at breakpoint and up |
.pc-hide-below-{bp}
| Hidden below breakpoint |
.pc-show-below-{bp}
| Visible below breakpoint |
Live Demo (resize browser)
Nested Grids
Grids can be nested inside columns
Nested grid inside 2/3 column:
pc-grid — CSS-Grid layout primitive
Two-dimensional cell co-alignment + a ruled box-matrix that prints (real borders). Companion to the flex grid/column.
3 columns, ruled
pa-table--plain (neutral ruled grid)
is_plain strips the themed header/stripe fills so the table reads as a plain ruled
grid — for paper forms and embedded sheet grids. Pair with is_bordered.
| Field | Value |
|---|---|
| Gross weight | 2.4 kg |
| Country of origin | DE |
Quick Reference
Percentage Classes
.pc-col-5 .pc-col-10 .pc-col-15 .pc-col-20 .pc-col-25
.pc-col-30 .pc-col-35 .pc-col-40 .pc-col-45 .pc-col-50
.pc-col-55 .pc-col-60 .pc-col-65 .pc-col-70 .pc-col-75
.pc-col-80 .pc-col-85 .pc-col-90 .pc-col-95 .pc-col-100
Fraction Classes
.pc-col-1-2
.pc-col-1-3 .pc-col-2-3
.pc-col-1-4 .pc-col-3-4
.pc-col-1-5 .pc-col-2-5 .pc-col-3-5 .pc-col-4-5
.pc-col-1-6 .pc-col-5-6
.pc-col-1-12 .pc-col-5-12 .pc-col-7-12 .pc-col-11-12
Code Examples
Basic Grid
<.grid> <.column size="50">Left half</.column> <.column size="50">Right half</.column> </.grid> <!-- Thirds --> <.grid> <.column size="1-3">One third</.column> <.column size="2-3">Two thirds</.column> </.grid>
Responsive Grid
<!-- Stack on mobile, columns on desktop -->
<.grid>
<.column size="100" md="50">
Full on mobile, half on desktop
</.column>
<.column size="100" md="50">
Full on mobile, half on desktop
</.column>
</.grid>
<!-- Progressive breakpoints -->
<.column size="100" sm="50" lg="25">
100% → 50% → 25%
</.column>
Grid Props
<!-- Alignment --> <.grid align="center">...</.grid> <.grid align="between">...</.grid> <.grid valign="middle">...</.grid> <!-- Same height columns --> <.grid is_same_height>...</.grid> <!-- No gutter --> <.grid is_no_gutter>...</.grid>
Column Props
<!-- Sizes (percentage or fraction) --> <.column size="50">Half</.column> <.column size="1-3">One third</.column> <!-- Responsive --> <.column size="100" md="50" lg="25"> Mobile → Tablet → Desktop </.column> <!-- Offset --> <.column size="50" offset="25"> Centered 50% </.column>