S6 Studio

 

glines.js

Simple plain-javascript tool for easy markup testing with guidlines

You don't need jQuery to use glines.js.

glines.js is mostly browser console utility, so all following methods will work in console.

To get fast API-help just type glines.help() in browser console after glines.js was included.

Example 1

Add vertical guidline

		$('#example-1').click(function(event){
			event.preventDefault();
			glines.addLine();
		});

You can move guidlines with mouse.
 

Example 2

Add horizontal red one-pixel guidline

		$('#example-2').click(function(event){
			event.preventDefault();
			glines.addLine('h', {color: '#f00', size: '1px'});
		});

Single click on line makes it active, so you also can move it using keyboard arrows.
 

Example 3

Remove all guidlines

		$('#example-3').click(function(event){
			event.preventDefault();
			glines.removeAll();
		});

If you want to remove one line, use double click.
 

 

How to include

If you want permanently include glines.js to your site (for example on your dev server), use standart code inside <head></head> tag:

<head>
	
</head>

You can change script path, just download source code.

If you want one-time including, there are two ways to get glines.js with browser console (type F12 to open):

jQuery way

If you have jQuery on your site, type following code to browser console:

$.getScript('http://s6-studio.ru/glines.js');

And then start using glines.js methods.

Plain Javascript way

A bit more code to browser console:

var s = document.createElement('script'); 
s.src = 'http://s6-studio.ru/glines.js';
document.body.appendChild(s);