Un framework CSS leggero e utility-first basato su flexbox. Layout veloci, griglie responsive e zero dipendenze.
Un singolo file CSS senza JavaScript e senza overhead a runtime. Solo CSS puro che funziona ovunque.
Costruito interamente su flexbox per layout prevedibili e potenti, senza la complessità di float o hack con grid.
Colonne, step dei gap, padding, larghezza container, transizioni e altro. Ogni aspetto è controllato tramite variabili SCSS.
Dal mobile piccolo ai monitor ultrawide: sm, md, lg, sp, mg, ut. Controllo totale ad ogni dimensione.
Padding, margini, gap, allineamento, visibilità responsive e altro. Tutto con una convenzione di naming coerente.
Debug istantaneo dei layout con un singolo ID. Visualizza confini, dimensioni e info breakpoint a colpo d'occhio.
Le larghezze delle colonne sono calcolate tenendo conto dei gap automaticamente. Niente più layout rotti per calcoli errati.
Nessun framework JavaScript richiesto. Usa il CSS precompilato direttamente o personalizza via SCSS con il tuo build tool preferito.
Costruisci layout complessi in pochi secondi con un sistema a griglia flessibile che usa 16 colonne di default, ma configurabile a qualsiasi numero. Gap, step di padding, larghezze container e transizioni sono tutti personalizzabili tramite variabili SCSS. Ogni calcolo di larghezza tiene conto dei gap automaticamente, e sei breakpoint responsive ti permettono di adattare qualsiasi layout dal mobile all'ultrawide.
Attiva la modalità wireframe con un singolo ID sul tag body e visualizza istantaneamente la struttura della griglia evidenziata con contorni colorati. Ogni colonna mostra il nome del breakpoint e la dimensione, rendendo facile individuare problemi di allineamento e perfezionare i layout responsive prima della produzione.
Ogni breakpoint usa un approccio mobile-first con media query min-width. Le classi seguono il pattern fl-{breakpoint}-{proprietà}-{valore} per un'API coerente e prevedibile.
smmdlgspmgutScegli il metodo che preferisci: installa via npm per personalizzare colonne, gap, padding, larghezza container, transizioni e altro via SCSS — oppure includi il link CDN per zero configurazione.
npm install @daveaki/flexocss<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@daveaki/flexocss@2.0.2/dist/flexo.min.css">