Creating custom component libraries for multiple products or applications can be challenging, particularly for companies that need to maintain two or more different design systems. The Three Layer UI Component Architecture is an approach for maintaining reusable components we can use as building blocks for multiple design systems...
Years of writing and maintaining CSS code and remarks by Mark Dalgleish and Adam Wathan, along the same line, lead me to conclude that the spacing between HTML elements should be determined by their parent element in almost all cases.
Tailwind CSS is a divisive issue in the web development world: some love it, others love to hate it. This article is about one specific feature of Tailwind CSS: its antifragility...
Again and yet again, we hear and read about the problems of CSS. And there are some pitfalls you can fall into, mostly because of the global nature of CSS. But I argue that we solved those problems now multiple times...
After trying to go all-in with utility classes a few times, I decided that, for me, this is not the right approach. But one thing irks me and makes me think twice if I'm not perhaps just being stubborn...
In the following screenshot, you can see a popular pattern for landing pages: repeating sections of an image on the one side and text on the other side where the image reaches the edge of the screen...
Many people, including me, are very skeptical about the utility-first approach of Tailwind CSS and other similar CSS frameworks like Tachyons. But I think it is essential to be open-minded about new ideas and techniques, especially if many people like it...
Tailwind is a CSS framework that I never used extensively, but I always found it interesting enough to keep it on my radar and occasionally play around with it. Today we explore how we can use Tailwind CSS with Vue.js. In this article, we identify potential pitfalls when using utility-first CSS frameworks and how to avoid them. Most importantly, we find out how to use Vue.js functional components to create abstractions for repeating patterns like cards and headlines...
Tailwind CSS is one of the rising stars in the CSS framework world. It's especially popular in the Laravel and Vue.js community. In this article, we learn how to set up Tailwind CSS to work with a Vue CLI powered application...
Recently I started thinking about magic numbers. Until this point I haven't given much thought to what the term “magic number“ actually means in the context of CSS. I thought about it as basically all numbers in my CSS. The logical solution was to use variables for everything. But having read some articles on this topic and after further thinking about it, I realised that not every number in your CSS code is inevitably a magic one...
Recently, I've been thinking a lot about variables in (Sass based) design systems. My approach with avalanche, and more recently with the design system we're building at work, always was to use variables for everything from spacings to colors and things like border radius...
The more we think about websites as collections of separate components (or atoms, molecules and organisms, to use the terms of the popular Atomic Design methodology), the more clear it becomes, that Media Queries are not the best solution for building truly responsive websites and applications...
In today's quick tip we'll take a look at how the BEM CSS naming scheme can be quite useful to detect when it might be better to split up a large component into multiple smaller ones...
Last week a Tweet by Benjamin De Cock about how to achieve a two-column layout with CSS Grid popped up in my timeline. This reminded me of my journey of creating a two-column layout featuring the image left / text right, text right/image left pattern, I've gone through very recently...
In recent days, I thought a lot about structuring large scale component-based applications. Oftentimes, at the beginning of a project, everything seems to be easy. You build a couple of components, put them together, and without too much effort you've implemented the first feature of your application in a reasonable amount of time...
One of the hardest challenges when working with CSS (or Sass) at scale, is to keep everything consistent and maintainable. Sass variables or CSS custom properties can be a handy tool to help with consistency and flexibility. Variables can make your life as a developer a lot easier. But there are many considerations you have to keep in mind when defining variables for your CSS framework...
Things are looking good on the CSS layout front. Flexbox can be used in all major browsers and CSS Grid Layout is almost at a point where browser support has reached a sweet spot – for some of us it might even be feasible to build production websites using CSS Grid Layout and some form of graceful fallback. Until the rest of us can finally switch to CSS Grid Layout, we have to rely solely on Flexbox to satisfy all our layout needs. But that's not a bad thing at all, Flexbox is pretty powerful by itself already...
Today we're going to look at the approach of using CSS selector namespaces to help us with detecting changes which have to be considered in the tests. Using separate selectors for testing also leads to a more stable way of structuring our code without tightly coupling our tests with the markup and CSS styles of the implementation...
One of the most difficult problems to solve when designing websites that are supposed to work well on small screens is creating user-friendly navigations. For a long time the goto solution was to hide the navigation items behind a hamburger button. Although the hamburger button is still going strong, there are some new approaches coming up and gaining traction...
My blog – you're currently reading – runs on Hugo, and so far I'm very happy with its simplicity and speed. Today I'll show you how we can use a Gulp build process to establish a convenient way to work on Hugo themes. Furthermore, we will utilize UnCSS to enable building a blog that loads almost instantly and scores highly in the Google PageSpeed Insights test...
Styling native HTML form fields – especially select fields – with CSS has always been a little tricky. Recently I was confronted with the task of creating a select field with a placeholder value so that the select field blends in nicely with other form fields on the page. The problem of custom styled select elements is a hard one...
A framework is a tool to provide a solid fundament for building complex systems. By building your own CSS grid framework, we have a solid and - at least after some time - battle tested system to build on top on. After Flexbox we now have a second „official“ way of building CSS powered layouts. As I wrote in a previous article, many people argue, that those new tools make grid frameworks obsolete. Let's prove them wrong...
CSS has a pretty bad reputation with programmers of all kinds. For many people CSS still remains a source of annoying problems such as seemingly impossible vertical centering, rendering headaches between different browsers, and unpredictable behavior in general, to name a few. However, the first two problems have been solved for years and the latter is usually a result of developers not knowing the language well enough. But there are new challenges coming up in the fast-moving web development world...
At my workplace, we recently faced the task of creating an animated SVG pie/doughnut/circle chart. At first, it didn't seem like a big challenge, but after playing around with a JavaScript-based solution provided to us, and aiming to find a solution that would work without JavaScript, my colleagues and I, concluded that a little JavaScript is necessary to animate the fill state of the circle...
With CSS Grid Layout around the corner and Flexbox being broadly supported, it seems that the importance of grid frameworks is declining. Some people even say that Flexbox made grid frameworks obsolete. I disagree...
One of my favorite CSS architecture topics has been discussed over the last few days: styling things in the context of other things. It all started with a tweet from Dave Rupert. He asked whether the style...
Up until a few years ago, most people didn't put much thought into „CSS architecture“ (I'm quite sure it wasn't even a thing). Around the year 2009 some sophisticated fronted folks (most notably Nicole Sullivan) started talking about concepts like OOCSS...