[HN Gopher] Is it time to ditch the design grid?
___________________________________________________________________
Is it time to ditch the design grid?
Author : Hell_World
Score : 43 points
Date : 2021-08-08 17:52 UTC (1 days ago)
(HTM) web link (css-irl.info)
(TXT) w3m dump (css-irl.info)
| neovive wrote:
| I agree that it's great to break out of the rigid 12 column grid,
| but for most devs -- without formal design training -- a basic
| grid helps with sizing, spacing and alignment.
|
| 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.
| jdowner wrote:
| Weeee! Back around again...
| jjoonathan wrote:
| Let's make a new HTML element for this. Let's call it... table,
| because the grid is like a table on which you draw things. This
| is gonna be legendary!
| munk-a wrote:
| I've got some rounded corner jpegs in my other coat in case
| you need them to affix at the intersection of two border
| images. Modern web here we come!
| other_herbert wrote:
| Everyone, this is _not_ about css grid, this is about the design
| language typically used to describe the way content people think
| of the web
| colmvp wrote:
| 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 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.
| dgb23 wrote:
| 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.
| colmvp wrote:
| I don't disagree, but "clearly communicated and well
| structured" seem to be a very difficult standard for design
| teams.
|
| 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.
| spcebar wrote:
| This seems like more of a commentary on responsive design than on
| grid based layouts. There's a big difference between designing
| for print/for the web, and a really good designer will be able to
| give you a grid layout that performs well between breakpoints.
| IfOnlyYouKnew wrote:
| No, but it's time to drop the frameworks. Their only purpose was
| to make grid designs work, and CSS has caught up a while ago.
|
| > 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.
| gpspake wrote:
| This is my take too. Bootstrap and foundation's float hack grid
| systems kept us alive while CSS caught up to "OMG we need to
| display websites on mobile devices" Then grid and flexbox came
| along and gave us a native css solution. Then everyone moved on
| to figuring out SPAs - or as I call them "OMG we need to
| display websites on mobile devices 2.0"
| munk-a wrote:
| I don't know about dropping frameworks so much - they allow
| companies with very little incentive to invest in mobile
| (nearly all our users are desktop based) to get half-decent
| mobile layouts with a minimum amount of investment.
| Rd6n6 wrote:
| As somebody who just began using grids in their designs, I can
| say that grids can have a really nice effect on a lot of layouts.
| Fundamentally, it's just about creating order and alignment among
| various elements in a view, both in positioning and
| spacing/sizing.
|
| 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)
| open-source-ux wrote:
| 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 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.
| nicoburns wrote:
| I suspect we'll see CSS Grid adoption pick up over the next 2-3
| years as IE11 (which only has partial grid support) hits EOL
| and gets phased out.
| justinator wrote:
| Cool site. And there's an RSS feed! Excellent!
| brailsafe wrote:
| I think web designers could stand to study actual grid based
| graphic design and see how that applies to our current
| capabilities on the web.
|
| 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.
| Buttons840 wrote:
| > actual grid based graphic design
|
| 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.
| vitovito wrote:
| The Grid Book, by publication designer Jan V. White:
| https://archive.org/details/gridbookguidetop00whit
| brailsafe wrote:
| Yes! The elements of Typographic Style is more Type oriented,
| likewise with Ellen Lupton's books. Grid Based Graphic Design
| by Mueller Brockmann is the one you want for grids
| specifically, and anything Swiss in general is probably fine.
| shaicoleman wrote:
| I agree that the 12 column grid system isn't great.
|
| 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...
| munk-a wrote:
| That, I think, is the wrong take-away. You're forcing elements
| into even more strictly defined buckets that can't scale
| responsively to different devices.
|
| 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.
| qkqk wrote:
| No, of course, not, grid is a fundamental structure in graphic
| design. It will vary on the design of course, but
| https://gridless.design _uses a design grid_ for a very clear
| purpose.
|
| 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."
| geenat wrote:
| Nothing stopping you from using display: flex;
| djstein wrote:
| Visually, the "no" grid website [0] just looked like a website
| created with CSS Grid. I was expecting some sort of design that
| would be different. Are we missing something?
|
| [0]: https://gridless.design
| oo0shiny wrote:
| 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.
| michaelscott wrote:
| 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.
| dgb23 wrote:
| I agree, it is talking about a specific type of grid, where
| each column gets to have a fixed fraction of the parent
| container:
|
| 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.
| itronitron wrote:
| I was surprised by how many right angles, rectangles, and
| perpendicular lines I saw for a site focused on not using a
| grid.
| dgb23 wrote:
| This isn't an article about CSS features, nor is the linked
| site. This is about how designers think about their design and
| how that doesn't translate well into CSS. Both articles are
| trying to bridge the gap between design and implementation
| based on the reality of web content and browsing.
|
| 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.
___________________________________________________________________
(page generated 2021-08-09 23:02 UTC)