Dates
April 2018 – July 2018
Technology
JavaScript, HTML5, CSS, WebExtension API
App
Current on hold, but a preview will be posted later, once development resumes.
Info
This web browser extension (currently for Firefox 56+) allows users (web designers/developers) to zoom-in to a portion of the current webpage, with a pixel grid overlaid. This is to help users align text, icons, images, borders, etc while designing websites.
I started working on this extension, while working on another extension (SuperPlex), after I stopped to take a screenshot of the page to check if an icon I was using was properly aligned with the text or not (it wasn’t – it was off by 2-3 pixels). I done a quick search for other similar extensions, but couldn’t find any Web Design oriented extensions to zoom into the current web page.
When the extension launches, it displays a Toolbar with some settings (at the top of the web page) and a Magnify Lens (the area that shows the zoomed web page). Users can change these settings via the toolbar:
- Change colours of Pixel, Minor or Major grid lines
- Change the style of Pixel, Minor or Major grid lines
- Change the size of the Minor or Major grid lines
- Change the Zoom Level from which the Pixel grid lines appear
- Change the size of the Magnify Lens
- Change the Zoom Level (1x to 16x)
- Restore above settings to the Default
Users can also drag the Magnify Lens to move it around the webpage. The defaults can also be set for the above settings via the Options page of this web extension. The Options page also allows users to change the keyboard shortcuts.
