Responsive grid layout with percentage and fraction-based columns.
Resumen
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.
Funciones principales
- 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
Puntos de ruptura
| Prefijo | Ancho mínimo | Ejemplo |
|---|---|---|
sm
| 576px |
pc-col-sm-50
|
md
| 768px |
pc-col-md-50
|
lg
| 992px |
pc-col-lg-50
|
xl
| 1200px |
pc-col-xl-50
|
Uso básico
Dos columnas iguales
Tres columnas iguales
Cuatro columnas iguales
Columna de ancho automático
Columnas de porcentaje
Columnas de fracción
Mitades (1/2)
Tercios (1/3, 2/3)
Cuartos (1/4, 3/4)
Quintos (1/5, 2/5, 3/5, 4/5)
Sextos (1/6, 5/6)
Doceavos (1/12, 5/12, 7/12, 11/12)
Cuadrícula adaptable
Apila en móvil, columnas en pantallas más grandes. Cambia el tamaño del navegador para ver el efecto.
Patrón mobile-first
Full width on mobile, 50% on medium screens and up:
Columnas progresivas
Different layouts at each breakpoint:
Fracciones adaptables
Fractions also support breakpoints:
Desplazamientos
Centrado con desplazamientos
Diseños asimétricos
Alineación de fila
Controla la alineación horizontal y vertical de las columnas
Alineación horizontal
.pc-row--center
.pc-row--end
.pc-row--between
.pc-row--around
Alineación vertical
.pc-row--top
.pc-row--middle
.pc-row--bottom
Sin canaleta
Predeterminado (con separación)
Sin canaleta
Utilidades de visibilidad
Mostrar/ocultar elementos en distintos puntos de ruptura
| Clase | Descripción |
|---|---|
.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 |
Demo en vivo (redimensiona el navegador)
Cuadrículas anidadas
Las cuadrículas pueden anidarse dentro de las columnas
Nested grid inside 2/3 column:
pc-grid — primitiva de diseño CSS-Grid
Coalineación bidimensional de celdas + una matriz de cajas con líneas que se imprime (bordes reales). Complemento de la cuadrícula/columna flexible.
3 columnas, con líneas
pa-table--plain (cuadrícula neutral con líneas)
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.
| Campo | Valor |
|---|---|
| Gross weight | 2.4 kg |
| Country of origin | DE |
Referencia rápida
Clases de porcentaje
.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
Clases de fracción
.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
Ejemplos de código
Cuadrícula básica
<.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>
Cuadrícula adaptable
<!-- 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>
Propiedades de cuadrícula
<!-- 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>
Props de columna
<!-- 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>