responsive-stylus-mixins

Responsive mixins for Stylus

Installation

npm install responsive-stylus-mixins

Then, wherever you define mixins for your Stylus:

@import 'path/to/responsive-stylus-mixins'

From that point on, you can use these mixins in your Stylus.

Motivation

I find the media query API to be a bit clunky. The query needs to wrap the thing being styled, when I'd rather it be the other way around.

Responsive states, to me, are similar to any other states of an element, like a hover state. And I'd like to define them similarly, too. Wouldn't it be nice if you could do:

.my-thing
  width 200px

  +and-on-small-screens()
    width 100%

These mixins provide you with similar API to the above.

Mixins

+respond-below( $width )

Specify styling below $width. Useful if you want to hide something just on mobile, or if you want something to appear only on very large screens.

.my-thing
  width 200px

  +respond-below(600px)
    width 100%

+respond-above( $width )

Specify styling above $width.

.my-thing
  width 100%

  +respond-above(600px)
    width 500px

+respond-between( $minWidth, $maxWidth )

Specifies styling that takes affect between the two provided widths.

.my-thing
  width 200px

  +respond-between(600px, 1000px)
    display none

Recommended Usage

I often set breakpoints the for my app as variables. For instance, I might have:

$md-screen = 768px
$lg-screen = 1080px

Then, I make it a habit to only use these specified breakpoints in the mixins. This keeps the app's responsive aspects consistent and simple.