Alignr is a customizable grid-overlay jQuery plugin for front-end developers.
See it in action
Download
Alignr has 6 parameters:
alignr(cols, col_width, col_margin, alignment, autohide, toggle);
cols The number of grid columns to display.Acceptable values: a number.
col_width The width of the grid columns.Acceptable values: a number.
col_margin The margins on the grid columns.Acceptable values: a number.
alignment Align the grid on the page.Acceptable values: 'left' or 'center'.
autohide Hide Alignr by default.Acceptable values: true or false.
toggle Display a button to toggle Aligner.Acceptable values: true or false.
You will need to embed both alignr.js and jQuery in your html file. The recommended implementation is to use the alignr.js file hosted on my server at alignr.jorgen.co/min.js. Here is a basic example of that implementation, with Aligner set up to a 12 column 960 grid.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://alignr.jorgen.co/full.js"></script>
<script>
$(function(){
alignr(9, 65, 20, 'left', true, false);
});
</script>
</head>
<body>
</body>
</html>
Alternatively, you can download alignr.js at the top of the page and embed it locally, like so:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="script/alignr.js"></script>
<script>
$(function(){
alignr(9, 65, 20, 'left', true, false);
});
</script>
</head>
<body>
</body>
</html>