rework-breakpoints
NOTE Version v.0.5 uses min|max-width
by default. To keep old behavior see Options below. Also the mixed syntax is new (see Example 5 below).
NOTE Version v.0.6 uses screen
instead of only screen
by default. See Options below for how to keep old behavior.
Adding a nice syntax for handling media query breakpoints for different devices for the CSS Preprocessor rework.
Installation
npm install rework-breakpoints
Usage
An example of how to use rework-breakpoints
:
var rework = breakpoints = ; var css = ;
Breakpoints plugin
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: breakpoint-<name>: <type> <point>
or breakpoint-<name>: <custom syntax>
, where:
<name>
- is the name for the breakpoint (to use in your media query)<type>
- values:min
ormax
<point>
- the actual breakpoint value in px, em or rem<custom syntax>
- any breakpoint, e.g.screen and (orientation: landscape) and (max-width: 80em)
Note A breakpoint can be declared with var-breakpoint-<name>
as well, for a valid CSS syntax.
Options
Available options are:
breakpoints-device
If set the type/point syntax will generate media queries with min|max-device-width
instead of the default min|max-width
.
Set it in your CSS like so:
breakpoints-use-only
If set the type/point syntax will generate media queries with only screen
instead of the default screen
.
Set it in your CSS like so:
Examples
Example 1 - max breakpoint
{ /* all your mobile device styles goes here */}
yields:
{ /* styles... */}
breakpoints-use-only
option)
Example 2 - max breakpoint (using { /* all your mobile device styles goes here */}
yields:
{ /* styles... */}
var-
prefix)
Example 3 - min breakpoint (using { /* all your desktop styles goes here */}
yields:
{ /* styles... */}
breakpoints-device
option)
Example 4 - multiple breakpoints (using { /* all your palm device styles goes here */}{ /* all tablet styles */}{ /* styles for tablets and smaller devices */}{ /* styles for tablets and bigger screens */}{ /* styles for desktops and smaller devices */}{ /* styles for desktop and bigger screens */}{ /* styles for big screens */}
yields:
{ /* styles... */}{ /* all tablet styles */}{ /* styles for tablets and smaller devices */}{ /* styles for tablets and bigger screens */}{ /* styles for desktops and smaller devices */}{ /* styles for desktop and bigger screens */}{ /* styles for big screens */}
Example 5 - mixed breakpoints
{}
yields:
{}
You get the point...
Unit tests
Make sure the dev-dependencies are installed, and then run:
npm test
Contributing
Feel free to contribute!
License
MIT