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
.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
.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
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
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
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
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
Default (with gutter)
1/3
1/3
1/3
No Gutter
1/3
1/3
1/3
Visibility Utilities
| 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
1/3
Nested grid inside 2/3 column:
Nested 1/2
Nested 1/2
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 justify="center">...</Grid> <Grid justify="between">...</Grid> <Grid align="middle">...</Grid> <!-- Same height columns --> <Grid sameHeight>...</Grid> <!-- No gutter --> <Grid noGutter>...</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>