Responsive Visual Guide Plugin For jQuery - Visual Guide

This is a jQuery plugin which generates a customizable, responsive visual guide (vertical columns) for modern web/mobile layout design.

How to use it:

1. Load the latest version of jQuery library and the jQuery visual guide plugin in the html file.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="dist/visual-guide.js"></script>

2. Initialize the visual guide on document ready.

visualGuide.initialize();

3. Initialize the visual guide on document ready.

visualGuide.initialize({

/**
* Default options - Apply for all screen size if no more custom dimensions options provided
* @type {Object}
*/
default: {
  /**
   * Guide width
   * @type {String, Number} Can be a number or a css calc operation
   * @default calc(100% - 60px)
   */
  width: 'calc(100% - 60px)',

  /**
   * Guide max width
   * @type {Number}
   * @default 1600
   */
  maxWidth: 1600,

  /**
   * Guide line height
   * @type {Number}
   * @default 10000
   */
  height: 10000,

  /**
   * Guide number
   * @type {Number}
   * @default 10
   */
  number: 10,

  /**
   * Guide gutter width
   * @type {Number}
   * @default 30
   */
  gutter: 30,

  /**
   * Guide color
   * @type {String} Color hex value, rbg value, rgba value or name value
   */
  color: 'rgba(14, 194, 296, .8)',

  /**
   * Guide limite color
   * @type {String} Color hex value, rbg value, rgba value or name value
   */
  limitColor: 'rgba(6, 76, 102, .8)',

  /**
   * Provide custom wrapper
   * @type {CSS Selector}
   * @default {'body'}
   */
  wrappin: 'body'
}
});

---

This awesome jQuery plugin is developed by ravorona. For more Advanced Usages, please check the demo page or visit the official website.