Everything You Need To Create Windows 8 Metro UI-Styled Websites

13°

Windows 8 has arrived and the familiar look of Windows OS has completely changed with the tile-based Metro UI.

This is a big move by Microsoft as this new UI will be used in all their platforms including desktop, tablet, mobile and their website as well.

Personally, I liked the Metro UI as it fits into many aspects of the modern web design like simplicity, grid-based interfaces (good for responsive layouts) and it is consistent in every part (there is really a style guide behind it).

Metro UI Websites

Although tile-based UIs is nothing new, Metro UI will definitely inspire many designers and we’ll see websites similar to it.

If you like the Metro UI and planning to create your next website with inspirations from it, here are all the resource to create Windows 8 Metro UI-like layouts:

 

Frameworks & Templates


Metro UI CSS

Metro UI CSS

Metro UI CSS is a pretty complete framework for building Metro-like websites.

It is created with LESS and has a grid system, styles for typography, tables, forms, buttons, and images

There are also built-in JavaScript components for the popular tiles, menu, sidebar, accordion, progress bars, notices and more.

BootMetro

BootMetro

BootMetro is like a theme for Twitter Bootstrap that brings every feature of Bootstrap but with a Metro design.

It is actually some more as there are custom styles for the tiles, application bar and some other components.

metro-bootstrap

metro-bootstrap

Similar to BootMetro above, metro-bootstrap is again a theme for Twitter Bootstrap.

It has all the beauties of Bootstrap and also includes the LESS styles as well.

Metro UI Template

Metro UI Template

This is a website framework and template to create sites using the Windows 8 Metro UI style.

It features very smooth transitions and many tiles (RSS, Twitter, weather, etc.) are included.

The template is mobile-friendly and has a jQuery UI theme as well.

Droptiles – Metro-Style Web Dashboard

Droptiles

An open source Windows 8 Start-like Web 2.0 Dashboard (like iGoogle).

It displays info in tiles where each tile is a mini app itself fetching data from external sources.

The project is built with ASP.NET but can be ported to any other language with ease.

PHP Image Gallery In Metro UI

PHP Image Gallery Metro UI

A PHP image gallery script that can auto-generate thumbnails and can display images in a Lightbox.

it is fully HTML5 and CSS3 compliant.

Motown

A library to build Metro-style apps with Visual Studio using as little code as possible.

It doesn’t rely on any JavaScript frameworks.

 

jQuery Plugins For Metro UI-Styled Websites


jq-metro

jq-metro: Metro UI jQuery Plugin

jq-metro jQuery plugin comes with several control for creating Metro-like interfaces.

Currently, panorama, pivot, progress bar, list picker, toggle switch, buttons and textbox are available.

Metro JS

MetroJS

This jQuery Metro UI plugin is capable of creating the tiles, application bar and has theming support.

The tiles and application bar are highly customizable in means of functionality and design.

jQuery Metro UI Plugin

jQuery Metro UI Plugin

The plugin enables us to create the tiled-views with ease and this is its only focus.

jQuery Mobile Metro Theme

jQuery Mobile Metro Theme

A free jQuery mobile Metro UI theme that is customized for the Cordova-built apps.

It uses various plugins for handling the app bar, progress bar, toggle button and date-picker.

Metro UI Theme Builder For jQuery UI

jQUIT Builder

A ThemeRoller-like theme builder for jQuery UI that focuses on creating Metro UI looking outputs.

TileJS (non-jQuery)

TileJS

A standalone JavaScript code for creating the tiles and accomplishing the tilting effect onClick (with CSS3).

 

Free Metro UI Icons


Modern UI Icons

Modern UI Icons

A set of pixel-perfect and hand-crafted icons in the Metro UI style.

They come in .design, 48*48px PNG (for App Bar) and as XAML files.

Metro UI Dock Icon Set

Metro UI Dock Icon Set

A free set of 670+ Windows 8 dock icons and it grows regulary.

It is available in 512*512px .PNG, 256*256px .ICO and as .SVG (converted by another designer).

Metro Icons

Metro Icons

The icons are inspired from the Windows Phone 7 and still a good fit for Metro UI apps.

Download pack consists of 130 .PNG icons.

16 Comments
  1. Reply Lincy Mathew October 29, 2012 at 12:34 AM

    All are good. i like this.

  2. Reply Ünye October 29, 2012 at 5:22 AM

    Simgeler çok işime yarayacak. Teşekkürler yazı için…

  3. Reply Girishwar Kumar singh October 29, 2012 at 5:29 AM

    Really nice and latest designing technique, lots of thanks you are sharing these types of latest post.

  4. Reply Ben Sandberg October 29, 2012 at 10:59 AM
  5. Reply Anonymous November 5, 2012 at 12:53 PM

    It’s not called Metro anymore, but they have yet to come up with a good replacement. At the //Build/ conference, they called it “Windows Store App” instead of “Metro App”. This doesn’t work for web apps or other non-Windows 8 apps that use that design paradigm. I guess the best we can do for now is call it “Windows 8-Style UI”.

  6. Reply victorwoo November 8, 2012 at 4:10 AM

    Which is the “best” you feel?

  7. Reply Umut M. November 9, 2012 at 9:12 AM

    @victorwoo,

    As a Bootstrap fan, I would choose BootMetro. But others look cool too.

  8. Reply simEP November 14, 2012 at 8:18 AM

    Like Umut write, yes, BootMetro it’s really amazing. I’m self using this and everything in one place what you need.

  9. Reply Dinesh January 16, 2013 at 7:23 PM

    Me.. BootMetro.. thanks guys nice collections. Saved my time

  10. Reply srivathsava January 29, 2013 at 12:18 AM

    Hi I tried in grid app using javascript.. for first time accordion working but when we go n come again its not working

  11. Reply English Websites Navigation February 2, 2013 at 8:46 AM

    This is a big move by Microsoft as this new UI will be used in all their platforms including desktop, tablet, mobile and their website as well.

    Yeah!

  12. Reply Ping Song February 21, 2013 at 9:14 AM

    I love how simple Windows 8 interface is. I’ve been looking for this metro style for my own site for a while. Thanks for sharing.

  13. Reply adam March 13, 2013 at 12:20 AM

    i am looking for tiles that are draggable so that you can rearrange the tile interface, any suggestions

  14. Reply Steve Lewis April 2, 2013 at 6:58 AM

    Droptiles allows you to move the tiles around, although I found it very difficult to drop them where I wanted them!

  15. Reply ThemeSquirrel June 2, 2013 at 1:01 AM

    This is awesome, I’m a huge fan of the Windows 8 interface! Thanks for sharing!

  16. Reply Lainey Developer July 4, 2013 at 9:18 AM

    Really cool, I can do lots of things with Win 8, I was aware of some of them but rest are really awesome to know about them. Thanks for sharing nice information.

Leave a reply

Search