
BootMetro: Metro style web framework - reg29
http://aozora.github.com/bootmetro/
======
ericcholis
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.

~~~
superasn
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".

~~~
mnicole
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?

------
joshmlewis
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.

~~~
jpkeisala
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?

~~~
joshmlewis
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.html)

------
csswizardry
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-commandring

------
lysol
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.

~~~
Sakes
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.

~~~
georgemcbay
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.

------
jenius
This is an abomination. Do we honestly need a "framework" to use the
background-color and float properties? Not to mention that the design here is
very poorly executed, and as someone else mentioned the responsiveness doesn't
even work.

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!"

~~~
scanr
> 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!".

~~~
weego
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?

~~~
scanr
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.

~~~
jenius
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.

~~~
jasonlotito
> \- "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.

------
arvidjanson
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.

~~~
kordless
So all projects on Github must be finished. Got it.

------
FreshCode
Changing the font to "Segoe UI Light" goes a long way.

------
michaelbuckbee
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...](http://ace-
subido.github.com/css3-microsoft-metro-buttons/index.html)

------
navs
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.

~~~
Avalaxy
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.

------
brador
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.

~~~
drivingmenuts
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.

------
nigelsampson
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>

------
dave5104
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.

------
msluyter
Out of curiosity, how does Metro look to color blind people?

~~~
hendi_
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...](http://colorfilter.wickline.org/?a=1;r=;l=9;j=1;u=aozora.github.com/bootmetro/hub.html;t=n)

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.

~~~
zheng
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.

------
modarts
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.

------
owenjones
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?

------
mitchellbryson
why is there a back button right below my browser's back button?

------
wccrawford
License? I don't see it listed in the readme or site and there's no license
file in the repo.

------
danso
I like the concept but can't tell if the bugs on iPad is a bug or a feature...

------
donbronson
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.

------
tathagatadg
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?

------
Avalaxy
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.

------
facorreia
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.

------
duiker101
I'm not a designer but that font look a bit to sharp.

------
nerd_in_rage
Is it a framework for making a site that looks like it was designed by a pre-
schooler? Then, yes, good job.

Otherwise ...

------
dagw
Looks good on my computer, but unfortunately it's rather broken on both my
Android phone and tablet

------
d0m
That's great, thanks! I wonder if someone knows a googl+ish theme built on
bootstrap?

~~~
troels
You mean this? [http://blog.timodonnell.com/css3-google-
buttons/components.h...](http://blog.timodonnell.com/css3-google-
buttons/components.html)

------
yuchi
A very good work, but a lot to do remains as far as I can see.

------
francov88
Really cool, but will it over take all those Bootstrap sites?

------
danabramov
Horizontal scrolling seems to be broken in Safari on OS X.

------
nightwing
mouse scroll feels backwards, on normal pages one scrolls down to advance, but
here one needs to scroll up instead

------
BaconJuice
Looks very cool, thanks for sharing.

------
bizodo
Doesn't look good on mobile?

------
diegogomes
looks promising, although it is still far from metro's elegance.

~~~
lbotos
I think a lot of that is due to the typeface. Right now the type is fighting
the elements vs working with them. /2c

------
mgkimsal
Great work!

------
drivebyacct2
It's not metro without Segoe UI.

