Naivete Precedes Misrepresentation

    grunt-stripmq

    0.0.6 • Public • Published

    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 destionation.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.

    Install

    npm i grunt-stripmq

    DownloadsWeekly Downloads

    450

    Version

    0.0.6

    License

    none

    Last publish

    Collaborators

    • jtangelder