11–20 of 31 posts
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...
Although I agree with the article, the reality is that CSS frameworks continue to dominate web design. These frameworks do not make use of CSS Grid even though CSS Grid has excellent modern browser support. 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 w…
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."
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.
Earlier quoted context omitted.
I think the idea is not that the design is without a grid, but more on how it handles being resized. The video in the article does a good job of explaining it.
The principles of a grid-based design are still adhered to though. This isn't "gridless" in any real sense (other than maybe its handling in CSS?) from a design perspective. Maybe a better term is "adaptive grid" or something similar, which would make more sense in the design for something in a shifting and dynamic medium.
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.
The people I see the most who want to break the grid are the people it's supposed to be helping: designers, not developers. 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 wh…
The people I see the most who want to break the grid are the people it's supposed to be helping: designers, not developers. 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 wh…
Clearly communicated and well structured designs are golden. I don't mind breaking old rules as long as the new rules are clear and actually work.
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.