Brecht De Ruyte is a self-taught front-end developer located in Belgium with a passion for UX and Design. After more than a decade of working in tech, he started writing down his findings about HTML, CSS, and JS with an eye on accessibility and UX. During the day, you can find him working at iO Ghent on various projects. There are a lot of environments he is working in, the majority of them being Twig and React. But Brecht’s real niche will always be semantics and CSS, especially now, with the ever-fast updates in browser support.
It’s easy to get lost in a sea of CSS frameworks and libraries, each promising easier styling and smoother layouts. Brecht De Ruyte demonstrates four CSS utility classes (plus a bonus) using techniques that allow them to be used practically anywhere you need a particular layout — be it Grid or Flexbox — with configurable options.
Read more…
Have you run into a situation where you need the padding of one element to align with the padding of another element? In this article, Brecht De Ruyte demonstrates the issue with a full-width slider component that breaks out of the main page container and shares a couple of techniques to keep it visually aligned with other elements on the page.
Read more…
Thanks to the Open UI working community group, there’s a new element on the horizon, <selectmenu>, that will make styling this type of form control a whole lot better. You’re going to walk through an early implementation of this new experimental element by creating a pattern that you would never have thought possible with CSS alone — a radial selection menu.
Read more…
Managing our colors can truly help people to access our content. In this article, Brecht de Ruyte takes a deep dive into how we can create a high-contrast system while maintaining a balance between designing something accessible and respecting the look and feel of a brand.
Read more…
We can use the clamp() method today because of the great browser support. In this article, Brecht De Ruyte explains how it can be a beautiful addition to your upcoming project or as an upgrade to a previous one.
Read more…
