VCL breakpoints
Descriptive breakpoints for responsive adaptation of components.
Features
The following ranges of viewport widths are defined:
- up to 599px: extra small (mobile phone form factor)
- 600 to 1023px: medium (tablets and narrow screen computers)
- 1024px to 1439px: medium (tablets and narrow screen computers)
- 1440px to 1919px: large screens
- greater than 1920px: hi-res screens
Usage
Warning: Try to prevent responsive components as much as you can,
see why.
@media (max-width: var(--bp-xs-max))
/* mobile phone styles */
Classes
Modifiers
Media
Generic
Display widths:
--bp-xs-min
: 0px--bp-xs-max
: 599px--bp-sm-min
: 600px--bp-sm-max
: 1023px--bp-md-min
: 1024px--bp-md-max
: 1439px--bp-lg-min
: 1440px--bp-lg-max
: 1919px--bp-xl-min
: 1920px
Demo
example.html on GH-pages.