hansoninc/grunt-stripmq

Generate a fallback from your mobile-first stylesheet

grunt-stripmq

Mobile-first CSS Fallback

grunt-stripmq is a Grunt task to generate a fallback version of your fancy mobile first stylesheet. Since IE8 and lower dont support media queries, you can use a javascript library like respond.js to enable this, or generate a fallback version on build-time with this task.

Here's the workflow:

1. Write Mobile-first CSS
2. Generate Desktop Fallback for IE < 9 with grunt-stripmq
3. Old IE Users see the desktop version of your mobile-first website
4. Profit!

Getting Started

This plugin requires Grunt ~0.4.0, and is available on npmjs.org

npm install grunt-stripmq --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-stripmq');

The "stripmq" task

Overview

In your project's Gruntfile, add a section named stripmq to the data object passed into grunt.initConfig().

grunt.initConfig({

    stripmq: {
        //Viewport options
        options: {
            width: 1000,
            type: 'screen'
        },
        all: {
            files: {
                //follows the pattern 'destination': ['source']
                'css/app-old-ie.css': ['css/app.css']
            }
        }
    }
});

Demo

app.css:

Some mobile-first CSS that manipulates the background based on the viewport's width.

body {
    background: url('mobile-background.png');
    margin: 100px;
}

/* Change the background for tablets */
@media screen and (min-width: 640px) {
    body {
        background: url('tablet-background.png');
        margin: 120px;
    }
}

/* Change the background again for desktop and increase the font-size */
@media (min-width: 900px) {
    body {
        background: url('desktop-background.png');
        font-size: 120%;
    }
}

/* If it's a monochrome screen, show a black background */
@media (monochrome) {
    body {
        background: black;
    }
}

app-old-ie.css (generated by grunt-stripmq)

Note how the media queries were removed. The monochrome media query did not match the default options that were passed in, and were therefore discarded.

body {
    margin: 120px;
    background: url(desktop-background.png);
    font-size: 120%;
}

index.html

In your index.html, add in conditional comments to serve app-old-ie.css to old IE browsers, and your mobile-first styles to modern browsers that support media queries.

<!--[if lt IE 9]><link rel="stylesheet" href="app-old-ie.css"><![endif]-->
<!--[if gt IE 8]><!--><link rel="stylesheet" href="app.css"><!--<![endif]-->

How it works

Here's what the stripmq task does under the hood:

• It parses your source.css files and copies over all default CSS rules to the destination.css file
• When it encounters a media query, it parses the media query using css-mediaquery
• It compares the parsed media query to the JavaScript object that you pass into options (more on this below)
  • If the comparison passes, it unwraps all the rules from the media query and adds them to destination.css file in the same place
  • If the comparison fails, it ignores all the rules within the media query
• Cleans the CSS with clean-css, by merging selectors and properties.
• It outputs the destination.css file.

Options

The options object is used to specify a "viewport" that you want your old IE users to see. The media queries in your mobile-first stylesheet will be compared against the properties of the options object.

The options follows the W3C Recommendations for CSS3 Media Queries and CSS3 Values and Units. It supports all of the Media Features and will properly convert values to a common unit before comparing them.

options.type

Type: String Default value: "screen"

options.width

Type: Integer Default value: 1024

If you pass in a number, the unit is assumed to be px. The following units are also supported: em, rem, cm, mm, in, pt, and pc.

options['device-width']

Type: Integer Default value: Defaults to options.width if provided, 1024 otherwise

options.height

Type: Integer Default value: 768

options['device-height']

Type: Integer Default value: Defaults to options.height if provided, 768 otherwise

options.resolution

Type: String Default value: "1dppx"

This property also supports other resolution units.

options.orientation

Type: String Default value: "landscape"

options['aspect-ratio']

Type: String Default value: Defaults to options.width/options.height if both are provided, 1024/768 otherwise.

options['color']

Type: Integer Default value: 3

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.