Yelp’s Style Guide

http://engineeringblog.yelp.com/2014/02/yelps-got-style-and-the-guide-to-back-it-up.html

by struys • 12 years ago

102 18 12 years ago

engineeringblog.yelp.com

I've never tried making something like their dotted definition list, and I like how simple and elegant it is.

lstamour• 12 years ago

While definitely neat in appearance, I don't like their HTML ;-) 1 dl is shown as 4 dls, and they even use a dl with just a dt, no dd. http://www.w3.org/wiki/HTML_lists#Description_lists

I'd say the list should be 1 dl, with 2 dt/dd pairs, the third a dt followed by one or two dds (either works), and the last a dt with a blank or placeholder dd, so that if another dt is added, it's not considered two terms for one description.

Though that's really more of a nit-pick.

erichurkman• 12 years ago

There are a lot of ways to do it [1]. PrinceXML extended their CSS implementation with a `leader()` generated content option.

    toc > chapter:after {
      content: leader(dotted) target-counter(attr(href, page), page);
    }

which does the right thing typographically, even with line wraps and multiple columns. Really great for tables of content and indices.

[1] Another example: http://www.w3.org/Style/Examples/007/leaders.en.html

mfnkl2• 12 years ago

http://www.yelp.com/styleguide

garraeth• 12 years ago

Love it! But is this thin, grainy font by design?

http://imgur.com/TGCnZXV

(Win 7 on FF)

pseudometa• 12 years ago

Doubtful... it looks very different (nicer) on mac with chrome

strifey• 12 years ago

Win 8 & Chrome here and it looks much better than that.

jcampbell1• 12 years ago

You should try sharing a png file. Here is an example: http://i.imgur.com/End1S.png

foocc• 12 years ago

Can't confirm on Win 7 & FF 26.

dzine• 12 years ago

I like the idea of a style guide. Looks a lot like an internal Twitter Bootstrap.

d0m• 12 years ago

Yeah. For a startup it could make sense to start with bootstrap and add a couple patterns/tweaks on top of it rather than re-inventing everything. Similar to what we do in Python.. Pep-8 but X,Y,Z.

jmcgough• 12 years ago

Same. Stylesheets can become sprawling messes as you gain more developers who may not be aware of what's already in there. Plus, this makes on-boarding so much easier.

jdcantrell• 12 years ago

I really like seeing companies build out their own style guide libraries. It's such a huge win in terms of maintaining css and keeping it consistent across an entire site/platform. We went through this process at Trulia about a year ago, and the results had a huge impact[1].

Sadly we never released our style guide to the public, but we did open source the tool for building it: https://github.com/trulia/hologram

It tries to keep things simple by letting you use markdown and html to document your css/js inline and then extracting that into a style guide.

1. http://www.stubbornella.org/content/2013/06/05/creating-livi...

ipsin• 12 years ago

I love that you called your gem "hologram". That's appropriate and... truly outrageous?

mattjaynes• 12 years ago

Haha, classic!

For those that didn't fully experience the 80's, "Jem and the Holograms" was a cartoon that took cheese and glam to a whole new level.

Here's the theme song, which will give you a good taste of that awesome 80's relic: https://www.youtube.com/watch?v=m6G_o1MYECg

mfnkl2• 12 years ago

Thanks for sharing this! Nicole Sullivan's talk about her work with Trulia was a huge inspiration for Yelp's styleguide. The performance improvements you reported are very impressive. Well done!

Brajeshwar• 12 years ago

Inspired after seeing Nicole talk about Trulia's Styleguide, my current way to work with clients' design is to spend enough time and effort in making a styleguide. Once a styleguide is in place, it continues to evolve and change and the eventual design is pretty straight forward and easy.

leishman• 12 years ago

Their button group doesn't look right when you click the button. The border glow gets covered.

Yelp’s Style Guide

Related Stories