Stylus media breakpoint

A Stylus responsive helper to manage media breakpoints, based on Bootstrap 4 breakpoints.

Install

npm install stylus-media-breakpoint

Usage

Media only

media(size) // size = xs | sm | md | lg | xl

@import 'stylus-media-breakpoint'

p
  color blue

  // Only media md
  +media(md)
    color yellow

Media less than

Also called Desktop first:

media-lt(size) // size = sm | md | lg | xl

@import 'stylus-media-breakpoint'

p
  // Desktop style
  color blue

  // Everything less than md (md + sm)
  +media-lt(md)
    color yellow

Media greater than

Also called Mobile first:

media-gt(size) // size = xs | sm | md | lg

@import 'stylus-media-breakpoint'

p
  // Mobile style
  color blue

  // Everything greater than md (md + lg)
  +media-gt(md)
    color yellow