If you like Windows 8 styled designs this post will fit you and help create website in metro style. This modern tile-based UI is good for different businesses like consulting, logistics, translation services, education and childcare projects. Bright and visually optimized designs are also great for creative site owners with portfolios.
![](data:image/svg+xml;charset=utf-8,<svg height="285" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
Back in 2013 we analyzed metro website designs and featured their most significant elements. If you’re interested in this kind of information you can click the previous link and get inspired with 21 metro style website templates.
If you’re planning to create your next website in metro style you may need some help with it. Here we have 15 metro style resources such as frameworks, plugins and templates. Most of them are free, some are not. They will be helpful whether you decide to create a site from scratch or to use a theme
We wish you good luck on the way of enthralling website creation!
1. Metro UI Template
This is two in one, please use it as a website framework or a template.
![](data:image/svg+xml;charset=utf-8,<svg height="232" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
2. Metro UI CSS 2.0
This is an easy to use set of CSS styles that is created to build modern user interfaces.
![](data:image/svg+xml;charset=utf-8,<svg height="341" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
3. Bootmetro
This metro style web framework will help you create Windows 8 like apps.
![](data:image/svg+xml;charset=utf-8,<svg height="309" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
4. Metro-Bootstrap
Twitter Bootstrap presents the metro style inspired solution.
![](data:image/svg+xml;charset=utf-8,<svg height="247" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
5. Droptiles
Droptiles is built with HTML, Javascript and CSS so it is compatible with almost any platform. This framework builds metro style websites with mini apps (tiles) that launch a full screen app when clicked.
![](data:image/svg+xml;charset=utf-8,<svg height="252" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
6. Simple Metro PHP Gallery
This gallery script uses .PNG, .JPG and .GIF image files. Thumbnails for all uploaded images are created automatically.
![](data:image/svg+xml;charset=utf-8,<svg height="167" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
7. Motown
This is a JavaScript library builder for metro style fans.
![](data:image/svg+xml;charset=utf-8,<svg height="292" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
8. Metro JS
This is a jQuery plugin that is in the developments phase. However, right now it helps create metro style websites.
![](data:image/svg+xml;charset=utf-8,<svg height="190" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
9. jQuery Metro Plugin
This is a set of jQuery Metro UI Buttons.
![](data:image/svg+xml;charset=utf-8,<svg height="266" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
10. jQuit Builder
This tool is aimed at developers who create custom jQuery UI themes in metro style.
![](data:image/svg+xml;charset=utf-8,<svg height="383" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
11. Website Template with Rainbow Navigation
This clean business website theme combines text labels and icons within navigation tabs.
![](data:image/svg+xml;charset=utf-8,<svg height="320" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
12. Metro Style Website Template for Kids
Vivid colors work good for kids web designs. Text-based menu is also an effective element of the metro style.
![](data:image/svg+xml;charset=utf-8,<svg height="374" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
13. Photo Portfolio Web Template
This metro style design uses menu icons instead of text labels. Large site title is made with a thin font that fits the theme.
![](data:image/svg+xml;charset=utf-8,<svg height="333" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
14. Aquarium Website Template
This simple and flexible theme includes the built-in control panel. Thus it’s easy to customize all content tiles and navigation elements.
![](data:image/svg+xml;charset=utf-8,<svg height="358" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
15. Sports Website Template
This design suits content-rich projects. A grid layout allows to present a lot of information at a time.
![](data:image/svg+xml;charset=utf-8,<svg height="359" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)