2nd Edition: Please Mind The Gap
We at Every Layout (try to imagine we have some sort of corporate identity rather than being two blokes with a neat website and a script that generates epubs) are proud to announce the release of our second edition!
And we are slashing the already low price of $69 down to just $40 to mark the occasion. Just make sure you use
2ND_COMING at checkout ASAP; we can’t keep it at that price forever.
What’s new, then?
This edition is all about the
gap property, which is now supported with Flexbox in all modern browsers.
When doing this, gutters (margins) between elements can be problematic unless handled carefully. A margin applied to one element to create a gap between it and an adjacent element becomes a misplaced margin when the element wraps:
Until now, we have solved this by applying margin to child elements symmetrically (to all sides) and using negative margin to deal with the excess.
There’s nothing wrong with using negative margins per se; it’s more a technique than a hack. But this approach does necessitate what we have come to call an intermediary wrapper…
<div> <!-- ← intermediary wrapper with negative margin -->
What this does is insulate the negative margin from the flow of the document. Then we can apply a sensible margin to the outer component itself. In fact, it’s more likely this margin would be applied by a parent Stack element, which injects margin between successive elements (Every Layout components are highly modular and composable).
Not only does the negative margin technique represent additional markup, but things start to go awry when it comes to custom properties and nesting.
Margins are applied to child elements and child elements become parent elements when nesting. In the following example,
0.5em applies to the nested component’s children as intended, but also overrides the
1em value that should be applied to itself. This isn’t what we want.
<div class="component" style="--margin: 1em">
<div class="component" style="--margin: 0.5em">
gap property, on the other hand, is defined on the parent but applied between the children. This difference is critical: there are no longer competing values for the same elements.
<div class="component" style="--gap: 1em">
<div class="component" style="--gap: 0.5em">
<!-- 0.5em gap -->
<!-- 1em gap -->
There are plenty of resources out there that will tell you what
gap is and how to apply it. In Every Layout, we explain the wider implications of these properties in relation to responsive and systematic design and help you weigh up alternatives. Not everything should use
gap just because it now exists.
Thanks for reading and for all the support!
IMO this entire industry is sleeping on Every Layout. The primitives and education it provides render so many tools and elaborate bolt-on workarounds unnecessary.*
If you find yourself wrestling with CSS layout, it’s likely you’re making decisions for browsers they should be making themselves. Through a series of simple, composable layouts, Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS.