Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/saabbir/email-magic-html
Demystifying Email Design. Demo Link: https://saabbir.github.io/email-magic-html/
https://github.com/saabbir/email-magic-html
gulp html-email sass
Last synced: 1 day ago
JSON representation
Demystifying Email Design. Demo Link: https://saabbir.github.io/email-magic-html/
- Host: GitHub
- URL: https://github.com/saabbir/email-magic-html
- Owner: Saabbir
- Created: 2020-11-03T14:08:59.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2020-11-04T08:04:48.000Z (about 4 years ago)
- Last Synced: 2024-06-11T01:54:54.799Z (5 months ago)
- Topics: gulp, html-email, sass
- Language: HTML
- Homepage: https://saabbir.github.io/email-magic-html/
- Size: 396 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Demystifying Email Design
Coded this HTML email template by following tutsplus article - [Build an HTML Email Template From Scratch](https://webdesign.tutsplus.com/articles/build-an-html-email-template-from-scratch--webdesign-12770)
Later added gulp workflow with nunjucks templating and scss setup.
Demo can be seen in here - https://saabbir.github.io/email-magic-html/
## Features
- Uses Gulp 4 for automation
- Uses SCSS for CSS
- Uses Nunjucks for templating
## Getting Started
Clone this repo:
```sh
git clone https://github.com/Saabbir/email-magic-html.git
```
This project is based on [Node.js](https://nodejs.org/en/). To install the necessary packages, run this command in the root folder of the site:
```sh
npm install
```
### After Installation
- Run `npm run dev` from root folder for a development server and live reloading
- Run `npm run build` from root folder for production build
## Dev Dependencies
This project uses a number of open source projects for the development build:
- [browser-sync](https://ghub.io/browser-sync)
- [del](https://ghub.io/del)
- [gulp](https://ghub.io/gulp)
- [gulp-autoprefixer](https://ghub.io/gulp-autoprefixer)
- [gulp-cache](https://ghub.io/gulp-cache)
- [gulp-imagemin](https://ghub.io/gulp-imagemin)
- [gulp-inline-css](https://ghub.io/gulp-inline-css)
- [gulp-nunjucks-render](https://ghub.io/gulp-nunjucks-render)
- [gulp-sass](https://ghub.io/gulp-sass)
## References
- [tutsplus-article](https://webdesign.tutsplus.com/articles/build-an-html-email-template-from-scratch--webdesign-12770)
- [A Gulp Workflow for Building HTML Email](https://bitsofco.de/a-gulp-workflow-for-building-html-email/)
- [gulp-email-workflow](https://github.com/ireade/gulp-email-workflow)