Inizia

Flexocss è un framework CSS leggero basato su flexbox. Offre una griglia responsive a 16 colonne, classi utility e una modalità wireframe per il debug. Nessun JavaScript, zero dipendenze.

Installazione

Puoi installare flexocss via npm per la personalizzazione completa via SCSS, oppure includere il CSS precompilato via CDN senza alcuna configurazione.

npm

Installa il pacchetto da npm:

Terminal

npm install @daveaki/flexocss

Poi importalo nel tuo file SCSS:

SCSS

@use "@daveaki/flexocss/scss/flexo";

Per sovrascrivere le variabili di configurazione, usa la sintassi with:

SCSS

@use "@daveaki/flexocss/scss/config" with (
  $box: 12,
  $gapStep: 4
);
@use "@daveaki/flexocss/scss/flexo";

CDN

Includi il CSS direttamente nel tuo HTML per un setup rapido con le impostazioni di default:

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@daveaki/flexocss@2.0.2/dist/flexo.min.css">

Struttura base

Flexocss utilizza tre livelli di annidamento: container, row e fl-box. La griglia usa 16 colonne di default.

HTML

<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>

Esempio live

fl-8

Ecco cosa fa ogni classe:

.container — centra il contenuto e imposta una larghezza massima.
.container.fluid — rende il container a larghezza piena.
.row — crea una riga flex che wrappa i suoi figli.
.fl-box — definisce un elemento flex (colonna).
.fl-{n} — imposta la larghezza della colonna, dove n è un valore da 1 a 16.

Layout responsive

Aggiungi i prefissi dei breakpoint per cambiare la larghezza delle colonne a diverse dimensioni dello schermo. Flexocss segue un approccio mobile-first: i breakpoint più piccoli si applicano verso l'alto a meno che non vengano sovrascritti.

HTML

<div class="fl-box fl-16 fl-lg-8 fl-sp-5">
  Responsive column
</div>

Questa colonna occupa tutta la larghezza su mobile (fl-16), metà su tablet (fl-lg-8) e circa un terzo su desktop (fl-sp-5).

fl-16 fl-lg-8 fl-sp-5

fl-16 fl-lg-16 fl-sp-6

Successivo → Griglia