BootMetro: Metro style web framework(aozora.github.com)
aozora.github.com
BootMetro: Metro style web framework
http://aozora.github.com/bootmetro/
91 comments
> This is an abomination
That's pretty rude.
> Do we honestly need a "framework" to use the background-color and float properties?
This story is on the front page, so there are obviously some folk who would. I quite like it, and if it improves as a result of positive feedback, that'll be great. Your feedback has not been positive.
> I'm not trying to be a hater or a downer
Yes, yes you are. Or perhaps you meant "I am being a hater and a downer but I'm hardly having to put any effort into it".
> I just can't believe that this is the state of web design right now.
I can't believe this is the state of commenting right now. Ah, wait, no, this is just your comment and is not 'the state of commenting'.
As I would say, "COME ON!".
That's pretty rude.
> Do we honestly need a "framework" to use the background-color and float properties?
This story is on the front page, so there are obviously some folk who would. I quite like it, and if it improves as a result of positive feedback, that'll be great. Your feedback has not been positive.
> I'm not trying to be a hater or a downer
Yes, yes you are. Or perhaps you meant "I am being a hater and a downer but I'm hardly having to put any effort into it".
> I just can't believe that this is the state of web design right now.
I can't believe this is the state of commenting right now. Ah, wait, no, this is just your comment and is not 'the state of commenting'.
As I would say, "COME ON!".
> That's pretty rude.
He's entitled to his opinion and has the right to criticize whatever he wants, however he wants. If you don't like it, why not just move on.
Positive feedback is not the only useful type of feedback. If someone suggested, say, developing a new site on the Gopher protocol then the appropriate response is to tell them that it's a stupid idea, mainly because it is a stupid idea.
There is much more to be gained from emotionally disconnecting yourself from the fruits of your labour than it is to always, without fail be positive about everything. It is folly to pick yang over yin or vice-versa.
The fact of the matter is that a lot of people will have this emotional reaction to this project and not telling the author in order to protect their feelings is going to hurt their success in the long run.
I feel that being rude is insulting the person. Being honest is insulting the work (if one honestly feels that it is unworthy enough to be treated as such).
> Yes, yes you are. Or perhaps you meant "I am being a hater and a downer but I'm hardly having to put any effort into it".
A hater is someone who hates out of prejudice. For example, hating a celebrity because one is jealous of their wealth or think that they do not deserve what they have. I do not detect any prejudice here, just an honest reaction to something.
The most ironic thing about your post is that you mimic Grandparent's tone, which you yourself label as rude and throw it back at him. Surely a mature response is to respond in a way which you find acceptable, not simply stoop down to what you perceive to be a lower and, ultimately, unacceptable level?
He's entitled to his opinion and has the right to criticize whatever he wants, however he wants. If you don't like it, why not just move on.
Positive feedback is not the only useful type of feedback. If someone suggested, say, developing a new site on the Gopher protocol then the appropriate response is to tell them that it's a stupid idea, mainly because it is a stupid idea.
There is much more to be gained from emotionally disconnecting yourself from the fruits of your labour than it is to always, without fail be positive about everything. It is folly to pick yang over yin or vice-versa.
The fact of the matter is that a lot of people will have this emotional reaction to this project and not telling the author in order to protect their feelings is going to hurt their success in the long run.
I feel that being rude is insulting the person. Being honest is insulting the work (if one honestly feels that it is unworthy enough to be treated as such).
> Yes, yes you are. Or perhaps you meant "I am being a hater and a downer but I'm hardly having to put any effort into it".
A hater is someone who hates out of prejudice. For example, hating a celebrity because one is jealous of their wealth or think that they do not deserve what they have. I do not detect any prejudice here, just an honest reaction to something.
The most ironic thing about your post is that you mimic Grandparent's tone, which you yourself label as rude and throw it back at him. Surely a mature response is to respond in a way which you find acceptable, not simply stoop down to what you perceive to be a lower and, ultimately, unacceptable level?
> He's entitled to his opinion and has the right to criticize whatever he wants, however he wants. If you don't like it, why not just move on.
Why does that attitude not equally apply to critiques of this guy's comment? Why don't you just move on?
Why does that attitude not equally apply to critiques of this guy's comment? Why don't you just move on?
This also applies for you and me.
Yeah, except I'm not the guy saying that somebody should just be quiet and move on.
> Yeah, except I'm not the guy saying that somebody should just be quiet and move on.
You're one of us too:
> Why don't you just move on?
And yes, I realise the irony of my first comment. I'm just going to take my own advice and move on now.
You're one of us too:
> Why don't you just move on?
And yes, I realise the irony of my first comment. I'm just going to take my own advice and move on now.
No, that was sarcasm, basically throwing his own advice back to him to show he was being hypocritical.
He might be blunt, but is correct. You only need look at the terrible fidelity of the back arrow being used to see that it's not had much care and attention.
On top of that almost every component skin has issues that make it feel not right, like the drop down menu having gaps in the horizontal rule margins.
And in general, I dislike the approach to online discussion that everything has to be positively spun. This isn't very good, maybe it will be soon or maybe never, why should we not be able to air a valid negative opinion?
On top of that almost every component skin has issues that make it feel not right, like the drop down menu having gaps in the horizontal rule margins.
And in general, I dislike the approach to online discussion that everything has to be positively spun. This isn't very good, maybe it will be soon or maybe never, why should we not be able to air a valid negative opinion?
On reflection, I could have worded that part of my comment better. I completely agree that constructive criticism is useful. I just think that we can be civil about it.
Perhaps suggestions of how this could be made more civil while retaining the criticism would have been a better way to word the comment - want to take another shot?
Stuff like "one good thing, one bad thing" or any type of sugar coating is not relevant. We are (I hope) adults here and should be able to accept criticism without needing an ego boost along with it.
There are in addition a number of inaccuracies in your comment:
- "Your feedback has not been positive." - It wasn't supposed to be positive. I thought that much was fairly clear.
- "Yes, yes you are" (reply to i'm not trying to be a hater) - No, I wasn't. I was making a critical comment, but I wasn't trying to be a hater. You cannot tell me what I was trying to do.
Stuff like "one good thing, one bad thing" or any type of sugar coating is not relevant. We are (I hope) adults here and should be able to accept criticism without needing an ego boost along with it.
There are in addition a number of inaccuracies in your comment:
- "Your feedback has not been positive." - It wasn't supposed to be positive. I thought that much was fairly clear.
- "Yes, yes you are" (reply to i'm not trying to be a hater) - No, I wasn't. I was making a critical comment, but I wasn't trying to be a hater. You cannot tell me what I was trying to do.
> - "Yes, yes you are" (reply to i'm not trying to be a hater) - No, I wasn't. I was making a critical comment, but I wasn't trying to be a hater. You cannot tell me what I was trying to do.
You weren't trying to be a hater. But you can try to not be a hater, and still end up as one.
> Perhaps suggestions of how this could be made more civil while retaining the criticism would have been a better way to word the comment - want to take another shot?
More commentary like this:
> the responsiveness doesn't even work.
This was the only part of your comment that was worth while, or worded in a civil way. Rather than spew insults, be specific. As they say in writing, show, don't tell. It's poor to say it's an abomination. Rather, simply explain why.
> Stuff like "one good thing, one bad thing" or any type of sugar coating is not relevant.
It's not. And that method doesn't make civil criticism, regardless. After all: "Your font choice makes it easy to read, but what I'm reading is still an abomination" is rude and unhelpful.
The best criticism is specific then. Everything else is just opinion, and generally worthless. Opinions that merely insult are just hateful.
Hopefully this helps.
You weren't trying to be a hater. But you can try to not be a hater, and still end up as one.
> Perhaps suggestions of how this could be made more civil while retaining the criticism would have been a better way to word the comment - want to take another shot?
More commentary like this:
> the responsiveness doesn't even work.
This was the only part of your comment that was worth while, or worded in a civil way. Rather than spew insults, be specific. As they say in writing, show, don't tell. It's poor to say it's an abomination. Rather, simply explain why.
> Stuff like "one good thing, one bad thing" or any type of sugar coating is not relevant.
It's not. And that method doesn't make civil criticism, regardless. After all: "Your font choice makes it easy to read, but what I'm reading is still an abomination" is rude and unhelpful.
The best criticism is specific then. Everything else is just opinion, and generally worthless. Opinions that merely insult are just hateful.
Hopefully this helps.
The updated wording would have been to replace the word 'positive' with 'constructive'.
I'm curious, if you look back at your original comment, do you not think that it is rude / insulting as opposed to constructive?
I'm curious, if you look back at your original comment, do you not think that it is rude / insulting as opposed to constructive?
[deleted]
> Do we honestly need a "framework" to use the background-color and float properties?
No, that's why the framework appears to include a lot more than that.
No, that's why the framework appears to include a lot more than that.
Please, be constructive instead of just dismissive. A nasty tone doesn't help anyone nor does it encourage trying new things.
I tried to be constructive, but I honestly couldn't find a single good thing about this. The execution was poor, and the entire idea of making a 'framework' out of boxes with background colors is ridiculous.
I do apologize for the harshness, especially if it offended people, and I'm all for trying new things, but something like this should absolutely not be up on the popular page of hacker news. This is an amateur attempt at a framework that was very poorly done. Is that honestly deserving of more than 100 upvotes?
I do apologize for the harshness, especially if it offended people, and I'm all for trying new things, but something like this should absolutely not be up on the popular page of hacker news. This is an amateur attempt at a framework that was very poorly done. Is that honestly deserving of more than 100 upvotes?
I think your criticism is well founded.
That said, the author did put work into something, document it, and share it freely with the community - and for that reason, I'd rather not see someone hurt their feelings calling their work an 'abomination.'
I just think with a slightly different tone you could have made the same point in a way that would show the OP some brutal honesty but without discouraging them.
That said, the author did put work into something, document it, and share it freely with the community - and for that reason, I'd rather not see someone hurt their feelings calling their work an 'abomination.'
I just think with a slightly different tone you could have made the same point in a way that would show the OP some brutal honesty but without discouraging them.
good reply and good point. thank you
The greatest thing about this is that it is open source. You can add your own contributions: https://github.com/aozora/bootmetro
[deleted]
You might have missed this relevant piece of information:
> Latest version: 0.5
> Latest version: 0.5
Touche! Some of these css frameworks are getting ridiculous... CSS is easy, why do we need frameworks for it?
And wow I hope this is not the direction web design is headed!
And wow I hope this is not the direction web design is headed!
I appreciate CSS frameworks for taking some of the complexities out of tedious tasks. Without pre-built frameworks, I would still be using my own half-baked custom boilerplates. I agree with your sentiment about the direction of design. Am i the only one who is already sick of all the metro copies out there? I have never wanted to design a web site/app that looks exactly like another brand, e.g. Microsoft's Metro.
I don't understand the "concept" of The Windows 8 UI (not Metro) Maybe it's just because I'm used to the skeuomorphism of icons and folders. The tiles Windows 8 UI (I just like typing that long unwieldy phrase) to me are in the awkward position of taking up MUCH more screen real estate than a simple icon, while not being able to convey much more information.
Am I missing something?
Am I missing something?
Is it a framework for making a site that looks like it was designed by a pre-schooler? Then, yes, good job.
Otherwise ...
Otherwise ...
I'm not a designer but that font look a bit to sharp.
Great work!
A very good work, but a lot to do remains as far as I can see.
Changing the font to "Segoe UI Light" goes a long way.
looks promising, although it is still far from metro's elegance.
I think a lot of that is due to the typeface. Right now the type is fighting the elements vs working with them. /2c
I'm a fan of the metro look in general, clean and simple. It can work as a web framework, and this one does a pretty good job of it.
A few things of note:
1) The hover effect over the colored blocks feels odd, almost like the default blue border around image links.
2) ListViews seem under-styled with poor spacing. Perhaps this is intended
3) The ApplicationBar is pretty sharp
4) The text-color on all the button styles looks odd as black, with the exception of btn-primary
5) The Carousel in Chrome is way too thin. thinner than the arrow buttons, making the text unreadable.
A few things of note:
1) The hover effect over the colored blocks feels odd, almost like the default blue border around image links.
2) ListViews seem under-styled with poor spacing. Perhaps this is intended
3) The ApplicationBar is pretty sharp
4) The text-color on all the button styles looks odd as black, with the exception of btn-primary
5) The Carousel in Chrome is way too thin. thinner than the arrow buttons, making the text unreadable.
This is so much better than the top comment "This is an abomination." and a much better critique.
I think pg should create a filter to weed out all comments which have stuff like "I'm not trying to be a hater/douchebag/downvote me/rude/etc but".
I think pg should create a filter to weed out all comments which have stuff like "I'm not trying to be a hater/douchebag/downvote me/rude/etc but".
I don't know if it is because this is a design-based project and not a development project, but I don't understand why people are complaining about the complainers. Just as many people ask why someone did something a certain way - or why they'd do something at all - in threads based on programming projects and I think it is just as valid here.
In my experience on HN, there aren't enough quality posts on design. In fact, a lot of the most upvoted ones promote poor practices. I've stopped basing whether or not I go into a design threads on the upvotes, because some of the most beautiful projects I've seen have collected dust here, while others thrive despite their rampant shortcomings.
This is basic UI design in the form of basic CSS. You would be seriously hardpressed to find a more generic branding standard than one that relies on simple solid blocks and white text, something that can be pulled off in decades-old browsers, and here we have a website that a) illustrates a lack of understanding of the UI itself and b) a lack of understanding CSS, which makes up the framework.
Honestly if I worked in a studio that was doing work for Microsoft and asked a designer to create these web assets, I would send them back to the drawing board if this is what they presented to me. I think that's why you're seeing a lot of these "negative" comments. It looks and works like a last-minute homework assignment, especially for something where everything is already defined for you in public branding documentation and on Microsoft's own websites.
How am I supposed to say that without coming off as a jerk?
In my experience on HN, there aren't enough quality posts on design. In fact, a lot of the most upvoted ones promote poor practices. I've stopped basing whether or not I go into a design threads on the upvotes, because some of the most beautiful projects I've seen have collected dust here, while others thrive despite their rampant shortcomings.
This is basic UI design in the form of basic CSS. You would be seriously hardpressed to find a more generic branding standard than one that relies on simple solid blocks and white text, something that can be pulled off in decades-old browsers, and here we have a website that a) illustrates a lack of understanding of the UI itself and b) a lack of understanding CSS, which makes up the framework.
Honestly if I worked in a studio that was doing work for Microsoft and asked a designer to create these web assets, I would send them back to the drawing board if this is what they presented to me. I think that's why you're seeing a lot of these "negative" comments. It looks and works like a last-minute homework assignment, especially for something where everything is already defined for you in public branding documentation and on Microsoft's own websites.
How am I supposed to say that without coming off as a jerk?
While critiques are awesome, those sorts of comments actually provide valuable insight.
Judging by frequency/consistency of topic, they can be used as a launch point for improving a product. They often include insight into what people making snap judgements (hint: we all do) think about your product/website/etc. While longer form critiques give excellent advice, short comments such as these provide a different take, which actually informs the critiques as well.
Judging by frequency/consistency of topic, they can be used as a launch point for improving a product. They often include insight into what people making snap judgements (hint: we all do) think about your product/website/etc. While longer form critiques give excellent advice, short comments such as these provide a different take, which actually informs the critiques as well.
1) The hover effect over the colored blocks feels odd, almost like the default
blue border around image links.
If you visit msn.com in metro IE, the tiles have a tilt-click effect that emulate the real metro tiles. I think skydrive.com does this too to some effect. It would be nice if Microsoft could release an official open source library.
Doesn't look good on mobile?
why is there a back button right below my browser's back button?
Sorry, but a frontend framework that claims to be responsive, but then has a demo that breaks down completely when resizing the browser is not really convincing to me.
http://allidoiswin.se/_images/broken.png
Idea is good, but implementation feels...unfinished to say the least.
http://allidoiswin.se/_images/broken.png
Idea is good, but implementation feels...unfinished to say the least.
So all projects on Github must be finished. Got it.
You should really take the time to polish this first. That incorrectly scaled screenshot on the first page was enough for me to dismiss this.
He says on the landing page that it is
> Latest version: 0.5
which implies that there are quite a few things left for him to do before he considers the first version complete.
He probably felt that the marketing page was good enough for a 0.5 product. I personally think it is good enough.
> Latest version: 0.5
which implies that there are quite a few things left for him to do before he considers the first version complete.
He probably felt that the marketing page was good enough for a 0.5 product. I personally think it is good enough.
He still hasn't fixed the squished screenshot's obviously wrong aspect ratio, at least as of the time I am writing this.
Screenshots with incorrect aspect ratios are a huge pet peeve for me and while this may not be entirely rational, it is one of the big things I find myself judging someone's overall competency on when they screw it up and they are doing design-focused work. I'd rather have the whole page be written in Comic Sans but have the screenshot in the right aspect ratio because at least that's a choice rather than just shoddy work.
Of course, YMMV.
Screenshots with incorrect aspect ratios are a huge pet peeve for me and while this may not be entirely rational, it is one of the big things I find myself judging someone's overall competency on when they screw it up and they are doing design-focused work. I'd rather have the whole page be written in Comic Sans but have the screenshot in the right aspect ratio because at least that's a choice rather than just shoddy work.
Of course, YMMV.
He's received some useful feedback in the comments here.
That's the whole agile/lean idea: get user feedback early rather than spending a ton of time polishing it in isolation.
The agile/lean idea is not to have your users bug test your code! It's a technique for gathering feedback early and often in order to make sure that the requirements are sufficiently addressed. What you are describing is a shoddy work discipline which no self-respecting developer would even think of associating his name with.
More appropriately, one of the central pillars of agile is to be in a releasable state at the end of every sprint.
More appropriately, one of the central pillars of agile is to be in a releasable state at the end of every sprint.
I'm replying to a comment about the framework needing more "polish." It isn't like he's releasing a version to the general public that crashes your browser.
If you look at the feedback, it's mostly stuff like fonts, spacing, etc. I think it's quite acceptable for a developer to get user feedback about the interface on v0.5 of free software.
If you look at the feedback, it's mostly stuff like fonts, spacing, etc. I think it's quite acceptable for a developer to get user feedback about the interface on v0.5 of free software.
also I find it ironic that it doesn't work well on Windows Phone
Great idea, this can be a very useful project. Needs some polishing, though. For instance, the icons need anti-aliasing and some are clipped at the borders.
Interesting. Just curious, can this can ignite the patent trolls? Say I use a more polished version this to build the next viral site - what are the chances to be dragged to court?
Awesome! I've been waiting for this for so long; I even wanted to make it myself. Does this work with default bootstrap HTML?
Keep up the good work, I'm definitely going to use this.
Keep up the good work, I'm definitely going to use this.
Out of curiosity, how does Metro look to color blind people?
You can use e.g. this link and then select different types of color blindness via the popover on the right:
http://colorfilter.wickline.org/?a=1;r=;l=9;j=1;u=aozora.git...
In short: Metro looks different because it uses different colors. I guess this shouldn't impact readability or accessibility in most cases due to the use of simple, sharp icons and white text. But I guess the white text could result in problems when the color blind perceive a given color as a light gray, resulting in little contrast.
http://colorfilter.wickline.org/?a=1;r=;l=9;j=1;u=aozora.git...
In short: Metro looks different because it uses different colors. I guess this shouldn't impact readability or accessibility in most cases due to the use of simple, sharp icons and white text. But I guess the white text could result in problems when the color blind perceive a given color as a light gray, resulting in little contrast.
Thanks for the information and the link, that is a really cool site! I'll make sure to use it on future projects just to make sure I'm not completely screwing over color blind people.
Deut. (red/green) here; it looks fine to me. In my case, most colour-blindness issues arise from poorly contrasting colours - given that most of the Metro style is white text on a solid bright/dark (not pale) colour I don't see many issues.
That depends on what type of colour blindness they have, as there isn't just one type. http://en.wikipedia.org/wiki/Color_blindness
Colorless.
[deleted]
Horizontal scrolling seems to be broken in Safari on OS X.
The edges are rough but this is great.
I've really warmed to the whole metro look when it's done right and I look forward to where this goes. White text/icons on block color squares works beautifully and looks "cool". This could be bigger than Twitter Bootstrap if done right.
I've really warmed to the whole metro look when it's done right and I look forward to where this goes. White text/icons on block color squares works beautifully and looks "cool". This could be bigger than Twitter Bootstrap if done right.
Looks "cool" is not the same as well-designed or usable.
The Metro UI is awesome for touch devices, but mostly just flat out bad and wrong for anything else.
The Metro UI is awesome for touch devices, but mostly just flat out bad and wrong for anything else.
It's interesting to see that the syntax of the html/css is identical to Twitter's Bootstrap. It really goes to show you that the syntax and nomenclature that Twitter developed won and NOT the design.
From a designers standpoint:
1. Take the hover border off and instead add a little CSS3 background transition animation and set the hover background color to something a tad lighter. I think this would be a cool effect.
2. Use Segoe UI or something close instead of the font you're using now, especially on the blocks
3. One of the cool things about the "metro" style is how they effectively use a ton of padding and space around things. Yours is very cramped in parts. Definitely be liberal with the padding and space stuff out.
I think those three things would make a big difference.
1. Take the hover border off and instead add a little CSS3 background transition animation and set the hover background color to something a tad lighter. I think this would be a cool effect.
2. Use Segoe UI or something close instead of the font you're using now, especially on the blocks
3. One of the cool things about the "metro" style is how they effectively use a ton of padding and space around things. Yours is very cramped in parts. Definitely be liberal with the padding and space stuff out.
I think those three things would make a big difference.
I should start a service that gives people a thorough review of their app or web site and I make a list of trouble things and recommendations on how to make it better. Consulting on a smaller scale.
So nice to see the designers of HN come out of the woodwork. I feel like that's all my account here seems to be used for.
I don't think there is Segoe UI webfonts that I can embed? I tried to look for it in some point and could not find it. Do you know any font that is close to?
I think this might work well. It's an Adobe open source font, it was popular on HN a little bit ago.
http://blogs.adobe.com/typblography/2012/08/source-sans-pro....
http://blogs.adobe.com/typblography/2012/08/source-sans-pro....
Well you don't have an email in your profile to contact you, but I have changed my mind on the font. Try this:
http://www.google.com/webfonts/specimen/Open+Sans
Really cool, but will it over take all those Bootstrap sites?
I wish Microsoft devs would go the Twitter route and release a Metro equivalent of Twitter Bootstrap. They must certainly be using some internal framework.
Indeed. I asked Scott Guthrie if they had any plans for this, but they don't according to him (as he probably knows). Too bad, because that would be a great move.
Just poking through the source; is there a reason for selectors like this?
.metro .metro-sections .metro-section.tile-span-1
#charms .charms-header a.win-command span.win-commandimage.win-commandringI like the concept but can't tell if the bugs on iPad is a bug or a feature...
It's not a new framework, but you could achieve similar results using Twitter Bootstrap and the Microsoft Modern Buttons Project - http://ace-subido.github.com/css3-microsoft-metro-buttons/in...
Looks very cool, thanks for sharing.
License? I don't see it listed in the readme or site and there's no license file in the repo.
I love the concept of this... but it still looks buggy and in an early stage. (Which seems reasonable, only version 0.5.)
Some things I noticed: On the demo, scrolling horizontally is shaky and broken on Mac OS X Mountain Lion. Although I guess this is my fault due to my browser size, but the set of tiles that needed to scroll to be seen were completely hidden. I didn't realize you had to scroll at first. In addition, trying to scroll back to the original position doesn't work since instead, my Mac thinks I want to go back a page in browser history. (Mac has two finger swipe to go back in a browser if you're not familiar.)
Anywho, I love where this is going and hope to see more. It'd be awesome to be able to create actual Metro-styled web apps. It appears right now that the framework is only set up to re-create the home tile screen in Win8.
Some things I noticed: On the demo, scrolling horizontally is shaky and broken on Mac OS X Mountain Lion. Although I guess this is my fault due to my browser size, but the set of tiles that needed to scroll to be seen were completely hidden. I didn't realize you had to scroll at first. In addition, trying to scroll back to the original position doesn't work since instead, my Mac thinks I want to go back a page in browser history. (Mac has two finger swipe to go back in a browser if you're not familiar.)
Anywho, I love where this is going and hope to see more. It'd be awesome to be able to create actual Metro-styled web apps. It appears right now that the framework is only set up to re-create the home tile screen in Win8.
That's great, thanks! I wonder if someone knows a googl+ish theme built on bootstrap?
Looks good on my computer, but unfortunately it's rather broken on both my Android phone and tablet
For an excellent reference implementation of how a Metro style application should look, check out Microsoft's Azure site: http://www.windowsazure.com/en-us/
Borrowing some of the css transitions, color scheme and typography from there would go a long way toward really delivering the "Metro experience" with your framework.
Borrowing some of the css transitions, color scheme and typography from there would go a long way toward really delivering the "Metro experience" with your framework.
mouse scroll feels backwards, on normal pages one scrolls down to advance, but here one needs to scroll up instead
One of the better "Metro" frameworks is Metro Bootstrap, simply a Metro skin over Bootstrap rather than trying to reinvent the wheel.
http://talkslab.github.com/metro-bootstrap/index.html
http://talkslab.github.com/metro-bootstrap/index.html
[deleted]
It's not metro without Segoe UI.
I'm not trying to be a hater or a downer, I just can't believe that this is the state of web design right now. As Gob would say, "COME ON!"