Globalstyles

Metro UI CSS provides any additional global routines classes for creating and styling elements such as: color classes, positioning classes, columns and much more.

Reset styles: Metro UI CSS uses modified Normalize.css by Nicolas Gallaher.

Colors

Metro UI CSS provides access to the main colors used in Windows 8. You can set background, foreground, outline, border color for any elements.

*-black
*-white
*-lime
*-green
*-emerald
*-teal
*-blue
*-cyan
*-cobalt
*-indigo
*-violet
*-pink
*-magenta
*-crimson
*-red
*-orange
*-amber
*-yellow
*-brown
*-olive
*-steel
*-mauve
*-taupe
*-gray
*-dark
*-darker
*-transparent
*-darkBrown
*-darkCrimson
*-darkMagenta
*-darkIndigo
*-darkCyan
*-darkCobalt
*-darkTeal
*-darkEmerald
*-darkGreen
*-darkOrange
*-darkRed
*-darkPink
*-darkViolet
*-darkBlue
*-lightBlue
*-lightTeal
*-lightOlive
*-lightOrange
*-lightPink
*-lightRed
*-lightGreen

To set background color: use prefix bg, to set foreground color: use prefix fg, to set outline color: use prefix ol, to set border color: use prefix bd. Also you can set active, hover and focus colors with classes bg(fg)-hover-*, bg(fg)-active-* and bg(fg)-focus-*.

<div class="bg-darkPink">...</div>
<span class="fg-white">...</span>
<div class="tile ol-white">...</div>
<a class="fg-cyan fg-hover-cobalt">...</a>

Mixin classes

Ribbed mixin

To create ribbed background use prefix ribbed with any color above. ribbed-work is an extra.

<div class="ribbed-amber">...</div>
<div class="ribbed-cyan">...</div>
<div class="ribbed-work">...</div>