Sass

Magic Numbers in CSS: How to Identify and Fight Them

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

Read more

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

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

Read more

Don't Make Things More Complicated as They Are

Yesterday I learned a valuable lesson on how to solve a problem by looking at it from a different angle. The longest open issues in the node-sass-magic-importer GitHub issue queue, is about source map support...

Read more

Using Gulp and UnCSS in Combination with Sass based Hugo themes

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

Read more

Dreaming of a Package Based CSS Workflow

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

Read more

A (Final?) Look at Grid Frameworks

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

Read more

Building avalanche 4.x.x

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

Read more