Example of utility first design


To demonstrate the power of a utility first approach I have made an first example. Here you can see with which html structure and classes you can create a simple “card”.

See the Pen SCSS Utilites – Card example by Marco (@marcovanzomeren) on CodePen.

Read more about the css and scss utilities on my Github repository.

Profile picture Marco van Zomeren


Marco van Zomeren is a designer on a audio visual journey. Currently working full time at a company with several subsidiaries in the financial sector. Besides his day job he spends most of his spare time on producing electronic music. More...

Leave a Reply


Get all Material design colors with SCSS and CSS variables

Today I tried an expiriment with translating the Material design colors to a SCSS map. It turned out quit usefull. While combining the colors with a lightness and alpha variable,…

Read more

Kleuren kiezen voor je website

Een van de eerste dingen die ik ben gaan doen voor het re-design van mijn website is het vaststellen van een kleurenpalet. Ik ben tot de kleuren gekomen naar aanleiding…

Read more

Customizing utility classes with Bootstrap

While working on a method of creating all kinds of utility classes by myself, I was doing research to all kinds of frameworks who do this. My top 3 css…

Read more

Supercharging my css with Scss

At least an attempt. 😄 While Sass is still quite new for me, I am getting to know it better and better these days. The language really helps me to…

Read more

Wacom Bamboo pen and touch Catalina fix

Recently I wanted to use my Wacom Bamboo Pen & Touch again, so I plugged it in… without any success. The driver didn’t support it. So after testing it for…

Read more

Make your website dark-mode ready

Today I looked into the option to prepare your website for the dark-mode user setting. By applying different css styles for the preferred dark mode, I was able to translate…

Read more