16 Tools You Need To Create a Metro UI-Styled Website
In Ma-No we 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).
If you like the Metro UI and planning to create your next website with inspirations from it, here are all the resource to create Metro UI-like layouts:
Frameworks & Templates
Metro UI CSS allows to create a Web site in the style of Windows 8 quickly and without distractions on routine tasks.
Metro UI CSS a set of styles to create a site with an interface similar to Windows 8 Metro UI. This set of styles was developed as a self-contained solution.
Metro UI CSS is made with LESS. It makes developing systems-based CSS faster, easier, and more fun.
Browsers: Internet Explorer 9+, Chrome, Firefox, Opera, Safari
BootMetro is built on top of Twitter Bootstrap and inspired by the Metro UI CSS by Sergey Pimenov.
Simple bootstrap from Twitter with Metro style.
It has all the beauties of Bootstrap and also includes the LESS styles as well.
This project is a website framework and template to build sites using the style of the new Windows 8 Metro UI.
It has smooth transitions and it's easy to modify. Many tiles are included, and you can create your own tiles easily. This templating framework is meant for people that want to make great-looking and impressive with basic HTML knowledge. Check it out!
Droptiles is a Windows 8 Start like Metro style Web 2.0 Dashboard. It builds the experience using Tiles . Tiles are mini apps that can fetch data from external sources.
The sample project is built using ASP.NET to show some server side integration, like Signup, Login and getting dynamic data from server. But with very little change you can port it to PHP, Ruby, JSP or any other platform. Droptiles is the sequel of my Dropthings, which is the first Open Source Web 2.0 Dashboard.
Simple metro php gallery (smpg) is a leightweight, easy to use gallery script inspired by the metro ui with support for .png, .jpg and .gif image files. it generates thumbnails for faster loading times and uses a slightly modified version of the lightbox 2 script by lokesh dhakar for displaying your images.
It is also fully html5 and css3 compliant.
Motown is a library designed to help you build Metro-style apps based on web technologies that are maintainable and have great performance, using as little code as possible. It makes smaller applications easy and larger more complex applications possible.
jQuery Plugins For Metro UI-Styled Websites
Jq-metro is a jquery plugin project started on April 2011 and aims to provide metro-style user interface for browsers via jquery.
It's early in the development phase, but all features should work on at least IE7+(Win/WinPhone), Firefox, Chrome, Android, Opera, and Safari(OSX/iOS). Want to make a 'Me' tile or a 'People' tile like you see on Windows Phone for your website? Metro JS makes it easy!
The plugin enables us to create the tiled-views with ease and this is its only focus.
This theme provides a Metro user interface for Cordova apps using jQuery Mobile on Windows Phone 7.5.
With jQUIT Builder you can build custom jQuery UI themes based on Metro UI. Use the controls in the left side, and when you’re done press download. Feel free to include the theme on your own website, however keep in mind this is a beta version and can’t be guarenteed 100% bugfree yet.
Free Metro UI Icons
Handcrafted pixel perfect icons tailored for the Modern UI style. Each and every icon is carefully crafted in Expression Design with vector in mind. Now hosted on GitHub finding new icons and tracking your requests is easier than ever.
A free set of 670+ Windows 8 dock icons and it grows regulary.
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.
Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN END DEVELOPMENT.