HN Explorer

20 comments

[ 1.7 ms ] story [ 56.5 ms ] thread
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

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

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.
jmcgough
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.
[dead] ApacheEcho
Awesome they OSed it. GJ front end team!
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
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

mfnkl
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!
[dead] vfusion
So that is why Yelp's interface is clunky and looks like it is stuck in the past. I've been wondering with all their talent why they haven't progressed much.
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.
leishman
Their button group doesn't look right when you click the button. The border glow gets covered.