DMV.Community

0 posts0 participants0 posts today

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>

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>

Nicco KunzmannThe <a href="https://toot.wales/tags/OpenWebCalendar" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#OpenWebCalendar</a> has a new <a href="https://toot.wales/tags/UI" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#UI</a>!You can head over to <a href="https://open-web-calendar.hosted.quelltext.eu" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://open-web-calendar.hosted.quelltext.eu</a> and try it out:- <a href="https://toot.wales/tags/edit" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#edit</a> the <a href="https://toot.wales/tags/calendar" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#calendar</a> AND see it updating - <a href="https://toot.wales/tags/encryption" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#encryption</a> protects <a href="https://toot.wales/tags/private" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#private</a> calendars and the <a href="https://toot.wales/tags/password" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#password</a> - <a href="https://toot.wales/tags/CalDAV" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CalDAV</a> support - Change the size to see how it works on other screensIn the picture, the URL to the Personal CalDAV calendar is encrypted and the events show up.Technically, I really enjoyed <a href="https://toot.wales/tags/flexbox" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#flexbox</a> and <a href="https://toot.wales/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> variables i.e. for the dynamic resizing.<a href="https://toot.wales/tags/ics" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ics</a> <a href="https://toot.wales/tags/icalendar" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#icalendar</a> <a href="https://toot.wales/tags/website" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#website</a> <a href="https://toot.wales/tags/embed" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#embed</a>

Matti JärvinenPretty happy how my HTML DM screen pages turned out and are even printable. Here's the last page.CSS border-image-source and slices used with the box border ( not your 00's average borders anymore ).Note: CSS mix-blend-mode: multiply used on the AI illustration (I suck at drawing) to let the white pass through as transparent to get a look it's painted on top of the paper.Works 👍 on both A4 and Letter size. <a href="https://mastodon.social/tags/DnD" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DnD</a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</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/AI" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#AI</a>

michabbbCSS Feature Update: New Tools and Capabilities 🎨🚀 <a href="https://social.vivaldi.net/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> establishes unified baseline path across major <a href="https://social.vivaldi.net/tags/browsers" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#browsers</a>, improving cross-browser compatibility standards🎨 New features include Aligned Content Property for element centering, @property rule for <a href="https://social.vivaldi.net/tags/animation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#animation</a> control, and Starting Style rule for transitions🔧 Technical additions bring math functions (round, rem, mod), efficient <a href="https://social.vivaldi.net/tags/darkmode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#darkmode</a> implementation, and interpolate size property💻 <a href="https://social.vivaldi.net/tags/Developer" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Developer</a> workflow improvements include user-specific form validation classes and simplified element positioning without <a href="https://social.vivaldi.net/tags/flexbox" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#flexbox</a> or <a href="https://social.vivaldi.net/tags/grid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#grid</a>⚡ Core updates focus on transition handling, interaction responses, and streamlined <a href="https://social.vivaldi.net/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> development patterns🌐 Reference: <a href="https://youtu.be/A89FMtIkWKc" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://youtu.be/A89FMtIkWKc</a>

Nils HörrmannAm I the only one who gets heavily confused that – to position a flex item – I have to align the items and justify the content. No, uhm, I align the content and justify the items? I'm sure there is logic behind this! But hey: What do you think? Which is the correct way to do the same alignment with grid?This. Is. Not. Logical. 😭 <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>

Luke DornyYes, but Should I?<a href="https://typo.social/tags/blog" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blog</a> <a href="https://typo.social/tags/design" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#design</a> <a href="https://typo.social/tags/gallery" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#gallery</a> <a href="https://typo.social/tags/artwork" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#artwork</a> <a href="https://typo.social/tags/shop" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#shop</a> <a href="https://typo.social/tags/products" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#products</a> <a href="https://typo.social/tags/records" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#records</a> <a href="https://typo.social/tags/magazine" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#magazine</a> <a href="https://typo.social/tags/photos" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#photos</a> <a href="https://typo.social/tags/objects" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#objects</a> <a href="https://typo.social/tags/posts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#posts</a> <a href="https://typo.social/tags/uses" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#uses</a> <a href="https://typo.social/tags/now" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#now</a> <a href="https://typo.social/tags/blogroll" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blogroll</a> <a href="https://typo.social/tags/projects" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#projects</a> <a href="https://typo.social/tags/ecommerce" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ecommerce</a> <a href="https://typo.social/tags/cms" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cms</a> <a href="https://typo.social/tags/relatedPages" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#relatedPages</a> <a href="https://typo.social/tags/grid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#grid</a> <a href="https://typo.social/tags/flexbox" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#flexbox</a> <a href="https://typo.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://typo.social/tags/ally" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ally</a> <a href="https://typo.social/tags/php" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#php</a> <a href="https://typo.social/tags/coffee" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coffee</a>

