How To Add Custom Gridlines To Any Website In Chrome
Apple might be falling apart in terms of both hardware and software design but at its peak, it taught us how good something looks if it’s properly aligned. The point is, when things line up perfectly they look better and this hold true for industrial design and web design. Website designs are usually created in Photoshop but that’s not to say designers and developers don’t tinker with the look of a website in their browser. It’s pretty easy to tinker with; all you have to do is open the web development console that all major web browsers have and add padding, change text color, etc. One thing all these consoles lackĀ is an alignment tool. If Chrome is your preferred browser for development, Baseliner is an extension you have to try out. It adds a series of horizontal lines to your screen. You have complete freedom to define the spacing between these lines as well as their color. Additionally, the tool lets you add custom padding to the top of a page before the gridlines.
Install Baseliner and click the B button it adds next to the address bar. A menu will open with options for customizing your grid.
By default, the top padding is set to 0px, the spacing between lines is set to 12px, and the lines are grey colored with opacity set to 100%. To change either one of these values, click inside the box next to them.
The color box gives you a standard color picker to change the color of the grid lines. The spacing, padding, and opacity values can be changed by entering a custom number for each parameter. You can alternatively use the up/down arrows to increase or decrease the value. Once you’ve customzied the grid, click ‘Apply’ at the bottom.
The girdlines are added only to the current page and not to all pages you have open in your browser. To remove the lines once you’re done, simply click the B button again and click the ‘Remove’ button at the bottom.
Baseliner works flawlessly. The color control for the grid and the padding at the top just make the extension all the more intelligent. We only wish it supported vertical lines as well.
Install Baseliner From The Chrome Web Store
