Base
Menor a 640px
Estado implícito del sistema mobile-first.
Breakpoints
Breakpoints define cómo escala el framework desde una base móvil hacia pantallas más grandes, manteniendo una lógica consistente en todas las utilidades.
Qué resuelven los breakpoints
El sistema de breakpoints organiza el comportamiento responsive del framework. Su objetivo es permitir que layout, alignment, spacing, visibility y otros helpers escalen desde una base simple sin romper la lógica general del sistema.
Octanogram Framework sigue una estrategia mobile-first. Esto significa que la base siempre corresponde al estado móvil, y los breakpoints solo agregan cambios a partir de determinados anchos de pantalla.
Mapa oficial del sistema
640px
Móviles grandes
Primer escalado del sistema.
768px
Tablets
Punto común para layouts de dos columnas.
1024px
Laptops
Escala principal para desktop inicial.
1280px
Desktop
Mayor amplitud estructural y compositiva.
1536px
Pantallas grandes
Escala extendida para layouts amplios.
Referencia del archivo
/* ================================
BREAKPOINTS
Sistema oficial del framework
================================ */
/*
Breakpoint map
--------------
XS < 640px (implícito, mobile-first)
SM ≥ 640px móviles grandes
MD ≥ 768px tablets
LG ≥ 1024px laptops
XL ≥ 1280px desktop
XXL ≥ 1536px pantallas grandes
*/
:root {
--bp-sm: 640px;
--bp-md: 768px;
--bp-lg: 1024px;
--bp-xl: 1280px;
--bp-xxl: 1536px;
}Prefijos responsive
Regla general
Toda utilidad base puede escalar mediante prefijos responsive. El nombre del breakpoint se antepone seguido de dos puntos.
.md:cols-2
.lg:align-row
.xl:text-left
.sm:show
.lg:gap-4Importante
En CSS real, el carácter : se escapa como \:.
En HTML, la clase se escribe normalmente.
@media (min-width: 768px) {
.md\:cols-2 { --cols: 2; }
}Cómo funciona la lógica mobile-first
- La clase sin prefijo corresponde al estado base del sistema.
- Ese estado base siempre se interpreta como móvil.
- Los prefijos solo agregan cambios a partir de un ancho mínimo.
- La versión responsive no reemplaza la base; la extiende.
- El sistema crece por capas, no por excepciones arbitrarias.
Ejemplos de escalado
Grid
Un layout puede empezar en una sola columna y crecer a dos o tres columnas según el viewport.
<div class="grid cols-1 md:cols-2 lg:cols-3 gap-md">
...
</div>Align
Un grupo puede apilarse en móvil y alinearse en fila en pantallas más grandes.
<div class="align align-col md:align-row gap-3">
...
</div>Text
La alineación del texto puede cambiar conforme crece el layout.
<h2 class="text-center md:text-left">
Título
</h2>Visibility
Un elemento puede ocultarse o mostrarse según el breakpoint.
<div class="hide lg:show">
Visible solo en desktop
</div>Reglas del sistema responsive
Qué sí hacer
- Definir primero la base móvil.
- Escalar solo cuando el layout lo necesite.
- Usar los breakpoints oficiales del sistema.
- Mantener consistencia entre módulos y helpers.
Qué evitar
- Escribir desktop primero y luego corregir para móvil.
- Crear breakpoints arbitrarios fuera del sistema.
- Duplicar reglas responsive en varios archivos sin necesidad.
- Usar media queries del proyecto para resolver problemas del framework.
Siguiente paso
Continúa con typography para entender la escala y la jerarquía tipográfica del sistema.