#dev 2024-04-24
2024-04-24 UTC
# 
[aciccarello] I think it has a place to combine images with different aspect ratios. But it's definitely visually and conceptually more complex
oodani, bret, revi, alephalpha0, z0e, claudine, trwnh, geoffo, _dissolve22[d], [tantek], [Al_Abut], [Joe_Crawford], [Jan_Tuomi], [schmarty], IWSlackGateway, [campegg], [qubyte], [aciccarello], [snarfed], [marksuth], [KevinMarks], dissolve22[d] and [Murray] joined the channel
Guest6, ttybitnik, geoffo, barnabywalters and [tantek] joined the channel
# 
[KevinMarks] I wondered about that https://xoxo.zone/@KevinMarks/112302669834997998 it seems like a related issue, but masonry makes layout pretty much randomly dependent on previous blocks' aspect ratios
# 
Loqi [preview] [Kevin Marks] @jensimmons there is a related issue that is hard to solve with existing grid, which is illustrated by the Tufte layout, https://edwardtufte.github.io/tufte-css/ where you have associated content - footnotes, sidenotes, illustrations, other marginali...
[contact898] joined the channel
# [KevinMarks] I feel like addressing sidenotes/footnotes and endnotes properly in HTML is something worth spending time on. EPUB didn't quite do it (they defined <aside> as hidden by default and suggested you put the notes in there, and link with fragments)
jeremycherfas joined the channel
barnaby, [jeremycherfas], z0e, [Joe_Crawford] and [KevinMarks] joined the channel
# [KevinMarks] I may have misunderstood multicolumn, but my read of it was flowing text blocks between columns on a page, which is the footnote case but if you want a non-paginated scroll with sidenotes (that fall back to hidden inline notes) it's a bit trickier, and grid is closer, except you want the side note aligned with the note marker in text
# [KevinMarks] So you need to start a new grid row each time you expect to have a sidenote.
# [KevinMarks] I should make some examples to illustrate
# [KevinMarks] About time I wrote something long enough to need notes
btrem and gruetzhaxe joined the channel
# 
[Al_Abut] [Murray] I’m curious how masonry layouts help with side notes and asides. I thought the content in each column was completely independent of each other? Other than being top aligned.
barnaby, [Scout] and barnabywalters joined the channel
# 
[Murray] There's overlap with what KevinMarks has already said, but I've used a masonry approach (with JS) to allow for sidenotes where you want them to fit into "rows" with the main content, but also overflow those rows, and never overlap one another. I haven't played around with the CSS implementation of masonry, so not sure how well it might work, but I'm always happy to have some more tools for this kind of thing 😄
# [Murray] I can also see this being useful for sidebars, where the relationship between the main column of content and the asides are even less connected. Say you have an old-school WordPress style blog, with a main article and then a sequence of sidebar widgets like word clouds, blogrolls, ads etc. With masonry, you could allow that sidebar to expand into wider viewports to have multiple columns, whilst leaving the exact placement up to the masonry
# [Al_Abut] Right on! Thanks for expanding.
# [Joe_Crawford] This demo page has a number of variations that show some of the uses that were not immediately obvious to me when I think "masonry layout" https://webkit.org/demos/grid3/museum/ ... The use case of multiple smaller cards with variable heights (if not widths, but it seems that's also accommodated) is one that I've had come up for my own needs and clients. Things which allow the designer to control overall screen density for browsing
# [Joe_Crawford] collections are a win in my book. The popularity of javascript solutions to masonry layout over time is a good indicator of need. I've not posted a blog post in support but was considering it if life eases up and I'm not past whatever deadline there is.
# [Al_Abut] Nice. I’ll hop on desktop in a bit to check it out. They stack nicely on mobile.
# [Al_Abut] I assume there’s overlap with flexgrids? That’s one of the questions I had stashed away for today’s frontend zoom.
# [Al_Abut] To take apart a practical working example of flexgrids rather than an intro.
gruetzhaxe, sebbu2, [Ros], gRegor and laker joined the channel
# [Al_Abut] yeah, I merged the two concepts together in my own head 😆
# [Al_Abut] mainly because of the pattern I’ve seen of grid for layout and flex for components
# [Al_Abut] I’ve tackled the first one, not so much the second and there’s a lot of overlap with Figma
# [Al_Abut] rather things in Figma I’ve put off learning because I’ve done everything the manual way
# [aciccarello] I've heard the convention, flexbox for one dimension (horizontal or vertical), grid for two dimensions.
# [Al_Abut] ah, that’s useful framing
# [aciccarello] There's a lot of overlap but I've found that a helpful reference point
# [Al_Abut] I’ve seen a lot of components that stack vertically on mobile after a certain breakpoint, but in that analogy they stay one dimensional and just switch axis
# [aciccarello] I've had success with flexbox wrap but it's got some limitations
# [aciccarello] Loqi, why no preview??
# [aciccarello] > The only difference between web design in 2004 and 2024 is that websites are now painted in Figma instead of Photoshop.
[aciccarello], gruetzhaxe and [Al_Abut] joined the channel
# [Al_Abut] Ha! That’s hilarious, mainly an oversimplification though. The dev tools, auto layout with flex, etc are all so advanced in Figma.
to2ds and shoesNsocks joined the channel
# [KevinMarks] Ooh look, Eric has a solution for sidenotes that works in very new CSS https://meyerweb.com/eric/thoughts/2023/09/12/nuclear-anchored-sidenotes/
[marksuth] joined the channel
# 
[tantek] ^ add it to /marginalia?
k1 joined the channel
# k1 Sorry for the late post, still concerns some time zones: https://js-naked-day.org/2024
# k1 @Al_Abut (2024-04-23T23:29): Did you see the multi-column layouts used by Discourse and FedWiki?
geoffo and ttybitnik joined the channel
# [KevinMarks] marginalia << Eric Mayer explains how to use the new CSS anchor for sidenotes https://meyerweb.com/eric/thoughts/2023/09/12/nuclear-anchored-sidenotes/
# Loqi ok, I added "Eric Mayer explains how to use the new CSS anchor for sidenotes https://meyerweb.com/eric/thoughts/2023/09/12/nuclear-anchored-sidenotes/" to the "See Also" section of /marginalia https://indieweb.org/wiki/index.php?diff=94762&oldid=90776
btrem joined the channel