Requires HTML5 doctype

Metro UI CSS makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.

    <!DOCTYPE html>
    <html lang="en">


All javascript plugins required jQuery.

Reset Styles

In Metro UI CSS used normalize.css by Nicolas Gallaher


  • *-color-green
  • *-color-greenDark
  • *-color-greenLight
  • *-color-magenta
  • *-color-pink
  • *-color-pinkDark


  • *-color-yellow
  • *-color-darken
  • *-color-purple
  • *-color-teal
  • *-color-blue
  • *-color-blueDark


  • *-color-blueLight
  • *-color-orange
  • *-color-orangeDark
  • *-color-red
  • *-color-redLight
  • *-color-white

To set background color use prefix bg, for set text color use prefix fg

    <div class="bg-color-red">...</div>
    <span class="fg-color-blue">...</span>

To set border color use prefix border

    <div class="border-color-red">...</div>

To set outline color for components (such as tile, listView item, etc.) use prefix outline

    <div class="tile outline-color-red">...</div>


In Metro UI CSS i use Segoe UI, Open Sans fonts (depending on the availability in the system).