brad_frostNov 17, 2022

✎ Layout and Grid in Design Systems: https://bradfrost.com/blog/post/layout-grid-in-design-systems/

In this post, I break down how we approach layout and grid systems in the context of design systems.

Layout & Grid in Design Systems

Simply saying the word "grid" conjures up strong and confusing feelings. Kinda like puberty! With so much history and so many different (and sometimes competing) paradigms, it's no wonder conversations around layout and grid are so fraught, confusing, and contentious. I'm long overdue to share how w

Brad Frost
Show threadbrad_frostNov 17, 2022
Most design system components are "stuff": form fields, accordions, buttons, badges. Stuff. Layout and grid components serve as boxes to put that other stuff.
Show threadbrad_frostNov 17, 2022
The `layout-container` component is an important-yet-invisible component that caps the width of an experience and controls the padding between content and the viewport edge. https://codepen.io/bradfrost/pen/mdKrJXv
Show threadbrad_frostNov 17, 2022

Design systems can include common page layouts...or not. https://codepen.io/bradfrost/pen/ExRNKRm

Including page layouts in a design system ensures the other UI components in the library work properly within these common layouts.

Show threadbrad_frostNov 17, 2022
"Grid" is a confusing sonofabitch. The “grid” the designers wield (those light pink lines superimposed over a whitespace-rich design comp) is a different beast than the “grid” that developers wield (which includes CSS Grid, Flexbox, and a slew of other modern CSS techniques).
Show threadbrad_frostNov 17, 2022
"Grid" has different — and sometimes conflicting — paradigms across disciplines, and that causes all sorts of problems.
Donnie Damato does a fantastic job explaining the challenges around grid in his brilliant website, https://gridless.design/
gridless.design

get rid of the grid!

Show threadbrad_frostNov 17, 2022
In the design systems we build with our clients, we tend to create a `grid` and `grid-item` components that provide solutions for common, repeatable layout patterns. https://codepen.io/bradfrost/pen/wvXrP
Show threadMichael Trythall 🦖
@brad_frost This link 404s for me. Working for you?
Nov 17, 2022 at 10:47pmWeb