#layout

11 posts11 participants3 posts today

Andrés Ortiz Massó<a href="https://pixelfed.social/discover/tags/mirror?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#mirror</a> <a href="https://pixelfed.social/discover/tags/mirrorlab?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#mirrorlab</a> <a href="https://pixelfed.social/discover/tags/layout?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#layout</a> <a href="https://pixelfed.social/discover/tags/kaleidoscope?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#kaleidoscope</a> <a href="https://pixelfed.social/discover/tags/symmetry?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#symmetry</a> <a href="https://pixelfed.social/discover/tags/architecture?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#architecture</a> <a href="https://pixelfed.social/discover/tags/building?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#building</a> <a href="https://pixelfed.social/discover/tags/layout?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#layout</a> <a href="https://pixelfed.social/discover/tags/symmetry?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#symmetry</a> <a href="https://pixelfed.social/discover/tags/architectureporn?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#architectureporn</a> <a href="https://pixelfed.social/discover/tags/ciudaddemexico?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#ciudaddemexico</a> <a href="https://pixelfed.social/discover/tags/cdmx?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#cdmx</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>

CEOTECH.ITGboard: la punteggiatura potrebbe cambiare posto <a href="https://mastodon.social/tags/Aggiornamento" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Aggiornamento</a> <a href="https://mastodon.social/tags/Android" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Android</a> <a href="https://mastodon.social/tags/App" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#App</a> <a href="https://mastodon.social/tags/Beta" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Beta</a> <a href="https://mastodon.social/tags/Digitazione" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Digitazione</a> <a href="https://mastodon.social/tags/Gboard" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Gboard</a> <a href="https://mastodon.social/tags/Google" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Google</a> <a href="https://mastodon.social/tags/InterfacciaUtente" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#InterfacciaUtente</a> <a href="https://mastodon.social/tags/iOS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#iOS</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/LayoutTastiera" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#LayoutTastiera</a> <a href="https://mastodon.social/tags/Notizie" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Notizie</a> <a href="https://mastodon.social/tags/Novit%C3%A0" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Novità</a> <a href="https://mastodon.social/tags/Punteggiatura" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Punteggiatura</a> <a href="https://mastodon.social/tags/Tastiera" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Tastiera</a> <a href="https://mastodon.social/tags/TechNews" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#TechNews</a> <a href="https://mastodon.social/tags/Tecnologia" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Tecnologia</a> <a href="https://www.ceotech.it/gboard-la-punteggiatura-potrebbe-cambiare-posto/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.ceotech.it/gboard-la-punteggiatura-potrebbe-cambiare-posto/</a>

HabrКак работать с Custom Layout в Jetpack ComposeВсем привет! Я Александр Власюк, старший Android-инженер в Авито , разрабатываю Авито Кошелек и веду телеграм-канал «Записки инженера» . В этой статье вспоминаем, как лейауты работают в Compose, обсуждаем изменение лейаута отдельного компонента, смотрим, как создавать кастомные Layout и LazyLayout и учимся откладывать композицию. И всё это на примерах, в том числе из дизайн-системы Авито.<a href="https://habr.com/ru/companies/avito/articles/894432/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://habr.com/ru/companies/avito/articles/894432/</a><a href="https://zhub.link/tags/android" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#android</a> <a href="https://zhub.link/tags/jetpack_compose" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#jetpack_compose</a> <a href="https://zhub.link/tags/compose" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#compose</a> <a href="https://zhub.link/tags/layout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#layout</a> <a href="https://zhub.link/tags/android_sdk" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#android_sdk</a>

Strange QuarkToday is <a href="https://dice.camp/tags/DocumentFreedomDay" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DocumentFreedomDay</a>!The first rule of Document <a href="https://dice.camp/tags/Freedom" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Freedom</a> Day is that we talk about open <a href="https://dice.camp/tags/document" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#document</a> formats and tools that allow documents to be accessed, edited and shared by anyone, without restrictions or reliance on specific software or vendor lock-in.I wrote the post below to talk about the <a href="https://dice.camp/tags/free" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#free</a> and <a href="https://dice.camp/tags/open" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#open</a> formats and <a href="https://dice.camp/tags/opensource" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#opensource</a> tools that I am using for the <a href="https://dice.camp/tags/writing" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#writing</a> <a href="https://dice.camp/tags/typesetting" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#typesetting</a> and <a href="https://dice.camp/tags/layout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#layout</a> of Return of the Ripper.<a href="https://www.kickstarter.com/projects/michaeldavisphd/return-of-the-ripper-a-l1-horror-adventure-for-dcc-rpg/posts/4345861" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.kickstarter.com/projects/michaeldavisphd/return-of-the-ripper-a-l1-horror-adventure-for-dcc-rpg/posts/4345861</a><a href="https://dice.camp/tags/latex" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#latex</a> <a href="https://dice.camp/tags/inkscape" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#inkscape</a> <a href="https://dice.camp/tags/gimp" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#gimp</a> <a href="https://dice.camp/tags/git" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#git</a>

