Breakpoints

Flexocss fournit six breakpoints responsive avec une approche mobile-first basée sur des media queries min-width. Chaque breakpoint débloque un ensemble de classes utilitaires préfixées qui remplacent les valeurs des écrans plus petits.

Aperçu

Breakpoint	Préfixe	Min-width	Cible
Small	`sm`	0px	Petits smartphones
Medium	`md`	576px	Grands smartphones
Large	`lg`	768px	Tablettes
Super	`sp`	1024px	Laptops / petits écrans
Mega	`mg`	1420px	Grands écrans
Ultra	`ut`	1860px	Écrans ultrawide

Mobile-first

Flexocss suit une stratégie mobile-first. Les classes de base (sans préfixe ou avec sm) s'appliquent à partir de 0px. Chaque breakpoint remplace le précédent à mesure que l'écran grandit.

HTML

<!-- Full width on mobile, half on tablet, third on desktop -->
<div class="fl-box fl-16 fl-lg-8 fl-sp-5">...</div>

Dans cet exemple, la colonne est pleine largeur sur mobile (fl-16), 8/16 à partir de 768px (fl-lg-8) et 5/16 à partir de 1024px (fl-sp-5). Les breakpoints plus petits se propagent vers le haut jusqu'à être remplacés.

Pattern des classes

Toutes les classes responsive suivent une convention de nommage cohérente. Le préfixe du breakpoint détermine quand la règle s'active :

Pattern

fl-{breakpoint}-{property}-{value}

fl-sm-gap-16        /* gap 16px from small up */
fl-lg-gap-24        /* gap 24px from large up */
fl-sp-padding-32    /* padding 32px from super up */
fl-mg-area-64       /* vertical area 64px from mega up */
fl-ut-hidden        /* hidden from ultra up */

Exemples responsive

La plupart des classes flexocss supportent les préfixes de breakpoints. Voici quelques patterns courants :

Gap responsive

HTML

<div class="row fluid fl-sm-gap-8 fl-lg-gap-16 fl-sp-gap-24 fl-mg-gap-32">
  <div class="fl-box fl-8">...</div>
  <div class="fl-box fl-8">...</div>
</div>

fl-8

Visibilité responsive

Affichez ou masquez des éléments à des breakpoints spécifiques :

HTML

<!-- Hidden on mobile, visible from tablet -->
<div class="fl-sm-hidden fl-lg-visible">...</div>

<!-- Visible on mobile, hidden from tablet -->
<div class="fl-lg-hidden">...</div>

Visible à partir de tablette (lg)

Visible uniquement sur mobile

Area responsive (padding vertical)

Utilisez les classes area pour ajouter du padding vertical responsive aux sections :

HTML

<section class="fl-sm-area-32 fl-lg-area-48 fl-sp-area-64 fl-mg-area-96">
  ...
</section>

Personnalisation

Les noms et valeurs des breakpoints sont entièrement configurables via SCSS. Remplacez $bp et $mediaQuery pour les adapter à votre projet :

SCSS

@use "@daveaki/flexocss/scss/config" with (
  $bp: sm,md,lg,sp,mg,ut,
  $mediaQuery: 576px,768px,1024px,1420px,1860px
);
@use "@daveaki/flexocss/scss/flexo";

← Précédent Gap & Area

Suivant → Utilitaires