klei-rework-plugins
rework-calc and rework-breakpoints!
DEPRECATED! This repository is deprecated in favor ofA collection of plugins for the CSS Preprocessor rework.
Installation
npm install klei-rework-plugins
Usage
An example of how to use klei-rework-plugins
:
var rework = plugins = ; var css = ;
For available plugins see plugins section below.
Plugins
.calc()
Add calculations support. A feature to do simple calculations, and can be particularly useful together with the rework core .vars() plugin.
When multiple units are mixed together in the same expression, the calc() statement is left as is, to fallback to the CSS3 Calc feature.
Example (with .vars() enabled as well):
yields:
.breakpoints()
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>
, where:
<name>
- is the name for the breakpoint (to use in your media query)<type>
- values:min
ormax
<point>
- the actual breakpoint value in pixels (px)
Example 1 - max breakpoint:
{ /* all your mobile device styles goes here */}
yields:
{ /* styles... */}
Example 2 - min breakpoint:
{ /* all your desktop styles goes here */}
yields:
{ /* styles... */}
Example 2 - multiple breakpoints:
{ /* 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 */}
You get the point...
Unit tests
Make sure the dev-dependencies are installed, and then run:
npm test
Contributing
klei-rework-plugins
uses the Git Flow branching model so make your pull requests to the develop
branch.
License
MIT