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) # Responsive HTML email signature(s)
### Let's punch email clients in the stomach! ### Let's punch email clients in the stomach!
When you need some basic responsive email signatures that work on mobile.<br/> 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 ./src
├── dark ├── dark
├── conf.js # Template strings, logo, etc. ├── conf.js # Template strings, logo, etc.
├── dark.css # Main stylesheet. ├── dark.css # Stylesheet.
├── footer.inc.html # Contact info & logo ├── 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-reply.inc.html # Simplified signature (loads head)
├── signature.html # Full signature (loads head/footer) ├── signature.html # Full signature (loads head/footer)
``` ```
@ -62,7 +66,7 @@ Here's how the light one looks:
├── conf.js # Template strings, logo, etc. ├── conf.js # Template strings, logo, etc.
├── footer.inc.html # Contact info & logo ├── footer.inc.html # Contact info & logo
├── full-mail.html # Body + signature ├── 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-reply.inc.html # Simplified signature (loads head)
├── signature.html # Full signature (loads head/footer) ├── signature.html # Full signature (loads head/footer)
``` ```

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

@ -3,6 +3,8 @@
<head> <head>
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <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"> <style type="text/css">

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

@ -3,6 +3,8 @@
<head> <head>
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <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"> <style type="text/css">

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

@ -3,6 +3,8 @@
<head> <head>
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <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"> <style type="text/css">

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

@ -3,6 +3,8 @@
<head> <head>
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <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"> <style type="text/css">

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

@ -3,6 +3,8 @@
<head> <head>
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <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"> <style type="text/css">

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

@ -3,7 +3,9 @@
<head> <head>
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <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"> <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 */ /* 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> <head>
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <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"> <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 */ /* 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'); inlineimg = require('gulp-inline-image-html');
function buildTask(options){ function buildTask(options){
gulp.task('build', ['dupe'], function build() { gulp.task('build', ['dupe', 'less', 'sass', 'postcss'], function build() {
var promises = []; var promises = [];
/** Makes templates for a given directory & its configurations. /** Makes templates for a given directory & its configurations.
@ -25,6 +25,20 @@ function buildTask(options){
.forEach(function handleConf(conf){ .forEach(function handleConf(conf){
var cwd = options.workingDir + '/' + dir; 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 gulp
.src([cwd + '/**/*.html', '!' + cwd + '/**/*.inc.html']) .src([cwd + '/**/*.html', '!' + cwd + '/**/*.inc.html'])
.pipe(preprocess({ .pipe(preprocess({
@ -37,8 +51,8 @@ function buildTask(options){
preserveMediaQueries: true, preserveMediaQueries: true,
removeStyleTags: false removeStyleTags: false
})) }))
//.pipe(minifyHTML({quotes: true})) .pipe(minifyHTML({quotes: true}))
//.pipe(minifyInline()) .pipe(minifyInline())
.pipe(rename(function rename(path){ .pipe(rename(function rename(path){
path.dirname = dir; path.dirname = dir;
path.basename += '-' + conf.id; path.basename += '-' + conf.id;
@ -50,13 +64,13 @@ function buildTask(options){
/** Clean up & then read 'src' to generate templates (build entry point). */ /** Clean up & then read 'src' to generate templates (build entry point). */
del(options.dist).then(function buildStart(){ 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. * Promisify all 'makeTemplate' calls and when resolved, make a call to the task `cb` to let gulp know we're done.
*/ */
wrench wrench
.readdirSyncRecursive('./' + options.workingDir) .readdirSyncRecursive('./' + options.workingDir)
.filter(function filterFiles(file) { .filter(function filterFiles(file) {
/* Read only folders, skip files. */ /* Read only folders, skip files. */
return (!file.match('/') && !file.match(/^\.+/g)) ? file : false; return (!file.match('/') && !file.match(/^\.+/g)) ? file : false;
}) })