Yelp’s Style Guide | Hacker News Reader

Yelp’s Style Guide

engineeringblog.yelp.com

102 pointsstruys18 comments

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

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

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

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!

http://www.yelp.com/styleguide

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

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.

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

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.

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

http://imgur.com/TGCnZXV

(Win 7 on FF)

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

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

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

Can't confirm on Win 7 & FF 26.

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

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

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.

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.

Reply on news.ycombinator.com