Is it time to ditch the design grid?
css-irl.info
css-irl.info
The most interesting question being asked is: should we move to container-based media queries instead of viewport-based? Yes. Sometimes we should. That's why they're being added to the spec.
> One of these tricks exploits negative dimension values against some threshold
> min-width: calc((100% - var(--gap-spacing)) / var(--items));
no, no, no. Remember "top: 50%; transform: translateY(-50%);" to vertically center things before Flexbox and Grid? We're not going back to those days!
Renaming the column-gap property to --gap-spacing doesn't mean you're "not using a grid."
As for layout frameworks, I tried to learn them, but as far as I could tell they simply made bad/half assed design faster and easier. For a laughable amount of time they assumed you were building a desktop size column-based layout that was supposed to shrink, and anything different didn't work. So I never used them. It's fine if you're not hoping to produce a good design and just ship something generic, but idk if anything really good has come from them.
Got any suggestions on where to start? I could Google, but I wouldn't know if what I found was "actual" grid based graphic design. I'm not trying to be snarky, I'm sincerely interested in non-web-based graphic design resources.
I've spent years wearing both shoes. As a designer, sometimes designs felt like they were too boring when everything fit cleanly in the grid. So I would break it to please my CDs who wanted to win awards and woo a client.
When I moved into front end development... holy fuck did I ever hate it when designers would send designs with super custom sections that broke the grid. Great, more CSS that we're probably not going to re-use anywhere else.
I work with designers both internally at my company and designers from listed companies who provide us designers and so often they fall into the trap of designing something that looks great when everything is perfect (i.e. headlines are reasonable, photos are beautiful, content neatly wraps the container) and then fall short when reality hits, i.e. the photos the client wants to use is very visually unimpressive, headlines are much more lengthy than the design accounted for and can't be cut because of legal/marketing reasons, some entries don't have all fields...
Invariably it's often me who fixes their shortcomings. They are fortunate that I have a lot of design experience so I know how to improvise on the fly. But really, it shouldn't have gotten to this point, it's trivial to study the true type of content a site or app is going to use, and make the design resilient to the type of variations that are likely to occur given the type of content.
How does this relate to grid breaking? Well a lot of these same designers don't care for systems and this is just a symptom of that. Might as well throw out that style guide they gave me because they aren't even following their own rules, be it the grid they provided, the specific font sizes they use, spacing, etc.
It’s really hard to pull off fancier grid layouts on the web due to device shapes and scrolling, but the basic principle still applies: line things up, create order, don’t pick sizes willy-nilly (off topic: Willy Nilly must have been the Leroy Jenkins of his day)
1fr 1fr 1fr 1fr ... 12times or so
Many CSS frameworks will provide a default grid system like this, and many designers will think in terms of such a grid.
But the author suggests that this is too rigid. And in fact a frontend developer will then have to interpret the rigid grid to be more adaptable and have either multiple flex grids for different breakpoints or use CSS grid to express more flexible flows.
Also from the article:
> Paradoxically, where CSS Grid shines is not only in building layouts that adhere to a strict design grid, but in baking flexibility into our components.
For example, Bootstrap and Bulma - two popular frameworks - use flexbox for layout, but have yet to incorporate CSS Grid.
The difficulty of CSS layout is a frequent criticism of CSS (and fair criticism), but now we have CSS Grid to make layout much easier, few people actually use it. As mentioned, CSS Grid has been supported by modern browsers for some time.
You don't actually need a CSS framework for layout if you adopt CSS Grid. But it does entail learning CSS Grid first - rather than rely on the CSS framework you're familiar with.
> Designers will often prescribe that an element should span (for example) four out of 12 columns on a desktop screen, without the knowledge that their idea of “columns” on the web bears no relation to how the layout may actually be built.
I won’t doubt the author’s lived experience. But in mine, designers aren’t as clueless as they are presented in this quote and in many discussions here.
One thing I enjoy when working with Tailwind is the ease at which I can experiment with flexible layouts and jump into a grid, when needed for alignment and sizing. When working with more opinionated CSS frameworks, you're pretty much forced into the 12 column grid pattern -- unless you're comfortable customizing the framework.
Our company uses the 8 point grid system, and it makes everything neater and visually consistent, and it looks great across all zoom levels.
https://tanzu.vmware.com/content/built-to-adapt/intro-to-the...
I, personally, prescribe to the 1px grid system - where I write all my widths, heights and offsets in multiples of 1px. It helps keep things consistent.