Responsive-components NPM

responsive-components

Organised responsive components system in less for node.

Installation

  npm install responsive-components

Usage

using an configuration object

var responsive = require('responsive-components');
var config = {
    path:"Styles",
    output:"components.less",
    components : [
        "base",
        "button"
    ],
    pattern : "Views/**/Components/*/",
    platforms : {
        base:{},
        mobile:{max:"600px"},
        tablet:{min:"601px", max:"1000px"},
        tabletVertical:{min:"601px", max:"1000px",query:"orientation:vertical"},
        big:{min:"1001px"},
        print:{media:"print"}
    }
}

responsive.update(config);

using an external file

responsive.update("Styles/mycomponents.json"); // using custom path

responsive.update(); // will try to find "components.config.json" in the current directory

Configuration

Config Reference

Name	Required	Type	Description	Default	Example
path	false	string	the relative path.	Styles	"Styles"
output	false	string	the final output file name.	components.less	"output.less"
components	true	string[]	the list of component names.		"base", "button"
pattern	true	string	folder pattern to discover components		"Views/*/Components//"
platforms	true	{key:string, platform:object}	the list of platforms as described bellow.		{ base:{}, tablet:{min:"601px", max:"1000px"}}

Platform Reference

The platform object supports the following attributes :

Name	Type	Description	Example
min	string	the minimum width	"700px"
max	string	the maximum width	"1024px"
orientation	string	the platform orientation	"vertical"
query	string	additional query	"-webkit-min-device-pixel-ratio:2"
media	string	the platform's media. Defaults to "screen".	"print"