grunt-pixrem
Generate pixel fallbacks for rem units with Grunt.
Getting Started
This plugin requires Grunt ~0.4.0
If you haven't used Grunt before, be sure to check out the Getting Started guide which explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process you may install this plugin with the command:
npm install grunt-pixrem --save-dev
After the plugin has been installed, load it in your Gruntfile with:
grunt.loadNpmTasks('grunt-pixrem');
pixrem task
Run this task with the grunt pixrem
command.
Grunt-pixrem is a CSS post-processor that generates CSS with pixel fallbacks or replacements for rem units. Check the browser data: if you want to use rem units and support < IE9, Opera Mini, or older Opera Mobile, this post-processor is for you.
For the node library, see node-pixrem.
Options
rootvalue
Type: String
Default: 16px
The root element font size. Can be px, rem, em, percent, or unitless pixel value.
replace
Type: Boolean
Default: false
Replace rules containing rems instead of adding fallbacks. Useful if you are generating a no-rem only stylesheet.
Usage examples
Add fallbacks with a root em value of 1.75em
grunt.initConfig({
pixrem: {
options: {
rootvalue: '1.75em'
},
dist: {
src: 'app/css/main.css',
dest: 'dist/main.css'
}
});
Create an IE8 / no-rem-support only stylesheet
grunt.initConfig({
pixrem: {
options: {
rootvalue: '85%',
replace: true
},
dist: {
src: 'app/css/main.css',
dest: 'dist/main.css'
}
});
Contribute
Report bugs and feature proposals in the Github issue tracker. Run tests with Grunt. In lieu of a formal styleguide, take care to maintain the existing coding style.
Release History
0.1.1, Dec 15, 2013: Copy improvements.
0.1.0, Dec 15, 2013: Initial release.
License
MIT