The Making of the Cookbook

The Template

Landing page - Twitter Bootstrap

The landing page is built from a basic Start Bootstrap theme, Agency. It comes with an interesting set of category blocks that pop up hidden detail sections. These blocks are easily generated using pdoResources, whose tpl in this case has a pdoMenu snippet to generate the lists of recipes for each category.

The main splash image "Robot Workshop" has been floating around the 'net for years; after a good bit of searching he was finally tracked down (I forget who located him - but thanks anyway!). He's an artist by the name of JP Targete, you can see his Fantasy art on his website. He was kind enough to let me use it on the Cookbook for free. Gorgeous, isn't it?

The actual design of the landing page was done for me by Pavel Tajdus (ptajdus on Slack), tajdik@gmail.com. He did a wonderful job fitting in the rest of the page design to that splash image.

Inner pages - HTML KickStart

HTML KickStart is used for the responsive template for the inner pages. It provides a fairly simple grid-based layout, as well as a number of useful styling features.The design I did myself. I'm no designer, but I don't think it's too shabby.

I used KickStart's image + caption feature, changing the kickstart.js to use the alt attribute instead of the title attribute for the caption text. I hate those tooltips that pop up in my face when there is a title attribute! It makes a nice border and caption for images using the "caption" classname.

Images

The luscious food images are from All-free-download.com

The Steampunk images were taken from various free Steampunk graphics sites around the Internet.