Empezar
Flexocss es un framework CSS ligero basado en flexbox. Ofrece una grilla responsive de 16 columnas, clases de utilidad y un modo wireframe para depuración. Sin JavaScript, cero dependencias.
Instalación
Puedes instalar flexocss via npm para personalización completa via SCSS, o incluir el CSS precompilado via CDN sin ninguna configuración.
npm
Instala el paquete desde npm:
npm install @daveaki/flexocssLuego impórtalo en tu archivo SCSS:
@use "@daveaki/flexocss/scss/flexo";Para sobreescribir las variables de configuración, usa la sintaxis with:
@use "@daveaki/flexocss/scss/config" with (
$box: 12,
$gapStep: 4
);
@use "@daveaki/flexocss/scss/flexo";CDN
Incluye el CSS directamente en tu HTML para un setup rápido con la configuración por defecto:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@daveaki/flexocss@2.0.2/dist/flexo.min.css">Estructura básica
Flexocss utiliza tres niveles de anidamiento: container, row y fl-box. La grilla usa 16 columnas por defecto.
<div class="container">
<div class="row">
<div class="fl-box fl-8">Column 8/16</div>
<div class="fl-box fl-8">Column 8/16</div>
</div>
</div>Ejemplo en vivo
Esto es lo que hace cada clase:
.container— centra el contenido y establece un ancho máximo..container.fluid— hace que el contenedor ocupe todo el ancho..row— crea una fila flex que envuelve a sus hijos..fl-box— define un elemento flex (columna)..fl-{n}— establece el ancho de la columna, dondenes un valor de 1 a 16.
Layout responsive
Agrega prefijos de breakpoints para cambiar el ancho de las columnas en diferentes tamaños de pantalla. Flexocss sigue un enfoque mobile-first: los breakpoints más pequeños se aplican hacia arriba a menos que sean sobreescritos.
<div class="fl-box fl-16 fl-lg-8 fl-sp-5">
Responsive column
</div>Esta columna ocupa todo el ancho en móvil (fl-16), la mitad en tablet (fl-lg-8) y aproximadamente un tercio en desktop (fl-sp-5).