Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

CSS: Absolutely positioning things relatively

canvatechblog.com

Post reply on HN
Print view View original

1–10 of 42 posts

Re: CSS: Absolutely positioning things relatively

#3

Post by yuchi »

This approach is over-engineered to say the least…

You can implement such a layout without using Grid Layout and using just Flex Layout. Also with some min-/max-width tricks you can also completely avoid having media queries in there…

For beginners in HTML/CSS this approach is absolutely distracting IMHO.

Re: CSS: Absolutely positioning things relatively

#5

Post by ben-morris »

yuchi wrote: post #3

This approach is over-engineered to say the least… You can implement such a layout without using Grid Layout and using just Flex Layout. Also with some min-/max-width tricks you can also completely avoid having media queries in there… For beginners in HTML/CSS this approach is absolutely distracting IMHO.

Hey, op / author here. For this design, of course you could use Flex, but the purpose of the article is that a design created with a drag and drop editor by a user, could be rendered responsively. Users could overlap elements and create all kinds of complex creations that we can't slice up in to flex blocks programmatically. The grid provides a way to render just about anything, with a bit of flexibility.

100% not advocating an engineer to ever do this, we only do it because it's automated and there is no engineer present to convert a design in to a website at scale.

Re: CSS: Absolutely positioning things relatively

#6

Post by nicoburns »

yuchi wrote: post #3

This approach is over-engineered to say the least… You can implement such a layout without using Grid Layout and using just Flex Layout. Also with some min-/max-width tricks you can also completely avoid having media queries in there… For beginners in HTML/CSS this approach is absolutely distracting IMHO.

> You can implement such a layout without using Grid Layout and using just Flex Layout

IMO Grid is actually simpler than Flex. Once IE11 is out of the picture, I think it might be worth considering teaching CSS beginners using a Grid-first approach.

Re: CSS: Absolutely positioning things relatively

#7

Post by inopinatus »

yuchi wrote: post #3

This approach is over-engineered to say the least… You can implement such a layout without using Grid Layout and using just Flex Layout. Also with some min-/max-width tricks you can also completely avoid having media queries in there… For beginners in HTML/CSS this approach is absolutely distracting IMHO.

This is evidently intended for platform builders, not standalone site authors. As someone whose systems include content authored by nontechnical third parties, and favouring pure CSS solutions to layout concerns, I found it a useful discussion.

Re: CSS: Absolutely positioning things relatively

#8

Post by sangeeth96 »

Nice work and thanks for sharing it. TIL about zero-width cols/rows in Grid.

> You can see all the breakpoints kicking in as the available width changes. Our backend algorithms can reconfigure the content and produce a different grid layout for each screen size, allowing everything to move around.

Could you elaborate on this? Is this implying that the backend is auto-generating mobile layouts and that the user simply needs to create a desktop layout? If yes, how does it decide where to place things if multiple media and multiple text blocks are present?

Re: CSS: Absolutely positioning things relatively

#9

Post by ben-morris »

sangeeth96 wrote: post #8

Nice work and thanks for sharing it. TIL about zero-width cols/rows in Grid. > You can see all the breakpoints kicking in as the available width changes. Our backend algorithms can reconfigure the content and produce a different grid layout for each screen size, allowing everything to move around. Could you elaborate on this? Is this implying that the backend is auto-generating mobile layouts and that the user simply…

> auto-generating mobile layouts and that the user simply needs to create a desktop layout?

Yes. This is a different blog post we have lined up and it's still somewhat experimental. At a high level, it's heuristic based, we attempt to identify elements related to each other and then sort the content in to the logical reading order using empty space between elements. We then generate different layouts for different screen sizes and embed them within the media queries.

I know that's a bit vague, but it's quite a complicated process to articulate in a comment and hopefully we can share more details soon - it's very much still BETA and not claiming we've nailed it.

Post reply on HN