Dan Mindru
parent
b3aa899ffa
commit
293ed731ae
File diff suppressed because one or more lines are too long
|
|
@ -1 +1,69 @@
|
|||
<!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 name="viewport" content="width=device-width"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style type="text/css">@media only screen and (max-width:560px){.footer__main__col1,.footer__main__col2{width:100%!important}.footer td{font-size:12px!important}.footer__main__col1__td{text-align:left}.footer__main__col1__td>span{margin-bottom:10px}.footer__main__col2__td{text-align:left;padding-bottom:20px}.footer__main__col2__td__img{padding-left:0!important}}</style></head><body style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;"><br><table class="main rbcc" style="border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" width="100%"><tr class="sp" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 22px;"><td class="sp__inner" style="padding: 15px 0;"></td></tr><tr class="rbcc" style="border: 0; box-sizing: border-box; cellpadding: 0; cellspacing: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 22px;"><td class="footer footer--simple" style="border-top: 8px solid #585858; color: #f5f5f5; padding: 20px 30px 0px 30px; padding-bottom: 20px;" bgcolor="#FFFFFF"><table class="rbcc footer__main" style="border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0" width="100%"><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 22px;"><td class="footer__main__signature" align="left" style="align: left; color: #888; font-size: 14px;">Best regards,<br>The dark mail team<br></td></tr></table></td></tr></table></body></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 name="viewport" content="width=device-width">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
/* Ideally, this would be part of a linked CSS file. @see https://github.com/fadeit/responsive-html-email-signature/issues/15 */
|
||||
|
||||
/*
|
||||
* ================
|
||||
* 4. Basic responsive stuff.
|
||||
* ================
|
||||
*/
|
||||
@media only screen and (max-width:560px){
|
||||
.footer td{
|
||||
font-size: 12px!important;
|
||||
}
|
||||
|
||||
.footer__main__col1{
|
||||
width: 100%!important;
|
||||
}
|
||||
|
||||
.footer__main__col1__td{
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.footer__main__col1__td > span{
|
||||
margin-bottom:10px;
|
||||
}
|
||||
|
||||
.footer__main__col2{
|
||||
width: 100%!important;
|
||||
}
|
||||
|
||||
.footer__main__col2__td{
|
||||
text-align: left;
|
||||
padding-bottom:20px;
|
||||
}
|
||||
|
||||
.footer__main__col2__td__img{
|
||||
padding-left:0!important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;">
|
||||
<br> <!-- <br/> Makes it easier to add text when composing -->
|
||||
|
||||
<table class="main rbcc" style="border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" width="100%">
|
||||
<tr class="sp" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 22px;"><td class="sp__inner" style="padding: 15px 0;"></td></tr>
|
||||
|
||||
<tr class="rbcc" style="border: 0; box-sizing: border-box; cellpadding: 0; cellspacing: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 22px;">
|
||||
<td class="footer footer--simple" style="border-top: 8px solid #585858; color: #f5f5f5; padding: 20px 30px 0px 30px; padding-bottom: 20px;" bgcolor="#FFFFFF">
|
||||
<table class="rbcc footer__main" style="border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0" width="100%">
|
||||
<tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 22px;">
|
||||
<!-- @todo gulp-inline-css doesn't parse align -->
|
||||
<td class="footer__main__signature" align="left" style="align: left; color: #888; font-size: 14px;">
|
||||
Best regards,<br>
|
||||
The dark mail team<br>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body></html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1 +1,83 @@
|
|||
<!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 name="viewport" content="width=device-width"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style type="text/css">@media only screen and (max-width:480px){.footer td{font-size:12px!important}.footer__main__col1,.footer__main__col2{width:100%!important}.footer__main__col2__td{text-align:left;padding-bottom:20px}.footer__main__col2__td__img{padding-left:0!important}.gray-hr hr{margin-bottom:10px!important;margin-top:10px!important}}@media only screen and (min-width:1025px){.background,.body-with-bg{background-color:#F1F1F1}.body-with-bg .main{border:1px solid #E9E9E9!important;max-width:960px;margin:0 auto}.background{padding:30px}}</style></head><body style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;"><br><table class="main rbcc" style="border: 0; cellpadding: 0; cellspacing: 0; padding-top: 15px;" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" width="100%"><tr class="sp" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px;"><td class="sp__inner" style="padding: 15px 0;"></td></tr><tr class="rbcc" style="border: 0; box-sizing: border-box; cellpadding: 0; cellspacing: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px;"><td class="footer footer--simple" style="border-top: 8px solid #EAEAEA; color: #888; padding: 20px 30px 0px 30px; padding-bottom: 20px;" bgcolor="#FFFFFF"><table class="rbcc footer__main" style="border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0" width="100%"><tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px;"><td class="footer__main__signature" align="left" style="align: left; color: #888; font-size: 14px;">Yours truly,<br>The light mail team<br></td></tr></table></td></tr></table></body></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 name="viewport" content="width=device-width">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
/* Ideally, this would be part of a linked CSS file. @see https://github.com/fadeit/responsive-html-email-signature/issues/15 */
|
||||
|
||||
/*
|
||||
* ================
|
||||
* 4. Basic responsive stuff.
|
||||
* ================
|
||||
*/
|
||||
@media only screen and (max-width:480px){
|
||||
.footer td{
|
||||
font-size: 12px!important;
|
||||
}
|
||||
|
||||
.footer__main__col1{
|
||||
width: 100%!important;
|
||||
}
|
||||
|
||||
.footer__main__col2{
|
||||
width: 100%!important;
|
||||
}
|
||||
|
||||
.footer__main__col2__td{
|
||||
text-align: left;
|
||||
padding-bottom:20px;
|
||||
}
|
||||
|
||||
.footer__main__col2__td__img{
|
||||
padding-left:0!important;
|
||||
}
|
||||
|
||||
.gray-hr hr{
|
||||
margin-bottom:10px!important;
|
||||
margin-top:10px!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:1025px){
|
||||
/* After iPad size */
|
||||
.body-with-bg{
|
||||
background-color: #F1F1F1;
|
||||
}
|
||||
|
||||
.body-with-bg .main{
|
||||
border:1px solid #E9E9E9!important; /* Sorry! */
|
||||
max-width:960px;
|
||||
margin:0 auto;
|
||||
}
|
||||
|
||||
.background{
|
||||
padding:30px;
|
||||
background-color: #F1F1F1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;">
|
||||
<br>
|
||||
<table class="main rbcc" style="border: 0; cellpadding: 0; cellspacing: 0; padding-top: 15px;" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" width="100%">
|
||||
<tr class="sp" style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px;"><td class="sp__inner" style="padding: 15px 0;"></td></tr>
|
||||
|
||||
<tr class="rbcc" style="border: 0; box-sizing: border-box; cellpadding: 0; cellspacing: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px;">
|
||||
<td class="footer footer--simple" style="border-top: 8px solid #EAEAEA; color: #888; padding: 20px 30px 0px 30px; padding-bottom: 20px;" bgcolor="#FFFFFF">
|
||||
<table class="rbcc footer__main" style="border: 0; cellpadding: 0; cellspacing: 0;" border="0" cellpadding="0" cellspacing="0" width="100%">
|
||||
<tr style="box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px;">
|
||||
<!-- @todo gulp-inline-css doesn't parse align -->
|
||||
<td class="footer__main__signature" align="left" style="align: left; color: #888; font-size: 14px;">
|
||||
Yours truly,<br>
|
||||
The light mail team<br>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body></html>
|
||||
12
gulpfile.js
12
gulpfile.js
|
|
@ -1,12 +1,16 @@
|
|||
'use strict';
|
||||
|
||||
var gulp = require('gulp'),
|
||||
wrench = require('wrench');
|
||||
wrench = require('wrench'),
|
||||
plumber = require('gulp-plumber');
|
||||
|
||||
var options = {
|
||||
src: 'src',
|
||||
source: 'src',
|
||||
dist: 'dist',
|
||||
workingDir: 'tmp'
|
||||
workingDir: 'tmp',
|
||||
src: function plumbedSrc(){
|
||||
return gulp.src.apply(gulp, arguments).pipe(plumber());
|
||||
}
|
||||
};
|
||||
|
||||
/** Load tasks from the '/tasks' directory.
|
||||
|
|
@ -23,4 +27,4 @@ wrench
|
|||
});
|
||||
|
||||
/** By default templates will be built into '/dist', then gulp will watch for changes in '/src'. */
|
||||
gulp.task('default', ['dupe', 'postcss', 'less', 'sass', 'build', 'clean', 'watch']);
|
||||
gulp.task('default', ['dupe', 'less', 'sass', 'postcss', 'build', 'watch']);
|
||||
|
|
@ -24,18 +24,18 @@
|
|||
"homepage": "https://github.com/fadeit/responsive-html-email-signature#readme",
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^6.3.6",
|
||||
"del": "~2.2.0",
|
||||
"del": "^2.2.0",
|
||||
"gulp": "~3.9.1",
|
||||
"gulp-david": "~0.4.2",
|
||||
"gulp-inline-css": "~3.1.0",
|
||||
"gulp-inline-image-html": "~0.2.1",
|
||||
"gulp-minify-html": "~1.0.5",
|
||||
"gulp-minify-inline": "~0.2.1",
|
||||
"gulp-plumber": "^1.1.0",
|
||||
"gulp-postcss": "^6.1.1",
|
||||
"gulp-preprocess": "~2.0.0",
|
||||
"gulp-rename": "~1.2.2",
|
||||
"q": "~1.4.1",
|
||||
"run-sequence": "~1.1.5",
|
||||
"wrench": "~1.5.8"
|
||||
},
|
||||
"dependencies": {}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ var gulp = require('gulp'),
|
|||
inlineimg = require('gulp-inline-image-html');
|
||||
|
||||
function buildTask(options){
|
||||
gulp.task('build', function build(cb) {
|
||||
gulp.task('build', ['dupe'], function build() {
|
||||
var promises = [];
|
||||
|
||||
/** Makes templates for a given directory & its configurations.
|
||||
|
|
@ -23,7 +23,7 @@ function buildTask(options){
|
|||
function makeTemplates(dir, confItems){
|
||||
confItems
|
||||
.forEach(function handleConf(conf){
|
||||
var cwd = options.src + '/' + dir;
|
||||
var cwd = options.workingDir + '/' + dir;
|
||||
|
||||
gulp
|
||||
.src([cwd + '/**/*.html', '!' + cwd + '/**/*.inc.html'])
|
||||
|
|
@ -37,8 +37,8 @@ function buildTask(options){
|
|||
preserveMediaQueries: true,
|
||||
removeStyleTags: false
|
||||
}))
|
||||
.pipe(minifyHTML({quotes: true}))
|
||||
.pipe(minifyInline())
|
||||
//.pipe(minifyHTML({quotes: true}))
|
||||
//.pipe(minifyInline())
|
||||
.pipe(rename(function rename(path){
|
||||
path.dirname = dir;
|
||||
path.basename += '-' + conf.id;
|
||||
|
|
@ -50,23 +50,24 @@ function buildTask(options){
|
|||
|
||||
/** Clean up & then read 'src' to generate templates (build entry point). */
|
||||
del(options.dist).then(function buildStart(){
|
||||
/** Loop through dirs and load their conf files.
|
||||
* Promisify all 'makeTemplate' calls and when resolved, make a call to the task `cb` to let gulp know we're done.
|
||||
*/
|
||||
/** Loop through dirs and load their conf files.
|
||||
* Promisify all 'makeTemplate' calls and when resolved, make a call to the task `cb` to let gulp know we're done.
|
||||
*/
|
||||
wrench
|
||||
.readdirSyncRecursive(options.src)
|
||||
.readdirSyncRecursive('./' + options.workingDir)
|
||||
.filter(function filterFiles(file) {
|
||||
/** Read only folders, skip files. */
|
||||
|
||||
/* Read only folders, skip files. */
|
||||
return (!file.match('/') && !file.match(/^\.+/g)) ? file : false;
|
||||
})
|
||||
.forEach(function readConfigurations(dir){
|
||||
/** NB: For 'watch' to properly work, the cache needs to be deleted before each require. */
|
||||
var confPath = './../' + options.src + '/' + dir + '/conf.js';
|
||||
var confPath = './../' + options.workingDir + '/' + dir + '/conf.js';
|
||||
delete require.cache[require.resolve(confPath)];
|
||||
promises.push(makeTemplates(dir, require(confPath)));
|
||||
});
|
||||
|
||||
Q.all(promises).then(function buildReady(){ cb(); });
|
||||
Q.all(promises);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
'use strict';
|
||||
|
||||
var gulp = require('gulp'),
|
||||
del = require('del');
|
||||
|
||||
function dupeTask(options){
|
||||
gulp.task('dupe', function(){
|
||||
del.sync([options.workingDir]);
|
||||
|
||||
return options
|
||||
.src(['src/**/*'])
|
||||
.pipe(gulp.dest('./' + options.workingDir));
|
||||
});
|
||||
}
|
||||
|
||||
module.exports = dupeTask;
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
'use strict';
|
||||
|
||||
var gulp = require('gulp');
|
||||
|
||||
function lessTask(options){
|
||||
gulp.task('less', function(){
|
||||
//todo
|
||||
});
|
||||
}
|
||||
|
||||
module.exports = lessTask;
|
||||
|
|
@ -7,13 +7,27 @@ var gulp = require('gulp'),
|
|||
function postcssTask(options){
|
||||
gulp.task('postcss', function () {
|
||||
var processors = [
|
||||
autoprefixer({browsers: ['Android', 'ChromeAndroid', 'FirefoxAndroid', 'Opera Mini', 'Chrome', 'Firefox', 'Explorer', 'Edge', 'iOS', 'Opera', 'Safari', 'ExplorerMobile']}),
|
||||
autoprefixer({
|
||||
browsers: [
|
||||
'Android',
|
||||
'ChromeAndroid',
|
||||
'FirefoxAndroid',
|
||||
'Opera Mini',
|
||||
'Chrome',
|
||||
'Firefox',
|
||||
'Explorer',
|
||||
'Edge',
|
||||
'iOS',
|
||||
'Opera',
|
||||
'Safari',
|
||||
'ExplorerMobile'
|
||||
]
|
||||
})
|
||||
];
|
||||
|
||||
//@TODO src & dest
|
||||
return gulp.src('./src/*.css')
|
||||
return gulp.src(options.workingDir + '/*.css')
|
||||
.pipe(postcss(processors))
|
||||
.pipe(gulp.dest('./tmp'));
|
||||
.pipe(gulp.dest(options.workingDir));
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
'use strict';
|
||||
|
||||
var gulp = require('gulp');
|
||||
|
||||
function sassTask(options){
|
||||
gulp.task('sass', function(){
|
||||
//todo
|
||||
});
|
||||
}
|
||||
|
||||
module.exports = sassTask;
|
||||
|
|
@ -3,9 +3,17 @@
|
|||
var gulp = require('gulp');
|
||||
|
||||
function watchTask(options){
|
||||
gulp.task('watch', function(){
|
||||
//@todo watch less & sass files
|
||||
gulp.watch([options.src + '/**/*.html', options.src + '/**/*.css', options.src + '/**/conf.js'], ['dupe', 'postcss', 'less', 'sass', 'build', 'clean']);
|
||||
gulp.task('watch', ['dupe', 'build'], function(){
|
||||
gulp.watch(
|
||||
[
|
||||
options.source + '/**/*.html',
|
||||
options.source + '/**/*.css',
|
||||
options.source + '/**/*.sass',
|
||||
options.source + '/**/*.less',
|
||||
options.source + '/**/conf.js'
|
||||
],
|
||||
['dupe', 'less', 'sass', 'postcss', 'build']
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue