From idea to revolutionary web grid system ;)
How do we it do nowadays?
To be honest, most of us have never made a respons...
For further actions, you may consider blocking this person and/or reporting abuse
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 ;)
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
Thanks Tomas, excellent information.
On Android Firefox I see:
You are right, that browser doesn't support Resize Observer Api caniuse.com/#search=ResizeObserver
Will that work with a resize observer polyfill? I'm using that in a few places - think it works off mutationobserver
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.
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.
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
Count me in, anything I can do to help let me know.
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)
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.
Maybe this could benefit from: dev.to/adam_cyclones/javascript-en...
Really interesting work!
It's time to go ultrawide