Style and script to decorate an HTML navigation list as a Metro-style user interface. Inspired by the navigation menu used on the Jurassic World pre-release website and by the Metro UI start screen template.
The main points of customizability are the text, tile size, tile colour, and background image for each list item.
Text within a list item should be wrapped in a tag with the class text. Generally this would be the a tag used for navigation links.
There are two tile sizes available: small and large. The small size is the default one. To use the large size add the lg class to the list item. If you wish to keep up to four small tiles grouped together, have them in a nested list with the class quad.
The tile colours available draws from Google's Material Design Colour Palette. As such, the following classes are available to add to list items:
redpinkpurpledeep-purpleindigobluelight-bluecyantealgreenlight-greenlimeyellowamberorangedeep-orangebrowngreyorgrayblue-greyorblue-gray
For background images, mark the list item with the image class and include your image as an img with the bg class.