Breakpoints

Flexocss ofrece seis breakpoints responsive con un enfoque mobile-first basado en media queries min-width. Cada breakpoint desbloquea un conjunto de clases de utilidad con prefijo que sobreescriben los valores de pantallas más pequeñas.

Resumen

Breakpoint	Prefijo	Min-width	Destino
Small	`sm`	0px	Smartphones pequeños
Medium	`md`	576px	Smartphones grandes
Large	`lg`	768px	Tablets
Super	`sp`	1024px	Laptops / escritorios pequeños
Mega	`mg`	1420px	Escritorios grandes
Ultra	`ut`	1860px	Monitores ultrawide

Mobile-first

Flexocss sigue una estrategia mobile-first. Las clases base (sin prefijo o con sm) se aplican desde 0px hacia arriba. Cada breakpoint sobreescribe el anterior a medida que la pantalla crece.

HTML

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

En este ejemplo la columna ocupa todo el ancho en móvil (fl-16), 8/16 desde 768px (fl-lg-8) y 5/16 desde 1024px (fl-sp-5). Los breakpoints más pequeños se propagan hacia arriba hasta ser sobreescritos.

Patrón de clases

Todas las clases responsive siguen una convención de nombres consistente. El prefijo del breakpoint determina cuándo se activa la regla:

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

Ejemplos responsive

La mayoría de las clases de flexocss soportan prefijos de breakpoints. Aquí hay algunos patrones comunes:

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

Visibilidad responsive

Muestra u oculta elementos en breakpoints específicos:

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 desde tablet (lg) en adelante

Visible solo en móvil

Area responsive (padding vertical)

Usa las clases area para agregar padding vertical responsive a las secciones:

HTML

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

Personalización

Los nombres y valores de los breakpoints son totalmente configurables via SCSS. Sobreescribe $bp y $mediaQuery para adaptarlos a tu proyecto:

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

← Anterior Gap & Area

Siguiente → Utilidades