unveil.js – lazy loading image with css animation

LESS

JS

Image

 

 

SASS and LESS mixin for transitions

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

Here are some mixins …

SCSS:

LESS:

 

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):

Example:

 

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.