The newly released Windows 8 has won many people’s heart for its interface. I just got my PC upgraded to Windows 8 today and I’m loving every single bit of the UI. It just looks so fresh and easy to the eyes. With this new UI, Microsoft is putting emphasis on content of applications, relying more on typography and less on graphics (“content before chrome”). Microsoft has also recently revamped its websites. Look at the new and slick Microsoft.com and Outlook.com. How could one not fall in love with websites with such UI?
Having fallen in love with new Windows UI (previously called Metro/Modern UI), I’ve decided to take inspiration from that for my personal website that I’m currently working on. I embarked on my journey to find resources on creating such website. There are currently so many CSS frameworks available to ease up your web design process. You could get your static web prototype up in a matter of hours.
So after doing some research, I’ve found three frameworks inspired by the new Windows UI that are worth considering.
Metro Bootstrap (view site)
Metro Bootstrap, as its name suggests, relies on Twitter Bootstrap and because of that it is easy to use. Most elements are brought back to basic (no gradients, rounded corners) as compared to the original bootstrap. The support for tiles are pretty minimum as for now.
BootMetro (view site)
BootMetro is another framework that relies on Twitter Bootstrap and provides a lot of Windows 8 components, such as Tiles, Application-Bar, Login, Charms, and styles for Form Elements. It offers you almost every thing you need to make your website / web app like a Windows 8 app. The default scrolling behaviour is horizontal. However, you have the option not to use it.
Metro UI CSS (view site)
The Metro UI CSS isn’t related to Twitter Bootstrap but it still offers similar features. Of course there are Tiles and a number of fancied up Form Controls. The sample site looks pretty nice. It’s got template for Selected Tiles, Image Slider Tiles, and Badges.
Beside the three that I’ve mentioned above, you could also take a look at DropTiles if you want server side integration.
Based on my finding, Metro Bootstrap is quite easy to integrate and it would be a good base if you intend to work on a simple website without dynamic Tiles and Windows 8 controls. BootMetro seems pretty powerful, but isn’t as classy. Metro UI CSS doesn’t rely on Bootstrap, so its cross browser support requires much more testing as compared to the other two.
I will give Metro Bootstrap a try. If you’re using any of the frameworks mentioned or probably any other ones, you could share your experience with us. With these weapons bestowed upon you, go and spice up your site or app with Windows 8 flavours!+
Follow