vcl-breakpoints

Descriptive breakpoints for responsive adaptation of components.

Usage no npm install needed!

<script type="module">
  import vclBreakpoints from 'https://cdn.skypack.dev/vcl-breakpoints';
</script>

README

VCL breakpoints

Descriptive breakpoints for responsive adaptation of components.

Features

The following ranges of viewport widths are defined:

  • up to 390px: small (mobile phone form factor)
  • 390px to 1280px: medium (tablets and narrow screen computers)
  • greater than 1280px: large (low- and hi-res large screens)

Usage

Warning: Try to prevent responsive components as much as you can, see why.

@media (--sm-viewport)
  /* narrow window styles */

Classes

Modifiers

Media

Generic

  • --sm-viewport
  • --md-viewport
  • --lg-viewport

Real World

  • --up-to-smartphone-landscape

Demo

example.html on GH-pages.