Cosmo: A free Metro-inspired theme for Bootstrap | Hacker News Reader

Cosmo: A free Metro-inspired theme for Bootstrap

news.bootswatch.com

209 pointsthomaspark57 comments

It is a nice looking theme but it has the same problem that Metro has: there isn't anything indicating what is clickable and what is not.

Any tile should be clickable in a Windows 8 Application. The problem is that it looks like Metro but it doesn't respect its guidelines.

Yeah. In Metro, it's fairly obvious what's clickable.

I agree. I find that the buttons don't "afford" clicking at all.

Also no affordance for the inactive buttons. They're just slightly muted versions of regular buttons.

There is a link to demo in there http://bootswatch.com/cosmo/

I like the look, and will definitely be using it in internal projects and prototypes.

I found it a bit hard to read super light gray on somewhat light gray or plain white background(quotations, dropdown). I think a little more contrast is required. The default button, especially when used on similar colored background(forms), has the same issue.

I understand they are going for the metro look, but adding a drop shadow to actionable items(buttons) while the not-clickable items remain flat(alert; element not clickable but the cross) will help mitigate some end-user confusion.

Say what you will about Windows 8 / MSFT, but this is a damn fine-looking theme.

I love bootswatch and would happily pay $5-$10 a month for regular swatches like this uploaded every few days / week, I'm not a designer nor do I want to spend time trying to be, bootstrap + bootswatch give me the ability to get something up ,running and looking pretty damn good very quickly.

I agree. wrapbootstrap is going in this direction, but they seem to have had the same ~dozen themes since they started out. I'd love for more really talented designers to create bootstrap themes -- non-designers are hungry for them. I'm particularly interested in bootstrap themes that make good use of creative typographic elements.

A subscription service would be very interesting, and if it were a reputable designer, I'd sign up in a second.

It might seem like that because the front page is usually locked down by the most popular themes, but the site has around 330 or so now. Or did you mean it another way?

You're right. I apologize. Last time I flipped through wrapbootstrap, it seemed there were only a dozen or so themes. But I was wrong, I was only looking at the most popular themes and failed to notice the others. It looks like you've got a lot of nice new themes. I look forward to checking them out.

My biggest complaint about WarpBootstrap is that few if any themes have *.less support. This makes is much hard to use themes except as is. It also makes upgrading bootstrap more of a pain in the ass.

Having some sort of git integration would also make upgrading the theme and bootstrap itself easier too.

I'm interested to hear more of your thoughts on git integration so I shot you an email. Just a heads up. :)

I like Metro but for one thing...

...the buttons aren't apparently clickable. I embrace the shift away from excessive skeuomorphism as much as anybody but failing to provide affordances is inexcusable.

   * { border-radius: 0 !important; }

I sense a little sarcasm in your otherwise short and great comment, but let me tell you, rounded borders can be abused and combined with more intensive border colors, they can be downright frustrating to look at.

I personally found that a border radius of 1-3 pixels is usually a nice touch, but anything more than that should be added carefully.

related is Metro UI:

http://metroui.org.ua/

It is a complete CSS+Javascsript library to apply the Metro design and theme to a web app and includes things like icons, etc.

It is very popular amongst Microsoft web developers and looks really good.

Is it just me, or do elements of it remind anyone of the latest gmail / google groups etc. interface?

Google's ui elements have a slight gradient and border to them giving them the appearance of an actionable element on the page..

