Add Tomster index page

[sandraor]

This page will list all of the Tomsters, similar to Github's Octodex.

[wifelette]

Woot! I'll work on adding the first batch of content tomorrow and then we can hopefully push live pretty quickly after that :)

[wifelette]

Specific things that I still need to work on, so you'll notice holes once my PR is merged:

• Some of the Tomsters are missing. I've added stub entries for them, and a designer is working on them for me. Basically they're part of giant Illustrator files with backgrounds and whatnot, and someone else is working on extracting them all for me.
• Some of the Tomsters are too small, like the busts. Once I finish filling in the missing ones, I'll work on getting bigger files for the too-small ones. I've added code though so if ever a Tomster is too small, at least it'll center nicely.
• Not final copy up top.
• Will add a CTA about commissioning Tomsters to the bottom, similar to the bottom of http://emberjs.com/meetup-assets/. Will add link to FAQ page.
• Design and update FAQ page.

Other things I did for reference:

• Made them sorted by date
• Styled how it looks if there's no URL
• Centered smaller Tomsters (flexbox fun)

[wifelette]

Something else: we should add/create an accompanying Tomster FAQ page, like this one: https://octodex.github.com/faq.html. I may ask GitHub for permission to just nab their copy from some of this, or do my own version instead (we'll see what happens first :p).

@sandraor Feel like designing the page for it?

[sandraor]

@wifelette Sure, I can do the FAQ. I'll send you a mockup once I have something :)

[kiwiupover]

@wifelette One Tomster I see that is missing is the EmberCamp Guy

[wifelette]

@kiwiupover Confirm, see the first To Do in my first comment :)

@sandraor What are the exact dimensions of the white square the Tomsters are to be filling? I'm on a spotty internet connection overseas or I could probably pull and measure myself. Designer wants to know and I don't want to hold him up until I get back.

Similarly, what are your recommendations for the exact max size the Tomsters ought be inside the box? I want to add the detail to the Yaml file specs for when we forget later, and also possibly re-export many of the existing ones in the exact right size.

[sandraor]

@wifelette The Tomsters should be max 378px height / width (since I added padding — see below).

I noticed that the Tomster images don't have any whitespace around them, so they were very close to the edges of the box. I added 30px of padding around the images to fix that. All of the images have transparent backgrounds at the moment, but if you add any with coloured backgrounds that padding might not look so nice. Do you want to leave it this way, or do you want to add the whitespace to the images themselves (bringing the max size to 438px)?

[wifelette]

They'll all be transparent pngs, so I'm not concerned about that bit looking weird. So if that's the only concern, we should be good to go with 378px + the 30px of padding you added :)

[wifelette]

With my most recent push, this page is basically good to go—just need to finish up the FAQ page and we can ship them together :)

[rwjblue]

Very exciting!!!

[wifelette]

@sandraor Here's copy for the FAQ page:

Can I use the Tomster for my product/website/company/etc.?

The Tomster is a registered trademark, and more importantly, a big part of our identity! He may not be used for any unofficial purposes without us granting a specific license.

There are processes whereby community efforts and user groups can commission specific Tomsters and be granted license to use them. It’s affordable and easy, but we’re picky about approvals. To learn more reach out.

Can I use it for my avatar/Twitter photo/OKCupid headshot/etc?

See the previous question as well. Please do not use the Tomster for anything without specific permission. Besides: you’re lovely! And also (probably) not a hamster. You can find something better <3

Can you make a Tomster that looks like [insert thing here]?

Maybe! Ember is an open source project with little by way of funding, so for now, Tomsters are made as they’re needed, rather than any time a fun idea comes up (because trust us, there are LOTS of good ideas!). You’re welcome to toss us a note with an idea or request, but for right now, assume they’re designed by necessity only.

Can I make my own Tomster?

A big friendly and polite… absolutely not :p The Tomsers are all made in-house by a small number of official Tomster Designers we work directly with and trust to help us keep the brand and image in the right place. We’re very protective of him; please don’t customize, manipulate or otherwise commandeer our identity and assets.

Do you own the Trademark to Ember and the Tomster?

We do indeed!

Who designed the original Tomster?

The Tomster was originally designed by the fabulous Lindsey Wilson, as part of a set of illustrations we had made for the first Ember website. From there he rapidly grew into the iconic Tomster you know today :) Lindsey has also designed something like 90% of the other Tomsters in existence.

Contact Leah for any Tomster-related questions or commission requests. If you want to hire Lindsey for non Ember related work, please do! She’s great. Really.

[sandraor]

@wifelette Thanks! I put in the copy and added a table of contents to the top of the page, as we all as a "Back to top" link.

There's one thing left that I'll need help with: The "Back to top" link animates the page scroll nicely, but the anchor links in the table of contents don't have any animation. Would anyone be able to apply the scroll animation to the ToC links as well?

[wifelette]

I think for sure yes, but they're probably not on this PR yet so not receiving notifications 😛

@rwjblue, @jgwhite, any ideas on people you could loop in to help with this small animations angle?

Also adding a bunch of the folks who helped with our last design PR, since maybe one of them wants to jump in :) @andrewbranch, @lzcabrera, @alexclarkofficial, @solsberg, @yaymukund.

I can reach out to the general population too if we don't attract anyone here. Hopefully it's a small task and we'll get it tackled speedily.

[lzcabrera]

I can help. I should be able to tackle it tonight. Stay tuned!

[jgwhite]

@lzcabrera perfect, thank you!

[lzcabrera]

@wifelette @sandraor the animation on the faq TOC is done sandraor/pull/19

[sandraor]

@lzcabrera Looks great! Thanks for the help :)

@wifelette Any more changes, or do you think we're ready to go?

[wifelette]

!

I'll get this deployed shortly. It looks amazing—thanks everyone for the help!

[sandraor]

💃