js-responsive

Tool for responsive styling and responsive javascript coding.


Keywords
front-end, framework, responsive, javascript, css, js, less, sass, web
License
GPL-2.0
Install
bower install js-responsive

Documentation

JS.Responsive

JS.Responsive is a tool for responsive styling and javascript coding. It generates many usefull class names to HTML element which can be used in styling. It is the replacement of media queries. In compare to media queries, you can use same tests in javascript and thus improve responsivness of your website.

Installation

npm

npm install js-responsive

or download release from github page

!!! CAUTION !!! Be careful to download directly source files, may consist of NOT-READY version (release candidade, etc..), risky for production environment! Do download published releases instead ;)

Include lib into HEAD element in your document:

<script type="text/javascript" src="path/to/scripts/JS.Responsive.js"></script>
JS.Responsive.init();

Or include it as UMD component

import JSResponsive from ('JS.Responsive');
JSResponsive.init();
var JSResponsive = require('JS.Responsive');
JSResponsive.init();

You can init modules individually refer to documentation

For proper functionality use:

<meta name="viewport" content="width=device-width" />

Documentation

Please visit dokumentation webpage

Building procedure

git clone https://github.com/seyd/JS.Responsive.git
  • run npm command to download dependencies
npm install
  • to build default (JS.Responsive.js) and full build (JS.Responsive.full.js = all features included)
npm run build
  • to build your custom build edit JSON config file in server/customBuild.json
["isScrolling", "detectTouch"]
  • each string represent name of a feature, full list of available features is in server/featuresList.json
  • when customBuild.json is ready run custom build command
npm run custom
  • build will finish with statement in console
Custom build DONE!
  • built files are in tmp/latest/custom$$$ directory (JS.Responsive.custom.js, JS.Responsive.custom.min.js, etc..)