.png)
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).
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 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 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
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
This is a website framework and template to create sites using the Windows 8Metro 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
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
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 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
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
The plugin enables us to create the tiled-views with ease and this is its only focus.
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
A ThemeRoller-like theme builder for jQuery UI that focuses on creating Metro UI looking outputs.
TileJS (non-jQuery)
A standalone JavaScript code for creating the tiles and accomplishing the tilting effect onClick (with CSS3).
Free Metro 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
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
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.
0 comments :