DEV Community

Cover image for Rethinking responsive Webdesign

Rethinking responsive Webdesign

Tomas Rezac on June 09, 2020

From idea to revolutionary web grid system ;) How do we it do nowadays? To be honest, most of us have never made a respons...
Collapse
 
blindfish3 profile image
Ben Calder

OK - now that I can see it working; it looks interesting... but I think it would help to have some comparisons - e.g. with a pure grid and pure flexbox approaches - to get a better idea of the shortcomings you're trying to address. A solution with a hard JS dependency is a hard sell over pure CSS ;)

Collapse
 
rezi profile image
Tomas Rezac

True, unfortunately there is no way to do it without JS. I tried hard, read tons of articles about it. This article illustrates well some of the issues of pure css Grid solution: css-tricks.com/responsive-grid-mag... .
I am planning another article, more focused on grid usage explanation, real world examples.. and as you well pointed out, it probably also should contain comparison with other current solutions.
Thx for feedback

Collapse
 
jwp profile image
John Peters

Thanks Tomas, excellent information.

Collapse
 
blindfish3 profile image
Ben Calder

On Android Firefox I see:

ResizeObserver is not defined

Collapse
 
rezi profile image
Tomas Rezac

You are right, that browser doesn't support Resize Observer Api caniuse.com/#search=ResizeObserver

Collapse
 
miketalbot profile image
Mike Talbot ⭐

Will that work with a resize observer polyfill? I'm using that in a few places - think it works off mutationobserver

Thread Thread
 
rezi profile image
Tomas Rezac

I am affraid that even if it works, there is another api (Web Components), which is not supported much better. But I am considering to make kind of framework specific plugins for react, angular, vue, svelte frameworks. It would enable me to skip web component api and use something like this library: github.com/marcj/css-element-queries nstead of the ResizeObserver. It would make it bit more expensive, slightly bigger in size, but with way better support. The functinality should remain the same.

Thread Thread
 
miketalbot profile image
Mike Talbot ⭐ • Edited

Yeah I was looking at the polyfill for custom elements - not sure if that would work or not. I think this is very important work, but won't work for me unless it has IE11 support "somehow" as I write B2B software and 20%+ of my users are IE11 (don't trust caniuse stats for browsers in that environment...)

I do use ResizeObserver polyfilled and that is fine.

Thread Thread
 
rezi profile image
Tomas Rezac • Edited

Maybe I try to experiment first with some polyfills. It is always better to maintain one project, than 5 of them, for different frameworks. Will see if some of them fit to my needs. Anyway, I wanted to get some feedback first, before investing time to this project ;)
thanks for feedback btw

Thread Thread
 
miketalbot profile image
Mike Talbot ⭐

Count me in, anything I can do to help let me know.

Thread Thread
 
rezi profile image
Tomas Rezac • Edited

Currently the biggest help would be to try to use the grid in some real world markup (can be some random webpage template) and bring some feedback based on it. For instance, it could help me with a dilemma — whether the grid needs classes for sticky content (telling an element to be always aligned to the left/right side of the container).. It can be done now with the nesting of grids, but maybe people would appreciate being able to control it without nesting. I did not include that so far, as I wanted to keep it as small as possible for the beginning (sticky thing would need to generate quite lot of css rules based on element queries)

Thread Thread
 
miketalbot profile image
Mike Talbot ⭐

Ok sure, when I get a moment I'll go rework me recently written page to use it, could benefit from ultrawide having columns etc.

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀

Maybe this could benefit from: dev.to/adam_cyclones/javascript-en...

Collapse
 
miketalbot profile image
Mike Talbot ⭐

Really interesting work!

Collapse
 
sirseanofloxley profile image
Sean Allin Newell

It's time to go ultrawide