Personalizzazione

Ogni aspetto di flexocss è controllato tramite variabili SCSS. Sovrascrivile prima di importare il framework per adattare griglia, spaziatura, breakpoint e transizioni al tuo progetto.

Come sovrascrivere

Usa la sintassi SCSS @use ... with per sovrascrivere qualsiasi variabile di default. Specifica solo le variabili che vuoi modificare:

SCSS

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

Griglia

Controlla il numero di colonne, la larghezza del container e il padding dei box:

Variabile	Default	Descrizione
`$box`	16	Numero di colonne della griglia
`$containerBlock`	1420px	Max-width di container e row
`$containerBlockLM`	1460px	Max-width al breakpoint più grande
`$flBoxPadding`	0	Padding di default per .fl-box
`$flBoxPaddingIn`	8px 8px	Padding di default per .fl-box-in

Breakpoint

Definisci i nomi dei breakpoint e i corrispondenti valori min-width:

Variabile	Default	Descrizione
`$bp`	sm,md,lg,sp,mg,ut	Nomi dei breakpoint separati da virgola
`$mediaQuery`	576px,768px,1024px,1420px,1860px	Valori min-width (uno in meno di $bp)
`$mediaQueryMAX`	5000px	Limite superiore per le media query

Il primo breakpoint (sm) è la base e non ha media query. $mediaQuery deve avere esattamente un valore in meno di $bp.

Gap & spaziatura

Controlla le classi gap, padding e area generate:

Variabile	Default	Descrizione
`$gapStep`	8	Incremento in px tra le classi gap
`$gapNumber`	10	Numero di step gap da generare
`$gapStepArea`	16	Incremento per le classi area (padding verticale)
`$gapNumberArea`	10	Numero di step area
`$paddingStep`	8	Incremento per le classi padding
`$paddingNumber`	12	Numero di step padding
`$paddingArea`	8px,24px,48px,64px,88px,112px	Padding verticale di default per breakpoint

Il valore massimo generato è step × number. Ad esempio, con $gapStep: 8 e $gapNumber: 10, le classi gap vanno da 0 a 80px.

Ordine

Variabile	Default	Descrizione
`$orderMin`	-10	Valore minimo di order
`$orderMax`	10	Valore massimo di order

Transizioni

Flexocss applica transizioni CSS agli elementi div per cambiamenti responsive fluidi:

Variabile	Default	Descrizione
`$transition`	true	Abilita/disabilita le transizioni globalmente
`$transitionTime`	400ms	Durata della transizione
`$transitionEasing`	ease-in-out	Funzione di easing

Pesi dei font

Variabile	Default
`$fontWeightLight`	200
`$fontWeightRegular`	400
`$fontWeightBold`	600
`$fontWeightBlack`	800

Varie

Variabile	Default	Descrizione
`$env`	'dev'	Ambiente: 'dev' abilita il wireframe, 'prod' lo disabilita
`$containerOverflowXHidden`	1	Aggiunge overflow-x: hidden al .container
`$zIndex`	0,10	Range z-index (inizio, fine)

Esempio completo

Un esempio di configurazione completa per una griglia a 12 colonne con spaziatura ridotta:

SCSS

@use "@daveaki/flexocss/scss/config" with (
  $env: 'prod',
  $box: 12,
  $gapStep: 4,
  $gapNumber: 16,
  $containerBlock: 1200px,
  $containerBlockLM: 1400px,
  $transition: true,
  $transitionTime: 300ms,
  $transitionEasing: ease
);
@use "@daveaki/flexocss/scss/flexo";

← Precedente Wireframe

Successivo → Esempio Scaffold