Css

Variables in Design Systems

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..

Read more

Creating a Responsive Alternating Two Column Layout with Flexbox

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 own journey of creating a two column layout featuring the image left / text right, text right / image left pattern, I've gone through very recently...

Read more

Vue.js Application Structure and CSS Architecture

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...

Read more

Two Tier Sass Variables / CSS Custom Properties

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 very useful tool to help with consistency and flexibility. Although variables can make your life as a developer a lot easier, there are many considerations you have to keep in mind when defining variables for your CSS framework...

Read more

The Ultimative Flexbox Based CSS Layout

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 also switch to CSS Grid Layout for good, we have to rely solely on Flexbox to serve all of our layout needs. But this is not a bad thing at all, Flexbox is pretty powerful by itself already...

Read more

CSS Selector Namespaces for Stable Acceptance Tests

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...

Read more

Building a Responsive Priority+ Horizontal Scroll Navigation

One of the harder problems to solve in responsive design and especially when designing websites which are supposed to work well on small screens, is building 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...

Read more

Using Gulp and UnCSS in Combination with Sass based Hugo themes

My own blog – you're currently reading – runs on Hugo and so far I'm very happy with it's 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 wich loads almost instantly and scores highly in the Google PageSpeed Insights test...

Read more