node package manager
Love JavaScript? Your insights can make it even better. Take the 2017 JavaScript Ecosystem Survey ยป



Media query mixins for common devices.

Credit and special thanks goes to for providing the actual media queries, which we simply converted to mixins for rule and orientation pass-through.


All mixins will take one @rules argument and an optional @orientation argument. Omitting the @orientation argument will enforce the rule on both orientations.

Example contract:

.tablets(@rules, @orientation)

This allows targeting all tablets in either orientation like so:

.tablets({ margin : 20px; });

Or, specifying unique rules respectively:

.tablets({ margin : 20px; }, portrait);
.tablets({ margin : 40px; }, landscape);


@import '/bower_components/responsiveless/index'

.some-element-class {
  font-size        : 1.5rem;
  background-color : #EFEFEF;
  color            : #000;
    color : red;
  }, portrait);
    color : blue;
  }, portrait);


Mixins Included

The mixins are inclusively hierarchical, meaning .phones() will leverage rules from .iPhones(), which will leverage rules from .iPhone4(), .iPhone5(), .iPhone6(), and .iPhone6Plus(), for example. Due to the way the rules were written, some targeting overlap will occur.

All mixins invoked with (@rules, [@orientation]):