Tootfinder

🎨 What You Need to Know about Modern CSS
#css

What You Need to Know about Modern CSS (Spring 2024 Edition) – Frontend Masters Boost
My goal with this bookmarkable guide is to provide a list of (frankly: incredible) new additions to CSS lately. There is no hardline criteria for this list other than that these things are all fairly new and my sense is that many people aren’t aware of these things. Or even if they are, they don’t […]

I think #CSSNakedDay is a fun idea!
I’m not participating myself, as I haven’t had time to fix my inline navigation SVGs looking confusingly *noir* without their CSS fills. But you should give these sites a visit! https://

CSS Naked Day 2024
April 9 is CSS Naked Day!

The #css :has selector is a godsend. It's incredible how far styling has come on the internet.
OK, back to making my site banner.

Scalable #CSS – @…
https://chriscoyier.net/2023/01/17/sca

🐜 7.css: A design system for building faithful recreations of old UIs
#html #css

7.css
A design system for building faithful recreations of the Windows 7 UI.

@scope is now live in both Chrome and Safari! This is huge for #CSS. The remaining days of BEM are numbered!
https://keithjgrant.com/posts/2023/04/scoped-css-is-back/

Scoped CSS is Back
Several years ago, I made a plea to save scoped CSS. One of the top features on my CSS wishlist was on the chopping block, and despite a pretty big push from th

I really like lightweight and modular #CSS frameworks for semantic #HTML like https://simplecss.org/ and

Simple.css Framework
A CSS framework that makes semantic HTML look good.

@scope is now live in both Chrome and Safari! This is huge for #CSS. The remaining days of BEM are numbered!
https://keithjgrant.com/posts/2023/04/scoped-css-is-back/

Scoped CSS is Back
Several years ago, I made a plea to save scoped CSS. One of the top features on my CSS wishlist was on the chopping block, and despite a pretty big push from th

Quick tip: be careful when using the newer #CSS viewport-percentage length units like `svh`, `dvh`, and the like. They are well-supported since late 2022 and quite a few users might still be using older (Android) devices and browsers. So always make sure to test on a few real devices (thanks to my parents in law for their Galaxy Tab 4 😁) and provide fallbacks, e.g. with `vh`.

Just learned from @… that the text-wrap property in #CSS has two new(ish) values: balance and pretty.
“The balance value is good for headings, and tries to balance the number of characters on each line so that each line of the heading is about the same lengt…

Better type layouts with CSS
Today, I wanted to quickly share two newer CSS properties that make it easier to create nice, well-balanced layouts. The text-wrap property has two newish values: balance and pretty. The balance value is good for headings, and tries to balance the number of characters on each line so that each line of the heading is about the same length. The pretty value attempts to reduce orphans (instances where one word is all by itself on a line).

🔊 #NowPlaying on KEXP's #Early
CSS:
🎵 Let’s Make Love and Listen to Death From Above
#CSS
https://open.spotify.com/track/1Jd9W7k8DTnBSovDSxK77n
https://ahistoryofemptyrooms.bandcamp.com/track/lets-make-love-and-listen-to-death-from-above-css-cover

Experimental: Signals for #Tailwind #CSS simplifies styling based on ancestor state via style queries. Its declarative #API for signaling states eliminates complex selectors, resulting in cleaner, mor…

Oh how useful text-emphasis would be if it didn’t affect line height.
#CSS

Today for the first time ever I used CSS :has pseudo-class. Surprisingly, it happened at work, in a React project, because the hook-based logic was too convoluted to get the thing done.
I distinctly remember when I had to rewrite portions of my current blog template because :has wasn't supported in Firefox yet.
Viva la web.
#css

I rushed out a leap day post. Something something February 29.
“Techniques to Break Words”
#CSS

Techniques to Break Words
Photo by studio tdes. Used under CC BY 2.0 Deed. Image cropped and contrast enhanced. A few days ago Benjy Stanton asked about breaking long words in tables. I offered a suggestion, which may or may not have worked. I never asked. My failure to follow up aside, it reminded…

