Winning the war on element alignment
As a Creative Developer, you are often building designs you got from a designer colleague. When adding a new element, you might struggle to get their size, margins, padding, positioning, spacing and all that, pixel perfect. However, there is no ideal tool to get these measurements. This can be frustrating and could result in designers breathing down your neck to see whether you’re building the design as they imagined.
The struggle
For easy tasks, the browser’s built-in element inspector allows you to measure the size of the element. But what about their alignment? Tools like Zeplin and Sketch have this functionality, but sadly enough cannot not be used in a browser.
Here, at Label A, we used macOS’s famous ⌘ + ⇪ + 4. This tool allows you to draw a rectangle across the screen (intentionally for cropping screenshots) while being shown the dimensions. The problem here is that it’s not pixel-perfect, especially not on a retina display. It makes it hard to align the rectangle exactly to the elements. Also, it doesn’t allow you to view margin, padding, font-size, colors and so on. For that, you’d have to inspect the element and look it up in the CSS. Time for something better.
Exploring the internet
Since also I’m working as a Creative Developer, I started looking for a tool that combines the best of all these functions. Throughout my research for the perfect tool, I came across a Chrome Extension called “Page Ruler”. After testing it for about a week, I found there was a lot (read: too much) to improve on. For example, when measuring distances between objects, you’d have to draw a rectangle yourself. Aligning that to an element is hard, just like the screenshot tool from Mac OS. After trying out a few others, I knew exactly what I desired in a tool. It was just a pity that it didn’t exist yet…
But then I realized, I work at Label A!
The Label A way of problem-solving
At Label A, we have a habit of making things ourselves. We have our own library with NPM packages, our own boilerplate for React, our own deploy-script, and many more projects that make our lives so much easier. Label A gives its employees room to come up with such ideas. With that in mind, I pitched my idea to my colleagues. They loved it, so I started working.
First, I figured out how to make a Chrome Extension and found out that it’s quite simple. Then I came up with some necessary features similar to those of Sketch and Zeplin. The most important feature: select an element, hover over another, and voila, the exact distance between them is shown.
The development process started out simple. I first added rulers on the top and left side of the website. Then I started adding the rest: guides, element selection, and distance measurement between elements.
At that point, the element-distance functionality was already included. Also, I implemented guides that you can use to check element alignment.
After finishing the first version, I collected feedback from my colleagues. Their initial reaction was positive, but they missed a couple of features. They wanted to inspect fonts, colors, spacing, background-images and more. Having taken this feedback into account, I added a magic panel in which their needs would be fulfilled.
3… 2… 1… Lift off!
Then the exciting moment: publishing it to the Chrome Webstore and relieving everyone from layout-stress. And that all for free.
At this moment — a few months later — there are over 350 users world-wide. About 30 of them use the tool on a daily basis. In addition, it’s being used by more than 50% of the employees in our company.
Check it out here, and if you like it (which you will 😉), please let me know what you think. If there’s anything I can improve or if you want to contribute, the project is open source and available via GitHub. Only together we can make this everyone’s favorite tool!
Feeling intrigued about what we work on during our time at the office? Check out our website and feel free to come by for a cup of coffee! And, if you want to become part of the front-end team, apply here or check out our other vacancies!
