Yelp’s Style Guide(engineeringblog.yelp.com)
engineeringblog.yelp.com
Yelp’s Style Guide
http://engineeringblog.yelp.com/2014/02/yelps-got-style-and-the-guide-to-back-it-up.html
20 comments
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!
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
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
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.
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.
[1] Another example: http://www.w3.org/Style/Examples/007/leaders.en.html
toc > chapter:after {
content: leader(dotted) target-counter(attr(href, page), page);
}
[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)
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.
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...