CSS Tricks for Validating Layouts

As a front-end developer, I spend much of my time dealing with designs and making sure that the product design looks exactly like the Sketch file, however, this task, as trivial as it sounds, can give me a lot of headaches. But why?

Even though web design has changed a lot in the last few years, and things are getting better, there are still a lot of differences in the way each browser would render certain layouts, and this is highly aggravated when you need to consider support for IE. With enough experience the type of layout errors you generate is reduced, however, they still happen. Maybe I don’t write fully incompatible code to start with, but misalignment happens, and we need good ways to deal with them.

Dealing with padding, margins, and layout structure

The problem which arises when having a lot of moving parts in a web structure is that you can’t easily differentiate when one starts and ends because perhaps they all have the same background color, or they don’t have any borders, and these makes it hard to debug the areas where for example the text could fit, and if you are not very careful it could lead to some strange design issues particularly when we are working with different window sizes.This is a common problem when the developer makes everything look nice for his/her screen, and then when we get into another computer things end up a bit messy.

Based on my experienced I’ve seen 2 ways to identify and fix these, which I’d like to explain before I jump into what I usually do:

1. Update the style for a particular object

If you are not sure what I’m talking about, I’m referring to do something like:

<div style="background-color: red;">.......</div>

Reload the page, check what we needed, remove the code, and test another object. Not really ideal.

2. Chrome Developer Tools

An already better way to identify these type of issues is by using the Chrome Developer tools, which easily allows you to navigate with the mouse and see sizes, margins and padding of each element.

Even though sometimes I use Chrome Dev Tools, and I believe is a great tool for the job, there’s a simple CSS trick that I like to use when I need to work on my layouts:

html * {
  background: rgba(255, 0, 0, .1);
  box-shadow: 0 0 0 1px red;
}

very simple and powerful, but what is it exactly doing? Let me show you an example of my website after applying the trick:

Of course, you shouldn’t ship this code to production, but at a simple glance, it allows you to see each component and its boundaries. It is very simple and helps a lot. Feel free to use any color of your choice, and you can enable/disable this code by applying classes, though I leave that to you as it depends a lot on whether you are using a framework or not, or which framework.

Misalignment

Have you ever heard something like “The title on the left is 2px above the content on the right…"? When you have that kind of scenario usually we start adding borders to make sure all is good, but sometimes adding borders is simply not an option because of the way the website layout is built. When that happens we zoom in and validate it, and if the distance between the two groups is too long for our eyes to validate it, we take a ruler or paper and we put it on the screen to measure. Really nothing bad with that hack, I still do it, however there’s a CSS trick I learned not a long time ago that I’d like to share:

html {
  background: url("data:image/svg+xml;base64,IDxzdmcgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgPGRlZnM+CiAgICAgIDxwYXR0ZXJuIGlkPSJzbWFsbEdyaWQiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgICAgPHBhdGggZD0iTSAxMCAwIEwgMCAwIDAgMTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iZ3JheSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz4KICAgICAgPC9wYXR0ZXJuPgogICAgICA8cGF0dGVybiBpZD0iZ3JpZCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICAgIDxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJ1cmwoI3NtYWxsR3JpZCkiLz4KICAgICAgICA8cGF0aCBkPSJNIDEwMCAwIEwgMCAwIDAgMTAwIiBmaWxsPSJub25lIiBzdHJva2U9ImdyYXkiIHN0cm9rZS13aWR0aD0iMSIvPgogICAgICA8L3BhdHRlcm4+CiAgICA8L2RlZnM+CiAgICA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyaWQpIiAvPgogIDwvc3ZnPg==");
}

html body {
  opacity: 0.8;
}

You may be wondering what that background is, is a base64 representation of the following SVG:

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
   <defs>
      <pattern id="smallGrid" width="10" height="10" patternUnits="userSpaceOnUse">
        <path d="M 10 0 L 0 0 0 10" fill="none" stroke="gray" stroke-width="0.5"/>
      </pattern>
      <pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse">
        <rect width="100" height="100" fill="url(#smallGrid)"/>
        <path d="M 100 0 L 0 0 0 100" fill="none" stroke="gray" stroke-width="1"/>
      </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#grid)" />
  </svg>

And how exactly does it help us? Look at the example here:

The code is simply placing a grid as a background, so we can use the grid as a reference. Pretty neat!

Summary

Dealing with layout issues can be painful, and I still struggle with it myself on a daily basis, however, these simple tricks helped me in my day to day work. I know some people may point out that there are some extensions out there that do something similar, however, I prefer to keep my extensions to a minimum and install only those which are essential for my workflow and I really trust.

If you have any other CSS tricks which can help other developers please leave a comment, I’d love to read them.

Thanks once again for reading!

If you like the story, please don't forget to subscribe to our newsletter so we can stay connected: https://livecodestream.dev/subscribe