Web设计资源:Windows8的Metro UI风格布局案例

微软已经正式发布了windows 8操作系统，Windows操作系统的风格已经完全改变成了瓷贴状的Metro UI。对于微软来说这是一个巨大的改变，而且所有微软的平台，包括桌面、平板、移动及网站都使用这个UI风格。Metro UI包含了所有的现代web设计的特点：简化、基于网格的界面、富有连续性。

本文收集了很多Windows 8的Metro UI风格布局资源，希望大家喜欢！

一、Metro风格的网站框架和模板

Metro UI CSS

Metro UI CSS是一个非常完整的、用于创建Metro风格网站的框架。使用LESS创建，并且拥有网格系统、排版样式、表格、按钮和图片。同时也拥有内建的JavaScript组件，帮助你生成瓷贴、菜单、边栏、进度条、提示等等。

BootMetro

BootMetro是一个Twitter Bootstrap的Metro风格主题。你可以创建Metro风格的样式。例如，瓷贴UI、工具栏和其它组件。

metro-bootstrap

类似上面的BootMetro，这是另外一个Twitter Bootstrap主题，拥有所有的漂亮组件，并且包含了LESS。

Metro UI Template

这是一个网站的框架和模板，用来创建Windows 8 Metro UI风格的界面。拥有平滑的过渡效果和Tiles（包括RSS、Twitter、weather等）。

Droptiles – Metro-Style Web Dashboard

一个开源的Windows 8开始界面仪表板（类似iGoogle）。使用tiles来展示信息，每一个tiles是独立的应用，可以用来获取数据。这个项目基于ASP.NET，可以移植到其它语言。

PHP Image Gallery In Metro UI

一个PHP的图片画廊，可以自动生成缩略图，并且可以使用lightbox来显示图片。支持HTML5和CSS3。

Motown

一个用来创建Metro风格应用的类库，使用很少代码即可实现。不依赖其它JavaScript类库。

二、Metro风格jQuery插件资源

jq-metro

一个jQuery插件，用来创建Metro风格的界面。目前包含Panorama、Privot、进度条、列表选择、切换、按钮等。

Metro JS

这个jQuery Metro UI插件可以用来创建tiles、应用条，并且支持主题。功能和设计完全可定制。

 jQuery Metro UI Plugin

这个插件可以简单的创建tiles视图并且支持聚焦。

jQuery Mobile Metro Theme

一个免费jQuery移动Metro UI主题，完全支持自定义。使用不同插件来处理应用栏、进度条、按钮和日期选择器。

Metro UI Theme Builder For jQuery UI

拥有themeroller风格的jQuery UI主题插件，帮助你创建Metro UI风格样式。

TileJS (non-jQuery)

使用标准的JavaScript代码来创建tiles，并且拥有完整tiles的onclick效果。

三、免费Metro UI图标

Modern UI Icons

一套简单手绘的Metro UI风格图标，拥有48×48大小的PNG格式及XAML文件。

Metro UI Dock Icon Set

一套670枚的Windows 8图标，而且还在添加中。拥有512×512 png格式、256×256 ico和svg格式。

Metro Icons

Windows Phone 7的图标，非常适合Metro UI应用。