A Responsive, Lightweight and Modular Solution to Build Hybrid Email Templates
Report bug . Request feature . Themes . Blogs
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.
You will need follwoing things to getting started with MailBox framework.
Download the MailBox, create a grid structure, and then inline CSS. The email design can be tested with just a single Grunt command.
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.
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
Framework documentation is available at here.
If you found a bug or would like to suggest a feature, please open an issue.
This project is licensed under the MIT License - see the License file for details