Give the home page some design love

[GarthDB]

Hey @locks could you post some screen shots of websites you like and we can start some moodboarding on github issues.

[GarthDB]

Just collecting existing work.

[una]

maybe we should break this up into smaller issues -- i.e. documentation, typography, layout, colors, styleguide, etc.

I do like the type provided in the last screenshot

[GarthDB]

I just thought we could start with some moodboarding first, loose vague stuff to start with, then start new more specific issues and goals from there.

[GarthDB]

that was for you @una

[una]

True, true -- thats a good start for sure

[locks]

Here's an e-mail I sent in a previous attempt:

Hello,

As mentioned on Twitter we're looking to give http://mustache.github.io a brand new coat of paint. There are some ideas but nothing too concrete, so everything is up to discussion.

First of all, here are the current websites for some related projects:
- http://handlebarsjs.com/
- http://twitter.github.io/hogan.js/
- http://icanhazjs.com/
- http://pvande.net/Milk/playground.html

We're looking to keep it simple, but a bit more appealing than the current state :P Some of the ideas being spitballed:
- Interactive tutorials inspired by http://coffeescript.org/
- Making the whole front page editable (an "Edit Page" toggle or some such) https://rawgithub.com/bobthecow/dc72ad126d58a09644bc/raw/a4d154bacd898a2d4655d28fff01c9e20a894f0a/gistfile1.html#demo
- New logo
- "Spec Complaint" sticker/logo
- Keep the list of implementations, but expand it to include multiple per language. Maybe multi-column, with some relevant stats? (travis/code climate)
- Statusboard with implementation spec compliance status

[GarthDB]

This is an amazing place to look for open design inspiration http://beautifulopen.com/

[locks]

@GarthDB the goal is to get featured there when we're through ;)

[locks]

To complement the e-mail above, here's what I'd ideally like to see:

• Homepage
• Status board
• Documentation
• Implementation-specific page. These would be, for example, themed with the implementation language associated colors (Ruby -> red, JavaScript -> yellow(?)).
• Logo — I'm waiting to hear back from an artist.

How the first three points are structured is up for debate.

[una]

Current status as a reference:

[bobthecow]

@una Looks great.

[raghunayyar]

I can help with developing a CSS style guide btw, have done this before. I know that comes later, just keeping myself in the loop.

[joeybright]

Hi all, I'm a designer that's interested in contributing to this project. Before I do, has there been any work on this that hasn't already been posted to this thread? I wouldn't want to re-do any work that's already been completed.

[una]

Yay! Go for it!

Sent from my iPhone

On Jul 18, 2015, at 8:58 PM, Joey Bright [email protected] wrote:

Hi all, I'm a designer that's interested in contributing to this project. Before I do, has there been any work on this that hasn't already been posted to this thread? I wouldn't want to re-do any work that's already been completed.

—
Reply to this email directly or view it on GitHub.

[joeybright]

I jumped right into the design process to riff off of what has already been completed. I decided to post this here (unfinished) to get some initial feedback. If this doesn't work for whatever reason, I can go back to the drawing board and start with some moodboards as @GarthDB suggested. So, if anyone has feedback please post it!

[una]

Awesome start!

Things I LOVE:

• the {{}} that open/close the site (so cute, so clever)
• the dark theme code input box
• content heirarchy (title, brief, links to github, example, supported languages)
• I really like the clean feel and typography choices

Additional ideas:

• color-coded a bit better for mustaches syntax in the code box
• link to Github again at the bottom of the page
• allow for the example in multiple languages (a toggle that lets that section show a ruby example, for instance)

[bobthecow]

Agreed on all above. The problem with toggling between examples is that this is live code: changing it changes the output. As it is, the example is raw JSON data, not even javascript. It's non-trivial to get ruby (or fake ruby) running in a text box in the browser, especially since this is going to be hosted on github pages, not on a specialized server that can have sandboxes for executing code :)

[joeybright]

Progress!

• Added syntax highlighting (let me know if you like the colors/if the syntax highlighting looks correct). Have yet to try toggling between languages here, that's next.
• Added all of the supported languages/implementations. I know that is was mentioned here that it'd be nice to being able to list multiple implementations for each language. However, I don't think that's really feasible, at least for the landing page. My gut feeling is to have each supported language link to a section of the docs that lists all of the implementations in that languages. I think that would keep the landing page lean(er) but allow multiple implementations to be listed.

Feedback is welcome and appreciated!

[una]

I don't know how I feel about the grey bar with some of that navigation -- im assuming its sticky?

But I love everything else!

[dasilvacontin]

@bobthecow Why Ruby? Couldn't we use JS for compiling/rendering the templates on the client?

[bobthecow]

That was in response to:

allow for the example in multiple languages (a toggle that lets that section show a ruby example, for instance)

[dasilvacontin]

Oh, sorry 😄. There's not much point on doing that, I think... What for? Showing that some implementations have features not included in the spec? In the spec's website?

[joeybright]

@una It would be sticky. Do you not like the style of it or do you just not like that it's there?

Here's a version w/o it:

[andresgalante]

Is this issue still open? If you guys need help to continue with @joeybright work or just to implement it into a html/Css template let me know.

[raghunayyar]

Btw, given the current situation of the website and how famous mustache is as a framework, I really think that this issue needs to move much faster.

[bitzl]

That's true, @raghunayyar. I'd be also available for help (development, testing,...).

[una]

I'm a bit over capacity for doing a bulk of work, but I can help with anything you need (design crit, implementation details, etc.) Lets just start making this thing :)

[andresgalante]

@raghunayyar @bitzl @una I'll have some bandwidth next week. If it's ok with you guys I'll send a PR with the implementation.

[raghunayyar]

@joeybright you can upload the sketch file imho. Let's start implementing it. I am very sure implementation will also have a discussion cycle regarding the libraries, grid system, preprocessers to use and stuff. So, it's better that we just start it right away. I can help out with the implement this weekend itself.

[joeybright]

https://www.dropbox.com/s/ffg7yy469r1kiys/mustache.sketch?dl=0 - Dropbox link to the .sketch file for anyone who wants to edit it or begin development.

[raghunayyar]

@joeybright awesome, how do I proceed now? Can you add me to the org and I can create a branch or I fork it out, that would be inconvenient though.

[joeybright]

I don't have access to the org., so I'd be the wrong person to ask about that. I would imagine if you want to get building sooner than later, forking the repo would make the most sense.

[raghunayyar]

@joeybright I am afraid but you will have to upload the zip file with the assets somewhere. My Sketch license is expired. I have clone the repo, will be pushing out changes real soon.

[locks]

I have created a redesign branch that you can send PRs against so we can get this party started :)
That way I can merge in several PRs, and then merge that into master so the site always works.

[raghunayyar]

@locks I have made an initial commit on my fork''s master, just fyi.
Link : https://github.com/raghunayyar/mustache.github.com
@joeybright I am waiting for the assets. A PSD will also be good.

[razetime]

I'm from Open Source Design.
Seems like the website layout is already prepared.
Why not implement it?

[dasilvacontin]

@razetime I guess we are waiting on @raghunayyar, since he already started working on it. He doesn't have Sketch though.

[joeybright]

I don't have Photoshop and haven't had time to put together proper specs for @raghunayyar. It's still going to be some time until I'm able to get to that. So, if @raghunayyar is going to be developing the site, he's waiting on me.

If someone wants to either take over development or transfer my .sketch file to a .psd for @raghunayyar, that would speed things up.

[razetime]

@joeybright If you don't have Photoshop, use photoshop CS2, which is free of cost, but old. https://www.adobe.com/support/downloads/detail.jsp?ftpID=3446
Or use the open-source GIMP http://www.gimp.org/, which is similar to Photoshop.

[raghunayyar]

@joeybright good news. I got sketch now. I have made a PR but its a WIP. @joeybright can you tell me which highlightJS skin are you using there? Or is it custom?

[joeybright]

@raghunayyar Nice! No highlightJS skin used. Just picked colors I liked haha.

[raghunayyar]

Btw: here is my pull request again : #72. Its ready for review apart from the Try it Out Section. I think I will need someone with better JS skills to get the syntax highlighting in the textareas.

[viankakrisna]

hi, i really like the new design for the github page. But can we keep the supported languages at the top? One thing that I really love about mustache is how portable it is. And I think it is a good idea to keep the list of supported language at the top. :)

[chiraggmodi]

is this still ongoing? any help needed?

[una]

Help is appreciated if you wanna submit some sketches or designs @chiraggmodi :) it looks like this hasn't been worked on it a while

[chiraggmodi]

okey will work on some design.

[pablonoel]

@chiraggmodi if you need any help, I would love to give you a hand

[raghunayyar]

This is a kind of a waste since we decided on a design last year. Built a website for that design, now it lies dead in a lot of PRs which no bothers to review / merge.

[locks]

@raghunayyar I'm sorry you feel like your work isn't valued, but things fall on the wayside for a plethora of reasons. I did try finishing your branch at the time by fixing the "Try It Out" but couldn't, so I can't merge it at the moment. Do you know someone who can give you a hand?

[raghunayyar]

@locks No, my branch is so old that I have lost context. I am kind of an often open source committer. If would be great if I get commit / review access, specific to repository, I would like to see things accelerate a bit. Your call.

[Erioldoesdesign]

Hey there, sorry to dig up an old issue from 2016 but I was wondering if I can close this job on the open source design jobs repo if this has closed or stopped being worked on? https://opensourcedesign.net/jobs/jobs/2015-04-28-mustache

[jgonggrijp]

I am able to review and merge pull requests, so if someone wants to have another go at this, please do.

[Erioldoesdesign]

I am able to review and merge pull requests, so if someone wants to have another go at this, please do.

Will make sure the job stays open then and update the forum post :)

[RayyanNafees]

After 56 comments over 9 yrs why the doc site still looks crap ?
Please update it with any of those elegant designs above... I can't understand it

[Erioldoesdesign]

I am able to review and merge pull requests, so if someone wants to have another go at this, please do.

I will try to encourage some design help from the opens ource design community - but i think it's stuck more at the FE implementation stage correct?

[jgonggrijp]

@Erioldoesdesign please clarify, what is a "FE implementation stage"?

[Erioldoesdesign]

@Erioldoesdesign please clarify, what is a "FE implementation stage"?

Apologies! FE = front end code

[jgonggrijp]

Oh, right. Yes, I think that is the next step and that is also what I meant to invite pull requests for.