Breakpoints

Flexocss provides six responsive breakpoints using a mobile-first approach with min-width media queries. Each breakpoint unlocks a set of prefixed utility classes that override smaller screen values.

Overview

Breakpoint	Prefix	Min-width	Target
Small	`sm`	0px	Small phones
Medium	`md`	576px	Large phones
Large	`lg`	768px	Tablets
Super	`sp`	1024px	Laptops / small desktops
Mega	`mg`	1420px	Large desktops
Ultra	`ut`	1860px	Ultrawide monitors

Mobile-first

Flexocss follows a mobile-first strategy. Base classes (without prefix or with sm) apply from 0px and upward. Each breakpoint overrides the previous one as the screen grows.

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 this example the column is full-width on mobile (fl-16), 8/16 from 768px (fl-lg-8), and 5/16 from 1024px (fl-sp-5). Smaller breakpoints cascade upward until overridden.

Class pattern

All responsive classes follow a consistent naming convention. The breakpoint prefix determines when the rule activates:

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

Responsive examples

Most flexocss classes support breakpoint prefixes. Here are some common patterns:

Responsive gap

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

Responsive visibility

Show or hide elements at specific breakpoints:

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 from tablet (lg) up

Visible on mobile only

Responsive area (vertical padding)

Use area classes to add responsive vertical padding to sections:

HTML

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

Customization

Breakpoint names and values are fully configurable via SCSS. Override $bp and $mediaQuery to match your project needs:

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

← Previous Gap & Area

Next → Utilities