This weekend I have been thinking a lot about what goes into creating solid front-end code. A lot of that is creating a nice translation of the design into a responsive format. Understanding that underlying system is critical to being able to quickly articulate different ideas in a consistent and scalable way.
One of those critical things you must understand at a deep level is the concept of the box model.
On the web, with few exceptions, everything is a box. Once you accept that fact, and understand what parameters drive the creation of this box, you will understand how to create just about anything.
Even grid systems. In float based grids (the ones that have been around for a few years) and the newer flexbox based ones, you are still dealing with boxes. Every once in a while something goes wrong.
Maybe you mistyped a keyword. Maybe you forgot to import a sass file (my mistake today). Or maybe you did something even crazier like leave off a quote or > — this sounds like it is no big deal, but I assure you it can wreak havoc on front-end code.
Here is the problem. You have set up the grid and you think everything should look some certain way. But the problem is that it does not look how you expect.
Here is an example from and in progress build on Marcus’ new website:
In that bottom module I was trying to get the flexbox alignment in ZURB Foundation to center the left column vertically. This is something that is difficult to deal with before flexbox, but flexbox makes it a simple affair. ZURB Foundation takes that one step farther by making it a single class you can add to your grid elements.
Sometimes it is just a good idea to get an overview of how things are being constructed on screen. Sure you can inspect objects and move your mouse around to inspect a specific object, but this doesn’t give you that nice 10,000 foot view.
What I do is just to just add a border to every element. I try to just use a single color like black, blue or red. Something that will stand out against the design.
* { border: solid 1px #000; }
When you add the following CSS above to your page (ideally in your Sass build) you will get output that looks like the following example.
Now if you understand the box model and also understand how grids are created you can quickly understand the entire structure of this document.
Sometimes if you have made a structural mistake, this will make it very obvious what went wrong.
So the next time you are not sure why things are not flowing the way you expect, use this quick tip to see if you can quickly identify the problem in your front-end code.
