#MageHackDay 2014

This weekend I had a blast participating in the first ever global virtual Magento hackathon.

I was apart of the Responsive Email with CSS Inliner project. Our project team included Andreas and Nick from Germany, and myself in Pasadena on Friday. And on Saturday, Derek, Dhru, and Piotr joined in.

Andreas and Nick laid the groundwork with finding the inliner library and hooking it up to magento, as well as the initial work on the templates.

Then, Derek and I fleshed out the welcome and order confirmation base templates a bit. Dhru took the base template to the next level with an actual template design for Clean. And Peter helped to flesh out requirements for everything.

A CSS inliner is a tool that takes an HTML file and a CSS file and converts them into HTML with inline CSS. This is necessary because some prominent email clients only allow you to use inline CSS to style email.

At first we were hoping to use the Zurb Ink templates as a foundation, but we ran into some rendering hiccups, so we ended up writing some simple responsive base templates and their CSS from scratch.

I have to say that even after working with the inliner for a solid 15 hours or so over the weekend, it still feels like absolute magic every time I see it in action.

I guess it’s because I spend a decent amount of time working with crazy email markup for MageMail.

Here’s what the email markup looks like:

And the SASS:

And here are some screenshots of the templates.
Screen Shot 2014-02-02 at 9.04.42 AM
Screen Shot 2014-02-02 at 9.04.55 AM

Screen Shot 2014-02-02 at 9.05.10 AM

Screen Shot 2014-02-02 at 9.18.25 AM

Screen Shot 2014-02-02 at 9.18.51 AM

4 thoughts on “#MageHackDay 2014

  1. Pingback: Responsive E-Mails for Magento - Openstream Internet Solutions

  2. Pingback: Magento World Wide Online Hackathon #MageHackDay - Openstream Internet Solutions

  3. Pingback: For Magento Developers, Hack Is Another Word for Help | eBay Inc

  4. Pingback: For Magento Developers, Hack Is Another Word for Help - YO Status

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>