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: In Metro UI CSS used modified Normalize.css by Nicolas Gallaher.

Colors

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

• *-black
• *-white
• *-lime
• *-green
• *-emerald
• *-teal
• *-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>

Ribbed mixin

To create ribbed background use prefix ribbed

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

Mixin classes