css – select, dropdown arrow

css arrow for html selects: in LESS


simple tooltip, multiline, pure css


sass spacing helper – margin and padding

The above structure will generate the following classes:

Example usage:


less helpers – spacings

Above code will generate the following helper classes: (example for number 10)


unveil.js – lazy loading image with css animation






SASS and LESS mixin for transitions

Better than pure CSS ist, to write LESS or SASS/SCSS.

Here are some mixins …




Making a websites’s mega menu accessible for tablets and below

The goal is to allow click events on the first level for desktop browsers, and to trigger a hover event for mobile browsers.

How to detect a mobile browser? I chose this approach: http://stackoverflow.com/a/14301832/4074710

The mega menu:

The javascript:

Of course this is not THE perfect solution, but it works.

less helper for responsive development

I use the following 2 mixins for responsive development (e.g. with bootstrap):



more semantic html with less and bootstrap

Classic Bootstrap:

More semantic version:


use fonts from google fonts library local

Download and extract selected fonts (collection) from google fonts library. Then open the link href target of your include statement in your browser e.g.:

Copy the desired @font-face statement from there, to your local css file:

And modify it like to your needs (truetype format + file path):

Thats it.