Getting started with MailBox

MailBox is a responsive and developer friendly email framework for developing hybrid HTML email templates that will render correctly across each of the most popular email clients.

Boilerplate

Use /boilerplate.html file to start building your html email templates using the provided grids & component options. The file comes with all necessary tags, css and attributes that are needed to make an HTML work.

Whether you are using sass version or css version, you will need the /boilerplate.html to getting started with template design.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="x-apple-disable-message-reformatting" />
<!-- So that mobile will display zoomed in -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- enable media queries for windows phone 8 -->
<meta name="format-detection" content="telephone=no" />
<!-- disable auto telephone linking in iOS -->
<meta name="format-detection" content="date=no" />
<!-- disable auto date linking in iOS -->
<meta name="format-detection" content="address=no" />
<!-- disable auto address linking in iOS -->
<meta name="format-detection" content="email=no" />
<!-- disable auto email linking in iOS -->
<title>Bigbox - A Multipurpose responsive email template</title>
<style type="text/css">
/* Insert Mailbox Email Framework CSS Here */
</style>
<body style="margin: 0px; padding: 0px;">
   <!-- Module 1a -->
   <table width="100%" align="center" role="presentation">
      <tbody>
         <tr>
            <td align="center" valign="top">
               <!-- Wrapper 720px -->
               <table class="wrapper" role="presentation">
                  <tbody>
                     <tr>
                        <td align="center" valign="middle">
                           <!-- Container 600px -->
                           <table class="container" role="presentation">
                              <tbody>
                                 <tr>
                                    <td align="center" valign="middle">
                                       <!-- Add Content Here -->
                                    </td>
                                 </tr>
                              </tbody>
                           </table>
                        </td>
                     </tr>
                     <tr>
                        <td class="gmail_fix" align="center" valign="middle">
                           <table cellpadding="0" cellspacing="0" border="0" align="center">
                              <tr>
                                 <td class="gmail_fix">
                                    <img class="gmail_fix" src="images/spacer.png" alt="" />
                                 </td>
                              </tr>
                           </table>
                        </td>
                     </tr>
                  </tbody>
               </table>
            </td>
         </tr>
      </tbody>
   </table>
</body>