This bookmarklet, once activated, overlays a customisable grid onto the current page. This can be very useful for web designers trying to line up content, or typographers trying to create vertical rhythm. It also has the option of gutters, for more complex grid layouts.
Visit the project page, then drag the bookmarklet into your bookmarks toolbar. Once you have done this, the main bookmarklet code is pulled down from GitHub each time you use it, so it's kept up to date automatically.
Click the bookmarklet and wait a few seconds for it to load. The HUD can be dragged around the page into a convenient location. To change a parameter, type the new value into the text box, then click/tab to another text box to update the grid. Click on the section heading to expand/contract that section of the bookmarklet. Expand the settings section and click the 'Set default for page' button to make your current settings the default every time you use the bookmarklet on that page. Each page gets its own default. Defaults are stored with HTML5 localStorage and can be cleared with the 'Clear default for page' button.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent