Writing CSS in Dutch using PostCSS

#css #design #webdev #beginners

Most programming, styling and markup languages use English as their basis, but that doesn't mean other languages wouldn't work. Like a Dutch version of CSS.

PostCSS-Dutch-stylesheets 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;
}

I especially like !belangrijk.

For both the properties and values, translation lists are available:

Have a look and see if you find any favorite Dutch words :)

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, but it was mostly something I did for fun in a couple of hours. PostCSS makes fun things like this incredibly easy.

This plugin is based on the German version doing the same but for German.

Getting postcss-dutch-stylesheets is as easy as:

$ npm install postcss-dutch-stylesheets

Code is up on Github, feel free to contribute!