Responsive grid layout with percentage and fraction-based columns.
Overview
Pure Admin uses a custom flexbox grid system with intuitive naming. Columns use pa-col-{size} for percentages
and pa-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 |
pa-col-sm-50
|
md
| 768px |
pa-col-md-50
|
lg
| 992px |
pa-col-lg-50
|
xl
| 1200px |
pa-col-xl-50
|
Basic Usage
Auto-equal width columns with .pa-col
Two Equal Columns
Three Equal Columns
Four Equal Columns
Auto Width Column
Percentage Columns
Fixed widths in 5% increments: .pa-col-5 through .pa-col-100
Fraction Columns
Intuitive naming for common layouts: .pa-col-1-3, .pa-col-2-3, etc.
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
Push columns with left margin: .pa-offset-{size}
Centering with Offsets
Asymmetric Layouts
Row Alignment
Control horizontal and vertical alignment of columns
Horizontal Alignment
.pa-row--center
.pa-row--end
.pa-row--between
.pa-row--around
Vertical Alignment
.pa-row--top
.pa-row--middle
.pa-row--bottom
No Gutter
Remove spacing between columns with .pa-row--no-gutter
Default (with gutter)
No Gutter
Visibility Utilities
Show/hide elements at different breakpoints
| Class | Description |
|---|---|
.pa-hide
| Always hidden |
.pa-show
| Always visible |
.pa-hide-{bp}
| Hidden at breakpoint and up |
.pa-show-{bp}
| Visible at breakpoint and up |
.pa-hide-below-{bp}
| Hidden below breakpoint |
.pa-show-below-{bp}
| Visible below breakpoint |
Live Demo (resize browser)
Nested Grids
Grids can be nested inside columns
Nested grid inside 2/3 column:
Quick Reference
Percentage Classes
.pa-col-5 .pa-col-10 .pa-col-15 .pa-col-20 .pa-col-25
.pa-col-30 .pa-col-35 .pa-col-40 .pa-col-45 .pa-col-50
.pa-col-55 .pa-col-60 .pa-col-65 .pa-col-70 .pa-col-75
.pa-col-80 .pa-col-85 .pa-col-90 .pa-col-95 .pa-col-100
Fraction Classes
.pa-col-1-2
.pa-col-1-3 .pa-col-2-3
.pa-col-1-4 .pa-col-3-4
.pa-col-1-5 .pa-col-2-5 .pa-col-3-5 .pa-col-4-5
.pa-col-1-6 .pa-col-5-6
.pa-col-1-12 .pa-col-5-12 .pa-col-7-12 .pa-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>