Skip to content

A Chrome extension to overlay a design grid on your web page; configurable to fit many design scenarios.

License

Notifications You must be signed in to change notification settings

rubenamorim/Design-Grid-Overlay

 
 

Repository files navigation

Design Grid Overlay

A Chrome extension to overlay a design grid on your web page; configurable to fit many design scenarios.

Installation

The Design Grid Overlay is available the Chrome Web store.

Or install via Git if you wish to contribute.

  • Clone the git repository to your local machine or download the zip file ZIP and unzip the folder.
  • After the folder is on your desktop, open Chrome.
  • Once Chrome is open, click the hamburger menu on the far right go to More tools, then click Extensions.
  • Once there, be sure the "Developer mode" box is checked and then at the top click "Load unpacked extension".
  • Once clicked navagiate to the grid plugin folder on your computer and press select.
  • Once selected the plugin should appear at the top of your chrome browser.
  • Click the extension image to activate it or use Mac - command+shift+A, Windows - Ctrl+Shift+A to activate the extension.
  • Use Command + Shift + K to toggle Vertical Grid Overlay
  • Use Command + Shift + H to toggle Horizontal Grid Overlay
  • Hold Shift Key to go up/down 10px for all input fields in setting tab

Creators & Contributors

  • Anthony Topper
  • Chris Norman
  • James Skorupski
  • Aaron Kleinsteiber
  • Mikhail Panichev
  • An-Ni Wang

Props to Carl Henderson whose Chrome Bootstrap project was the original source, which we forked from.

Contribute

Contribution Guidelines

About

A Chrome extension to overlay a design grid on your web page; configurable to fit many design scenarios.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 79.1%
  • HTML 11.2%
  • CSS 9.7%