Skip to content
Quick development of MetroStyling , Cross Platform, Cross Browser and All Device supported.
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Hi, MetroStrap is a simple framework developed using HTML, CSS, jQuery and XML, to instantly build Metro style tile based user interface( generally seen in windows phone). This kind of styling is widely used in rapid creation of webpages, dashboards and analytics. Metrostrap is cross platform and cross browser compatible. This auto adjusts in all devices ( aka responsive css included ).

How to use MetroStrap ?

**Step 1: **Download the repository.

Step 2: Place the extracted files into your project directory. The file 'index.html' shows the default tile structure that comes with the framework.

Step 3: Depending upon your requirement you can modify the metroConfig.xml

Good to know - What each tag in metroConfig.xml mean ?

<count></count>- It is the count of tiles that would be shown on the webpage. 
<text></text>- Content that needs to be displayed in the tile div. 
<type></type>- Any conditional clause for further use. ( See example to understand better : ) .
<class></class>- CSS class for the tile. 
<background></background>- Background color of the tile. 
<color></color> - Text color of the tile. 
<width></width> - width of the tile. 
<height></height>- height of the tile.

If any of the above values are left blank , default values will be rendered. Instead of taking the pain of writing XML code and waiting to publish the change and view result. you can be smart to use the tile simulator for the same. :) :)

Tile Simulator is available at :

That's it from my end. If you like it or want to suggest changes, I would be more than happy. 
Reach me on twitter : @ngandamalla.

Cheers !! 
Something went wrong with that request. Please try again.