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

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.

  • All are good. i like this.

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

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

  • Ben Sandberg
  • Anonymous

    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”.

  • victorwoo

    Which is the “best” you feel?

  • @victorwoo,

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

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

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

  • srivathsava

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

  • 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!

  • 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.

  • adam

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

  • Steve Lewis

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

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

  • 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.

Search