Writing CSS in Dutch using PostCSS

CSS & HTML, 3 July 2016, < 1

Many years ago there were a couple of developers that made a Dutch version of CSS but unfortunately that version got lost to history. When I encountered a PostCSS plugin to translate CSS to German, I decided to create a new Dutch version of CSS: postcss-dutch-stylesheets.

PostCSS-Dutch-stylesheets is a port of postcss-german-stylesheets that allows you to write CSS like this:

.foo {
    hoogte: 300px;
    ondermarge: 10px;
    tekstgrootte: 20px !belangrijk;
    achtergrondkleur: zwart;
    kleur: wit;
}

And it will turn it into

.foo {
    height: 300px;
    margin-bottom: 10px;
    font-size: 20px !important;
    background-color: black;
    color: white;
}

This was mostly something I did for fun in a couple of hours, but I suppose there might be some merit in having a translation of some of the CSS concepts if only for Dutch developers to better understand what each property does.

The german version had both a published npm package and tests running on Travis, so I made sure I added both of those (which was a breeze!). Getting postcss-dutch-stylesheets is as easy as:

 $ npm install postcss-dutch-stylesheets

Code is up on Github, feel free to contribute!

Hocus Pocus: PostCSS to finish the trilogy

CSS & HTML , 26 January 2017

Back in 2014, nearly three years ago, I wrote about being tired of always writing a:hover, a:focus and wanting an a:hocus to do both for me. It got a lot of proposed solutions, including a Sass and a future-css one using CSS Aliases. In 2016, a year ago, I revisited the idea with CSS Custom…

Re-Creating the Porky Pig Animation from Looney Tunes in CSS

CSS & HTML , 28 January 2021

Last December I wrote an article in Dutch for the Fronteers blog on a fun bit of CSS I wrote that use 3D transforms to create a cool looking effect: Porky Pig coming out of those red rings announcing the end of a Looney Tunes cartoon. At the time, I was creating a resource of…

Full bleed layout using simple CSS

CSS & HTML , 6 October 2020

There are many different ways to achieve the same layout in CSS and HTML. Some are now frowned upon, like tables or floats, and others tend to overlap somewhat, but have a clear specific purpose, like Flexbox and Grid. But CSS has another layout engine, and it’s one that has been part of CSS since…

Kilian Valkhof

Building tools that make developers awesome.