mshillam
/
responsive-html-email-signature
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

🕶 automagically include styles in <head> #11 #12

This commit is contained in:
Dan Mindru 2016-05-25 20:33:28 +02:00
parent 8b921e98e9
commit 88f945925f
10 changed files with 42 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@ -1,3 +1,7 @@
- Stylesheets are included automatically, place them wherever in the dir
- Autoprefixer is there to help
- use SASS, LESS or postcss.
# Responsive HTML email signature(s)
### Let's punch email clients in the stomach!
When you need some basic responsive email signatures that work on mobile.<br/>
@ -48,9 +52,9 @@ Here's how the dark one looks:
./src
├── dark
├── conf.js # Template strings, logo, etc.
├── dark.css # Main stylesheet.
├── dark.css # Stylesheet.
├── footer.inc.html # Contact info & logo
├── head.inc.html # 'Responsive' CSS & stylesheet href
├── head.inc.html # 'Responsive' CSS goes here
├── signature-reply.inc.html # Simplified signature (loads head)
├── signature.html # Full signature (loads head/footer)
```
@ -62,7 +66,7 @@ Here's how the light one looks:
├── conf.js # Template strings, logo, etc.
├── footer.inc.html # Contact info & logo
├── full-mail.html # Body + signature
├── head.inc.html # 'Responsive' CSS & stylesheet href
├── head.inc.html # 'Responsive' CSS goes here
├── signature-reply.inc.html # Simplified signature (loads head)
├── signature.html # Full signature (loads head/footer)
```

2
dist/dark/signature-dark.html vendored
View File

@ -4,6 +4,8 @@
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Inject stylesheets after they are processed with LESS, SASS or postcss. -->
<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 */

2
dist/dark/signature-reply-dark.html vendored
View File

@ -4,6 +4,8 @@
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Inject stylesheets after they are processed with LESS, SASS or postcss. -->
<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 */

2
dist/light/full-mail-light.html vendored
View File

@ -4,6 +4,8 @@
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Inject stylesheets after they are processed with LESS, SASS or postcss. -->
<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 */

2
dist/light/signature-light.html vendored
View File

@ -4,6 +4,8 @@
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Inject stylesheets after they are processed with LESS, SASS or postcss. -->
<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 */

2
dist/light/signature-reply-light.html vendored
View File

@ -4,6 +4,8 @@
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Inject stylesheets after they are processed with LESS, SASS or postcss. -->
<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
src/dark/head.inc.html
View File

@ -3,7 +3,9 @@
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="dark.css">
<!-- Inject stylesheets after they are processed with LESS, SASS or postcss. -->
<!-- @echo stylesheets -->
<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 */

0
src/light/css/file.css Normal file
View File

4
src/light/head.inc.html
View File

@ -3,7 +3,9 @@
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="light.css">
<!-- Inject stylesheets after they are processed with LESS, SASS or postcss. -->
<!-- @echo stylesheets -->
<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 */

24
tasks/build.js
View File

@ -12,7 +12,7 @@ var gulp = require('gulp'),
inlineimg = require('gulp-inline-image-html');
function buildTask(options){
gulp.task('build', ['dupe'], function build() {
gulp.task('build', ['dupe', 'less', 'sass', 'postcss'], function build() {
var promises = [];
/** Makes templates for a given directory & its configurations.
@ -25,6 +25,20 @@ function buildTask(options){
.forEach(function handleConf(conf){
var cwd = options.workingDir + '/' + dir;
/**
* Find stylesheets relative to the CWD & generate <link> tags.
* This way we can automagically inject them into <head>.
*/
conf.stylesheets = wrench
.readdirSyncRecursive(cwd)
.filter(function filterFiles(file) {
/* Read only CSS files. */
return (file.match(/.*\.css/)) ? file : false;
})
.reduce(function(prev, current, index, acc){
return prev += '<link rel="stylesheet" href="' + current + '">';
}, '');
gulp
.src([cwd + '/**/*.html', '!' + cwd + '/**/*.inc.html'])
.pipe(preprocess({
@ -37,8 +51,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,13 +64,13 @@ 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.
/**
* 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.workingDir)
.filter(function filterFiles(file) {
/* Read only folders, skip files. */
return (!file.match('/') && !file.match(/^\.+/g)) ? file : false;
})