Skip to content

Instantly share code, notes, and snippets.

@marcus-at-localhost

marcus-at-localhost/1. Directory Structure.txt

Last active August 29, 2015 14:27
Show Gist options
  • Save marcus-at-localhost/227bc90d12552119d77a to your computer and use it in GitHub Desktop.
Save marcus-at-localhost/227bc90d12552119d77a to your computer and use it in GitHub Desktop.
Download ZIP
Jade Zurb Mailchimp Messup
Raw
1. Directory Structure.txt
.
| gruntfile.js
| package.json
|
+---dist
| | email-template-inline.html (inlined styles)
| | email-template.html (normal html)
| |
| +---css
| | mailchimp.css (just a copy)
| | newsletter.css (compiled less)
| |
\---src
|
+---less
| | ink.less (https://github.com/ityu/InkLess)
| | mailchimp.css (mailchimp specific Template CSS /*@editible*/)
| | newsletter.less (custome styles)
|
\---views
email-template.jade
Raw
2. email-template.jade
- var w = 270
- var h = 180
- var ww = 560
- var hh = 180
doctype strict
html(lang="en")
head
meta(http-equiv='Content-Type', content='text/html; charset=utf-8')
meta(name='viewport', content='width=device-width')
meta(property='og:title', content='*|MC:SUBJECT|*')
title *|MC:SUBJECT|*
link(href='css/newsletter.css', rel='stylesheet')
//- mailchimp editable style
link(href='css/mailchimp.css', rel='stylesheet')
body
table.body
tr
td.center(align="center", valign="top")
center
table.container.preheader
tr
td
table.row
tr
td.wrapper
//- header start
table.eight.columns
tr
td
div(mc:edit="preheader") Preheader Text
td.expander
//- header end
td.wrapper.last
//- header start
table.four.columns
tr
td
div(mc:edit="preheader_2",style='text-align:right;')
// *|IFNOT:ARCHIVE_PAGE|*
a(href='*|ARCHIVE|*', target='_blank') Open in Browser.
// *|END:IF|*
td.expander
//- header end
br
img.logo(src="http://placehold.it/150x59/eaeaea/ffffff/?text=xo", width='150', height='59', alt="IDT GmbH")
br
table.container.content-wrapper
tr
td
table.row.header
tr
td.wrapper.last
//- header start
table.twelve.columns
tr
td
img.header(src="http://placehold.it/600x340/eaeaea/ffffff/?text=Hero", width="600", height="340", mc:edit="col-image-header", mc:allowdesigner='', mc:allowtext='')
td.expander
//- header end
table.row(mc:hideable='')
tr
td.wrapper.last
//- header start
table.twelve.columns
tr
td.text-pad
h1(mc:edit="teaser") Headline
td.expander
//- header end
//- body start
table.row(mc:hideable='')
tr
td.wrapper.last
table.twelve.columns
tr
td.text-pad
div(mc:edit="body") Freeform
td.expander
//- body end
//- call to action button start
table.row(mc:hideable='')
tr
td.wrapper.last
table.twelve.columns
tr
td(align='center')
//- call to action button
center
table.button: tr: td(mc:edit="btn_call_to_action1", mc:allowdesigner=''): a(href='#') Call To Action Button 1
td.expander
//- 2col start
table.row(mc:hideable='')
tr
// 1st col
td.wrapper
table.six.columns
tr
td.left-text-pad
// Bild Links
img.header(src="http://placehold.it/#{w}x#{h}", style="width:#{w}px;height:#{h}px", width="#{w}", height="#{h}", mc:edit="col-image-left", mc:allowdesigner='', mc:allowtext='')
h4(mc:edit="sub_title_1") Header
p(mc:edit="article_content_1") Text
td.expander
// 2nd col
td.wrapper.last
table.six.columns
tr
td.right-text-pad
// Bild Rechts
img.header(src="http://placehold.it/#{w}x#{h}", style="width:#{w}px;height:#{h}px", width="#{w}", height="#{h}", mc:edit="col-image-right", mc:allowdesigner='', mc:allowtext='')
h4(mc:edit="sub_title_2") Header
p(mc:edit="article_content_2") Text
td.expander
//- 2col end
table.row(mc:hideable='')
tr
td.wrapper.last
//- header start
table.twelve.columns
tr
td.text-pad
img#col-image-full(src="http://placehold.it/#{ww}x#{hh}", style="width:#{ww}px;height:#{hh}px", width="#{ww}", height="#{hh}", mc:edit="col-image-full")
h4(mc:edit="sub_title_3") Header
p(mc:edit="article_content_3") Text
td.expander
//- header end
table.row
tr
td.wrapper.last
//- header start
table.twelve.columns.footer.dark
tr
td.text-pad
div(mc:edit='std_footer')
| Vom Newsletter
a(class="utilityLink", href="*|UNSUB|*") abmelden
br
| Einstellungen
a(class="utilityLink", href="*|UPDATE_PROFILE|*") aktualisieren
br
| *|IFNOT:ARCHIVE_PAGE|* *|LIST:DESCRIPTION|*
br
| *|HTML:LIST_ADDRESS_HTML|* *|END:IF|*
br
| Copyright © *|CURRENT_YEAR|* *|LIST:COMPANY|*, Alle Rechte vorbehalten.
td.expander
tr
td.reward.center(align="center", valign="top")
| *|IF:REWARDS|* *|HTML:REWARDS|* *|END:IF|*
Raw
3. newsletter.less
// figure out yourself how to integrate
// https://github.com/ityu/InkLess in your custom newsletter.less
// Grid config
// --------------------------------------------------
@brand-primary: #e20613;
@text-color: #000;
@grey-color: #999999;
@grey-background: #ececec;
@grey-dark: #292929;
// Variables
// =========
// Grid Size
@mail-width: 600px;
@mail-padding: 20px;
// Color Settings
@HR-Color: #d9d9d9;
@HeaderTextColor: #222222;
@HeaderTitleLinkColor: #4c92d6;
@TextLink: @brand-primary;
@TextLinkActive: saturate(@brand-primary, 15%);
@PanelBackground: #f7f7f7;
@PanelBorder: 1px solid #ddd;
@ButtonLinkColor: #fff;
@ButtonSecondaryBackground: #e9e9e9;
@ButtonSecondaryBorder: #d0d0d0;
@ButtonSecondaryColor: #555;
@ButtonSecondaryLinkColor: @ButtonSecondaryColor;
@ButtonSecondaryHoverColor: @ButtonSecondaryColor;
@ButtonSecondaryHoverBackground: #d0d0d0;
@ButtonSecondaryActiveColor: @ButtonSecondaryColor;
@ButtonSuccessBackground: #5da423;
@ButtonSuccessBorder: #457a1a;
@ButtonSuccessHoverBackground: @ButtonSuccessBorder;
@ButtonAlerBackground: #c60f13;
@ButtonAlerBorder: #970b0e;
@ButtonAlerHoverBackground: @ButtonAlerBorder;
@import 'ink.less';
@media only screen and (max-width: 600px) {
/* I apply the .responsive-image class to any wrapping table where I want 100% rather than auto */
table.body table.responsive-image img {
width: 100% !important; height: auto !important;
}
table[class="body"] .button td,
table[class="body"] .button td {
width: auto !important;
}
}
Raw
3. package.json
{
"name": "mailing",
"version": "0.0.1",
"description": "html mail workflow",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-copy": "^0.8.0",
"grunt-contrib-jade": "^0.15.0",
"grunt-contrib-less": "^1.0.1",
"grunt-contrib-watch": "^0.6.1",
"grunt-juice-email": "^0.1.3",
"grunt-mailgun": "^0.2.1",
"grunt-nodemailer": "^0.3.0",
"grunt-open": "^0.2.3",
"matchdep": "^0.3.0"
},
"author": "MO",
"license": "ISC",
"private": true
}
Raw
4. gruntfile.js
module.exports = function (grunt) {
var jsBanner;
require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);
// some constants for various paths and files to be used by
// the task configurations
var BUILD_DIR = 'dist/';
var BUILD_DIR_JS = BUILD_DIR + 'js/';
var BUILD_DIR_CSS = BUILD_DIR + 'css/';
var BUILD_FILE_JS = BUILD_DIR_JS + 'app.js';
var SRC_DIR = 'src/';
var SRC_DIR_JS = SRC_DIR + 'js/';
var SRC_DIR_LESS = SRC_DIR + 'less/';
var SRC_DIR_JADE = SRC_DIR + 'views/';
var SRC_FILES_JS = SRC_DIR_JS + '*.js';
var SRC_FILE_LESS = SRC_DIR_LESS + 'style.less';
var SRC_FILES_LESS = SRC_DIR_LESS + '*.less';
var SRC_FILES_JADE = SRC_DIR_JADE + '*.jade';
var JADE_FILE_CFG = [{
expand: true,
cwd: SRC_DIR_JADE,
src: ['**/*.jade'],
dest: BUILD_DIR,
ext: '.html'
}];
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// OLD
css_build_path: BUILD_DIR_CSS,
build_path: BUILD_DIR,
// configure the jade template file compilation
jade: {
debug: {
options: {
pretty: true,
doctype: 'html'
},
files: JADE_FILE_CFG
},
release: {
options: {
debug: false
},
files: JADE_FILE_CFG
}
},
less: {
development: {
options: {
paths: [BUILD_DIR],
compress: false,
sourceMap: false,
relativeUrls: true,
ieCompat:true,
plugins: [
//new (require('less-plugin-autoprefix'))({browsers: ["last 2 versions"]})
]
},
files:
[
{'<%= css_build_path %>newsletter.css' : SRC_DIR_LESS+'newsletter.less' }
]
}
},
juice: {
main: {
options: {
preserveMediaQueries: true,
removeStyleTags: false,
// this is passed to the web-resource-inliner package
// docs are in https://www.npmjs.com/package/web-resource-inliner
webResources: {
scripts: false, // don't fetch external scripts
images: false, // inline images with size smaller than this (kb)
relativeTo: 'dist/'
}
},
files: {
'<%= build_path %>email-template-inline.html' : '<%= build_path %>email-template.html'
}
}
},
copy: {
main: {
expand: true,
cwd: SRC_DIR_LESS, // whyever°!
src: ['mailchimp.css'],
dest: BUILD_DIR_CSS
}
},
// dauer ewig bis dann endlich mal eine Mail ankommt.
mailgun: {
marketingTemplates: {
options: {
key: 'key-xxx',
sender: '[email protected]',
recipient: '[email protected]',
subject: 'This is a test email',
preventThreading: true
},
src: ['<%= build_path %>email-template-inline.html']
}
},
nodemailer: {
test: {
options: {
transport:{
type: 'SMTP',
options:{
host: 'smtp.server.com',
port: 25,
auth: {
user: 'x',
pass: 'y'
}
}
},
recipients: [
{
email: '[email protected]',
name: 'mo'
}
]
},
src: ['<%= build_path %>email-template-inline.html']
}
},
watch: {
options: {
//spawn:false
},
less: {
options: { livereload: false },
files: [SRC_FILES_LESS],
tasks: ['less:development']
},
jade: {
options: { livereload: false },
files: [SRC_FILES_JADE],
tasks: ['jade:debug']
},
inline: {
options: { livereload: false },
files: [BUILD_DIR+'*.html', BUILD_DIR_CSS+'*.css', '!'+BUILD_DIR+'*-inline.*'],
tasks: ['juice:main']
},
// einfach nur die mailchimp edit datei kopieren
copy: {
options: { livereload: false },
files: [SRC_DIR_LESS+'mailchimp.css'],
tasks: ['copy:main']
},
}
});
grunt.event.on('watch', function(action, filepath, target) {
grunt.log.writeln(target + ': ' + filepath + ' has ' + action);
});
grunt.registerTask('default', ['jade:debug','less:development','copy','juice']);
grunt.registerTask('inline', ['juice']);
grunt.registerTask('mail', ['nodemailer']);
grunt.registerTask('c', [ 'copy:main']);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment