What UI library do knockout.js tutorials use?

Question

At http://learn.knockoutjs.com/ there is a tutorial about single-page applications. Around the second step, the bulleted list is transformed into a horizontal menu. How does that get rendered?

(I.e., is it a purely CSS solution that causes that, or is it using jQuery UI, or what?)

I've viewed the source of the page, and it looks like there's a lot of automation going on to run the code in the demo. It's not clear to me how that's working, and I'd really like to know as I'm trying to reproduce that approach in a test app of my own.

Answer 1

It's pure CSS.

HTML

<ul class="folders">
    <li>Inbox</li>
    <li>Archive</li>
    <li class="selected">Sent</li>
    <li>Spam</li>
</ul>​

CSS

.folders { background-color: #bbb; list-style-type: none; padding: 0; margin: 0; border-radius: 7px; 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d6d6d6), color-stop(0.4, #c0c0c0), color-stop(1,#a4a4a4)); 
    margin: 10px 0 16px 0;
    font-size: 0px;
}
.folders li:hover { background-color: #ddd; }    
.folders li:first-child { border-left: none; border-radius: 7px 0 0 7px; }
.folders li { font-size: 16px; font-weight: bold; display: inline-block; padding: 0.5em 1.5em; cursor: pointer; color: #444; text-shadow: #f7f7f7 0 1px 1px; border-left: 1px solid #ddd; border-right: 1px solid #888; }
.folders li { *display: inline !important; } /* IE7 only */
.folders .selected { background-color: #444 !important; color: white; text-shadow:none; border-right-color: #aaa; border-left: none; box-shadow:inset 1px 2px 6px #070707; }    ​

You can see this working in this fiddle: http://jsfiddle.net/jearles/UcwC7/