Frontend Dogma<p>Item Flow: Next Steps for Masonry, by <span class="h-card" translate="no"><a href="https://front-end.social/@jensimmons" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>jensimmons</span></a></span> and @saron.bsky.social (<span class="h-card" translate="no"><a href="https://front-end.social/@webkit" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>webkit</span></a></span>):</p><p><a href="https://webkit.org/blog/17219/item-flow-part-2-next-steps-for-masonry/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">webkit.org/blog/17219/item-flo</span><span class="invisible">w-part-2-next-steps-for-masonry/</span></a></p><p><a href="https://mas.to/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a> <a href="https://mas.to/tags/masonry" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>masonry</span></a> <a href="https://mas.to/tags/layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>layout</span></a></p>
photog.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
A place for your photos and banter. Photog first is our motto
Please refer to the site rules before posting.
Administered by:
Server stats:
247active users
photog.social: About · Profiles directory · Privacy policy
Mastodon: About · Get the app · Keyboard shortcuts · View source code · v4.4.3
#layout
1 post · 1 participant · 0 posts today
Sam at BLAG<p>I've just posted an update to the Kickstarter for reprinting the Coast Manual of Lettering and Designs. It closes this week, so please back and/or boost to help us to the finish line...</p><p><a href="https://www.kickstarter.com/projects/coastmanual/the-coast-manual-of-lettering-and-designs/posts/4450111" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">kickstarter.com/projects/coast</span><span class="invisible">manual/the-coast-manual-of-lettering-and-designs/posts/4450111</span></a></p><p><a href="https://typo.social/tags/SignPainting" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SignPainting</span></a> <a href="https://typo.social/tags/Signwriting" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Signwriting</span></a> <a href="https://typo.social/tags/Lettering" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Lettering</span></a> <a href="https://typo.social/tags/GraphicDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>GraphicDesign</span></a> <a href="https://typo.social/tags/Layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Layout</span></a> <a href="https://typo.social/tags/RareBooks" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>RareBooks</span></a> <a href="https://typo.social/tags/Kickstarter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Kickstarter</span></a></p>
Frontend Dogma<p>Brick by Brick: Help Us Build CSS Masonry, by <span class="h-card" translate="no"><a href="https://mas.to/@patrickbrosset" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>patrickbrosset</span></a></span> (<span class="h-card" translate="no"><a href="https://chromium.social/@developers" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>developers</span></a></span>):</p><p><a href="https://developer.chrome.com/blog/masonry-update" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">developer.chrome.com/blog/maso</span><span class="invisible">nry-update</span></a></p><p><a href="https://mas.to/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a> <a href="https://mas.to/tags/masonry" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>masonry</span></a> <a href="https://mas.to/tags/layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>layout</span></a> <a href="https://mas.to/tags/chrome" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>chrome</span></a> <a href="https://mas.to/tags/google" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>google</span></a> <a href="https://mas.to/tags/edge" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>edge</span></a> <a href="https://mas.to/tags/microsoft" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>microsoft</span></a> <a href="https://mas.to/tags/browsers" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>browsers</span></a></p>
RS, Author, Novelist, Prosaist<p><span class="h-card" translate="no"><a href="https://mastodon.social/@rscottjones" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>rscottjones</span></a></span></p><blockquote><p>[Images of a rather unique and flamboyant mixed font layout in a book of unstated vintage] somehow [] got [] approved and actually printed</p></blockquote><p>A certain conservative conformity runs through the industry. It leads to a lack of <em>noticeable</em> beauty, beauty in rendering as distinct to content. Publishers by their actions train readers to expect extreme transparency and react badly if what they find is not "plain." Well, "plain" does cost less: In labor spent, in deep thought expended to achieve something that looks interesting without sacrificing readability or overpowering content. Simply because something like this is rarely done–or rarely done well like this was—does not mean it lacks merit. This was not done by an amateur running wild in a Mac layout program.</p><p>I would approve it. </p><p>The hint of difference would draw me in if I cracked the book in a store, and, considering the genre, the publisher knew it.</p><p>I like the fonts and I like the layout. The choice of title font lends a distinctive1800s pen feel to the whole composition (although, admittedly, the 66 relies on context to be legible). Since the title carries little information, it can afford whimsy. The designer chose the remainder of the fonts to be easy to read; they distinguish themselves from each other while structuring the information together with consistent use of emphasis and chapter layouts. I have no problem with the mountainous grey background. It evokes a sense of place, of a distinctive "skyline", namely that of the badlands of Arizona, at the start of each chapter. I have no problem reading this whatsoever, despite being dyslexic. Were there any plates or inline photos? My guess is the background helps obviate the need, or the lack thereof depending of the perspective of the target buyer, which lowers the cost of printing.</p><p>Overall, I find this pleasing. It screams Arizona, the old west, and adventure!</p><p>Aesthetics and readability <em>can</em> coexist together without the choice of the bland "same old same old" most publishers deliver like automatons without lack of thought or sense of design. It is unnecessary to follow the same design rules that everybody else follows, especially when they are arbitrary. They are. Arbitrary. Make no mistake. Mind you, conceiving a good design and doing it well requires <em>thought.</em></p><p><a href="https://eldritch.cafe/tags/BoostingIsSharing" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>BoostingIsSharing</span></a> </p><p><a href="https://eldritch.cafe/tags/design" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>design</span></a> <a href="https://eldritch.cafe/tags/bookstodon" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>bookstodon</span></a> <a href="https://eldritch.cafe/tags/write" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>write</span></a> <a href="https://eldritch.cafe/tags/author" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>author</span></a> <a href="https://eldritch.cafe/tags/writingCommunity" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>writingCommunity</span></a> <a href="https://eldritch.cafe/tags/writersOfMastodon" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>writersOfMastodon</span></a> <a href="https://eldritch.cafe/tags/publishing" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>publishing</span></a> <a href="https://eldritch.cafe/tags/bookdesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>bookdesign</span></a> <a href="https://eldritch.cafe/tags/font" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>font</span></a> <a href="https://eldritch.cafe/tags/fonts" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>fonts</span></a> <a href="https://eldritch.cafe/tags/layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>layout</span></a> <a href="https://eldritch.cafe/tags/book" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>book</span></a> <a href="https://eldritch.cafe/tags/books" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>books</span></a></p>
Frontend Dogma<p>Making a Masonry Layout That Works Today, by @zellwk.bsky.social (<span class="h-card" translate="no"><a href="https://mastodon.social/@csstricks" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>csstricks</span></a></span>):</p><p><a href="https://css-tricks.com/making-a-masonry-layout-that-works-today/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">css-tricks.com/making-a-masonr</span><span class="invisible">y-layout-that-works-today/</span></a></p><p><a href="https://mas.to/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a> <a href="https://mas.to/tags/layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>layout</span></a> <a href="https://mas.to/tags/masonry" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>masonry</span></a></p>
Kevin Karhan :verified:<p><span class="h-card" translate="no"><a href="https://not.an.evilcyberhacker.net/@phos" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>phos</span></a></span> the <a href="https://infosec.space/tags/Keyboard" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Keyboard</span></a> <a href="https://infosec.space/tags/Layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Layout</span></a> is just <a href="https://infosec.space/tags/cursed" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cursed</span></a>.</p><ul><li>What's wrong with a regular QWERTY thumb keypad alike <a href="https://infosec.space/tags/BlackBerry" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>BlackBerry</span></a>?</li></ul>
diekus<p>CSS Masonry layout is almost here, and we want your help and feedback to finish it! </p><p><a href="https://developer.chrome.com/blog/masonry-update" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">developer.chrome.com/blog/maso</span><span class="invisible">nry-update</span></a></p><p><a href="https://toot.cafe/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://toot.cafe/tags/webdev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webdev</span></a> <a href="https://toot.cafe/tags/layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>layout</span></a></p>
Frontend Dogma<p>Multicol and Fragmentation, by <span class="h-card" translate="no"><a href="https://front-end.social/@rachelandrew" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>rachelandrew</span></a></span> (@cssday.bsky.social):</p><p><a href="https://www.youtube.com/watch?v=NfwDP9shxNQ" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="">youtube.com/watch?v=NfwDP9shxNQ</span><span class="invisible"></span></a></p><p><a href="https://mas.to/tags/videos" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>videos</span></a> <a href="https://mas.to/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a> <a href="https://mas.to/tags/layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>layout</span></a></p>
Frontend Dogma<p>A Simple Website, by (not on Mastodon or Bluesky):</p><p><a href="https://simplesite.ayra.ch/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">simplesite.ayra.ch/</span><span class="invisible"></span></a></p><p><a href="https://mas.to/tags/websites" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>websites</span></a> <a href="https://mas.to/tags/history" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>history</span></a> <a href="https://mas.to/tags/layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>layout</span></a> <a href="https://mas.to/tags/animations" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>animations</span></a> <a href="https://mas.to/tags/images" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>images</span></a> <a href="https://mas.to/tags/tables" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>tables</span></a> <a href="https://mas.to/tags/javascript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>javascript</span></a> <a href="https://mas.to/tags/ajax" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ajax</span></a> <a href="https://mas.to/tags/flash" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>flash</span></a> <a href="https://mas.to/tags/deploying" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>deploying</span></a> <a href="https://mas.to/tags/simplicity" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>simplicity</span></a></p>
Frontend Dogma<p>Quantity Query Carousel, by <span class="h-card" translate="no"><a href="https://front-end.social/@chriscoyier" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>chriscoyier</span></a></span> (@frontendmasters.com):</p><p><a href="https://frontendmasters.com/blog/quantity-query-carousel/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">frontendmasters.com/blog/quant</span><span class="invisible">ity-query-carousel/</span></a></p><p><a href="https://mas.to/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a> <a href="https://mas.to/tags/selectors" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>selectors</span></a> <a href="https://mas.to/tags/grids" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>grids</span></a> <a href="https://mas.to/tags/layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>layout</span></a></p>
Andrés Ortiz Massó<a href="https://pixelfed.social/discover/tags/layoutpictures?src=hash" class="u-url hashtag" rel="nofollow noopener" target="_blank">#layoutpictures</a> <a href="https://pixelfed.social/discover/tags/layout?src=hash" class="u-url hashtag" rel="nofollow noopener" target="_blank">#layout</a> <a href="https://pixelfed.social/discover/tags/symmetry?src=hash" class="u-url hashtag" rel="nofollow noopener" target="_blank">#symmetry</a> <a href="https://pixelfed.social/discover/tags/mirrorlab?src=hash" class="u-url hashtag" rel="nofollow noopener" target="_blank">#mirrorlab</a> <a href="https://pixelfed.social/discover/tags/architecture?src=hash" class="u-url hashtag" rel="nofollow noopener" target="_blank">#architecture</a> <a href="https://pixelfed.social/discover/tags/archidaily?src=hash" class="u-url hashtag" rel="nofollow noopener" target="_blank">#archidaily</a> <a href="https://pixelfed.social/discover/tags/blue?src=hash" class="u-url hashtag" rel="nofollow noopener" target="_blank">#blue</a> <a href="https://pixelfed.social/discover/tags/sky?src=hash" class="u-url hashtag" rel="nofollow noopener" target="_blank">#sky</a> <a href="https://pixelfed.social/discover/tags/valdecolmenasdeabajo?src=hash" class="u-url hashtag" rel="nofollow noopener" target="_blank">#valdecolmenasdeabajo</a>
jfml - Jonas Laugs<p><span class="h-card" translate="no"><a href="https://mastodon.social/@belldotbz" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>belldotbz</span></a></span></p><p>Hi ^__^ ✨ I'm Jonas, living in <a href="https://mastodon.art/tags/Edinburgh" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Edinburgh</span></a>, <a href="https://mastodon.art/tags/Scotland" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Scotland</span></a> and <a href="https://mastodon.art/tags/L%C3%BCbeck" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Lübeck</span></a>, <a href="https://mastodon.art/tags/Germany" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Germany</span></a>. </p><p>I switched to 100% <a href="https://mastodon.art/tags/Linux" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Linux</span></a> / <a href="https://mastodon.art/tags/FOSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FOSS</span></a> a few years back, so if you need anything from <a href="https://mastodon.art/tags/illustration" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>illustration</span></a> or <a href="https://mastodon.art/tags/logo" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>logo</span></a> done in <a href="https://mastodon.art/tags/Inkscape" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Inkscape</span></a>, <a href="https://mastodon.art/tags/GraphicDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>GraphicDesign</span></a> and <a href="https://mastodon.art/tags/layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>layout</span></a> in <a href="https://mastodon.art/tags/Scribus" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Scribus</span></a> to <a href="https://mastodon.art/tags/3D" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>3D</span></a> <a href="https://mastodon.art/tags/renderings" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>renderings</span></a> / <a href="https://mastodon.art/tags/animation" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>animation</span></a> ( <a href="https://mastodon.art/tags/fulldome" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>fulldome</span></a>) made in <a href="https://mastodon.art/tags/Blender3d" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Blender3d</span></a> (and <a href="https://mastodon.art/tags/Godot" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Godot</span></a>) I'd love to work with you! </p><p>I love <a href="https://mastodon.art/tags/nature" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>nature</span></a>, <a href="https://mastodon.art/tags/science" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>science</span></a> and progressive <a href="https://mastodon.art/tags/fantasy" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>fantasy</span></a>, as well as fighting <a href="https://mastodon.art/tags/capitalism" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>capitalism</span></a> and being <a href="https://mastodon.art/tags/AlwaysAntifascist" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>AlwaysAntifascist</span></a>.</p><p><a href="https://mastodon.art/tags/FediHire" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FediHire</span></a> <a href="https://mastodon.art/tags/design" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>design</span></a> <a href="https://mastodon.art/tags/b3d" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>b3d</span></a></p>
Frontend Dogma<p>Grids 101, by (not on Mastodon or Bluesky):</p><p><a href="https://www.youtube.com/watch?v=Vl1VYQXElus" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">youtube.com/watch?v=Vl1VYQXElu</span><span class="invisible">s</span></a></p><p><a href="https://mas.to/tags/videos" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>videos</span></a> <a href="https://mas.to/tags/introductions" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>introductions</span></a> <a href="https://mas.to/tags/grids" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>grids</span></a> <a href="https://mas.to/tags/layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>layout</span></a> <a href="https://mas.to/tags/design" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>design</span></a></p>
jfml - Jonas Laugs<p>Two unofficial / unused posters I did a million years ago (when people still at least had a memory of using tapes to record video ^__^) while on Erasmus in Istanbul for a (apparently defunct) documentary film festival that I still quite like.</p><p><a href="https://mastodon.art/tags/JfmlArt" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JfmlArt</span></a> <a href="https://mastodon.art/tags/art" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>art</span></a> <a href="https://mastodon.art/tags/illustration" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>illustration</span></a> <a href="https://mastodon.art/tags/creative" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>creative</span></a> <a href="https://mastodon.art/tags/DigitalArt" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DigitalArt</span></a> <a href="https://mastodon.art/tags/FediArt" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FediArt</span></a> <a href="https://mastodon.art/tags/CreativeToots" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CreativeToots</span></a> <a href="https://mastodon.art/tags/MastoArt" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>MastoArt</span></a> <a href="https://mastodon.art/tags/ArtistsOnMastodon" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ArtistsOnMastodon</span></a> <a href="https://mastodon.art/tags/design" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>design</span></a> <a href="https://mastodon.art/tags/GraphicDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>GraphicDesign</span></a> <a href="https://mastodon.art/tags/typography" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>typography</span></a> <a href="https://mastodon.art/tags/layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>layout</span></a> <a href="https://mastodon.art/tags/poster" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>poster</span></a> <a href="https://mastodon.art/tags/Erasmus" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Erasmus</span></a> <a href="https://mastodon.art/tags/Istanbul" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Istanbul</span></a> <a href="https://mastodon.art/tags/Turkey" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Turkey</span></a> <a href="https://mastodon.art/tags/documentary" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>documentary</span></a> <a href="https://mastodon.art/tags/film" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>film</span></a> <a href="https://mastodon.art/tags/festival" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>festival</span></a> <a href="https://mastodon.art/tags/video" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>video</span></a> <a href="https://mastodon.art/tags/DigitalVideo" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DigitalVideo</span></a> <a href="https://mastodon.art/tags/MiniDV" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>MiniDV</span></a> <a href="https://mastodon.art/tags/jellyfish" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>jellyfish</span></a> <a href="https://mastodon.art/tags/kite" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>kite</span></a></p>
Frontend Dogma<p>Masonry, Item Flow, and… GULP?, by <span class="h-card" translate="no"><a href="https://mastodon.social/@Meyerweb" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>Meyerweb</span></a></span>:</p><p><a href="https://meyerweb.com/eric/thoughts/2025/05/21/masonry-item-flow-and-gulp/?_bhlid=4416223e6b626c5e6bbfef00ce9ad47789aa40e3" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">meyerweb.com/eric/thoughts/202</span><span class="invisible">5/05/21/masonry-item-flow-and-gulp/?_bhlid=4416223e6b626c5e6bbfef00ce9ad47789aa40e3</span></a></p><p><a href="https://mas.to/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a> <a href="https://mas.to/tags/masonry" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>masonry</span></a> <a href="https://mas.to/tags/flexbox" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>flexbox</span></a> <a href="https://mas.to/tags/grids" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>grids</span></a> <a href="https://mas.to/tags/layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>layout</span></a></p>
CSS Tips: Flexible Wrapping CSS Grid, by @zoranjambor (@cssweekly):
Use CSS “reading-flow” for Logical Sequential Focus Navigation, by @rachelandrew (@developers):
Chrome for DevelopersUse CSS reading-flow for logical sequential focus navigation | Blog | Chrome for DevelopersLearn how to use the new reading-flow and reading-order properties in Chrome 137.
Une excellente explication de la notion de `height` (hauteur) en CSS et de sa différence majeure avec `width` (largeur) que je n'avais jamais pris le temps de verbaliser mais qui est complètement sensée.
www.joshwcomeau.comThe Height Enigma • Josh W. ComeauOne of the most perplexing and befuddling things in CSS for me, for many years, was the behaviour of percentage-based heights. Sometimes, seemingly at random, setting “height: 100%” would have no effect at all. When I finally figured out what was going on, it was like a puzzle piece snapping into place; everything made so much more sense! In this post, I’ll share the epiphany I had, and we’ll explore some solutions.
Rethinking Responsive Grids With a Content-Aware Approach, by @webdesignerdepot.bsky.social:
https://webdesignerdepot.com/rethinking-responsive-grids-with-a-content-aware-approach/
Web Designer Depot · Rethinking Responsive Grids with a Content-Aware ApproachResponsive grids have long been the go-to solution for multi-device layouts, but simply resizing content isn’t enough—design needs to adapt with intent, not just scale. By shifting to a content-aware approach, we can create experiences that truly work for users, not just fit within a flexible grid.
Masonry in CSS: Should Grid Evolve or Stand Aside for a New Module?, by @smashingmag:
https://www.smashingmagazine.com/2025/05/masonry-css-should-grid-evolve-stand-aside-new-module/
Smashing Magazine · Masonry In CSS: Should Grid Evolve Or Stand Aside For A New Module? — Smashing MagazineThere were duelling proposals floating around for adding support for masonry-style layouts in CSS. In one corner is a proposal that extends the existing CSS Grid specification. In the other corner is a second proposal that sets up masonry as a standalone module. Well, not until recently. Now, there are three proposals with Apple WebKit’s “Item Flow” as the third option. The first two sides make strong points, and the third one merges them into one, all of which you will learn about in this article.
Live feeds
Mastodon is the best way to keep up with what's happening.
Follow anyone across the fediverse and see it all in chronological order. No algorithms, ads, or clickbait in sight.
LoginDrag & drop to upload