Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Yelp’s Style Guide

engineeringblog.yelp.com

Post reply on HN
Print view View original

1–10 of 21 posts

Re: Yelp’s Style Guide

#4

Post by lstamour »

stephenhuey wrote: post #2

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.

Re: Yelp’s Style Guide

#7

Post by erichurkman »

stephenhuey wrote: post #2

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

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

Re: Yelp’s Style Guide

#9

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

Post reply on HN