In my first post about The Intro to 8-Point Grid System I laid out the key reasons to convert your workflow. This is a deep dive into some of the tricky questions I’ve had to answer while moving our design system at Pivotal Cloud Foundry towards the 8pt system.
How do I count borders in the 8pt grid system?
This question will come up with a wide variety of UI elements but let’s use buttons as an example. You’ve got an auto width button meaning the content determines its width and you’ve decided to add an 8px padding on the left and right of it. Your current brand style calls for an outlined button. How do you count the border?
There are a two approaches to borders in the 8pt system. Subtract 1px from the padding (now 7px) to allow the 1px border to create a left and right space of 8px exactly. Alternatively, you keep the 8px padding on the left and right and allow the 1px border to add itself to the width. Or the third option, don’t use borders. You can use a small drop shadow which isn’t technically counted space or push for a solid background button to avoid the issue altogether.
The debate here is how this will affect your horizontal rhythm between elements. For this example we have laid this out with an inside border of 1px in Sketch.
The 8pt visual purist would argue that the grid should be followed down to the pixel and push for the first option. A single talented developer can easily reason through this and deliver it. However, this breaks down for distributed teams of designers and developers. Having to keep this little key in the back of your mind is bound to create mistakes and detract from the value of having a consistent spatial measurement system. The question comes down to respecting the design file or respecting the code.
While transforming Pivotal UI to the 8pt grid I’ve been asked many questions from our internal teams when measurements are not units of 8. This kind of subtract 1px logic would only complicate our workflow and create confusion for engineers and designers. We are moving forward with the second option of allowing the 1px border to hold space outside of the 8px internal padding.
“The value isn’t just in presentation, it’s also in implementation”
How are borders measured in design tools versus a web browser?
Sketch/Illustrator/Figma/Xd/Photoshop don’t count borders the same way a web browser does. Design tools lay borders on the inside or outside of a shape, which doesn’t count toward the shape’s size.
The example above depicts how two same-sized boxes with different border directions are still measured by the bounding box of the rectangle itself. A web browser measures borders as solid space on the page. There are two different ways a web browser can apply borders via the box-sizing property:
- The border-box declaration brings the border onto the inside of a defined height and width but pushes against internal content.
- The content-box declaration pushes the padding and the border to be counted outside of a defined height and width.
If you’re interested you can read more about the history of box-sizing here or check out my Codepen example here. Both of the boxes below have the same base styling but differ in their box-sizing property and their relative space on the page changes accordingly.
All of this is to say, have a conversation with your engineers. Know where your source of truth lives whether it’s in your high-fidelity design files or the code.
“My mockups in sketch are generally off by a few pixels from the code and that’s okay. The code is the source of truth.”
– Paul Farino, Pivotal Labs
Not all layouts work in an 8pt system. Android does but isn’t iOS better suited for units of 5?
Not exactly. You can set the margins/paddings to units of 8 and let the content flex. Mobile UIs have to be somewhat responsive to accommodate the variety of screen sizes available today. This means that there is no fixed grid number perfect for all mobile screen layouts.
Apple doesn’t follow an 8pt grid for desktop or mobile app layouts. Why should I?
While it is true that Apple’s HIG does not follow an 8pt system, or mention much in the way of a spatial design system, it’s still possible. Google Material is the best large-scale example of an opinionated grid system, but I’ve found they shy away from explaining some of their reasoning.
The 8pt system is a way of thinking that allows teams to move quickly and efficiently. You’ll ultimately have to make the decision about what’s right for your team, product, platform, and audience.
Questions?
This is still an exploration for me. Please reach out if you’ve got some different ideas or approaches!
Change is the only constant, so individuals, institutions, and businesses must be Built to Adapt. At Pivotal, we believe change should be expected, embraced and incorporated continuously through development and innovation, because good software is never finished.
8-Point Grid: Borders and Layouts was originally published in Built to Adapt on Medium, where people are continuing the conversation by highlighting and responding to this story.
