One thing every CSS framework got wrong
Even yours.
We designers, we love to discuss things like safe zone around logos, vertical rhythm and we all love typography. We can get obsessed about that one letter, that is just 1 pt too far which creates an optical gap.
We like to talk about the space — empty space, negative space, optical space, spacing (for the change). A lot. These are the kind of things we like to geek about.
We use space around object, to create visual hierarchy. Hierarchy lets our designs speak and forms understanding of values. It is our tool.
Space around objects also creates relations. Using less space between objects, forms a group. A group keeps its distance from others by using more space.
Understanding this power of rules of graphics and optics will make you a better UX designer, when e.g. wrong visual spacing of multiple radio buttons and labels could otherwise cause user selecting the wrong pricing option (unintended action > error > frustration).
How much work is needed to make an item fall out of the group?
Well, it turns out not that much. All you need is to break the rhythm somehow:
One needs not to be a designer to feel the (un)grouping effect caused by sudden inconsistency. It’s used it often (and) on purpose — it makes object to stand out.
Sometimes when there’s a need to group objects within groups a visible container is created around them. But the space around objects that was introduced before is always respected:
Unintended (un)grouping of CSS
Dear CSS frameworks, it’s not your fault, blame margins. That invisible space surrounding the object that is intended as minimum distance from other objects.
When two objects meet, the higher margin value is respected. Well, that’s at least how it works for vertical margins:
If margins overlap it’s mostly referred to as margins collapse.
You could expect horizontal margins to receive same kind of behaviour, but they don’t. Horizontal margins never collapse.
Vertical margin collapsing is by many CSS newbies considered a browser bug at first. I was guilty of thinking it too.
Vertical margins do collapse, but you need to either float element, add overflow other than ‘visible’ to parent element, display element as as inline-block, clear element, add border or padding on parent container to name a few.
But let’s focus on the border and padding, these are the ones that change optical aspects of spacing.
Whenever you add border or padding on parent element (container), margins will separate. Creating a visual border/division thus creates a new visual hierarchy. And vice-versa — if you intend to create new visual hierarchy, either by dividing flow with borders or containers, respect the original spacing.
And this totally works in CSS for vertical margins as expected, sadly that’s not case for the horizontal margins.
That’s why most CSS grids use halves of margins (or other techniques) to create spacing for columns.
I feel that most of us forgot why the halves were introduced at first. This feature creeps at us across the CSS framework ecosystem. It’s copied for other components, even though grid is just a specific example how to solve layout. And this is where it gets, simply said, just ugly, and mostly unnoticed.
Tabs and navs — I’m talking about you
Let’s take a look at major CSS frameworks with most user adoption, and how they handle space between tabs. (Just to be clear, I’m not talking about CSS margin values, I’m talking about the amount of visual distance/optical space between the tabs.)
As you can see, every tab (navigation item) in both Zurb and Bootstrap suffers from the double margin issue.
Few ways to overcome the margin doubling:
- add border/divider between the tabs;
- use underline on the bottom to set active state as Material Design does;
- change only the inner text of active tab to create an active state.
Here are few examples of how tabs could look when margins/space around objects are respected:
Without overlapping or container having border, the layout with one active tab and other without container visible, forces other tabs to have layout like border is present (but invisible) awaiting event (:hover or click), that would reveal its tab border/background. That is technically correct, but visual/optical spacing is incorrect.
Adoption and user base of these major CSS frameworks is vast. They serve as example to follow and to study. Most features are therefore copied and that’s how the ugly is implemented repeatedly across the internet. I’m sure it’s unintended. I’m pretty sure it’s not lack of technical skills, maybe it’s trade-off, solution, that serves the purpose well. Very well indeed.
Why all this trouble
This is a tiny detail, indeed. Tabs is used here as an example to describe the problem. It might be other component, that might be well intended, but wrongly implemented.
Each of these CSS frameworks is widely used and is created under some assumptions about the implementation. And as you might have experienced, all assumptions are mostly wrong.
Don’t assume anything.
So maybe, if you are implementing your next project, think of a better implementation that will lead to better experience for your users and business performance for you or your clients.
Any heart bellow this article will be much appreciated.
Thanks for reading.
