grunt-less-rwd v0.7.9

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.