Over the last few weeks, I’ve been a really big fan of PicoCSS. Drop a #CSS file in an #HTML file, write some semantic HTML, and it looks nice.
https://picocs…

Pico CSS • Minimal CSS Framework for semantic HTML
Minimalist and lightweight starter kit that prioritizes semantic syntax, making every HTML element responsive and elegant by default.

I had a lot of fun (and frustration) developing a pure-CSS contraption that takes plain book cover images and assembles a small gallery. 😁
1) It adds a "bevel gradient" to give the effect of a book cover.
2) It sets the background gradient.
3) And it pseudorandomly tilts the books.
#css #webdev

How to get the #css default back after setting a property on an element with #javascript? In my case display - element.style.removeProperty('display')!

CSS/JS: How to get back the default?
It’s the small things, but I think it is worth writing about it, because I learned something new and maybe you do to! I help a friend building her homepage and while implementing a small litt…

A common talking point of CSS & separation of concerns is the idea that you can just swap out the CSS for different CSS to have a whole new design.
That’s neat and all, but the real-world need is the opposite: the HTML changes ALL. THE. TIME. Write your CSS so it works with changing content.
#css #webdev

🧱 Nue CSS: A scaleable alternative to Tailwind, BEM, and CSS-in-JS
#css

Introducing Nue CSS
A scaleable alternative to Tailwind, BEM, and CSS-in-JS

OpenUI let's you describe #UI using your imagination, then see it rendered live.
Building UI can be a slog. OpenUI aims to make the process fun, fast, and flexible.
#css #design

Am I imagining things, or are there features in web browsers’ developer tools to detect synthesized / faux font weights? #webdev #WebDevelopment #CSS

Je viens de découvrir la fonctionnalité "#CSS container queries" qui a été introduite dans #Chrome en septembre 2022 et pour #Firefox en février 2023.
J'ai souvent eu besoin de cette fonctionnalité, je vais e…

Étudier CSS container queries · Issue #376 · stephane-klein/backlog
Je viens de découvrir la fonctionnalité CSS container queries. D'après Can I use cette fonctionnalité est disponible dans Chrome depuis septembre 2022 et Firefox depuis février 20223. J'ai essayé p...

Open-sourcing our progress on #TailwindCSS v4.0 Alpha
It introduces #Oxide for faster builds, smaller footprints, #Rust integration, with a

I *still* would love to be able to strip the unit from a value by dividing by 1 unit in #CSS calc()… 🤔

My team has spent the last year catching up on many upgrades, both language version and frameworks.
The hardest, that require the most reworking? It's not the #PHP stuff. It's the #CSS framework and associated #JavaScript

Transform web designs screenshot into clean #HTML #CSS code with #Design2Code, an #opensource

Hier ein super Video, bin mir ziemlich sicher, das nur wenige hier wissen, was man alles mit #CSS machen kann.
https://youtu.be/_qeno5kpwrw

A while back I created a theme officially featured in Blockbench, but I kinda abandoned it. Since I'm back to working with the program again, I might rewrite the thing.
#Blockbench #CSS

🤔 I’m preparing my #CSSDay talk at the moment and I’d be glad to hear your thoughts:
In which areas do you see the most potential for innovative web design when it comes to the latest and greatest #CSS features?
Like, which CSS features would you recommend a designer (or developer) to learn …

Ok `srcset` and `sizes` might be the death of me. None of it makes sense as to why the browser chooses one image over another. Can some #css and #html folks help me out please?
Boost for reach. Thanks :)

Hier ein super Video, bin mir ziemlich sicher, das nur wenige hier wissen, was man alles mit #CSS machen kann.
https://youtu.be/_qeno5kpwrw

📧📝 Quickly build #HTML #emails with #Tailwind #CSS
Maizzle is a

Finally! Penpot 2.0 release is out now and available for you to explore and enjoy. This huge release brings unique features such as #CSS Grid #Layout, new Components system and a redesigned #UI. Find out…

#Tailwind marketing and misinformation engine
https://nuejs.org/blog/tailwind-misinformation-engine/