Personnalisation

Chaque aspect de flexocss est contrôlé via des variables SCSS. Remplacez-les avant d'importer le framework pour adapter la grille, l'espacement, les breakpoints et les transitions à votre projet.

Comment remplacer

Utilisez la syntaxe SCSS @use ... with pour remplacer n'importe quelle variable par défaut. Spécifiez uniquement les variables que vous souhaitez modifier :

SCSS

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

Grille

Contrôlez le nombre de colonnes, la largeur du container et le padding des boîtes :

Variable	Défaut	Description
`$box`	16	Nombre de colonnes de la grille
`$containerBlock`	1420px	Max-width du container et de la row
`$containerBlockLM`	1460px	Max-width au plus grand breakpoint
`$flBoxPadding`	0	Padding par défaut pour .fl-box
`$flBoxPaddingIn`	8px 8px	Padding par défaut pour .fl-box-in

Breakpoints

Définissez les noms des breakpoints et leurs valeurs min-width correspondantes :

Variable	Défaut	Description
`$bp`	sm,md,lg,sp,mg,ut	Noms des breakpoints séparés par des virgules
`$mediaQuery`	576px,768px,1024px,1420px,1860px	Valeurs min-width (une de moins que $bp)
`$mediaQueryMAX`	5000px	Limite supérieure pour les media queries

Le premier breakpoint (sm) est la base et n'a pas de media query. $mediaQuery doit avoir exactement une valeur de moins que $bp.

Gap & espacement

Contrôlez les classes gap, padding et area générées :

Variable	Défaut	Description
`$gapStep`	8	Incrément en px entre les classes gap
`$gapNumber`	10	Nombre de pas gap à générer
`$gapStepArea`	16	Incrément pour les classes area (padding vertical)
`$gapNumberArea`	10	Nombre de pas area
`$paddingStep`	8	Incrément pour les classes padding
`$paddingNumber`	12	Nombre de pas padding
`$paddingArea`	8px,24px,48px,64px,88px,112px	Padding vertical par défaut par breakpoint

La valeur maximale générée est step × number. Par exemple, avec $gapStep: 8 et $gapNumber: 10, les classes gap vont de 0 à 80px.

Ordre

Variable	Défaut	Description
`$orderMin`	-10	Valeur minimale d'order
`$orderMax`	10	Valeur maximale d'order

Transitions

Flexocss applique des transitions CSS aux éléments div pour des changements responsive fluides :

Variable	Défaut	Description
`$transition`	true	Activer/désactiver les transitions globalement
`$transitionTime`	400ms	Durée de la transition
`$transitionEasing`	ease-in-out	Fonction d'easing

Poids des polices

Variable	Défaut
`$fontWeightLight`	200
`$fontWeightRegular`	400
`$fontWeightBold`	600
`$fontWeightBlack`	800

Divers

Variable	Défaut	Description
`$env`	'dev'	Environnement : 'dev' active le wireframe, 'prod' le désactive
`$containerOverflowXHidden`	1	Ajoute overflow-x: hidden sur .container
`$zIndex`	0,10	Plage z-index (début, fin)

Exemple complet

Un exemple de configuration complet pour une grille à 12 colonnes avec un espacement plus serré :

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

← Précédent Wireframe

Suivant → Exemple Scaffold