Metro UI CSS 0.15.8.11

Globalstyles

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">
      ...
    </html>

Reset Styles

In Metro UI CSS used normalize.css by Nicolas Gallaher

Colors

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

 

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

 

  • *-color-blueLight
  • *-color-orange
  • *-color-orangeDark
  • *-color-red
  • *-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>

Fonts

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

2012, Metro UI CSS © by Sergey Pimenov