Un framework CSS ligero y utility-first basado en flexbox. Layouts rápidos, grids responsive y cero dependencias.
Un único archivo CSS sin JavaScript y sin overhead en tiempo de ejecución. Solo CSS puro que funciona en todas partes.
Construido completamente sobre flexbox para layouts predecibles y potentes, sin la complejidad de float o hacks con grid.
Columnas, pasos de gap, padding, ancho del contenedor, transiciones y más. Cada aspecto se controla mediante variables SCSS.
Desde móvil pequeño hasta monitores ultrawide: sm, md, lg, sp, mg, ut. Control total en cada tamaño de pantalla.
Padding, margen, gap, alineación, visibilidad responsive y más. Todo siguiendo una convención de nombres consistente.
Depura tus layouts instantáneamente con un solo ID. Visualiza límites de columnas, tamaños e info de breakpoint de un vistazo.
Los anchos de las columnas se calculan teniendo en cuenta los gaps automáticamente. No más layouts rotos por cálculos de espaciado.
Ningún framework JavaScript requerido. Usa el CSS precompilado directamente o personaliza via SCSS con tu herramienta de build preferida.
Construye layouts complejos en segundos con un sistema de grid flexible que usa 16 columnas por defecto, pero configurable a cualquier número. Gaps, pasos de padding, anchos de contenedor y transiciones son todos personalizables via variables SCSS. Cada cálculo de ancho tiene en cuenta los gaps automáticamente, y seis breakpoints responsive te permiten adaptar cualquier layout desde móvil hasta ultrawide.
Activa el modo wireframe con un solo ID en la etiqueta body y visualiza instantáneamente la estructura del grid resaltada con contornos de colores. Cada columna muestra el nombre del breakpoint y su tamaño, facilitando la detección de problemas de alineación y el ajuste de tus layouts responsive antes de producción.
Cada breakpoint usa un enfoque mobile-first con media queries min-width. Las clases siguen el patrón fl-{breakpoint}-{propiedad}-{valor} para una API consistente y predecible.
smmdlgspmgutElige tu método preferido: instala via npm para personalizar columnas, gaps, padding, ancho del contenedor, transiciones y más via SCSS — o incluye el enlace CDN para cero configuración.
npm install @daveaki/flexocss<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@daveaki/flexocss@2.0.2/dist/flexo.min.css">