Generate pixel fallbacks for rem units with Grunt.
JavaScript CSS
Permalink
Failed to load latest commit information.
tasks Fix file handling, add file concatination handling Dec 15, 2013
test/css Add task to gruntfile to prep for tests Dec 15, 2013
.editorconfig Initial commit Dec 15, 2013
.gitattributes
.gitignore Add task to gruntfile to prep for tests Dec 15, 2013
.jshintrc Initial commit Dec 15, 2013
Gruntfile.js Add task to gruntfile to prep for tests Dec 15, 2013
LICENSE YOLO 80% of the plugin Dec 15, 2013
README.md
package.json Bump node-pixrem dependency, bump package to 0.1.2 Mar 7, 2014

README.md

grunt-pixrem

Generate pixel fallbacks for rem units with Grunt.

Semi-deprecated

I'm not working on any ie8 projects anymore, so have no reason to use this code.If you find this code useful feel free to ping me and I'll hand the repo over to you.

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

Bitdeli Badge