cssmicrosoft-metrometro-ui-css

How to achieve a metro style in web


I'm not really a designer so I used css framework. And I find MetroUI V3 (I love metro style) a great tool but I can only follow their templates or examples shown and apply it to my project. Im not that really creative.

And somehow, I want to mimic this design (see attached) because I want to display a collection of items, but since I don't have any images, I want to use tiles that could fit in and only put initials and some details on the side.

Can this be done using Metro UI V3?

This image is not mine. reference Reference for list

What I have so far. (I know, its not that much) I want to show more details in the list though.

enter image description here

Any suggestion for the design would be greatly appreciated. Thanks


Solution

  • I believe you can achieve that easily by using WinJS, Read more about it: https://dev.windows.com/en-us/develop/winjs

    And you can try it and play with it by: http://try.buildwinjs.com/playground/

    You can select Grouped GridLayout to see the list, it has a lot of metro styled components..