Breakpoint

Flexocss fornisce sei breakpoint responsive con un approccio mobile-first basato su media query min-width. Ogni breakpoint sblocca un set di classi utility con prefisso che sovrascrivono i valori degli schermi più piccoli.

Panoramica

Breakpoint	Prefisso	Min-width	Destinazione
Small	`sm`	0px	Smartphone piccoli
Medium	`md`	576px	Smartphone grandi
Large	`lg`	768px	Tablet
Super	`sp`	1024px	Laptop / desktop piccoli
Mega	`mg`	1420px	Desktop grandi
Ultra	`ut`	1860px	Monitor ultrawide

Mobile-first

Flexocss segue una strategia mobile-first. Le classi base (senza prefisso o con sm) si applicano da 0px in su. Ogni breakpoint sovrascrive il precedente man mano che lo schermo cresce.

HTML

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

In questo esempio la colonna è a larghezza piena su mobile (fl-16), 8/16 da 768px (fl-lg-8) e 5/16 da 1024px (fl-sp-5). I breakpoint più piccoli si propagano verso l'alto fino a quando non vengono sovrascritti.

Pattern delle classi

Tutte le classi responsive seguono una convenzione di naming coerente. Il prefisso del breakpoint determina quando la regola si attiva:

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

Esempi responsive

La maggior parte delle classi flexocss supporta i prefissi dei breakpoint. Ecco alcuni pattern comuni:

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

Mostra o nascondi elementi a breakpoint specifici:

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>

Visibile da tablet (lg) in su

Visibile solo su mobile

Area responsive (padding verticale)

Usa le classi area per aggiungere padding verticale responsive alle sezioni:

HTML

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

Personalizzazione

I nomi e i valori dei breakpoint sono completamente configurabili via SCSS. Sovrascrivi $bp e $mediaQuery per adattarli al tuo progetto:

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

← Precedente Gap & Area

Successivo → Utility