A full evergreen browser support for CSS subgrid is just around the corner. Time to have a look on how we can create some interesting implementations in our design systems. This article will be focussing on grid-template-rows with subgrid.
Read moreabout Grid ideas: Creating a CSS subgrid utility class for rows
Scroll Driven Animations are set to be released in Chrome 115, giving us the chance to animate elements based on a scroll instead of time, increasing our toolset to create some fun interactions. I’m sure many great tricks and articles will be found, as this feature opens a lot of possibilities.
Read moreabout Scroll driven animations in CSS are a joy to play around with!
If you love CSS, you've probably heard of custom properties (a.k.a. CSS variables) before. Still, a lot of people seem to use them as constants for their CSS. In this article, I will try to give you some more insights on how you can use these custom properties to create some smart systems or even use them as booleans in CSS and create easy progressive enhancements.
Read more about Going beyond constants with custom properties (iO tech_hub)
Another year, another CSS day. I'm not joking or exaggerating that this conference has and always will be one of my highlights of the year. Welcoming, top speakers accompanied with just totally geeking out with other CSS people around food and drinks. This was CSS day 2023 - a short summary.
Read moreabout This was CSS day 2023
Thanks to the Open UI working community group, there's a new element on the horizon, the selectlist, that will make styling this type of form control a whole lot better. Let's use this element to creating a pattern that you would never have thought possible with CSS alone - a radial selection menu.
Read more about Advanced Form Control Styling With Selectmenu And Anchoring API (Smashing Magazine)
Recently, I've created a presentation named “so, you're still not using custom properties?” In this article, I want to highlight a part of that presentation. Custom properties have been available to us for quite some time now. And creating a smart button design system is just one of the many things where they can shine.
Read moreabout The button case - Using custom properties for a smart button system
A lot of developers use Chrome as their main browser and I'm one of them. There are a few tricks in Chrome DevTools that don't seem to get enough attention. So for this article, I wanted to highlight some of the features that I love and actually use in DevTools, that some of you might not know about.
Read moreabout Chrome DevTools tricks that deserve a spotlight
If it pops, it belongs in HTML and CSS! Lately, I had a lot of fun playing around with this upcoming feature. The first version is being developed and it's starting to look pretty good. It's time to handle our basic popovers without the explicit need of JavaScript.
Read moreabout Open UI and the Popover API
Animating elements while a user scrolls the page is a popular practice on the web. With scroll-timeline and the scroll function available in Chrome Canary, we get a nice preview on how these scrolling animations in pure CSS will work. The perfect time to create some demos and play around with it.
Read moreabout For the love of scroll driven animations in CSS
The :has() pseudo class is really a powerhouse. There are so many cool and amazing demos being released everyday showing how it can solve everyday problems and how it can replace actions we did in JS for years. In this short article: Some extra things I look forward to when playing around with it.
Read moreabout We've only scratched the surface with :has()
Design should never be a trade-off when it comes to creating an accessible web. There are many features coming to the web that will make creating contrast a lot easier. But even though CSS functions such as color-contrast() are only available in Safari behind a flag, we can already do a lot to create contrast in an easy way by using custom properties.
Read more about Creating A High-Contrast Design System With CSS Custom Properties (Smashing Magazine)
Unless you have no affinity with CSS at all, you should have noticed that new CSS features are skyrocketing like never before. How can we use these new playthings today? I wrote a miniseries about this on the iO tech_hub.
Read more about Why you should be using new CSS features today (iO tech_hub)
The CSS :has() pseudo class is rolling out in many browsers with Chrome and Safari already fully supporting it. It's often referred to it as “the parent selector” — as in, we can select style a parent element from a child selector — but there is so much more that :has() can help us solve. One of those things is re-inventing the clickable card pattern many of us love to use from time to time.
Read more about Creating Animated, Clickable Cards With the :has() Relational Pseudo Class (CSS-Tricks)
The :has() relational pseudo class has landed in Chrome and Safari and even though it gets less hype than for instance container queries, I believe this little pseudo class contains a lot of improvements to the way we write CSS today.
Read moreabout Practical uses of the :has() relational pseudo class
Fluid typography is getting a lot more popular, especially since the clamp() math function is available in every evergreen browser. But if we’re honest, it’s still a lot of mathematics to achieve this. You can use tools such as utopia.fyi, which are fantastic. But in large projects, it can get messy pretty fast. So let's make this easy with Sass.
Read more about Easy Fluid Typography With clamp() Using Sass Functions (Smashing Magazine)
My first article for CSS-tricks on how to create a watch face with a conic gradient Using custom-properties and a little bit of Javascript.
Read more about Making a Real-Time Clock With a Conic Gradient Face (CSS-Tricks)
The world is full of frameworks and content management systems, we're very spoiled when we want to create an application, but sometimes, you just need something static, simple and fast, so I created a Mini Static Thingy Wingy.
Read moreabout Introducing a Mini Static Thingy Wingy
After a long break because of Covid-19, CSS Day is back. In a new location at the Zuiderkerk in Amsterdam. Once again trying to create the perfect line-up for everything design and CSS, and boy, they delivered just that.
Read moreabout CSS Day 2022: A small recap
Some HTML5 elements seem to have the tendency of not being picked up by developers. Although widely supported, we still seem to use collapses with the use of a JS library instead of using a native element. In this little post, I want to highlight the details element a bit.
Read moreabout The details element, collapsing content without the hassle
With Safari (15.4) being one of the last to implement the dialog element, a lot of browsers have great support for this element.. Goodbye to huge JavaScript libraries and welcome to the native HTML5 dialog element. This is beauty and simplicity on the web in its purest form. It's accessible, customisable and most of all: easy to use.
Read moreabout A lot of power with little JavaScript, the HTML dialog element is here