Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
css
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

MailBox Logo

MailBox

A Responsive, Lightweight and Modular Solution to Build Hybrid Email Templates

Explore MailBox docs »

Report bug .  Request feature .  Themes .  Blogs

Table of contents

Getting Started

Introduction

Building an HTML email template could take a lot of your time. Further, no desired output after investing hours in coding is really frustrating. Our Mailbox framework endeavors to eradicate all these hassles and helps you build email designs without eating much of your time.

With MailBox at your disposal, you can create responsive hybrid HTML email templates that render perfectly and look good on widely used email clients, browsers, and devices.

Prerequisites

You will need follwoing things to getting started with MailBox framework.

Introduction

Download the MailBox, create a grid structure, and then inline CSS. The email design can be tested with just a single Grunt command.

Installing

Follow the step by step procedure to setup your first email development task.

  • Install Grunt on your system. Here is the guide to install grunt.
  • Download MailBox framework.
  • Configure your task from gruntfile.js and package.json file
  • Navigate to /template/input folder.
  • Create your html email template using boilerplate.html file.
  • Run grunt command and get ready to use HTML email.

Upload downloaded frmawork file on your grunt repository. You will find the complete setup of demo project there. So you can run demo task and check how it works. Also, you can create multiple templates at a time.

What's included

Within the download you'll find the following directories and files.

mailbox/
    ├── css/
    │   ├── style.css
    │   ├── style.min.css
    │   ├── style.css.map
    └── scss/
        ├── component/_buttons.scss
        ├── component/_navs.scss
        ├── component/_separators.scss
        ├── component/_spacer.scss
        ├── helpers/_mixins.scss
        ├── helpers/_settings.scss
        ├── reset/_normalize.scss
        ├── responsive/_responsive.scss
        ├── typography/_typography.scss
        ├── utilities/_alignments.scss
        ├── utilities/_border.scss
        ├── utilities/_display.scss
        ├── utilities/_display.scss
        ├── _style.scss
    └── component
        ├── buttons/button-filled.html
        ├── buttons/button-outlined.html
        ├── buttons/icon-button.html
        ├── buttons/button-rounded.html
        ├── navigations/center-aligned-nav.html
        ├── navigations/left-aligned-nav.html
        ├── navigations/right-aligned-nav.html
        ├── separators/separator-medium.html
        ├── separators/separator-small.html
        ├── separators/separator-large.html
        ├── spacer/spacer-small.html
        ├── spacer/spacer-medium.html
        ├── spacer/spacer-large.html
        ├── spacer/spacer-xlarge.html
        ├── spacer/spacer-huge.html
    └── layout
        ├── boilerplate.html
    └── grid
        ├── grid.html
    └── package.json
    └── Gruntfile.js
    └── templates
    	├── input/index.html
    	├── output/index.html

Documentation

Framework documentation is available at here.

Bugs and feature requests

If you found a bug or would like to suggest a feature, please open an issue.

Copyright and license

This project is licensed under the MIT License - see the License file for details

About

Email design framework

Resources

License

Releases

No releases published

Packages

No packages published