My first thought was also that it's reminiscent of Google's UI elements. I think BootMetro does a better job (http://aozora.github.com/bootmetro/)

Windows Phone debuted in February of 2010, the Kennedization process didn't start until summer 11. Google's redesign was more influenced by Metro than the other way around.

One of the fewer beautiful Bootstrap Themes.

It's interesting that people are still calling it "Metro", even after Microsoft was told to stop (because of a trademark issue). Microsoft stopped, but the rest of the world didn't, apparently. I know I didn't. It's a great name.

Can the company that went after Microsoft (Metro AG) go after other people besides Microsoft?

http://www.theverge.com/2012/8/2/3215039/microsoft-metro-nam...

I like it, but the dropdown menus look strangely out of place.

Sweet, going flat will reduce the gradient bloat that's currently in the default Bootstrap css.

It's beautiful. For better readability on the demo page, I recommend the following:

section { margin-top: 60px; }

You know when we built [PDFzen](https://pdfzen.com), we used Bootstrap and made it Metro-esque. I wish we'd have had something like this for the homepage. It certainly would've sped things up.

Its only me? or i´m the only one here to think that Metro UI is corny like the 80´s ? i think that as time goes by, people will be ashamed of using this as they were ashamed about their hair style in their pictures from the 80´s :)

If it's a good site, it could be black and white for all I care. If it's not, a trendy design would make it only worse - now, that's something to be ashamed of, IMHO.

I think I feel the opposite. In general I think that simple-looking designs hold up over time better than more elaborate (can I still say skeumorphic?) ones.

Yeah, not really sure where they parent comment is coming from considering Metro draws inspiration from timeless design.

For content yes. With apps you can paint yourself into corner very quickly.

Very nice! I've been waiting for something like this. There are other metro themes for bootstrap, but they're a bit over the top and try to replicate the metro GUI on the PC/tablet.

I love this bootstrap Metro theme http://wrapbootstrap.com/preview/WB0HT4KX4

Okay, that actually looks like Metro.

Probably the best Bootstrap theme yet. This is also why Bootswatch some kind of "favourite" button so people can store the best themes for later use.

I don't understand why everyone loves and wants to emulate the metro look so much. I find metro to be really really ugly. Am I missing something?

It's good but It doesn't look like Metro. Infact, it looks similar to Google's Web apps UI (Gmail, Gcal, etc).

Looks great! Although, why does the search box have rounded corners?

Nice. I been looking for something like this: clean and simple...

Funny enough, the form elements look better on Win8/IE10

I love the look - reminds me of spongebob squarepants.

Info is a purple button and a blue alert/badge/label.

is it just me, or just the border radius has been removed ?

Looking good! :-)

color not bold enough, anyway, it's good.

Not all that Metroy, as someone who spent all summer straight immersed in Metro.

Also, I wish Foundation would get 1% of the attention Bootstrap does. Once you figure out how to get past their docs-light into the full docs, I've found it to be FAR faster to work with than Bootstrap.

It will get the attention if it is a better product. There is no nefarious reason why Bootstrap is getting more attention than most other HTML/CSS scaffolds.

Oh i don't know, the 800lbs gorilla that is twitter? Inertia? Laziness? Crowd mentality? I don't know why people think life/business is always a meritocracy. It usually isn't.

I tried Foundation coming from Bootstrap and found that Bootstrap was much easier to use. Foundation did not have simple documentation and configuration was complicated.

>configuration was complicated

Okay, you got me. Huh?

Oh I didn't mean to imply that there was some evil force pushing Bootstrap. Also, I don't know whether you're being naive or idealistic but "the better product" doesn't always win. Bootstrap has a lot of momentum (not to discount the value of that) but that doesn't mean it's superior to Foundation.

I've used both. However, I used Foundation early on and I heard it's gotten much better.

I used Bootstrap for a few projects and found out it can be a huge pain trying to eliminate all the cruft you don't need. Sure, you can build a custom package, but there's a ton of CSS which I will never have a need for. Also, the signature bootstrap dropdown menu on mobile devices really got to me since you see it EVERYWHERE now.

My solution was to go with Skeleton and a minimal responsive navigation I built from scratch.

I dunno, write a blog post about why you like it and post that here? A quick search shows only one post about Foundation, with someone linking the project's front page.

Pray tell, where are the full docs?

I like it. I like it a lot, very stylish work.

This style is what Bootstrap should have been from the start. Well done.

Reply on news.ycombinator.com