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.
Where these classes come from: the grid (
.pc-row / .pc-col-* /
.pc-offset-* / .pc-hide-*) ships in
@keenmate/pure-css — the foundation package — not pure-admin core. The pc-
prefix is short for pure-css: you get the exact same classes whether you link pure-css
on its own or the full pure-admin framework.
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
Auto-equal width columns with .pc-col
Two Equal Columns
.pc-col
.pc-col
Three Equal Columns
.pc-col
.pc-col
.pc-col
Four Equal Columns
.pc-col
.pc-col
.pc-col
.pc-col
Auto Width Column
.pc-col (fills remaining)
.pc-col-auto (content width)
Percentage Columns
Fixed widths in 5% increments: .pc-col-5 through .pc-col-100
.pc-col-25
.pc-col-75
.pc-col-1-3
.pc-col-2-3
.pc-col-50
.pc-col-50
.pc-col-40
.pc-col-60
20
20
20
20
20
.pc-col-100 (full width)
Available percentages: 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100
Fraction Columns
Intuitive naming for common layouts: .pc-col-1-3, .pc-col-2-3, etc.
Halves (1/2)
.pc-col-1-2 (50%)
.pc-col-1-2 (50%)
Thirds (1/3, 2/3)
.pc-col-1-3 (33.3%)
.pc-col-2-3 (66.7%)
1/3
1/3
1/3
Quarters (1/4, 3/4)
.pc-col-1-4 (25%)
.pc-col-3-4 (75%)
1/4
1/4
1/4
1/4
Fifths (1/5, 2/5, 3/5, 4/5)
1/5
4/5
2/5
3/5
Sixths (1/6, 5/6)
1/6
5/6
1/6
1/6
1/6
1/6
1/6
1/6
Twelfths (1/12, 5/12, 7/12, 11/12)
1/12
11/12
5/12
7/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:
.pc-col-100 .pc-col-md-50
.pc-col-100 .pc-col-md-50
Progressive Columns
Different layouts at each breakpoint:
100% → 50% → 25%
100% → 50% → 25%
100% → 50% → 25%
100% → 50% → 25%
Responsive Fractions
Fractions also support breakpoints:
.pc-col-100 .pc-col-md-1-3
.pc-col-100 .pc-col-md-2-3
Offsets
Push columns with left margin: .pc-offset-{size}
Centering with Offsets
.pc-col-50 .pc-offset-25
.pc-col-1-3 .pc-offset-33
Asymmetric Layouts
.pc-col-30 .pc-offset-10
.pc-col-40 .pc-offset-10
Responsive Offsets
.pc-col-100 .pc-col-md-50 .pc-offset-md-25
Full width mobile, centered on desktop
Full width mobile, centered on desktop
Row Alignment
Control horizontal and vertical alignment of columns
Horizontal Alignment
.pc-row--center
Centered
.pc-row--end
Right aligned
.pc-row--between
Left
Right
.pc-row--around
A
B
C
Vertical Alignment
.pc-row--top
Top
Top
.pc-row--middle
Middle
Middle
.pc-row--bottom
Bottom
Bottom
No Gutter
Remove spacing between columns with .pc-row--no-gutter
Default (with gutter)
1/3
1/3
1/3
No Gutter
1/3
1/3
1/3
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
1/3
Nested grid inside 2/3 column:
Nested 1/2
Nested 1/2
CSS Classes Reference
Row Container
pc-row- Flex container for columnspc-row--no-gutter- Remove spacing between columns
Row Horizontal Alignment
pc-row--center- Center columns horizontallypc-row--end- Align columns to the rightpc-row--between- Space between columns (justify-content: space-between)pc-row--around- Space around columns (justify-content: space-around)
Row Vertical Alignment
pc-row--top- Align columns to toppc-row--middle- Align columns to middlepc-row--bottom- Align columns to bottompc-row--stretch- Stretch columns to fill heightpc-row--same-height- Equal height columns
Column Base Classes
pc-col- Auto-equal width column (flex: 1)pc-col-auto- Content-based width column
Percentage Columns (5% increments)
pc-col-5throughpc-col-100- Fixed percentage widths- Available: 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100
Fraction Columns
pc-col-1-2- Half width (50%)pc-col-1-3,pc-col-2-3- Thirdspc-col-1-4,pc-col-3-4- Quarterspc-col-1-5,pc-col-2-5,pc-col-3-5,pc-col-4-5- Fifthspc-col-1-6,pc-col-5-6- Sixthspc-col-1-12,pc-col-5-12,pc-col-7-12,pc-col-11-12- Twelfths
Responsive Variants
pc-col-sm-{n}- 576px and uppc-col-md-{n}- 768px and uppc-col-lg-{n}- 992px and uppc-col-xl-{n}- 1200px and up- Works with percentages and fractions (e.g.,
pc-col-md-50,pc-col-lg-1-3)
Offsets
pc-offset-{n}- Left margin in 5% increments (5-95)pc-offset-{bp}-{n}- Responsive offsets (e.g.,pc-offset-md-25)
Column Modifiers
pc-col--no-padding- Remove column paddingpc-col--grow- Allow column to grow (flex-grow: 1)pc-col--shrink- Allow column to shrink (flex-shrink: 1)
Visibility Utilities
pc-hide- Always hiddenpc-show- Always visiblepc-hide-{bp}- Hidden at breakpoint and uppc-show-{bp}- Visible at breakpoint and uppc-hide-below-{bp}- Hidden below breakpointpc-show-below-{bp}- Visible below breakpoint