Metro Style Scripts and Tutorials for Web Developers

The metro design style is slowly gaining popularity since most web developers today prefer to use it for their various websites with the use of JavaScript, HTML5, and CSS3. Originally created by Microsoft as a concept for their Windows phone, the Metro style scripts is the internal code name of the typography-based design language that depend more on typography as oppose to graphics. The development of its application harnesses the rich capabilities of Windows 8 through Windows Runtime and Javascript, as it reflects or varies from the traditional web programming.

It also focuses more on the applications that work well with other responsive layout scripts. Meanwhile, the expert advice, tips, and shortcuts are good tools to have in a web developer’s arsenal to accelerate their move from web to Metro style apps. It is also easy to detect if the website uses the Metro style as it usually have large single rectangular design elements, besides the flat design and its strong colors.

Here are the Metro Style Scripts for web developers, where they can take advantage of its minimalistic design on their websites and create their own Metro style menus,Metro style plugins and Metro notifications so that their contents and typography will work well on mobile devices as well.

1. Creating a Metro Style Menu in HTML and CSS

More Details || Demo

Creating a Metro Style Menu in HTML and CSS

This is the best Metro Style Scripts to use since this will allow you to use its similar menu via your CSS, HTML, and JavaScript skills based on simple tiles that only have two different sizes.

2. Metro Notifications

More Details || Demo

metro-notifications

This jQuery-based Metro style has 6 stylish plugins in one single file including small and big notifications, alerts, inputs, and loadings where almost all are responsive now except for the side panels.

3. MetNav

More Details || Demo

metnav-jquery-navigation

One of the very lightweight Metro style plugins that contains only 6KB of JavaScript, it follows the main features of the Metro style since it uses live tiles and supports all of the tiles’ content.

4. Metro Preloader

More Details || Demo

metro-preloader

The best tool for web developers to set up their websites’ preloading easily, its best features include the modular design, nice-looking Metro design using Metro UI, CSS3 animations, multiple backgrounds, independent code, and unminified source.

5. Metro Login

More Details || Demo

metro-login

One of the Metro style scripts that use jQuery and CSS3, the Metro Login can make your website look like the Windows 8 login screen.

6. Metro UI Template

More Details || Demo

metro-ui-template

For those who want to create their very own Metro UI-style websites, this tool offers a template using its best features such as content-scrollers, live tiles, slideshows, among others.

7. Metro CSS3 Mega Menu

More Details || Demo

Metro CSS3 Mega Menu

Fully-loaded with 5 images animations and 4 different tile layouts, it has well-documented Metro style plugins that are easy to install and use without using jQuery or JavaScript.

8. BootMetro

More Details || Demo

boot-metro

Built on top of the Twitter Bootstrap, this has simple and flexible CSS, JavaScript, and HTML for web apps that need cool minimal navigation in Metro style without having to run on Windows 8.

9. MetroTabs with jQuery and CSS3 Effects

More Details || Demo

metrotabs-with-jquery-and-css3-effects

For those who want to create tabs using the Metro style scripts, you can use this tool to align tabs, either in horizontal or vertical position.

10. Megafolio Pro Responsive Grid jQuery Plugin

More Details || Demo

megafolio-pro-responsive-grid

Besides the fully-responsive plugins, it offers a variety of large options where you can choose from the styles provided from its preset or randomly-generated layouts.

11. MetroPanel – The New Navigator for Modern Sites

More Details || Demo

MetroPanel

This offers some Metro style plugins that you can use not only to make great panels but also to improve your page speed.

12. Boot Metro – Metro Style Side Menu

More Details || Demo

Boot Metro

This has simple and clean features such as crossbrowser, 900+ SVG icons, high resolution, etc. using a valid HTML5 for cool minimal navigation.

13. tile Js

More Details || Demo

tile-js

This has very interactive Metro style scripts allows you to select from preset tiles such as dripping paint, rasterizer, PAP, concentric, interactive topography, and so much more.

14. Metro Flexible Navigation

More Details || Demo

metro-flexible-navigation

This tool is used to customize websites not only horizontally or vertically, but also to make them drag-able and scrollable with the use of sliding controls.

15. jQmobile metro theme

More Details || Demo

jqmobile_thumb

Designed to work with Cordova on Windows Phone 7.5, it has Metro style plugins such as the backButtonHandler.js, dateTimePicker.js, etc. for optimal integration.

16. Onemenu – Responsive Metro UI Menu

More Details || Demo

onemenu-responsive-metro-ui

A lightweight jQuery navigation menu plugin, it has unlimited menus, responsive design, etc. that works on almost all platforms.

17. MelonHTML5 – Metro Gallery

More Details || Demo

melon-html5-metro-gallery

One of the best Metro style scripts that allows you to customize your photo wall, it offers some unique Metro designs, touch device support for swiping, etc. using 100 different tile sizes.

18. Metro JS

More Details || Demo

metro-js

This jQuery plugin focuses more on themes, live tiles, and application bar where all of its features work well in almost all the major browsers.

19. Metro Help Desk Support Tickets

More Details || Demo

metro-help-desk

Based on Metro UI and BootStrap, it offers Metro style plugins that provides efficient and prompt support for your help desk ticketing system.

20. jQuery Metro Plugin

More Details || Demo

jQuery Metro Plugin

For those who want to build websites with the new Metro UI, it has Csharp conversion enumerators and iNotifications, which allows you to communicate with site visitors through notifications on the screen.

21. jQuery UI Themes

More Details || Demo

jquery-ui-themes

This is one of the Metro style scripts that allow you to customize your website’s themes with the new Metro UI, which looks promising though it is still in its beta phase.

22. Droptiles

More Details || Demo

droptiles

Built entirely from CSS, HTML and JavaScript, it allows web developers to build their experience using tiles, the mini apps that fetches data from external sources, through the open source Metro style dashboard.

23. UI-Pro – Simple Metro Style Navigation Bar

More Details || Demo

ui-pro-simple-metro-style-navigation

With this Metro style plugins , it is now easier to create simple Metro UI-style navigation bar using just CSS3 with 249 style-able icons and icon fonts.

24. MelonHTML5 – METRO UI

More Details || Demo

melon-html5-metro-gallery

If you want your website to become desktop and mobile device-ready with responsive UI design, full HTML5 animations, and customizable tiles, among others; this is the right framework to use.

25. metro.js: recreating Windows 8 UI as a web interface

More Details || Demo

metro_js

Though this Metro style scripts, which was expanded from a little script that reproduced little animation effect, is not uploaded yet on a public github repository; you can use the script provided to help you recreate Windows 8 UI and expect amazing Metro style plugins soon, so show some love and support it.

Comments
  1. Arjun