DEV Community

John Peters
John Peters

Posted on • Updated on

The Chrome Page Ruler

Many Web Designers use tools other than HTML and CSS to design web sites. Those tools can create an "impedance mismatch" between the units of measure of that tool and the common CSS units of measure.

For example, you as a developer receive a set of specs, spelling out overall design point widths and heights for the site. Additionally, there are plenty of font-sizes to implement in each different section. Do you find that attempts to implement these specs. show that it doesn't all "just fit together" and you need to make "field adjustments" to get everything to look like the images your designer sent you?

Once the site is coded up and sent to a dev. server the Designer and Business users should be able to see the actual site implementation. Thus begins the tweaking iterations (which can happen frequently). Statements like slide it to the left, align it with this, up just a tad; can be improved.

Install the Chrome Page Ruler

The Chrome Page Ruler

When new code is deployed to the dev. server, the designers and buisness folks can now talk about units of adjustment.

Examples:

The letter "B" in the header image is 28px from the left, make sure all three section's text align at 28px.

The center line of text in 2nd image is 200px from the top, the text in the column next to the image should start at 200px from the top.

The main section of the page has a height of 575px, increase it to 585px.

Example of the Page Ruler

Alt Text

JWP2020

Top comments (0)