Frontend DogmaGrouping Selection List Items Together With CSS Grid, by @rpsthecoder@x.com (<a href="https://mastodon.social/@csstricks" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@csstricks</a>):<a href="https://css-tricks.com/grouping-selection-list-items-together-with-css-grid/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://css-tricks.com/grouping-selection-list-items-together-with-css-grid/</a><a href="https://mas.to/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> <a href="https://mas.to/tags/lists" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#lists</a> <a href="https://mas.to/tags/forms" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#forms</a> <a href="https://mas.to/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mas.to/tags/grids" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#grids</a> <a href="https://mas.to/tags/layout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#layout</a>

ポイズン雷花ＡＩ絵生成　Генерація зображень ШІ ＡＩ絵生成ソフトで何処が失敗してるかと云えば、人間の体の構造や比率を充分学習させてないと云う点が大きい。 Основна помилка програмного забезпечення для створення зображень ШІ полягає в тому,<a href="https://note.com/poison_raika/n/n501ac31af2f1" rel="nofollow noopener noreferrer" target="_blank">https://note.com/poison_raika/n/n501ac31af2f1</a><><a href="https://mstdn.jp/tags/AI" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#AI</a> <a href="https://mstdn.jp/tags/3d" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#3d</a> <a href="https://mstdn.jp/tags/image" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#image</a> <a href="https://mstdn.jp/tags/model" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#model</a> <a href="https://mstdn.jp/tags/new" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#new</a> <a href="https://mstdn.jp/tags/human" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#human</a> <a href="https://mstdn.jp/tags/software" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#software</a> <a href="https://mstdn.jp/tags/animals" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#animals</a> <a href="https://mstdn.jp/tags/traditional" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#traditional</a> <a href="https://mstdn.jp/tags/layout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#layout</a> <a href="https://mstdn.jp/tags/structure" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#structure</a> <a href="https://mstdn.jp/tags/generation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#generation</a> <a href="https://mstdn.jp/tags/frequency" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frequency</a> <a href="https://mstdn.jp/tags/necessary" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#necessary</a> <a href="https://mstdn.jp/tags/develop" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#develop</a> <a href="https://mstdn.jp/tags/vizualize" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#vizualize</a> <a href="https://mstdn.jp/tags/objects" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#objects</a> <a href="https://mstdn.jp/tags/dimensions" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dimensions</a> <a href="https://mstdn.jp/tags/approach" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#approach</a> <a href="https://mstdn.jp/tags/methods" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#methods</a> <a href="https://mstdn.jp/tags/probably" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#probably</a> <a href="https://mstdn.jp/tags/limitations" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#limitations</a> <a href="https://mstdn.jp/tags/adequately" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#adequately</a> <a href="https://mstdn.jp/tags/irregularities" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#irregularities</a> <a href="https://mstdn.jp/tags/proportions" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#proportions</a>

Alexander Deplov 🇩🇪I'm going to try this <a href="https://www.youtube.com/watch?v=EOaPb9wrgDY" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.youtube.com/watch?v=EOaPb9wrgDY</a> Update: that approach ignores common shortcuts, CMD+C will be far away and this is not good. <a href="https://mastodon.social/tags/AI" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#AI</a> <a href="https://mastodon.social/tags/Keyboard" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Keyboard</a> <a href="https://mastodon.social/tags/Layout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Layout</a>

Frontend DogmaSelf Gap, 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/self-gap/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ishadeed.com/article/self-gap/</a><a href="https://mas.to/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mas.to/tags/flexbox" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#flexbox</a> <a href="https://mas.to/tags/layout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#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> CSS self gap · Custom gaps between some ‘flex’ or ‘grid’ items <a href="https://ilo.im/162wa9" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ilo.im/162wa9</a>_____ <a href="https://mastodon.social/tags/Spacing" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Spacing</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/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/Browser" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Browser</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> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</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/Approaches" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Approaches</a> A fluid CSS methodology · A contemporary approach to fluid web design <a href="https://ilo.im/162uwf" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ilo.im/162uwf</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/FluidDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#FluidDesign</a> <a href="https://mastodon.social/tags/ResponsiveDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ResponsiveDesign</a> <a href="https://mastodon.social/tags/Typography" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Typography</a> <a href="https://mastodon.social/tags/Font" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Font</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> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a>

Ana Tudor 🐯Ever wanted to get the number of auto-fit columns in CSS?``` --u: 5em; grid-template-columns: repeat(auto-fit, minmax(var(--u), 1fr)) ```It's now possible! Using registered <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> vars, the tan division hack and container query units! Here's a little test on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a>: <a href="https://codepen.io/thebabydino/pen/JojpBJr" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/JojpBJr</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/cssLayout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssLayout</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</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/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</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/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a>

