rework-breakpoints

Adding a nice syntax for handling media query breakpoints for different devices for rework

rework-breakpoints

Adding a nice syntax for handling media query breakpoints for different devices for the CSS Preprocessor rework.

npm install rework-breakpoints

An example of how to use rework-breakpoints:

var rework = require('rework'),
    breakpoints = require('rework-breakpoints');
 
var css = rework(cssString).use(breakpoints).toString();

For available plugins see plugins section below.

Gives you a maintainable solution to handling media query breakpoints for different devices, with a syntax that's easy to remember.

A breakpoint is declared with: var-breakpoint-<name>: <type> <point>, where:

  • <name> - is the name for the breakpoint (to use in your media query)
  • <type> - values: min or max
  • <point> - the actual breakpoint value in pixels (px)

Example 1 - max breakpoint:

:root {
  var-breakpoint-mobile: max 340px;
}
 
@media mobile {
  /* all your mobile device styles goes here */
}

yields:

@media only screen and (max-device-width: 340px) {
  /* styles... */
}

Example 2 - min breakpoint:

:root {
  var-breakpoint-desk: min 1000px;
}
 
@media desk {
  /* all your desktop styles goes here */
}

yields:

@media only screen and (min-device-width: 1000px) {
  /* styles... */
}

Example 2 - multiple breakpoints:

:root {
  var-breakpoint-palm: max 340px;
  var-breakpoint-tab: max 700px;
  var-breakpoint-desk: min 1000px;
  var-breakpoint-desk-wide: min 1200px;
}
 
@media palm {
  /* all your palm device styles goes here */
}
@media tab {
  /* all tablet styles */
}
@media tab-and-down {
  /* styles for tablets and smaller devices */
}
@media tab-and-up {
  /* styles for tablets and bigger screens */
}
@media desk-and-down {
  /* styles for desktops and smaller devices */
}
@media desk-and-up {
  /* styles for desktop and bigger screens */
}
@media desk-wide {
  /* styles for big screens */
}

yields:

@media only screen and (max-device-width: 340px) {
  /* styles... */
}
@media only screen and (min-device-width: 341px) and (max-device-width: 700px) {
  /* all tablet styles */
}
@media only screen and (max-device-width: 700px) {
  /* styles for tablets and smaller devices */
}
@media only screen and (min-device-width: 341px) {
  /* styles for tablets and bigger screens */
}
@media only screen and (max-device-width: 1199px) {
  /* styles for desktops and smaller devices */
}
@media only screen and (min-device-width: 1000px) {
  /* styles for desktop and bigger screens */
}
@media only screen and (min-device-width: 1200px) {
  /* styles for big screens */
}

You get the point...

Make sure the dev-dependencies are installed, and then run:

npm test

Feel free to contribute!

MIT