/webpage-alignment-grid

A JavaScript bookmarklet to help you align elements when developing a webpage.

Primary LanguageJavaScriptMIT LicenseMIT

Webpage Alignment Grid

This is a simple bookmarklet that puts overlays over a web page to help with alignment during development.

There are three modes available. A 10 pixel grid, a 20 pixel grid, and a 4 column overlay.

Usage

GitHub Hosting
By default, all the links and references are pointed to the files hosted here on GitHub. Simply paste the contents of bookmarklet.txt into a new bookmark in your favorites bar or wherever, (my feelings will not be hurt). Changes made to functionality will be reflected automatically as you use it.

Self-Hosting
If you want to host this yourself, upload the javascript, css, and images to your server, changing the github URLs to your domain.

Paste the contents of bookmarklet.txt into a bookmark in your web browser of choice. Again, make sure to change the reference to GitHub to correctly point to your server.

Clicking the bookmarket will create a box with three options. Selecting one of the options will overlay the appropriate grid or column image.

One day I would like to improve this to make the options a bit more flexible, and I need to style the control box so it looks better.

To get rid of the overlay, you can click the bookmarklet a second time or refresh the page.