Design Refresh

[dignifiedquire]

I really enjoy the integration of elixir, with the automated documentation generator but felt myself wishing for a more up to date design of this documentation. So I opened up Photoshop and started designing. This is what I've come up with so far, I would love some feedback on this before moving onto the details and implementation.

A few things should be noted, this design expects the removal of iframes. I think that would be good improvement, but if there are strong reasons for keeping the iframe layout I could work around that.

[alco]

Hi @dignifiedquire,

This looks neat! Can you also do HTML layout? The core team is totally for removing iframes, but there isn't anyone who can actually implement it, I don't think. The code ExDoc uses is written in EEx style: HTML with embedded Elixir expressions, so it may require both knowledge of HTML and some familiarity with Elixir.

On a side note, I've been experimenting with an alternative front-end for ExDoc, one based on Sphinx. This one is not official and I don't know if it will ever become a primary target for ExDoc, but there has been a positive response from the community, see discussion here. Sphinx has builtin support for themes, so maybe it would be easier to implement a custom theme with it.

[dignifiedquire]

@alco I'm planning on implementing this myself yes (I do html+js development most of the day anyway as my day job so it's not a big stretch ;) )

EEx style is the best way to go at the moment I would say, as I it's much easier to customize things than in a Sphinx theme.

[josevalim]

Yeah, this looks beautiful. :) Let us know if there is anything we can help with!

[dignifiedquire]

I've been hacking something together and things are coming along nicely.

If you want to track the progress you can take a look here: https://github.com/Dignifiedquire/ex_doc/tree/design

[dignifiedquire]

Made some good progress today, you can see a preview for the elixir master docs here: http://dignifiedquire.github.io/docs/master/elixir/index.html.

• Loose iframes
• Integrate highlight.js
• Basic color scheme

Left to do

• Clean up Code
• Fix tests
• Finish styling
• Search
• Modules/Exceptions/Protocols switcher
• Testing in different browsers
• Mobile layout
• Add logo
• Navigation expand and collapse
• Fix links
• Spec styling
• Navigation scrolling
• Code Style
• Add basic styles removed from reset
• Show active navigation item
• Rebase onto latest master
• Self host fonts

[tonini]

@dignifiedquire this looks really nice! If you need help, just let me know. 👍

[eksperimental]

Hi, just stopped by to mention that the html structure has been modified a bit,
have a look at #163 and #165.
I have incorporated

's in the document structure among other small changes to comply with the HTML validation

[dignifiedquire]

@tonini happy to get any help as I don't have a lot of time to spend on this at the moment. The code is a bit of a mess but it's on the todo list. So if you want grab anything on that list and just post what you are working on :)

@eksperimental thanks. I reorganized the html anyway to make a bit more sense but will take a look at your changes if I need to incorporate them.

[milmazz]

@dignifiedquire Your proposal looks really nice! Any recent progress on this issue? I can help you if you want, just let me know.

[dignifiedquire]

@milmazz yes please, I haven't had any time to work in this recently, the most pressing task on the code is to incorporate all the changes that have been made since I started work on this. Feel free to ping me if you have any questions (warning the code is in a bit of a mess :( )

[milmazz]

@dignifiedquire Great, I've reviewed your design branch and the amount of changes is huge! So, do you mind if I try to split your proposal in a series of PR? I ask because there are some changes that are not related with the design (e.g. :fenced_code options for Hoedown, among others).

[dignifiedquire]

sure go ahead..there was one thing leading to the other when trying to implement it and so it grew and grew...