grunt-less-rwd

Getting Started

This plugin requires Grunt ~0.4.5

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it 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 this command:

npm install grunt-less-rwd --save-dev

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

grunt.loadNpmTasks('grunt-less-rwd');

The "less" task

Overview

Is based on grunt-contrib-less -> https://www.npmjs.com/package/grunt-contrib-less
In your project's Gruntfile, add a section named less to the data object passed into grunt.initConfig().

grunt.initConfig({
    less: {
        options: {
            ...
        },
        files: [...],
        breakpointList: [960, 768, 320],
        breakpoint: {
            960: ['(min-width: 960px)'],
            768: ['(min-width: 768px) and (max-width: 959px)', true],
            320: ['(max-width: 767px)', true]
        }
    },
});

less
    |-global
        |- ......320.less
        |- ......768.less
        |- ......960.less
    |-home.page
        |-home.page.320.less
        |-home.page.768.less
        |-home.page.960.less

Less files do not contain @media rules. They add up at the stage of building the CSS file. If @import rules are contained in a given less file, they are not included in the @media rules.

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.