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.

WebResourcesDepot Feed