Metro/Modern UI CSS/HTML Frameworks

image1606-570x194.png

 

If you are looking for a current Metro Modern UI CSS/HTML Framework I’ve collected a little selection that might be helpful for you. Watches out the names are quite similar.

Metro-Bootstrap:

index

Metro-Bootstrap relies on Twitter Bootstrap and because of this it is easy to use. The colors are more “metro style” (as I would call it) and most of the elements are kind of back to the basics – compared to the original Bootstrap.

There is also a Tiles component but in fact it doesn’t offer many opportunities in the moment so it is not very comfortable to work with.

index

Author of the Framwork: Talkslab

GitHub page

If you are just interested in the style in my opinion this could be a good option.

BootMetro:

image

BootMetro relies on Twitter Bootstrap as well and is inspired by Metro UI CSS (what I’m going to talk about later) Framework and it offers a lot of Metro components:

- Tiles

- Application-Bar

- Login

- Charms

- Styles for “Standard-Form-Elements”

image

In fact it offers you everything you will need to design your Web-Application like a Windows 8 App. But unfortunately I’m not very comfortable with this alternative because in my opinion this is way to desktop-oriented. Even the scroll direction in Hub is horizontal – matter of taste Zwinkerndes Smiley however you don’t have to use it.

Anyway it is much more advanced than the “Metro-Bootstrap” project. Also the author included some elements of the HTML5 Boilerplate.

GitHub page

Metro UI CSS

image

The Metro UI CSS isn’t related to Twitter Bootstrap but anyway it offers similar features. Of course there are Tiles and a number of fancied up Form Controls:

image1609

Most important disadvantage in my opinion: they didn’t rely on Bootstrap. Maybe BootMetro would be the better choice?

GitHub page

MAdmin (with costs)Preview

image

If you are planning to create an administrator website in the metro-look you might consider using MAdmin. It also relies on Bootstrap but you have to pay 20$ per application. Not a huge problem at all in the business environment. It doesn’t offer a huge “Tile”-support but a nice menu and everything else you might need in the administrative field.

To the project page

My result

Metro-Bootstrap is quite easy to integrate and the Styles are created with LESS what makes it easier to adapt it. A good base if you are used to work without Tiles and Win-8 Controls. BootMetro is powerful but it seems less “classy” to me but the Form Controls are well done. I suppose the developer uses CSS files as well – this could be a problem when it comes to the adaption. The Metro UI CSS Framework doesn’t rely on Bootstrap and because of this I dismiss it. MAdmin could be a good choice for admin pages but it’s not useful for fun projects.

More?

If you know some other “metro” CSS/HTML Frameworks I left out don’t hesitate to tell me.

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

About the author

Written by

Learn more about our team.

  • Pingback: The Morning Brew - Chris Alcock » The Morning Brew #1213

  • http://www.broadcastbabble.com Matthew Doig

    Its not of the same scale as these frameworks, but i did put together a “metro” wordpress theme for my blog. I’m happy to post the code or share the theme with anyone interested.

    • http://battleprogrammer.wordpress.com Lutfi

      Clean and simple themes, can you share your themes? thx in advance. :)

  • http://Website William

    I would like to see your website and the code ass well. THNX!

  • http://www.cheller.info/extnetmodernui cheller
  • http://Website sonu

    i’m new to this
    could someone please tell me which is the best framework and how to use it in my twenty twelve default theme

  • http://www.widestate.com baidyanath

    Thanks for clarifying the different aspects bootstrap and metro UI.

Recent Posts

  • HowTo: make out Retweet-counter in a random URL

      Twitter offers some interesting functions with the integration of the twitter button – every user can see how often the website has been retweeted and he can do the same with just one click. But of course the whole thing has his price: - The integration of the Twitter JavaScript makes the whole data […]

  • Time-controlled Azure WebJobs – Azure as easy as it get‘s

        While still in development the Azure WebJob SDK offers some cool features for procession and supply of information. A good example is the sample that observes the Azure Queue and processes an item as soon as it spots one.   Scenario: time-controlled activities – without queue and so on My scenario was quite […]

  • image2021-570x194_thumb.png
    HowTo: Create RSS Feeds with ASP.NET MVC

    I’ve already written about how to consume RSS or Atom Feeds with the SyndicationFeed (in German, sry) but todays post is about how to create or publish an own feed. Beside the age of the feed standard and the much defamation from Facebook, Twitter and Google on RSS/Atom I consider this easy to consume API […]

  • image1997-311x194_thumb.png
    How to access an Azure Website with the local IIS Manager

    Since the end of February it is possible to access an Azure Website with the IIS Manager. Although the Azure Management site offers some information there are more details visible at the IIS Manager. For the connection you will need an IIS Manager and the IIS Manager for Remote Administration Extension. It’s also possible to […]

  • image1929-570x143_thumb.png
    Create and validate own Json-Web-Tokens (JWTs)

    If you are interested in web authentication you probably have heard about JSON Web tokens (JWT). What is a JWT? Maybe I’m not using the correct security termination but however: JWTs are used to exchange claims between two systems. For example: You want to log on to a service (like Facebook, Twitter, etc.) and want […]

Support us