Shadow classes, display classes and unified number classes

Now Generation enables the support for custom shadow classes, that, with card enables you to design using Google Material Design without any trouble:

<div class="card no-shadow"></div>
<div class="card sw-0"></div>
<div class="card sw-c"></div>
<div class="card sw-1"></div>
<div class="card sw-2"></div>
<div class="card sw-3"></div>
<div class="card sw-4"></div>
<div class="card sw-5"></div>
<div class="card sw-6"></div>
<div class="card sw-7"></div>
<div class="card sw-8"></div>
<div class="card sw-9"></div>
<div class="card sw-10"></div>
<div class="card sw-11"></div>
<div class="card sw-12"></div>

sw-0 and no-shadow are the same class and sw-c is a special value that adds a smooth shadow between sw-0 and sw-1.

Display classes

You can use the force-relative, force-absolute and force-fixed classes for set the display property to relative, absolute or fixed.

And you can use the text-left, text-right and text-center classes like the left, center and right classes, but these instead of setting the direction of a flexbox container, sets the text-align property and aligns the text inclusive of block containers.

The block-left, block-right and block-clear can be used on block containers for make it float to the left, right or force it to no have multiples blocks at each side (block-clear). block-clear can be used with block-left and block-right.

Unified number classes

Now, all classes that are of the form [name][number] or [name]-[number] (number classes) are unified with a single sintax: [name]-[number], where [name] is the class name of at least 2 characters and [number] is the numbered value:

f[x] and o[x] classes are deprecated in favor of fx-[x] and od-[x].