Yelp’s Style Guide

[struys]

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

[jdcantrell]

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 → jdcantrell]

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

[mattjaynes → ipsin]

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

[mfnkl → jdcantrell]

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!

[mfnkl]

http://www.yelp.com/styleguide

[stephenhuey]

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

[lstamour → stephenhuey]

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 → stephenhuey]

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

[Brajeshwar]

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.

[garraeth]

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

http://imgur.com/TGCnZXV

(Win 7 on FF)

[jcampbell1 → garraeth]

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

[pseudometa → garraeth]

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

[strifey → garraeth]

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

[foocc → garraeth]

Can't confirm on Win 7 & FF 26.

[leishman]

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

[dzine]

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

[d0m → dzine]

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 → dzine]

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.