getcomposer.org
getcomposer.org copied to clipboard
composer
Redesign
GetComposer.org Redesign
So I was having a chat with a good friend of mine, Sam Lambert, about how I wanted to give back to the open source community a few days ago. He told me that the source of GetComposer.org was available to Fork straight from Github and urged me to build a little redesign.
I, of course, agreed straight away. I've been a fan of Composer for a while and use it in almost every project, there isn't an open source technology I'd rather contribute too. So, after a few days (2, I believe) I have succeeded in redesigning your website.
A preview of the new design is available:
A few quick notes
- I wrote all the CSS for the redesign using the LESS preprocessor. I've left the source (.less) files inside the repo in case anybody else would like to make a few edits.
- I also used jQuery for all the javascript, this was mostly because of speed. Writing jQuery code is too easy.
- The redesign is most likely not bugfree. I've tested as much as I can, in as many places as I can, but I cannot guarantee 0 bugs. However, if people who spot bugs report an issue on my forked repo, I'll fix it and push the changes straight back to you guys!
- Reponsive design! Woo. (Check on different devices, or simply resize your browser)
What I've edited
I mostly only played with the stuff inside /web and /templates. Any changes I made to other files have likely been reverted (I edited the controllers at one point to interact with the GitHub API through PHP, but replaced this with AJAX later on!)
Github API
You'll notice on the home page there's a little "Latest commit" section. This is done using GitHubs API and a little bit of Javascript/Ajax. However, in order for this to work I had to register the demo domain (composer.pagodabox.com) as an Application within my Github account. I've also done the same for your domain getcomposer.org (So it should work straight of out the box), if you need any help with this, or would like me to delete that application when you make your own I'm contactable at: [email protected].
Future Changes
I will be likely editing this design quite a few times in the future, fixing bugs, adding features etc, so I'll keep you posted!
I don't like the gray color for the text of the documentation. I find it hard to read as there is not enough contrast with the background
for the design itself, I think you should not display scrollbars in code snippets when there is no scroll needed. It is quite ugly (especially as the scrollbars are not on the border of the black area but 5 or 10px inside it).
I really like the new design, it is definitely a big improvement over the current site.
The loading of new commits works flawlessly for me, and everyone else I had test it. Are you running the demo or your own live instance?
I'll have a look for JS errors. Christophe which browser were you using to test when you spotted TypeError: t.commit is undefined ?
I'm using your demo website linked above in FF 19.0.2
http://composer.pagodabox.com/web/doc/ is broken: the footer is not at the bottom, and there is a weird stuff with the ul#mini_nav appearing.
Is it possible to make the download buttons smaller on the download page ? I find them too big when you have the whole list of buttons
Good point, and yeah it's no problem. The buttons are block elements so they fill the parent. I'll just make the parent smaller for that section! :)
Can't thank you guys enough for the awesome feedback! I'm working up fixes to the issues mentioned (mostly by: @stof) and they'll be pushed back up soon!
Really looking forward to this getting merged in, amazing design! Great work :)
Heads up for anyone viewing now: The Github API powered "Latest Commit" isn't working because I've hit the rate limit. Never expected this to happen. I'm now going to see if I can find a way to cache the most recent commit, if anyone has any suggestions do give me a shout!
@JoeyEmery the rate limit is per IP, so people reviewing can see the page properly until they reach it too (i.e. doing 60 unauthenticated calls per hour)
IMO, the link to the download page should be more visible on the homepage.
And on a side note, I find it weird to see Redesign by Joey Emery in the footer of all pages whereas the name of the authors of Composer is only displayed on the homepage...
Yeah, I think I'm going to make the link to download a lot more prominent. And good point, I totally never thought of that. I just bunged my name into the footer at the end (it's become a routine haha). I'll sort this out too!
On 15 Mar 2013, at 15:56, Christophe Coevoet [email protected] wrote:
@JoeyEmery the rate limit is per IP, so people reviewing can see the page properly until they reach it too (i.e. doing 60 unauthenticated calls per hour)
IMO, the link to the download page should be more visible on the homepage.
And on a side note, I find it weird to see Redesign by Joey Emery in the footer of all pages whereas the name of the authors of Composer is only displayed on the homepage...
— Reply to this email directly or view it on GitHub.
I think all the fixes are in now, I can't be sure. Couldn't work on this project for a while due to lack of time. If you guys see anything else that's broken, give me a shout! Cheers.
In Chrome 26.0.1410.64 m (currently most recent version) the Download "button" background doesn't occupy the full height of the "button", even to the extent that the others do. It currently cuts off just above the baseline of the text.
I suspect that's not the desired styling.
Oh, and did you know that you can change where PagodaBox looks for your document root? In the Boxfile, just add document_root: web/ under web1. That will automatically make the other stuff in the root inaccessible via the web, and remove the web/ portion from the URL, making things cleaner all around. :grinning:
@danhunsaker Thanks very much! I think I broke this while trying to fix something else in my last commit, I'll get onto it. Cheers :)
Great work, but can you please please put the one-liner install curl code on the homepage. That's would be really great :). Can't count how many time I went there to find it.
@wyixin Thank you very much! I don't think it'll actually be used, but it was a lot of fun to make regardless.