Andrés Ortiz MassóDeconstruction <a href="https://pixelfed.social/discover/tags/architecture?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#architecture</a> <a href="https://pixelfed.social/discover/tags/building?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#building</a> <a href="https://pixelfed.social/discover/tags/layout?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#layout</a> <a href="https://pixelfed.social/discover/tags/symmetry?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#symmetry</a> <a href="https://pixelfed.social/discover/tags/layoutpictures?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#layoutpictures</a> <a href="https://pixelfed.social/discover/tags/surrealism?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#surrealism</a> <a href="https://pixelfed.social/discover/tags/mirror?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#mirror</a> <a href="https://pixelfed.social/discover/tags/mirrorlab?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#mirrorlab</a> <a href="https://pixelfed.social/discover/tags/instagood?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#instagood</a>

Inautilo<a href="https://mastodon.social/tags/Design" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Design</a> <a href="https://mastodon.social/tags/Explainers" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Explainers</a> F-shaped reading · Often applies to content pages on the web <a href="https://ilo.im/162ort" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ilo.im/162ort</a>_____ <a href="https://mastodon.social/tags/EyeTracking" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#EyeTracking</a> <a href="https://mastodon.social/tags/Reading" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Reading</a> <a href="https://mastodon.social/tags/Skimming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Skimming</a> <a href="https://mastodon.social/tags/Content" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Content</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/Website" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Website</a> <a href="https://mastodon.social/tags/ProductDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ProductDesign</a> <a href="https://mastodon.social/tags/UiDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#UiDesign</a> <a href="https://mastodon.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDesign</a>

Ana Tudor 🐯Flexy flex layout for any number n of items such that we have:👉 at most 3 items on a row 👉 at least 2 items on a row IF we have at least 2 items in totalIn only 5 (display, flex-wrap, gap, flex and flex-basis override) CSS declarations, working for any number n of items! 🎇Because someone asked for this on reddit <a href="https://www.reddit.com/r/css/comments/1jayx5v/comment/mhq2ldw/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.reddit.com/r/css/comments/1jayx5v/comment/mhq2ldw/</a>Here is the <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> demo <a href="https://codepen.io/thebabydino/pen/OPJOepJ" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/OPJOepJ</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/flexbox" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#flexbox</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/cssLayout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssLayout</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/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</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/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a>

Andrés Ortiz Massó<a href="https://pixelfed.social/discover/tags/destruction?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#destruction</a> <a href="https://pixelfed.social/discover/tags/deconstructed?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#deconstructed</a> <a href="https://pixelfed.social/discover/tags/architecture?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#architecture</a> <a href="https://pixelfed.social/discover/tags/Barcelona?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#Barcelona</a> <a href="https://pixelfed.social/discover/tags/symmetry?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#symmetry</a> <a href="https://pixelfed.social/discover/tags/layout?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#layout</a> <a href="https://pixelfed.social/discover/tags/layoutpictures?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#layoutpictures</a> <a href="https://pixelfed.social/discover/tags/design?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#design</a> <a href="https://pixelfed.social/discover/tags/mirror?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#mirror</a> <a href="https://pixelfed.social/discover/tags/mirrorlab?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#mirrorlab</a>

DanielRandom thought:I wonder if the trend in having a vertical tab bar in browsers will also have an impact in how we design websites.In particular I am thinking about centered content, e.g. the timeline here on Mastodon. With a vertical tabs sidebar open that content is not really visually centered anymore.Maybe I am just overthinking and this is not a real issue at all? 🤔 <a href="https://social.hnnng.space/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://social.hnnng.space/tags/design" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#design</a> <a href="https://social.hnnng.space/tags/development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#development</a> <a href="https://social.hnnng.space/tags/browser" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#browser</a> <a href="https://social.hnnng.space/tags/layout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#layout</a>

Andrés Ortiz Massó<a href="https://pixelfed.social/discover/tags/mirror?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#mirror</a> <a href="https://pixelfed.social/discover/tags/mirrorlab?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#mirrorlab</a> <a href="https://pixelfed.social/discover/tags/layout?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#layout</a> <a href="https://pixelfed.social/discover/tags/kaleidoscope?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#kaleidoscope</a> <a href="https://pixelfed.social/discover/tags/architecture?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#architecture</a> <a href="https://pixelfed.social/discover/tags/architectureporn?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#architectureporn</a> <a href="https://pixelfed.social/discover/tags/sky?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#sky</a> <a href="https://pixelfed.social/discover/tags/spaceship?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#spaceship</a> <a href="https://pixelfed.social/discover/tags/scifi?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#scifi</a>

Recent searches

Search options

Administered by:

Server stats: