Give the home page some design love about mustache.github.com HOT 61 OPEN

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.

from mustache.github.com.

is this still ongoing? any help needed?

from mustache.github.com.

okey will work on some design.

from mustache.github.com.

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

from mustache.github.com.

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

from mustache.github.com.

Just collecting existing work.

from mustache.github.com.

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

from mustache.github.com.

that was for you @una

from mustache.github.com.

True, true -- thats a good start for sure

from mustache.github.com.

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

from mustache.github.com.

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

from mustache.github.com.

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

from mustache.github.com.

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.

from mustache.github.com.

Current status as a reference:

from mustache.github.com.

@una Looks great.

from mustache.github.com.

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.

from mustache.github.com.

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.

from mustache.github.com.

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.

from mustache.github.com.

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!

from mustache.github.com.

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)

from mustache.github.com.

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

from mustache.github.com.

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!

from mustache.github.com.

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!

from mustache.github.com.

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

from mustache.github.com.

That was in response to:

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

from mustache.github.com.

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?

from mustache.github.com.

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

from mustache.github.com.

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.

from mustache.github.com.

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.

from mustache.github.com.

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

from mustache.github.com.

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

from mustache.github.com.

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

from mustache.github.com.

Hello everyone, thanks for the activity in here!
I thought I had commented a while back, but seems I forgot to actually post. I thought I was going to have a bit of time to start implementing but I didn't get anywhere.
I'm willing to start iterating on this, so we can hopefully address the documentation/implementation-specific page next :)

from mustache.github.com.

I’m doing a workshop at the end of Oct at FOWD on design in the open; We could work on this project during that time if it isn’t already finished.

—
Sent from Mailbox

On Fri, Sep 25, 2015 at 6:05 AM, Ricardo Mendes [email protected]
wrote:

Hello everyone, thanks for the activity in here!
I thought I had commented a while back, but seems I forgot to actually post. I thought I was going to have a bit of time to start implementing but I didn't get anywhere.

I'm willing to start iterating on this, so we can hopefully address the documentation/implementation-specific page next :)

Reply to this email directly or view it on GitHub:
#57 (comment)

from mustache.github.com.

I'm available to make any additions/edits to the landing page if we want to do another few rounds of iteration before implementation. I can also clean up and post the .sketch file for the design when someone starts implementation so they can get their hands on the assets.

from mustache.github.com.

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

from mustache.github.com.

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.

from mustache.github.com.

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

from mustache.github.com.

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.

from mustache.github.com.

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

from mustache.github.com.

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.

from mustache.github.com.

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

from mustache.github.com.

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

from mustache.github.com.

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

from mustache.github.com.

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.

from mustache.github.com.

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

from mustache.github.com.

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

from mustache.github.com.

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

from mustache.github.com.

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.

from mustache.github.com.

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. :)

from mustache.github.com.

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

from mustache.github.com.

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

from mustache.github.com.

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.

from mustache.github.com.

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

from mustache.github.com.

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

from mustache.github.com.

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

from mustache.github.com.

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

from mustache.github.com.

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?

from mustache.github.com.

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

from mustache.github.com.

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

Apologies! FE = front end code

from mustache.github.com.

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

from mustache.github.com.