Yesterday I spoke about why the box model is fundamentally important in modern front-end code. I got some great responses and in general, most people seem to be confused about this.
This does not surprise me. Over the past few years I have done workshops around the bay area and I have noticed the same thing.
There are two types of people
1) The people that know the box model well and have no trouble creating about visual design on the front-end with CSS.
2) Those that do not understand or are confused or misinformed about the box model. Which is so sad.
And what is crazy about that is, most people I have talked to think they know CSS well. They say stuff like, “Oh yeah, I totally know CSS.” They have, no doubt, spent a ton of time learning all these different parameters, ways to change things around. But somewhere along the way, they never got a good introduction to the fundamentals.
In my workshops, even though sometimes it can make students cry (ok, no one has cried yet, but they often complain that it isn’t as fun as the new hotness), I have always made sure that everyone understands the box model well. I have ran into several students at events later on and they have told me how important that workshop was to their growth as a developer.
There are a few basic things you need to know:
**Understanding the basic structure of it. [the box model]
Being able to see patterns in the wild and mimic them using simple CSS settings.
This means understanding how the box model manifests in large frameworks like ZURB Foundation and Bootstrap or pretty much any other modern website or app.**
I thought, surely there has to be someone giving a great demo on YouTube. Yesterday I watched the top 10 most popular videos that talked about the box model.
I can sum up the content of all of these videos in just a few lines:
1) showing the computed box model in the inspector, but not showing how it works. 2) showing a live example of a box model, but in all cases just some weird colored box that resembles nothing useful. 3) going on a tangent about shadows and changing how the box is calculated (which can confuse and is an edge case). 4) giving you a bunch of information, but at the end you end up with pretty much nothing practical.
So, why tell you all of this? Well, I am hoping to set things straight.
And not just about the box model either. 🙂
My latest project is a course titled Responsive Design Translation and the 1st of 6 modules deals with, you could probably guess it, covers the box model in depth.
Here is a quick listing from my rough outline for the course (keep in mind this is subject to change):
MODULE 1: The Box Model Aha Moment
- My Box Model Aha Moment – why this is so important
- What are the moving parts?
- Using the Chrome Inspector to better understand the Box Model
- Reverse Engineering ZURB Foundation
- How is padding used? hint for spacing inside of elements.
- How is margin used? hint for spacing between elements.
- All about borders
- Build a simple button
- Thinking about state
- Colors and the box model: bg vs. color vs. border vs. shadow
- Creating circles
- Border radius
- Rounded Button Group example – nth-child vs. nth-last-child
- Hack: Creating Triangles
- Spacing for typography
- Bonus – Don’t set height – pretty much ever
- Bonus – How to round off spacing errors
- Border Radius
- Example: Colored Sections
- Example: Spacing
Did you enjoy this post?
My name is James Stone and I am a Senior Software Developer at Futurice in Helsinki, Finland. I typically give talks and write about Design Systems (especially with React), React, TypeScript and how to become a better developer. If you would like for me to send you an email every time I publish a new article or talk, please join my email list. I also will occasiounally send out some secret list only information or offers. I expect the frequency to be about one or two times per week.