Luke DornyIf I’m blunt with myself I’ve already bit off more than I can reasonably chew in a reasonable amount of time, lol. <a href="https://typo.social/tags/blog" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blog</a> <a href="https://typo.social/tags/design" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#design</a> <a href="https://typo.social/tags/gallery" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#gallery</a> <a href="https://typo.social/tags/artwork" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#artwork</a> <a href="https://typo.social/tags/shop" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#shop</a> <a href="https://typo.social/tags/products" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#products</a> <a href="https://typo.social/tags/records" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#records</a> <a href="https://typo.social/tags/magazine" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#magazine</a> <a href="https://typo.social/tags/photos" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#photos</a> <a href="https://typo.social/tags/objects" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#objects</a> <a href="https://typo.social/tags/posts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#posts</a> <a href="https://typo.social/tags/uses" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#uses</a> <a href="https://typo.social/tags/now" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#now</a> <a href="https://typo.social/tags/blogroll" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blogroll</a> <a href="https://typo.social/tags/projects" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#projects</a> <a href="https://typo.social/tags/ecommerce" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ecommerce</a> <a href="https://typo.social/tags/cms" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cms</a> <a href="https://typo.social/tags/relatedPages" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#relatedPages</a> <a href="https://typo.social/tags/grid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#grid</a> <a href="https://typo.social/tags/flexbox" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#flexbox</a> <a href="https://typo.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://typo.social/tags/ally" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ally</a> <a href="https://typo.social/tags/php" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#php</a> oh, and <a href="https://typo.social/tags/coffee" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coffee</a>

Aral BalkanLaura’s* Penpot** session, Introduction to Flex and Grid Layout, will be live streamed via Peertube tomorrow from 2-3 PM UTC at <a href="https://peertube.kaleidos.net/w/g5F9Se2PK2934EFrLSuJ16" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://peertube.kaleidos.net/w/g5F9Se2PK2934EFrLSuJ16</a>* <a href="https://mastodon.laurakalbag.com/@laura" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@laura</a> ** <a href="https://fosstodon.org/@penpot" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@penpot</a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.ar.al/tags/design" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#design</a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.ar.al/tags/FOSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#FOSS</a> <a href="https://mastodon.ar.al/tags/grid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#grid</a> <a href="https://mastodon.ar.al/tags/flexBox" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#flexBox</a> <a href="https://mastodon.ar.al/tags/PenPot" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#PenPot</a>

ArnanCSS Flex sucks... Whoever came up with that should be ejected into space!<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>

𝕂𝚞𝚋𝚒𝚔ℙ𝚒𝚡𝚎𝚕«Warum CSS Flexbox deine Layout-Probleme löst: Lerne, wie Flexbox dein Webdesign revolutionieren kann und warum es besser ist als alte Layout-Methoden! Perfekt für responsive Designs»Mal ein wenig weiter kommen als nur fertige (plumpe) CSS Layouts zu verwenden und die Webseiten modern dynamisch zu gestalten. Dies tun mMn immer noch zu wenige Dienstleistungsfirmen für die Webpräsenz der Kunden.🎨 <a href="https://blog.disane.dev/warum-css-flexbox-deine-layout-probleme-lost/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://blog.disane.dev/warum-css-flexbox-deine-layout-probleme-lost/</a><a href="https://chaos.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://chaos.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://chaos.social/tags/layout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#layout</a> <a href="https://chaos.social/tags/flexbox" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#flexbox</a> <a href="https://chaos.social/tags/design" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#design</a> <a href="https://chaos.social/tags/webdesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdesign</a> <a href="https://chaos.social/tags/weblayout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#weblayout</a> <a href="https://chaos.social/tags/website" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#website</a> <a href="https://chaos.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a>

taco, bird/cat :verified420:<a href="https://meow.social/tags/flexbox" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#flexbox</a> is fucking magical. with, like, 3 lines of css, i have a horizontal navbar

Joel :void: :casio:<a href="https://fosstodon.org/tags/Flexbox" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Flexbox</a> is insanely fun. I just modified my <a href="https://fosstodon.org/tags/booklog" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#booklog</a>, my <a href="https://fosstodon.org/tags/homepage" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#homepage</a>, my <a href="https://fosstodon.org/tags/blogroll" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blogroll</a> and some other sections thanks to it.Once I understood it, my eyes were opened!What do you guys think? :blobcatderpy: <a href="https://fosstodon.org/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://fosstodon.org/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> <a href="https://fosstodon.org/tags/personalWebsite" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#personalWebsite</a> <a href="https://fosstodon.org/tags/Blog" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Blog</a>

adamghill<a href="https://indieweb.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://indieweb.social/tags/Flexbox" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Flexbox</a> cheatsheet from <a href="https://css-tricks.com" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://css-tricks.com</a>

Recent searches

Search options

Administered by:

Server stats:

#flexbox