NibCSS

3 · Responsive design

Lesson 3 of 8 — mobile-first layouts with breakpoint modifiers.

1 min readv1

You will learn: the mobile-first rule · breakpoint modifiers · hiding and showing elements · responsive typography.

The mobile-first rule#

A rule without a breakpoint applies everywhere. A rule with one applies from that width up:

HTML
<div nib="p=16px; md:p=32px; lg:p=48px">
CSS
.nib-a { padding: 16px }                                  /* all sizes     */
@media (min-width: 768px) { .nib-b { padding: 32px } }    /* ≥ 768px (md)  */
@media (min-width: 992px) { .nib-c { padding: 48px } }    /* ≥ 992px (lg)  */

Write the small-screen version first, then add what changes as space grows. Media-query rules are always emitted after base rules, so they win without !important.

Built-in breakpoints#

Modifier

Min width

xs:

480px

sm:

576px

md:

768px

lg:

992px

xl:

1024px

2xl:

1200px

3xl:

1440px

4xl:

1536px

You can rename, add or give them a maximum in the config — see Responsive & breakpoints.

Stack on mobile, row on desktop#

HTML
Stacked on phones
Side by side from 768px
<section nib="d=flex; flxd=column; md:flxd=row; g=16px; w=100%; mnw=300px">
  <div nib="flx=1; p=20px; bdrd=12px; bgc=#EEEFFE; cl=#1e1b4b; dark:bgc=#1e1b4b; dark:cl=#E3E4FD">Stacked on phones</div>
  <div nib="flx=1; p=20px; bdrd=12px; bgc=#ecfeff; cl=#083344; dark:bgc=#083344; dark:cl=#cffafe">Side by side from 768px</div>
</section>

Show and hide#

HTML
<button nib="d=inline-flex; md:d=none">☰ Menu</button>      <!-- phones only -->
<nav nib="d=none; md:d=flex; g=20px">…</nav>             <!-- 768px and up -->

Fluid typography#

Breakpoints are not the only tool. clamp() scales smoothly between a minimum and a maximum:

HTML

Headline that scales

<h2 nib="fts=clamp(22px, 4vw, 40px); ftw=800; lh=1.15; m=0">Headline that scales</h2>

Combining with other modifiers#

Breakpoints chain with states and dark mode in any order: md:hover:bgc=#111, lg:dark:cl=#fff.

Next steps#