The metro design style is getting hotter right now and we see it used as a design approach on various websites. Microsoft originally created metro as a concept, for use in the Windows Phone and it is an internal code name of their typography-based design language. The main design principle of Metro is to give more focus on the content of applications by relying more on typography and less on graphics. The Metro style is typically implemented using many strong colors and a “flat” design with large single colored rectangular design elements.
Since the Metro style is so hot right now, I thought you might want to add it to some of your web project. I collected a set of ready to use Metro scripts and some tutorials you can use to learn the basics. Most Metro designs are responsive, and they will work great with other responsive layout scripts. Hope you find this article useful and that you will share it with your friends and coworkers!
Metrotabs is a light jQuery plugin to create tabs with the trendy metro style. You can align tabs positions at anywhere you like ( horizontal/vertical or any way ). The content can be anything ( paragraphs, images, video, iframe, … ), every content is an independent file. When a tab is clicked the content of this tab will be load by ajax method with slide effects. You can customize the style of tabs and content by choose from many styles, many colors/images have already created in CSS file or make new ones by your own.
Megafolio Pro is a fully responsive media grid plugin that allows you to display content in almost every way possible using preset or randomly generated layouts.
tile Js – MORE INFO
The Metro Flexible Navigation is a minimal, clean grid layout inspired by the new Windows 8 interface. It can be customized to be laid out horizontally or vertically. It’s scrollable and dragable at the same time and contains useful sliding controls. Icons can be changed, there is a large collection available.
Metro CSS3 Mega Menu– MORE INFO
OneMenu is a jQuery navigation menu plugin that is created for Metro UI themes. OneMenu supports responsive design, unlimited menus.
Metro Gallery a flexible and easy to integrate photo gallery featured in Metro Design. It allows you to build your unique photo wall with your custom settings.
Metro UI Template – MORE INFO / DEMO
A Template that will help you build Windows 8-style websites with ease.
This is a Login form that use CSS3 and jQuery Tricks to look like windows 8 login screen.
A help desk ticketing system will allow you to provide prompt and efficient support to your clients.
Metro Help Desk comes by default with an integrated FAQ and manuals systems, thus allowing staff members to decrease response time and improve efficiency.
MetroPreloader is a easy to use preloader which gives you this ability to easily setup your website preloading in a nice metro designed loading screen and display the fully loaded website when it finishes.
jQuery Metro Plugin – MORE INFO / DEMO
jQuery Metro UI Buttons is an easy way to build websites with a new Metro UI.
MetNav is a vertical navigation menu plugin. It is developed on jQuery library.
jQuery UI Themes – MORE INFO
Using this plugin you can build custom jQuery UI themes based on Metro UI.
Droptiles – MORE INFO / DEMO
Droptiles is an Open Source 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.
Metro Notifications is a jQuery plugin that brings the notifications to a new level.
With this simple jQuery Plugin you can easily create Metro (now simply called Windows 8 UI) style navigation bars. The plugin package comes with the icon pack called iconic created by P.J. Onori, which you can easily set with CSS classes.
Creating a Metro Style Menu in HTML and CSS- MORE INFO