
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](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...](http://www.stubbornella.org/content/2013/06/05/creating-living-style-
guides-to-improve-performance/)

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

~~~
mattjaynes
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](https://www.youtube.com/watch?v=m6G_o1MYECg)

------
mfnkl
[http://www.yelp.com/styleguide](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
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](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.

------
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](http://imgur.com/TGCnZXV)

(Win 7 on FF)

~~~
jcampbell1
You should try sharing a png file. Here is an example:
[http://i.imgur.com/End1S.png](http://i.imgur.com/End1S.png)

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

