bolha.us

2 posts2 participants1 post today

Nicolas Hoizey“Item Flow, Part 1: A new unified concept for layout” by <a href="https://front-end.social/@jensimmons" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@jensimmons</a>, Saron Yitbarek, Elika Etemad and Brandon Stewart🔗 <a href="https://webkit.org/blog/16587/item-flow-part-1-a-new-unified-concept-for-layout/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://webkit.org/blog/16587/item-flow-part-1-a-new-unified-concept-for-layout/</a>> As we worked through the details, we started to get excited. Suddenly new features for Flexbox and Grid that people have wanted for years had an obvious home. Things seemed to click together elegantly. New capabilities emergedThis is really an exciting…<a href="https://mamot.fr/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mamot.fr/tags/Masonry" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Masonry</a> <a href="https://mamot.fr/tags/Grid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Grid</a> <a href="https://mamot.fr/tags/Flexbox" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Flexbox</a>⚓️ <a href="https://nicolas-hoizey.com/links/2025/04/01/item-flow-part-1-a-new-unified-concept-for-layout/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://nicolas-hoizey.com/links/2025/04/01/item-flow-part-1-a-new-unified-concept-for-layout/</a>

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Proposals" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Proposals</a> Item Flow (part 1) · A new CSS layout concept uniting Grid, Flexbox, and Masonry <a href="https://ilo.im/1631o0" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ilo.im/1631o0</a>_____ <a href="https://mastodon.social/tags/Concept" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Concept</a> <a href="https://mastodon.social/tags/Layout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Layout</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/CssGrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CssGrid</a> <a href="https://mastodon.social/tags/CssFlexbox" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CssFlexbox</a> <a href="https://mastodon.social/tags/Masonry" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Masonry</a> <a href="https://mastodon.social/tags/Design" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Design</a> <a href="https://mastodon.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDesign</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Frontend</a>

julianNodeBB's topic list layout is great for written and media-light content, although it is less ideal for categories which predominately feature pictures. I recently ran into this issue with the <a href="https://community.openbeta.io/category/16/pics-and-trips" rel="nofollow noopener noreferrer" target="_blank">Pics and Trips category on the OpenBeta Community</a>. While we've made some much-needed TLC and improvements so that topic thumbnails are better handled and displayed, I did not feel they were adequately prioritised for this particular category. So I wrote the Category Masonry plugin for NodeBB! In brief: <ul> <li>Configurable; either by category or by percentage of topics with a topic thumbnail/image</li> <li>Overrides the <code>partials/topic_list.tpl</code> template to display cards</li> <li>Works with custom themes (will correctly override the theme's <code>category.tpl</code>, or the base theme's <code>category.tpl</code> if your theme does not have its own)</li> </ul>

Nicolas Hoizey“Should masonry be part of CSS grid?” by <a href="https://front-end.social/@shadeed9" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@shadeed9</a>🔗 <a href="https://ishadeed.com/article/css-grid-masonry/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ishadeed.com/article/css-grid-masonry/</a>> An exploration of examples showing masonry as both a part of CSS Grid and as its own display type.Ahmad provides compeling use cases and code examples showing that making masonry layout “just” a specific use case for CSS Grid could be the best choice.So… that's not what I thought a month ago… 😅Anyway, the most important part in…<a href="https://mamot.fr/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mamot.fr/tags/Grid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Grid</a> <a href="https://mamot.fr/tags/Masonry" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Masonry</a>⚓️ <a href="https://nicolas-hoizey.com/links/2024/10/31/should-masonry-be-part-of-css-grid/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://nicolas-hoizey.com/links/2024/10/31/should-masonry-be-part-of-css-grid/</a>

Recent searches

Search options

Administered by:

Server stats:

#masonry