39 comments

[ 3.1 ms ] story [ 94.7 ms ] thread
Much more interesting is the link to their complete styleguide - http://www.starbucks.com/static/reference/styleguide/
This is pretty awesome, this a great example of how to document your standard style.
You're totally right. I was just looking at that page, and now can't change the url.

Also interesting, but less technical, is the BBC's style guide: http://www.bbc.co.uk/gel

Does the quote box without the closing quotes really bug anyone else on that page? As soon as I noticed it I was instantly annoyed. Feel. Need. To. Wash...

I'm a grammar nazi at heart methinks.

Good read though, although I think the BBC has started to make some serious mistakes and are getting a little too experimental. All the animations they keep doing everywhere are getting in the way of the actual reading and are very distracting. The home page is now looking a real mess. At least they've got rid of the annoying 'slide' effect their carousel had which meant if you moved your mouse around the whole page seemed to jerk around.

> Feel. Need. To. Wash...

I too am a grammar Nazi, and the very first rule off grammar is that sentences, delimited by punctuation marks such as the point, have subject and verbs, unlike your four sentences above.

Or maybe it is because English is not my mothergrammar?

This is an informal discussion group; it's fine to complain about punctuation marks on the BBC even while making errors in your own posts.

And, of course, 9/10 people who read that sentence (yes, a single sentence) knew exactly how the OP was intending it to sound in their head.

I guess what I'm saying is, you can be pedantic around here, but not to the level where it looks like intentional misinterpretation.

I was just telling I find this way to emphasise a sentence a bit fatiguing, but I should avoid thus kind of useless comment, sorry.
How'd you find this nugget?
Maybe OP was searching for style guides. This almost looks unintentionally public. It's all a bit bland for a brand like Starbucks.
This is exactly the sort of thing that I tend to ask visual designers for, give me a set of general rules that I can apply when making new things so I can quickly make new interactions (new pages, whatever) without having to make all of the visual decisions from scratch.
Is there an open-source framework or tool for creating a styleguide like this from a project?
I made StyleDocco (http://jacobrask.github.com/styledocco/) for this purpose. You add example HTML (and Markdown) in your stylesheets, and StyleDocco generates documentation files with the rendered HTML as well as the HTML code snippets. There's also Knyle Style Sheets (https://github.com/kneath/kss) if you like a more structured TomDoc inspired syntax.

I'll definitely be adding something like the "prefs" thing in the top right corner of this style guide, that was awesome.

I really don't understand why they say the stripes version "requires" javascript.

Firstly, they're relying on javascript to do the striping effect, applying a class to even rows. If someone has javascript turned off this effect will degrade even in modern browsers.

Secondly, .stripes tbody tr:nth-of-type(2n){ background: #f6f6f6} achieves exactly the same thing in all modern browsers, and degrades just as well as the javascript version (even if javascript is off).

The javascript version covers IE6-8 while the CSS3 version does not.
Their webpages end in .aspx and that means they are using ASP.NET Web forms.

So I wouldn't expect them to be very cutting edge in terms of modern browser practices. Sad but true.

Another thing which is sad but true is some developers feel the need to face off development tools and technologies in some sort of 'coolness' competition. When in fact, there are many more reasons behind why one might choose a particular implementation than "what is the current flavor of the month?"
Interesting to see so many down votes to my comment.

Even Microsoft leadership has admitted ASP.NET MVC is a better choice for public facing (non-intranet) websites.

My comment was only to make the point that they were using an outdated web framework, so it's likely that their markup is probably also outdated.

What would outdated markup have to do with striping table rows?

This is why you're getting downvotes, you really don't seem to have any idea what you're talking about.

What's interesting in this set of guidelines is basically all the front-end development goodies (stylings, grids, js) not the backend. It looks very decent to me, and it was probably made by a completely different department than ASP's, So thats why the comment comes a little irrelevant in this case.
The main site uses ASP.NET MVC. It's just this style guide, which was probably never meant to be public, that seems to use old-style *.aspx files in some areas.
You wouldn't think Starbucks would really be the typical use case for a style guide. Like I would think all their content would come out of a single web shop in HQ.

Style guides are usually created when content is generated by separate groups on their own with no central coordination, and the style guide is to try and get them to all look the same.

I'm not so sure that's true -- style guides are just as important internally, even with only a few designers. I just don't think they intended this to be public.

But certainly it isn't uncommon for a company or design/development shop to have an internal style guide.

Don't underestimate the size and breadth of Starbucks corporate.

Also, even when I'm a solo developer doing in-house stuff, I always always always request at least a simple style guide so my efforts can be consistent and high-quality.

From reading the Style Guide it looks like they are using SiteCore which is a CMS. So it's very possible that different parts of the org are creating content for the site.

The Starbucks site is actually more complicated than you would think, especially if you login and start tracking the cards you have linked to your account.

Does anyone know where they got that awesome debug panel?
By the looks of the code I'd say they made it.
(comment deleted)
I love their responsive table. I really like how it collapses below 480px wide. Hopefully the Twitter Bootstrap guys implement it!
I like it as well, though they should probably clamp image sizes, at certain widths the images are very tiny
This jab is awesome "SiteCore has a mind of its own. It will automatically add a shape attribute to links."
Just wondering, are we allowed to see it? I mean, will they remove it if they notice everyone can access to it?
My guess would be no... Starbucks I imagine is probably not a company who would be interested in letting people see how they do HTML/CSS on their website.
Sshh, don't tell them about view source!
No - I don't think they'll remove it. I was talking to one of their developers about the idea that they might make it public a few months ago, and it seems that they did.
It's always been public just not promoted. We made it known after Andy's talk at SXSW (grown up css, recommended listening) and after I chatted with Andy and Jeremy Keith who urged us and more companies to release their styleguides. We see this as invaluable tool for internal communications within our team as well as an industry trend (24ways, BBC Gel - both of which we're big fans of). The response has been overwhelmingly positive and for that we're proud and humbled as we are just trying to create the best websites we can for our customers.
(comment deleted)