Skip to content

romain-preston/responsive-components

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

46 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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"

Release History

  • 1.0.0 Initial release
  • 1.0.1 Cleanup debugging functions
  • 1.0.2 Proper module exports
  • 1.0.3 Fix function naming and namespace in less
  • 1.0.4 Add dependencies in package
  • 1.0.5 Add media for platform
  • 1.0.6 Now accepts path and defaults to components.config.json

About

Organised responsive components system in less for node.

Resources

Stars

Watchers

Forks

Packages

No packages published