Implement new documentation styling

[tomdale]

Hello friends,

We have a new design for the documentation page from the amazing HeroPixel. It looks like this:

What we're specifically looking for is the updated table of contents/sidebar, as well as improved text treatment.

The PSD source is here: http://cl.ly/2X3Y203k0O2D

Please make all changes on the doc-refactor branch. We'll coordinate by posting comments in this issue. If we haven't heard from you in awhile, we might pass the task off to someone else—so please keep us updated on your status!

If you have questions or concerns, please ping me on Twitter.

Thanks!!

[vladikoff]

I saw a few people responded on Twitter, if no one picks this up and you still need help let me know!

[stravid]

@vladikoff I responded on Twitter, but since I can't start before tomorrow morning, feel free to jump in! :-)

[vladikoff]

Okay, cloning!

[artzte]

The design looks great. Unless I am missing something, the refactor branch doesn't run, it is referencing a local middleman. I can def work on this over the next couple weeks. I did not find the "to do" list that you had mentioned.

[tomdale]

Steps to run the site locally:

1. git clone https://github.com/emberjs/website.git ember-website
2. cd ember-website
3. git checkout doc-refactor
4. bundle --binstubs
5. bin/middleman

Then open http://localhost:4567 in your browser.

[vladikoff]

Starting on the sidebar first.

I think the confusion was that 'docs' are now merged with 'guides'

[vladikoff]

Actually it seems like https://github.com/jklm313 is working on most of this stuff. So I will let him do it :)

[jklm313]

Here's the sidebar so far: http://dabblet.com/gist/4242186... I'm not at all familiar with github so perhaps @vladikoff could add the code here?

[vladikoff]

Couple of notes:

• Seems like the sidebar will need to be pushed up for Guides and API, but it should remain the same for the blog
• Headers should become clickable in the guide sidebar

[vladikoff]

@jklm313 Ok I will add it :)

[vladikoff]

@tomdale from the design, seems like the 'sections' will have to become pages so I'm updating toc.rb,

 result += %Q{<li class="level-1">#{section}</li>}

to be links, instead of just section title. Thoughts?

[vladikoff]

Quick progress update

[jklm313]

@vladikoff is the one on the right supposed to be the new sidebar design?

[vladikoff]

@jklm313 sorry, left is psd, right is current content + new CSS, still working :)

[jklm313]

Gotcha!

[tomdale]

@vladikoff I think it is actually okay that sections are not pages. Instead of being associated with a URL, each of the sections should simply reveal the pages below.

[tomdale]

If you look at the current implementation that should make it clear what I'm saying (hopefully!)

[jklm313]

@vladikoff I'm currently testing in IE, so bound to run into a few troubles. I'll let you know once my code is finalized. By the way, is it okay to use OOCSS, to add multiple classes to elements that have recurring styles?

[jklm313]

Alright, tested in IE 8 & 9. So far, everything's ok. Hit me up on twitter if you need anything!

[tomdale]

@jklm313 Thank you!!

[trek]

@tomdale we can close this'un, ayuh?