Repository: ireade/gulp-email-workflow
Branch: master
Commit: fdfa65664d27
Files: 16
Total size: 28.1 KB
Directory structure:
gitextract_sbox6c9v/
├── .gitignore
├── README.md
├── build/
│ ├── css/
│ │ ├── embedded.css
│ │ └── inline.css
│ └── index.html
├── gulpfile.js
├── license.txt
├── package.json
└── src/
├── data/
│ └── mailchimp.json
├── emails/
│ └── index.nunjucks
├── sass/
│ ├── _reset.scss
│ ├── embedded.scss
│ └── inline.scss
└── templates/
├── mailchimp.nunjucks
└── partials/
├── footer.nunjucks
└── header.nunjucks
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
node_modules
build.zip
================================================
FILE: README.md
================================================
# A Gulp Workflow for Building HTML Emails
This is a workflow for building HTML emails using Gulp. It comes with a default MailChimp-supported template.
What it does -
1. Builds HTML email from templates and partials
2. Compiles SCSS to CSS
3. Inlines the `inline.css` file and embeds the `embedded.css` file
4. Generates a preview of emails
5. Creates a zip of the build directory for upload (optional)
## Getting Started
#### 1. Install dependencies
This workflow requires the following dependencies -
- Node.js with npm ([Install](https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager))
- Gulp.js (Install with `npm install gulp`)
#### 2. Clone this repository
```
git clone https://github.com/ireade/gulp-email-workflow.git
cd gulp-email-workflow
```
Or [download as a ZIP](https://github.com/ireade/gulp-email-workflow/archive/master.zip).
#### 3. Install packages
```
npm install
```
#### 4. Start build
```
npm start
```
The compiled and inlined output email will be in the `build/` directory. Can be previewed in browser at `http://localhost:8000`
## How to use
#### Creating templates
[Nunjucks](https://mozilla.github.io/nunjucks/) is used for compiling template files to HTML.
Templates are stored in `src/templates/` and partials in `src/templates/partials`. To create a template, create a file in the templates directory with the `.nunjucks` file extension.
To include a partial in your template, use the following syntax -
```
{% include "partials/PARTIAL_FILE_NAME.nunjucks" %}
```
To define a block of dynamic content to be replaced by the email file, use the following syntax -
```
{% block CUSTOM_BLOCK_NAME %}{% endblock %}
```
#### Creating emails from templates
To create an email based off a template file, create a new file in the `src/emails/` directory (also with the `.nunjucks` file extension).
Specify which template to use using the following syntax -
```
{% extends "TEMPLATE_NAME.nunjucks" %}
```
To define the contents of a dynamic content block, use the following syntax -
```
{% block CUSTOM_BLOCK_NAME %}
Content goes here
{% endblock %}
```
#### Working with global data
Global data is stored in the `src/data` directory as JSON files. Include new data files in the config section at the top of the `gulpfile.js` -
```javascript
var globalData = {
DATA_NAME_1: require('./src/data/FILE_NAME_1.json'),
DATA_NAME_2: require('./src/data/FILE_NAME_2.json')
};
```
For example -
```javascript
var globalData = {
mailchimp: require('./src/data/mailchimp.json')
};
```
#### CSS
SASS files are stored in the `src/sass/` directory. There are two main SASS files -
- `inline.scss` for styles you w Liant to be inlined to their elements
- `embedded.scss` for styles that shouldn't be inlined. These will be inlcluded within a `<style>` element in the `<head>`
You can create subdirectories within the SASS folder to hold any partials. Make sure to precede the name of a partial with an underscore, e.g. `_reset.scss`.
#### Generating the zip file
You can also generate a zip file of the `build` directory for export. You can do this by running -
```
npm run zip
```
Alternatively, you can add it to the default and watch gulp tasks to have it generated automatically.
## Footnotes
- Created by [Ire Aderinokun](http://ireaderinokun.com)
- Contributions by [Zac Wasielewski](https://github.com/zacwasielewski)
- [MIT License](https://github.com/ireade/gulp-email-workflow/blob/master/license.txt)
================================================
FILE: build/css/embedded.css
================================================
#template-content a:link,#template-content a:visited,#template-content a.yshortcuts{color:#000;font-weight:normal;text-decoration:underline}#template-content h2{margin-top:30px;margin-bottom:20px}#template-content h3{margin-top:30px;margin-bottom:10px}#template-content img{display:inline;height:auto;width:100%}#template-content p{margin:0 0 20px}#template-content pre{display:block;width:90%;overflow-x:scroll;background-color:#F5F5F5;padding:15px}#template-content code{background-color:#F5F5F5}#template-content blockquote{margin:0 0 10px;border-left:5px solid #F5F5F5;padding:5px 10px;font-style:italic}
================================================
FILE: build/css/inline.css
================================================
/* RESET */
body {
margin: 0;
padding: 0;
width: 100%;
height: 100% !important;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
max-width: 100%;
}
table {
border-collapse: collapse !important;
}
/* CLIENT SPECIFIC STYLES */
/* Force Outlook to provide a "view in browser" message */
#outlook a {
padding: 0;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
line-height: 100%;
}
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
body, table, td, p, a, li, blockquote {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
/* Remove spacing between tables in Outlook 2007 and up */
table, td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
/* Allow smoother rendering of resized image in Internet Explorer */
img {
-ms-interpolation-mode: bicubic;
}
body {
background-color: #F5F5F5;
}
a {
color: #000;
}
#body-container {
width: 100%;
max-width: 600px;
margin: 20px auto;
}
/* **********************
Preheader
********************** */
#template-preheader td {
padding: 15px 10px;
font-family: "Helvetica Neue", Helvetica, "Arial", sans-serif;
font-style: italic;
color: #606060;
font-size: 13px;
}
#template-preheader td:last-child {
text-align: right;
}
/* **********************
Main Content
********************** */
#template-content {
background-color: #fff;
box-shadow: 2px 2px 3px rgba(150, 150, 150, 0.2);
}
#template-content-header {
text-align: center;
position: relative;
}
#template-content-header td {
background-color: #ffdb3a;
padding: 20px 15px;
font-family: "Helvetica Neue", Helvetica, "Arial", sans-serif;
}
.email-title {
line-height: 120%;
color: #000;
font-size: 24px;
font-weight: 700;
text-decoration: none;
}
.email-subtitle {
font-size: 16px;
}
/* */
#template-content-content {
width: 90%;
max-width: 560px;
text-align: left;
font-family: "Helvetica Neue", Helvetica, "Arial", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 150%;
margin: 30px 0;
}
/* */
#template-content-footer tr {
background-color: #f0f0f0;
}
#template-content-footer td {
padding: 20px 15px;
font-family: "Helvetica Neue", Helvetica, "Arial", sans-serif;
font-weight: 400;
line-height: 125%;
font-size: 15px;
}
/* **********************
Footer
********************** */
#template-footer td {
font-family: "Helvetica Neue", Helvetica, "Arial", sans-serif;
color: #606060;
font-size: 11px;
line-height: 150%;
text-align: center;
padding: 30px 10px 20px;
}
#template-footer p {
display: block;
margin-bottom: 15px;
}
================================================
FILE: build/index.html
================================================
<!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">
<head>
<meta property="og:type" content="article">
<meta property="og:title" content="">
<meta property="og:url" content="">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>*|MC:SUBJECT|*</title>
<style type="text/css">#template-content a:link,#template-content a:visited,#template-content a.yshortcuts{color:#000;font-weight:normal;text-decoration:underline}#template-content h2{margin-top:30px;margin-bottom:20px}#template-content h3{margin-top:30px;margin-bottom:10px}#template-content img{display:inline;height:auto;width:100%}#template-content p{margin:0 0 20px}#template-content pre{display:block;width:90%;overflow-x:scroll;background-color:#F5F5F5;padding:15px}#template-content code{background-color:#F5F5F5}#template-content blockquote{margin:0 0 10px;border-left:5px solid #F5F5F5;padding:5px 10px;font-style:italic}
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #F5F5F5; height: 100% !important; margin: 0; padding: 0; width: 100%;">
<div itemscope="" itemtype="http://schema.org/EmailMessage">
<div itemprop="publisher" itemscope="" itemtype="http://schema.org/Organization">
<meta itemprop="name" content="*|LIST:COMPANY|*">
<link itemprop="url" content="*|LIST:URL|*">
</div>
<div itemprop="about" itemscope="" itemtype="http://schema.org/Offer"></div>
</div>
<center id="body-container" style="margin: 20px auto; max-width: 600px; width: 100%;">
<!-- PREHEADER //////////////// -->
<table border="0" cellpadding="0" cellspacing="0" id="template-preheader" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse !important; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tr>
<td mc:edit="preheader_content01" valign="top" width="50%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: #606060; font-family: 'Helvetica Neue', Helvetica, 'Arial', sans-serif; font-size: 13px; font-style: italic; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 15px 10px;">
A gulp workflow for building HTML emails
</td>
<td mc:edit="preheader_content02" valign="top" width="50%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: #606060; font-family: 'Helvetica Neue', Helvetica, 'Arial', sans-serif; font-size: 13px; font-style: italic; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 15px 10px; text-align: right;">
<a href="*|ARCHIVE|*" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: #000;">View this email in your browser</a>
</td>
</tr>
</table>
<!-- START TEMPLATE CONTENT //////////////// -->
<center id="template-content" style="background-color: #fff; box-shadow: 2px 2px 3px rgba(150,150,150,0.2);">
<!-- EMAIL HEADER -->
<table border="0" cellpadding="0" cellspacing="0" id="template-content-header" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse !important; mso-table-lspace: 0pt; mso-table-rspace: 0pt; position: relative; text-align: center;">
<tr>
<td align="center" valign="top" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #ffdb3a; font-family: 'Helvetica Neue', Helvetica, 'Arial', sans-serif; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 20px 15px;">
<h1 mc:edit="email_title" class="email-title" style="color: #000; font-size: 24px; font-weight: 700; line-height: 120%; text-decoration: none;">
Gulp Email Workflow
</h1>
<p mc:edit="email_subtitle" class="email-subtitle" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-size: 16px;">
Build Better Emails
</p>
</td>
</tr>
</table>
<!-- EMAIL CONTENT -->
<div mc:edit="body" id="template-content-content" style="font-family: 'Helvetica Neue', Helvetica, 'Arial', sans-serif; font-size: 16px; font-weight: 400; line-height: 150%; margin: 30px 0; max-width: 560px; text-align: left; width: 90%;">
<p style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;"><a href="https://github.com/ireade/gulp-email-workflow" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: #000;">Gulp Email Workflow</a> is a simple workflow for building HTML emails using Gulp.js. Lorem Khaled Ipsum is a major key to success. Find peace, life is like a water fall, you’ve gotta flow. They don’t want us to win. Wraith talk. Cloth talk. </p>
<h2>Sample Content</h2>
<h3>A code block</h3>
<pre><code class="language-css">.hg {
display: grid;
grid-template-areas: "header header header"
"navigation main ads"
"footer footer footer";
grid-template-columns: 150px 1fr 150px;
grid-template-rows: 100px 1fr 30px;
min-height: 100vh;
}</code></pre>
<h3>An unordered list</h3>
<ul>
<li style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">List item one</li>
<li style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">List item two</li>
<li style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">List item three</li>
</ul>
<h3>An ordered list</h3>
<ol>
<li style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">List item one</li>
<li style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">List item two</li>
<li style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">List item three</li>
</ol>
<h3>A block quote</h3>
<blockquote style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
The first of the month is coming, we have to get money, we have no choice.
</blockquote>
</div>
<!-- EMAIL FOOTER -->
<table border="0" cellpadding="0" cellspacing="0" id="template-content-footer" width="100%" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse !important; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tr style="background-color: #f0f0f0;">
<td align="center" valign="top" mc:edit="email_footer" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-family: 'Helvetica Neue', Helvetica, 'Arial', sans-serif; font-size: 15px; font-weight: 400; line-height: 125%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 20px 15px;">
Thank you for reading!
</td>
</tr>
</table>
</center>
<!-- END TEMPLATE CONTENT //////////////// -->
<!-- TEMPLATE FOOTER //////////////// -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="template-footer" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; border-collapse: collapse !important; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
<tr>
<td align="center" valign="top" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: #606060; font-family: 'Helvetica Neue', Helvetica, 'Arial', sans-serif; font-size: 11px; line-height: 150%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 30px 10px 20px; text-align: center;">
<p style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; display: block; margin-bottom: 15px;">
This email was sent to <a href="mailto:*|EMAIL|*" target="_blank" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: #000;">*|EMAIL|*</a>
</p>
<p style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; display: block; margin-bottom: 15px;">
<a href="*|ABOUT_LIST|*" target="_blank" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: #000;"><em>why did I get this?</em></a> <a href="*|UNSUB|*" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: #000;">unsubscribe from this list</a> <a href="*|UPDATE_PROFILE|*" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: #000;">update subscription preferences</a>
</p>
<p style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; display: block; margin-bottom: 15px;">
<em>Copyright © *|CURRENT_YEAR|* *|LIST:COMPANY|*, All rights reserved.<br>
*|LIST:ADDRESSLINE|*
</em>
</p>
<p style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; display: block; margin-bottom: 15px;">*|REWARDS|*</p>
</td>
</tr>
</table>
</center>
</body>
</html>
================================================
FILE: gulpfile.js
================================================
var gulp = require('gulp');
var gutil = require('gulp-util');
/* *************
Config
************* */
var globalData = {
mailchimp: require('./src/data/mailchimp.json')
};
/* *************
CSS
************* */
var sass = require('gulp-sass');
var postcss = require('gulp-postcss');
var scss = require('postcss-scss');
var autoprefixer = require('autoprefixer');
var postcssProcessors = [
autoprefixer( { browsers: ['last 2 versions', 'ie > 10'] } )
]
gulp.task('sassInline', function(callback) {
return gulp.src('src/sass/inline.scss')
.pipe(
postcss(postcssProcessors, {syntax: scss})
)
.pipe(
sass({ outputStyle: 'expanded' })
.on('error', gutil.log)
)
.pipe(gulp.dest('build/css/'));
});
gulp.task('sassEmbedded', function(callback) {
return gulp.src('src/sass/embedded.scss')
.pipe(
postcss(postcssProcessors, {syntax: scss})
)
.pipe(
sass({ outputStyle: 'compressed' })
.on('error', gutil.log)
)
.pipe(gulp.dest('build/css/'));
});
var inlineCss = require('gulp-inline-css');
gulp.task('inlinecss', ['sassInline', 'nunjucks'], function() {
return gulp.src('build/*.html')
.pipe(
inlineCss({
applyStyleTags: false,
removeStyleTags: false
})
.on('error', gutil.log)
)
.pipe(gulp.dest('build/'))
.pipe(connect.reload());
});
/* *************
TEMPLATING
************* */
var nunjucksRender = require('gulp-nunjucks-render');
var data = require('gulp-data');
gulp.task('nunjucks', ['sassEmbedded'], function() {
return gulp.src('src/emails/*.nunjucks')
.pipe(
data(function() {
return globalData;
})
.on('error', gutil.log)
)
.pipe(
nunjucksRender({
path: ['src/templates/', 'build/css/']
})
.on('error', gutil.log)
)
.pipe(gulp.dest('build/'));
});
/* *************
ZIP
************* */
var zip = require('gulp-zip');
gulp.task('zip', function () {
return gulp.src('build/**')
.pipe(zip('build.zip'))
.pipe(gulp.dest('./'));
});
/* *************
SERVER
************* */
var connect = require('gulp-connect');
gulp.task('connect', function() {
connect.server({
port: 8000,
root: 'build', // Serve from build directory instead,
livereload:true
});
});
/* *************
WATCH
************* */
var filesToWatch = [
'src/sass/**/*.scss',
'src/emails/*.nunjucks',
'src/templates/**/*.nunjucks',
'src/data/*.json'
]
gulp.task('watch', function() {
gulp.watch(filesToWatch,['nunjucks', 'inlinecss']);
});
/* *************
DEFAULT
************* */
gulp.task('default', ['connect', 'nunjucks', 'inlinecss', 'watch']);
================================================
FILE: license.txt
================================================
The MIT License (MIT)
Copyright (c) [2016] [Ire Aderinokun]
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: package.json
================================================
{
"name": "gulp-email-workflow",
"description": "A workflow for building HTML email using Gulp",
"version": "1.0.0",
"author": "Ire Aderinokun",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/ireade/gulp-email-workflow"
},
"main": "gulpfile.js",
"devDependencies": {
"autoprefixer": "^6.3.6",
"gulp": "^3.9.1",
"gulp-connect": "^3.2.2",
"gulp-data": "^1.2.1",
"gulp-inline-css": "^3.1.0",
"gulp-nunjucks-render": "^2.0.0",
"gulp-postcss": "^6.1.0",
"gulp-sass": "^2.2.0",
"gulp-util": "^3.0.7",
"gulp-zip": "^3.2.0",
"postcss-scss": "^0.1.7"
},
"scripts": {
"start": "gulp",
"zip": "gulp zip"
}
}
================================================
FILE: src/data/mailchimp.json
================================================
{
"campaign_title": "",
"campaign_url": "",
"page_title": "*|MC:SUBJECT|*",
"publisher_name": "*|LIST:COMPANY|*",
"publisher_url": "*|LIST:URL|*"
}
================================================
FILE: src/emails/index.nunjucks
================================================
{% extends "mailchimp.nunjucks" %}
{% block preheader %}
A gulp workflow for building HTML emails
{% endblock %}
{% block email_title %}
Gulp Email Workflow
{% endblock %}
{% block email_subtitle %}
Build Better Emails
{% endblock %}
{% block email_content %}
<p><a href="https://github.com/ireade/gulp-email-workflow">Gulp Email Workflow</a> is a simple workflow for building HTML emails using Gulp.js. Lorem Khaled Ipsum is a major key to success. Find peace, life is like a water fall, you’ve gotta flow. They don’t want us to win. Wraith talk. Cloth talk. </p>
<h2>Sample Content</h2>
<h3>A code block</h3>
<pre><code class="language-css">.hg {
display: grid;
grid-template-areas: "header header header"
"navigation main ads"
"footer footer footer";
grid-template-columns: 150px 1fr 150px;
grid-template-rows: 100px 1fr 30px;
min-height: 100vh;
}</code></pre>
<h3>An unordered list</h3>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
<h3>An ordered list</h3>
<ol>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ol>
<h3>A block quote</h3>
<blockquote>
The first of the month is coming, we have to get money, we have no choice.
</blockquote>
{% endblock %}
{% block email_footer %}
Thank you for reading!
{% endblock %}
================================================
FILE: src/sass/_reset.scss
================================================
/* RESET */
body {
margin:0;
padding:0;
width: 100%;
height:100% !important;
}
img {
border:0;
height:auto;
line-height:100%;
outline:none;
text-decoration:none;
max-width: 100%
}
table {
border-collapse:collapse !important;
}
/* CLIENT SPECIFIC STYLES */
/* Force Outlook to provide a "view in browser" message */
#outlook a {
padding:0;
}
.ReadMsgBody{
width:100%;
}
.ExternalClass {
width:100%;
line-height: 100%;
p,
span,
font,
td,
div {
line-height: 100%;
}
}
body, table, td, p, a, li, blockquote {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust:100%;
}
/* Remove spacing between tables in Outlook 2007 and up */
table, td {
mso-table-lspace:0pt;
mso-table-rspace:0pt;
}
/* Allow smoother rendering of resized image in Internet Explorer */
img {
-ms-interpolation-mode:bicubic;
}
================================================
FILE: src/sass/embedded.scss
================================================
#template-content {
a:link,
a:visited,
a.yshortcuts {
color: #000;
font-weight:normal;
text-decoration:underline;
}
h2 {
margin-top: 30px;
margin-bottom: 20px;
}
h3 {
margin-top: 30px;
margin-bottom: 10px;
}
img {
display:inline;
height:auto;
width: 100%;
}
p {
margin: 0 0 20px;
}
pre {
display: block;
width: 90%;
overflow-x: scroll;
background-color: #F5F5F5;
padding: 15px;
}
code {
background-color: #F5F5F5;
}
blockquote {
margin: 0 0 10px;
border-left: 5px solid #F5F5F5;
padding: 5px 10px;
font-style: italic;
}
}
================================================
FILE: src/sass/inline.scss
================================================
@import
'reset'
;
$font-stack: 'Helvetica Neue', Helvetica, 'Arial', sans-serif;
$theme: rgb(255, 219, 58);
$bg-color: #F5F5F5;
body {
background-color: $bg-color;
}
a {
color: #000;
}
#body-container {
width: 100%;
max-width: 600px;
margin: 20px auto;
}
/* **********************
Preheader
********************** */
#template-preheader {
td {
padding: 15px 10px;
font-family: $font-stack;
font-style: italic;
color: #606060;
font-size: 13px;
}
td:last-child {
text-align: right;
}
}
/* **********************
Main Content
********************** */
#template-content {
background-color: #fff;
box-shadow: 2px 2px 3px rgba(150, 150, 150, 0.2)
}
#template-content-header {
text-align: center;
position: relative;
td {
background-color: $theme;
padding: 20px 15px;
font-family: $font-stack;
}
}
.email-title {
line-height:120%;
color: #000;
font-size: 24px;
font-weight: 700;
text-decoration: none;
}
.email-subtitle {
font-size: 16px;
}
/* */
#template-content-content {
width: 90%;
max-width: 560px;
text-align: left;
font-family: $font-stack;
font-weight: 400;
font-size: 16px;
line-height:150%;
margin: 30px 0;
}
/* */
#template-content-footer {
tr {
background-color: rgb(240, 240, 240);
}
td {
padding: 20px 15px;
font-family: $font-stack;
font-weight: 400;
line-height:125%;
font-size: 15px;
}
}
/* **********************
Footer
********************** */
#template-footer {
td {
font-family: $font-stack;
color: #606060;
font-size: 11px;
line-height: 150%;
text-align:center;
padding: 30px 10px 20px;
}
p {
display: block;
margin-bottom: 15px;
}
}
================================================
FILE: src/templates/mailchimp.nunjucks
================================================
{% include "partials/header.nunjucks" %}
<center id="body-container">
<!-- PREHEADER //////////////// -->
<table border="0" cellpadding="0" cellspacing="0" id="template-preheader" width="100%">
<tr>
<td mc:edit="preheader_content01" valign="top" width="50%">
{% block preheader %}{% endblock %}
</td>
<td mc:edit="preheader_content02" valign="top" width="50%">
<a href="*|ARCHIVE|*">View this email in your browser</a>
</td>
</tr>
</table>
<!-- START TEMPLATE CONTENT //////////////// -->
<center id="template-content">
<!-- EMAIL HEADER -->
<table border="0" cellpadding="0" cellspacing="0" id="template-content-header" width="100%">
<tr>
<td align="center" valign="top">
<h1 mc:edit="email_title" class="email-title">
{% block email_title %}{% endblock %}
</h1>
<p mc:edit="email_subtitle" class="email-subtitle">
{% block email_subtitle %}{% endblock %}
</p>
</td>
</tr>
</table>
<!-- EMAIL CONTENT -->
<div mc:edit="body" id="template-content-content">
{% block email_content %}{% endblock %}
</div>
<!-- EMAIL FOOTER -->
<table border="0" cellpadding="0" cellspacing="0" id="template-content-footer" width="100%">
<tr>
<td align="center" valign="top" mc:edit="email_footer">
{% block email_footer %}{% endblock %}
</td>
</tr>
</table>
</center>
<!-- END TEMPLATE CONTENT //////////////// -->
<!-- TEMPLATE FOOTER //////////////// -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="template-footer">
<tr>
<td align="center" valign="top">
<p>
This email was sent to <a href="mailto:*|EMAIL|*" target="_blank">*|EMAIL|*</a>
</p>
<p>
<a href="*|ABOUT_LIST|*" target="_blank"><em>why did I get this?</em></a> <a href="*|UNSUB|*">unsubscribe from this list</a> <a href="*|UPDATE_PROFILE|*">update subscription preferences</a>
</p>
<p>
<em>Copyright © *|CURRENT_YEAR|* *|LIST:COMPANY|*, All rights reserved.<br>
*|LIST:ADDRESSLINE|*
</em>
</p>
<p>*|REWARDS|*</p>
</td>
</tr>
</table>
</center>
{% include "partials/footer.nunjucks" %}
================================================
FILE: src/templates/partials/footer.nunjucks
================================================
</body>
</html>
================================================
FILE: src/templates/partials/header.nunjucks
================================================
<!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">
<head>
<meta property="og:type" content="article">
<meta property="og:title" content="{{mailchimp.campaign_title}}">
<meta property="og:url" content="{{mailchimp.campaign_url}}">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>{{mailchimp.page_title}}</title>
<link rel="stylesheet" href="css/inline.css">
<style type="text/css">{% include "./../../../build/css/embedded.css" %}</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<div itemscope="" itemtype="http://schema.org/EmailMessage">
<div itemprop="publisher" itemscope="" itemtype="http://schema.org/Organization">
<meta itemprop="name" content="{{mailchimp.publisher_name}}">
<link itemprop="url" content="{{mailchimp.publisher_url}}">
</div>
<div itemprop="about" itemscope="" itemtype="http://schema.org/Offer"></div>
</div>
gitextract_sbox6c9v/
├── .gitignore
├── README.md
├── build/
│ ├── css/
│ │ ├── embedded.css
│ │ └── inline.css
│ └── index.html
├── gulpfile.js
├── license.txt
├── package.json
└── src/
├── data/
│ └── mailchimp.json
├── emails/
│ └── index.nunjucks
├── sass/
│ ├── _reset.scss
│ ├── embedded.scss
│ └── inline.scss
└── templates/
├── mailchimp.nunjucks
└── partials/
├── footer.nunjucks
└── header.nunjucks
Condensed preview — 16 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (31K chars).
[
{
"path": ".gitignore",
"chars": 23,
"preview": "node_modules\nbuild.zip\n"
},
{
"path": "README.md",
"chars": 3571,
"preview": "# A Gulp Workflow for Building HTML Emails\n\n\n\n\nThis is a workflow for building "
},
{
"path": "build/css/embedded.css",
"chars": 609,
"preview": "#template-content a:link,#template-content a:visited,#template-content a.yshortcuts{color:#000;font-weight:normal;text-d"
},
{
"path": "build/css/inline.css",
"chars": 2732,
"preview": "/* RESET */\nbody {\n margin: 0;\n padding: 0;\n width: 100%;\n height: 100% !important;\n}\n\nimg {\n border: 0;\n height: "
},
{
"path": "build/index.html",
"chars": 8852,
"preview": "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\""
},
{
"path": "gulpfile.js",
"chars": 2958,
"preview": "var gulp = require('gulp');\nvar gutil = require('gulp-util');\n\n\n/* *************\n Config\n************* */\n\nvar globalDa"
},
{
"path": "license.txt",
"chars": 1084,
"preview": "The MIT License (MIT)\n\nCopyright (c) [2016] [Ire Aderinokun]\n\nPermission is hereby granted, free of charge, to any perso"
},
{
"path": "package.json",
"chars": 710,
"preview": "{\n \"name\": \"gulp-email-workflow\",\n \"description\": \"A workflow for building HTML email using Gulp\",\n \"version\": \"1.0.0"
},
{
"path": "src/data/mailchimp.json",
"chars": 154,
"preview": "{\n\t\"campaign_title\": \"\",\n\t\"campaign_url\": \"\",\n\n\t\"page_title\": \"*|MC:SUBJECT|*\",\n\n\t\"publisher_name\": \"*|LIST:COMPANY|*\",\n"
},
{
"path": "src/emails/index.nunjucks",
"chars": 1350,
"preview": "{% extends \"mailchimp.nunjucks\" %}\n\n{% block preheader %} \nA gulp workflow for building HTML emails\n{% endblock %}\n\n{% b"
},
{
"path": "src/sass/_reset.scss",
"chars": 851,
"preview": "/* RESET */\n\nbody {\n\tmargin:0; \n\tpadding:0;\n\twidth: 100%;\n\theight:100% !important;\n}\n\nimg { \n\tborder:0; \n\theight:auto; \n"
},
{
"path": "src/sass/embedded.scss",
"chars": 654,
"preview": "#template-content {\n\n a:link, \n a:visited, \n a.yshortcuts {\n color: #000;\n font-weight:normal;\n text-decorat"
},
{
"path": "src/sass/inline.scss",
"chars": 1714,
"preview": "\n@import \n\t'reset'\n;\n\n$font-stack: 'Helvetica Neue', Helvetica, 'Arial', sans-serif;\n$theme: rgb(255, 219, 58);\n$bg-colo"
},
{
"path": "src/templates/mailchimp.nunjucks",
"chars": 2421,
"preview": "{% include \"partials/header.nunjucks\" %}\n<center id=\"body-container\">\n\n <!-- PREHEADER //////////////// -->\n <table bo"
},
{
"path": "src/templates/partials/footer.nunjucks",
"chars": 15,
"preview": "</body>\n</html>"
},
{
"path": "src/templates/partials/header.nunjucks",
"chars": 1083,
"preview": "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\""
}
]
About this extraction
This page contains the full source code of the ireade/gulp-email-workflow GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 16 files (28.1 KB), approximately 8.6k tokens. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.