├── .gitignore ├── app ├── templates │ ├── css │ │ ├── main.css │ │ └── ink.css │ ├── gitattributes │ ├── gitignore │ ├── scss │ │ ├── main.scss │ │ ├── ink │ │ │ ├── components │ │ │ │ ├── _outlook-first.scss │ │ │ │ ├── _global.scss │ │ │ │ ├── _panels.scss │ │ │ │ ├── _alignment.scss │ │ │ │ ├── _block-grid.scss │ │ │ │ ├── _normalize.scss │ │ │ │ ├── _media-query.scss │ │ │ │ ├── _grid.scss │ │ │ │ ├── _type.scss │ │ │ │ └── _buttons.scss │ │ │ └── _settings.scss │ │ └── ink.scss │ ├── email_templates │ │ ├── jade │ │ │ ├── layout │ │ │ │ ├── _footer.jade │ │ │ │ ├── _layout.jade │ │ │ │ └── _header.jade │ │ │ ├── boilerplate.jade │ │ │ ├── basic.jade │ │ │ ├── hero.jade │ │ │ ├── sidebar-hero.jade │ │ │ └── sidebar.jade │ │ ├── boilerplate.html │ │ ├── basic.html │ │ ├── hero.html │ │ ├── sidebar.html │ │ └── sidebar-hero.html │ ├── jshintrc │ ├── editorconfig │ ├── _package.json │ ├── _readme.md │ └── _gulpfile.js └── index.js ├── .jshintrc ├── LICENSE ├── package.json └── readme.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /app/templates/css/main.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/templates/gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto -------------------------------------------------------------------------------- /app/templates/gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .sass-cache 3 | -------------------------------------------------------------------------------- /app/templates/scss/main.scss: -------------------------------------------------------------------------------- 1 | @import "ink"; 2 | 3 | // Custom styles -------------------------------------------------------------------------------- /app/templates/email_templates/jade/layout/_footer.jade: -------------------------------------------------------------------------------- 1 | // Email footer -------------------------------------------------------------------------------- /app/templates/email_templates/jade/boilerplate.jade: -------------------------------------------------------------------------------- 1 | extends layout/_layout 2 | 3 | block content 4 | 5 | // Email content 6 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "node": true, 3 | "browser": true, 4 | "esnext": true, 5 | "bitwise": true, 6 | "camelcase": true, 7 | "curly": true, 8 | "eqeqeq": true, 9 | "immed": true, 10 | "indent": 2, 11 | "latedef": true, 12 | "newcap": true, 13 | "noarg": true, 14 | "quotmark": true, 15 | "undef": true, 16 | "unused": true, 17 | "strict": true, 18 | "trailing": true, 19 | "smarttabs": true, 20 | "jquery" : true 21 | } 22 | -------------------------------------------------------------------------------- /app/templates/jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "node": true, 3 | "browser": true, 4 | "esnext": true, 5 | "bitwise": true, 6 | "camelcase": true, 7 | "curly": true, 8 | "eqeqeq": true, 9 | "immed": true, 10 | "indent": 2, 11 | "latedef": true, 12 | "newcap": true, 13 | "noarg": true, 14 | "quotmark": true, 15 | "undef": true, 16 | "unused": true, 17 | "strict": true, 18 | "trailing": true, 19 | "smarttabs": true, 20 | "jquery": true 21 | } 22 | -------------------------------------------------------------------------------- /app/templates/scss/ink/components/_outlook-first.scss: -------------------------------------------------------------------------------- 1 | // Ink by ZURB 2 | // zurb.com/ink/ 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // @variables 9 | // 10 | $include-html-outlook-first-classes: $include-html-classes !default; 11 | 12 | @include exports("outlook-first") { 13 | @if $include-html-outlook-first-classes { 14 | /* Outlook First */ 15 | 16 | body.outlook p { 17 | display: inline !important; 18 | } 19 | } 20 | } -------------------------------------------------------------------------------- /app/templates/editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | 8 | [*] 9 | 10 | # Change these settings to your own preference 11 | indent_style = space 12 | indent_size = 2 13 | 14 | # We recommend you to keep these unchanged 15 | end_of_line = lf 16 | charset = utf-8 17 | trim_trailing_whitespace = true 18 | insert_final_newline = true 19 | 20 | [*.md] 21 | trim_trailing_whitespace = false 22 | -------------------------------------------------------------------------------- /app/templates/email_templates/jade/layout/_layout.jade: -------------------------------------------------------------------------------- 1 | doctype strict 2 | html(xmlns='http://www.w3.org/1999/xhtml') 3 | head 4 | meta(http-equiv='Content-Type', content='text/html; charset=utf-8') 5 | meta(name='viewport', content='width=device-width') 6 | link(rel='stylesheet', href='styles/style.css', inline="") 7 | body 8 | table.body 9 | tr 10 | td.center(align='center', valign='top') 11 | center 12 | 13 | block content 14 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE 2 | Version 2, December 2004 3 | 4 | Copyright (C) 2004 Sam Hocevar 5 | 6 | Everyone is permitted to copy and distribute verbatim or modified 7 | copies of this license document, and changing it is allowed as long 8 | as the name is changed. 9 | 10 | DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE 11 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 12 | 13 | 0. You just DO WHAT THE FUCK YOU WANT TO. -------------------------------------------------------------------------------- /app/templates/email_templates/jade/layout/_header.jade: -------------------------------------------------------------------------------- 1 | table.row.header 2 | tr 3 | td.center(align='center') 4 | center 5 | table.container 6 | tr 7 | td.wrapper.last 8 | table.twelve.columns 9 | tr 10 | td.six.sub-columns 11 | img(src='http://placehold.it/200x50') 12 | td.six.sub-columns.last(style='text-align:right; vertical-align:middle;') 13 | span.template-label BASIC 14 | td.expander 15 | -------------------------------------------------------------------------------- /app/templates/scss/ink.scss: -------------------------------------------------------------------------------- 1 | /********************************************** 2 | * Ink v1.0.5 - Copyright 2013 ZURB Inc * 3 | **********************************************/ 4 | 5 | // Make sure the charset is set appropriately 6 | @charset "UTF-8"; 7 | 8 | // Behold, here are all the Ink components. 9 | @import 10 | "ink/settings", 11 | "ink/components/normalize", 12 | "ink/components/grid", 13 | "ink/components/block-grid", 14 | "ink/components/alignment", 15 | "ink/components/type", 16 | "ink/components/panels", 17 | "ink/components/buttons", 18 | "ink/components/outlook-first", 19 | "ink/components/media-query"; -------------------------------------------------------------------------------- /app/templates/_package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "<%= _.slugify(name) %>", 3 | "version": "0.0.1", 4 | "description": "<%= name %> description", 5 | "author": "", 6 | "devDependencies": { 7 | "browser-sync" : "~2.2.1", 8 | "del": "~1.1.1", 9 | "gulp": "~3.8.11", 10 | "gulp-util": "^3.0.6", 11 | "gulp-concat": "~2.5.0",<% if (jade) { %> 12 | "gulp-jade": "~1.0.0",<% } %> 13 | "gulp-inline-css": "~2.0.0", 14 | "gulp-inline-source": "~1.2.0",<% if (sass) { %> 15 | "gulp-sourcemaps": "~1.3.0", 16 | "gulp-ruby-sass": "~1.0.0-alpha.3",<% } %> 17 | "gulp-rename": "~1.2.0"<% if (jade) { %>, 18 | "jade": "~1.9.2"<% } %> 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /app/templates/email_templates/boilerplate.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 16 | 17 |
12 |
13 | 14 |
15 |
18 | 19 | -------------------------------------------------------------------------------- /app/templates/scss/ink/components/_global.scss: -------------------------------------------------------------------------------- 1 | // Foundation by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | @import "../functions"; 6 | 7 | // We use this to control whether or not CSS classes come through in the gem files. // Change 8 | $include-html-classes: true !default; 9 | $include-html-global-classes: $include-html-classes !default; 10 | 11 | $column-gutter: 20px !default; 12 | 13 | $container-width: 580px !default; 14 | 15 | $text-padding: 10px !default; 16 | 17 | $panel-padding: 10px !default; 18 | 19 | $paragraph-margin-bottom: 10px !default; 20 | 21 | // We use these to make sure border radius matches unless we want it different. 22 | $global-radius: 3px !default; 23 | $global-rounded: 500px !default; 24 | 25 | @include exports("global") { 26 | @if $include-html-global-classes { 27 | 28 | } 29 | } -------------------------------------------------------------------------------- /app/templates/scss/ink/components/_panels.scss: -------------------------------------------------------------------------------- 1 | // Ink by ZURB 2 | // zurb.com/ink/ 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // @variables 9 | // 10 | 11 | // 12 | // @variables 13 | // 14 | 15 | $include-html-panel-classes: $include-html-classes !default; 16 | 17 | $panel-bg: #f2f2f2 !default; 18 | $panel-border-style: solid !default; 19 | $panel-border-color: #d9d9d9 !default; 20 | $panel-border-size: 1px !default; 21 | 22 | @include exports("panel") { 23 | @if $include-html-panel-classes { 24 | /* Panels */ 25 | 26 | .panel { 27 | background: color2hex($panel-bg); 28 | border: $panel-border-size $panel-border-style color2hex($panel-border-color); 29 | padding: $panel-padding !important; 30 | } 31 | 32 | .sub-grid table { 33 | width: 100%; 34 | } 35 | 36 | .sub-grid td.sub-columns { 37 | padding-bottom: 0; 38 | } 39 | } 40 | } -------------------------------------------------------------------------------- /app/templates/scss/ink/components/_alignment.scss: -------------------------------------------------------------------------------- 1 | // Ink by ZURB 2 | // zurb.com/ink/ 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // @variables 9 | // 10 | $include-html-alignment-classes: $include-html-classes !default; 11 | 12 | @include exports("alignment") { 13 | @if $include-html-alignment-classes { 14 | /* Alignment & Visibility Classes */ 15 | 16 | table.center, td.center { 17 | text-align: center; 18 | } 19 | 20 | h1.center, 21 | h2.center, 22 | h3.center, 23 | h4.center, 24 | h5.center, 25 | h6.center, 26 | p.center { 27 | text-align: center; 28 | } 29 | 30 | span.center { 31 | display: block; 32 | width: 100%; 33 | text-align: center; 34 | } 35 | 36 | img.center { 37 | margin: 0 auto; 38 | float: none; 39 | } 40 | 41 | .show-for-small, 42 | .hide-for-desktop { 43 | display: none; 44 | } 45 | } 46 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "generator-gulp-ink-email", 3 | "version": "0.3.1", 4 | "description": "Yeoman generator for responsive html emails using Zurb Ink Framework", 5 | "keywords": [ 6 | "yeoman-generator", 7 | "generator", 8 | "ink", 9 | "zurb", 10 | "email", 11 | "responsive", 12 | "html", 13 | "jade", 14 | "sass", 15 | "sassy" 16 | ], 17 | "homepage": "https://github.com/lightingbeetle/generator-gulp-ink-email", 18 | "bugs": "https://github.com/lightingbeetle/generator-gulp-ink-email/issues", 19 | "author": { 20 | "name": "Adam Mockor", 21 | "email": "mockor@lbstudio.sk", 22 | "url": "http://www.lbstudio.sk" 23 | }, 24 | "main": "app/index.js", 25 | "repository": { 26 | "type": "git", 27 | "url": "https://github.com/lightingbeetle/generator-gulp-ink-email.git" 28 | }, 29 | "dependencies": { 30 | "chalk": "^0.5.1", 31 | "yeoman-generator": "^0.18.9", 32 | "yosay": "^1.0.2" 33 | }, 34 | "peerDependencies": { 35 | "yo": ">=1.0.0" 36 | }, 37 | "engines": { 38 | "node": ">=0.10.0", 39 | "npm": ">=1.2.10" 40 | }, 41 | "licenses": [ 42 | { 43 | "type": "WTFPL" 44 | } 45 | ], 46 | "files": [ 47 | "app" 48 | ], 49 | "devDependencies": {} 50 | } 51 | -------------------------------------------------------------------------------- /app/templates/scss/ink/components/_block-grid.scss: -------------------------------------------------------------------------------- 1 | // Ink by ZURB 2 | // zurb.com/ink/ 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // @variables 9 | // 10 | $include-html-grid-classes: $include-html-classes !default; 11 | $include-html-block-grid-classes: $include-html-grid-classes !default; 12 | 13 | // We use this to control the maximum number of block grid elements per row 14 | $block-grid-elements: 8 !default; 15 | $block-grid-default-spacing: $column-gutter !default; 16 | 17 | $align-block-grid-to-grid: false !default; 18 | @if $align-block-grid-to-grid { 19 | $block-grid-default-spacing: $column-gutter; 20 | } 21 | 22 | // 23 | // Block Grid Mixins 24 | // 25 | 26 | // Generate markup for block grid. 27 | // 28 | @mixin block-grid-html-classes() { 29 | @for $i from 2 through $block-grid-elements { 30 | .#{number2word($i)}-up td { 31 | width: floor(($container-width - $i * $block-grid-default-spacing) / $i); 32 | } 33 | } 34 | } 35 | 36 | @include exports("block-grid") { 37 | @if $include-html-block-grid-classes { 38 | /* Block Grid */ 39 | 40 | .block-grid { 41 | width: 100%; 42 | max-width: $container-width; 43 | } 44 | 45 | .block-grid td { 46 | display: inline-block; 47 | padding: $block-grid-default-spacing / 2; 48 | } 49 | 50 | @include block-grid-html-classes(); 51 | } 52 | } -------------------------------------------------------------------------------- /app/templates/_readme.md: -------------------------------------------------------------------------------- 1 | # <%= name %> 2 | 3 | > This is <%= name %> description 4 | 5 | ## How to install 6 | 7 | Prerequisites: 8 | * [Node.js](http://nodejs.org/) >=0.10.0 9 | * [Gulp.js](http://gulpjs.com/) >=3.8.0 10 | <% if (sass) { %>* [Sass](http://sass-lang.com/) >=3.4.0 <% } %> 11 | 12 | Installation process: 13 | 1. Clone this repository 14 | 2. Run ```npm install``` to install dependencies 15 | 16 | ## Usage 17 | 18 | For project development with livereload run: 19 | ``` 20 | gulp serve 21 | ``` 22 | 23 | To build project run: (Result will be in ```dist/``` folder.) 24 | ``` 25 | gulp build 26 | ``` 27 | 28 | To serve builded project: 29 | ``` 30 | gulp serve:dist 31 | ``` 32 | 33 | ## Built-in features 34 | 35 | * ZURB Ink responsive email templates 36 | <% if (sass) { %>* ZURB Ink CSS using Sassy Ink [Unofficial Sass port of Ink, Zurb's responsive email framework](https://github.com/faustgertz/sassy-ink)<% } else { %>* ZURB Ink.css<% } %> 37 | * Webserver with liverelaod 38 | <% if (jade) { %>* Jade templates compilation<% } %> 39 | <% if (sass) { %>* Sass compilation<% } %> 40 | * CSS concating and inlining 41 | 42 | ## Notes 43 | 44 | Media queries should be revisited, because all of them are inlined into head. 45 | 46 | --- 47 | 48 | Project structure was generated by [generator-gulp-ink-email](https://github.com/lightingbeetle/generator-gulp-ink-email) using version <%= version %>. 49 | 50 | [![Lighting Beetle](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Lighting Beetle")](http://www.lbstudio.sk) -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Generator Gulp Ink Email 2 | 3 | > Yeoman generator for creating responsive emails using [Zurb Ink framwork](http://zurb.com/ink/). Developed and used by [Lighting Beetle](http://www.lbstudio.sk). 4 | 5 | ## Prereqisities 6 | 7 | * [Node.js](http://nodejs.org/) 8 | * [Yeoman](http://yeoman.io/) 9 | ```javascript 10 | (sudo) npm install -g yo 11 | ``` 12 | * [Sass](http://sass-lang.com/) 13 | 14 | ## Built-in tools 15 | 16 | * Gulp (Task Manager) 17 | * Sass (CSS Preprocessor) 18 | * Jade (HTML templating) 19 | * Browser Sync (livereload development) 20 | 21 | ## Built-in features 22 | 23 | * ZURB Ink responsive email templates 24 | * ZURB Ink CSS using Sassy Ink [Unofficial Sass port of Ink, Zurb's responsive email framework](https://github.com/faustgertz/sassy-ink) (Sass) 25 | * ZURB Ink CSS (non-Sass) 26 | * Webserver with liverelaod 27 | * Jade templates compilation (Jade) 28 | * Sass compilation (Sass) 29 | * CSS concating and inlining 30 | 31 | ## Installation guide 32 | 33 | 1. Install via npm `(sudo) npm install -g generator-gulp-ink-email` 34 | 2. Create folder for your project and run inside: `yo gulp-ink-email` 35 | 3. Complete installation 36 | 4. ? 37 | 5. Profit 38 | 39 | ## Usage 40 | 41 | Gulpfile contains some useful tasks: 42 | 43 | 1. `gulp serve` for development with livereload 44 | 2. `gulp build` for building from source to `dist` folder 45 | 3. `gulp serve:dist` for build preview 46 | 47 | ## Notes 48 | 49 | Media queries should be revisited, because all of them are inlined into head. 50 | 51 | ## Contributors 52 | * Adam Močkoř (mockor@lbstudio.sk) 53 | 54 | --- 55 | [![Lighting Beetle](http://www.lbstudio.sk/static/imgs/lb-logo-orange.png "Lighting Beetle")](http://www.lbstudio.sk) 56 | 57 | -------------------------------------------------------------------------------- /app/templates/scss/ink/components/_normalize.scss: -------------------------------------------------------------------------------- 1 | // Ink by ZURB 2 | // zurb.com/ink/ 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // @variables 9 | // 10 | $include-html-normalize-classes: $include-html-classes !default; 11 | 12 | // We use these to style the
element 13 | $hr-color: #d9d9d9 !default; 14 | $hr-height: 1px !default; 15 | 16 | 17 | @include exports("normalize") { 18 | @if $include-html-normalize-classes { 19 | /* Client-specific Styles & Reset */ 20 | 21 | #outlook a { 22 | padding:0; 23 | } 24 | 25 | body { 26 | width:100% !important; 27 | min-width: 100%; 28 | -webkit-text-size-adjust:100%; 29 | -ms-text-size-adjust:100%; 30 | margin:0; 31 | padding:0; 32 | } 33 | 34 | /* .ExternalClass applies to Outlook.com (the artist formerly known as Hotmail) */ 35 | 36 | .ExternalClass { 37 | width:100%; 38 | 39 | &, 40 | p, 41 | span, 42 | font, 43 | td, 44 | div { 45 | line-height: 100%; 46 | } 47 | } 48 | 49 | 50 | 51 | 52 | #backgroundTable { 53 | margin:0; 54 | padding:0; 55 | width:100% !important; 56 | line-height: 100% !important; 57 | } 58 | 59 | img { 60 | outline:none; 61 | text-decoration:none; 62 | -ms-interpolation-mode: bicubic; 63 | width: auto; 64 | max-width: 100%; 65 | float: left; 66 | clear: both; 67 | display: block; 68 | } 69 | 70 | center { 71 | width: 100%; 72 | min-width: $container-width; 73 | } 74 | 75 | a img { 76 | border: none; 77 | } 78 | 79 | p { 80 | margin: 0 0 0 $paragraph-margin-bottom; 81 | } 82 | 83 | table { 84 | border-spacing: 0; 85 | border-collapse: collapse; 86 | } 87 | 88 | td { 89 | word-break: break-word; 90 | -webkit-hyphens: auto; 91 | -moz-hyphens: auto; 92 | hyphens: auto; 93 | border-collapse: collapse !important; 94 | } 95 | 96 | table, tr, td { 97 | padding: 0; 98 | vertical-align: top; 99 | text-align: left; 100 | } 101 | 102 | hr { 103 | color: color2hex($hr-color); 104 | background-color: color2hex($hr-color); 105 | height: $hr-height; 106 | border: none; 107 | } 108 | } 109 | } -------------------------------------------------------------------------------- /app/templates/_gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'); 4 | var gutil = require('gulp-util'); 5 | 6 | var browserSync = require('browser-sync'); 7 | var reload = browserSync.reload; 8 | 9 | <% if (jade) { %>var jade = require('gulp-jade');<% } %> 10 | 11 | <% if (sass) { %>var rubySass = require('gulp-ruby-sass'); 12 | var sourcemaps = require('gulp-sourcemaps');<% } else { %> 13 | var concat = require('gulp-concat');<% } %> 14 | 15 | var inlineCss = require('gulp-inline-css'); 16 | var inlineSource = require('gulp-inline-source'); 17 | 18 | var rename = require('gulp-rename'); 19 | 20 | <% if (sass) { %> 21 | gulp.task('styles', function() { 22 | return rubySass('app/styles/scss/main.scss', { 23 | sourcemap: false, 24 | style: 'expanded', 25 | lineNumbers: true 26 | }) 27 | .pipe(sourcemaps.write()) 28 | .pipe(rename('style.css')) 29 | .pipe(gulp.dest('./app/styles')) 30 | .pipe(reload({stream: true})); 31 | }); 32 | <% } else { %> 33 | gulp.task('styles', function() { 34 | return gulp.src('app/styles/css/*.css') 35 | .pipe(concat('style.css')) 36 | .pipe(gulp.dest('app/styles')) 37 | .pipe(reload({stream: true})); 38 | }); 39 | <% } %> 40 | 41 | gulp.task('inline', ['styles'<% if (jade) { %>, 'jade'<% } %>], function() { 42 | return gulp.src('app/*.html') 43 | .pipe(inlineSource({ 44 | rootpath: 'app' 45 | })) 46 | .pipe(inlineCss({ 47 | preserveMediaQueries: true 48 | })) 49 | .pipe(gulp.dest('dist/')); 50 | }); 51 | 52 | <% if (jade) { %> 53 | gulp.task('jade', function() { 54 | return gulp.src('app/template/*.jade') 55 | .pipe(jade({ 56 | pretty: true, 57 | compileDebug: true 58 | })) 59 | .on('error',function(error){ 60 | gutil.log(gutil.colors.magenta('Ooops Jade Crashed'),error); 61 | gutil.beep(); 62 | cb(); 63 | }) 64 | .pipe(gulp.dest('app/')); 65 | }); 66 | <% } %> 67 | 68 | gulp.task('clean', require('del').bind(null, 'dist')); 69 | 70 | gulp.task('build', ['clean','inline']); 71 | 72 | gulp.task('serve', ['styles'<% if (jade) { %>, 'jade'<% } %>], function() { 73 | browserSync({ 74 | server: './app', 75 | notify: false, 76 | debugInfo: false, 77 | host: 'localhost' 78 | }); 79 | 80 | gulp.watch('app/styles/<% if (sass) { %>**/*.scss<% } else { %>css/*.css<% } %>', ['styles']); 81 | gulp.watch('app/*.html').on('change', reload); 82 | <% if (jade) { %>gulp.watch('app/template/**/*.jade', ['jade']);<% } %> 83 | }); 84 | 85 | gulp.task('serve:dist', ['inline'], function() { 86 | browserSync({ 87 | server: './dist', 88 | notify: false, 89 | debugInfo: false, 90 | host: 'localhost' 91 | }); 92 | }); 93 | -------------------------------------------------------------------------------- /app/templates/email_templates/jade/basic.jade: -------------------------------------------------------------------------------- 1 | extends layout/_layout 2 | 3 | block content 4 | 5 | include layout/_header 6 | 7 | // Email content 8 | table.container 9 | tr 10 | td 11 | table.row 12 | tr 13 | td.wrapper.last 14 | table.twelve.columns 15 | tr 16 | td 17 | h1 Hi, Susan Calvin 18 | p.lead Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. 19 | p Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. consequat vel lacus. Sed iaculis pulvinar ligula, ornare fringilla ante viverra et. In hac habitasse platea dictumst. Donec vel orci mi, eu congue justo. Integer eget odio est, eget malesuada lorem. Aenean sed tellus dui, vitae viverra risus. Nullam massa sapien, pulvinar eleifend fringilla id, convallis eget nisi. Mauris a sagittis dui. Pellentesque non lacinia mi. Fusce sit amet libero sit amet erat venenatis sollicitudin vitae vel eros. Cras nunc sapien, interdum sit amet porttitor ut, congue quis urna. 20 | td.expander 21 | 22 | table.row.callout 23 | tr 24 | td.wrapper.last 25 | table.twelve.columns 26 | tr 27 | td.panel 28 | p Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. 29 | a(href='#') Click it! » 30 | td.expander 31 | 32 | table.row.footer 33 | tr 34 | td.wrapper 35 | table.six.columns 36 | tr 37 | td.left-text-pad 38 | h5 Connect With Us: 39 | table.tiny-button.facebook 40 | tr 41 | td 42 | a(href='#') Facebook 43 | br 44 | table.tiny-button.twitter 45 | tr 46 | td 47 | a(href='#') Twitter 48 | br 49 | table.tiny-button.google-plus 50 | tr 51 | td 52 | a(href='#') Google + 53 | td.expander 54 | td.wrapper.last 55 | table.six.columns 56 | tr 57 | td.last.right-text-pad 58 | h5 Contact Info: 59 | p Phone: 408.341.0600 60 | p Email: 61 | a(href='mailto:hseldon@trantor.com') hseldon@trantor.com 62 | td.expander 63 | 64 | table.row 65 | tr 66 | td.wrapper.last 67 | table.twelve.columns 68 | tr 69 | td(align='center') 70 | center 71 | p(style='text-align:center;') 72 | a(href='#') Terms 73 | | | 74 | a(href='#') Privacy 75 | | | 76 | a(href='#') Unsubscribe 77 | td.expander 78 | // container end below 79 | 80 | include layout/_footer -------------------------------------------------------------------------------- /app/templates/scss/ink/components/_media-query.scss: -------------------------------------------------------------------------------- 1 | // Ink by ZURB 2 | // zurb.com/ink/ 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // @variables 9 | // 10 | $include-html-media-query-classes: $include-html-classes !default; 11 | 12 | $small-container-width: 95% !default; 13 | 14 | // Media Query Ranges 15 | $small-range: (0px, $container-width * (600px / 580px)) !default; 16 | 17 | $screen: "only screen" !default; 18 | 19 | $landscape: "#{$screen} and (orientation: landscape)" !default; 20 | $portrait: "#{$screen} and (orientation: portrait)" !default; 21 | 22 | $small-up: $screen !default; 23 | $small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})" !default; 24 | 25 | @include exports("media-query") { 26 | @if $include-html-media-query-classes { 27 | /* Media Queries */ 28 | 29 | @media #{$small-only} { 30 | 31 | table[class="body"] img { 32 | width: auto !important; 33 | height: auto !important; 34 | } 35 | 36 | table[class="body"] center { 37 | min-width: 0 !important; 38 | } 39 | 40 | table[class="body"] .container { 41 | width: $small-container-width !important; 42 | } 43 | 44 | table[class="body"] .row { 45 | width: 100% !important; 46 | display: block !important; 47 | } 48 | 49 | table[class="body"] .wrapper { 50 | display: block !important; 51 | padding-right: 0 !important; 52 | } 53 | 54 | table[class="body"] .columns, 55 | table[class="body"] .column { 56 | table-layout: fixed !important; 57 | float: none !important; 58 | width: 100% !important; 59 | padding-right: 0px !important; 60 | padding-left: 0px !important; 61 | display: block !important; 62 | } 63 | 64 | table[class="body"] .wrapper.first .columns, 65 | table[class="body"] .wrapper.first .column { 66 | display: table !important; 67 | } 68 | 69 | table[class="body"] table.columns td, 70 | table[class="body"] table.column td { 71 | width: 100% !important; 72 | } 73 | 74 | @for $i from 1 through $total-columns { 75 | table[class="body"] .columns td.#{number2word($i)}, 76 | table[class="body"] .column td.#{number2word($i)} { 77 | width: grid-calc-pct($i, $total-columns) !important; 78 | } 79 | } 80 | table[class="body"] td%offset-by{ 81 | padding-left: 0 !important; 82 | } 83 | @for $i from 1 through ($total-columns - 1) { 84 | .offset-by-#{number2word($i)} { 85 | @extend %offset-by; 86 | } 87 | } 88 | 89 | table[class="body"] table.columns td.expander { 90 | width: 1px !important; 91 | } 92 | 93 | table[class="body"] .right-text-pad, 94 | table[class="body"] .text-pad-right { 95 | padding-left: $text-padding !important; 96 | } 97 | 98 | table[class="body"] .left-text-pad, 99 | table[class="body"] .text-pad-left { 100 | padding-right: $text-padding !important; 101 | } 102 | 103 | table[class="body"] .hide-for-small, 104 | table[class="body"] .show-for-desktop { 105 | display: none !important; 106 | } 107 | 108 | table[class="body"] .show-for-small, 109 | table[class="body"] .hide-for-desktop { 110 | display: inherit !important; 111 | } 112 | } 113 | } 114 | } -------------------------------------------------------------------------------- /app/templates/scss/ink/components/_grid.scss: -------------------------------------------------------------------------------- 1 | // Ink by ZURB 2 | // zurb.com/ink/ 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // @variables 9 | // 10 | $include-html-grid-classes: $include-html-classes !default; 11 | $include-html-sub-colums-grid-classes: $include-html-grid-classes !default; 12 | 13 | $total-columns: 12; 14 | 15 | $wrapper-padding-top: 10px !default; 16 | $column-cell-padding-bottom: 10px !default; 17 | 18 | $sub-column-padding-right: $column-gutter / 2 !default; 19 | 20 | @include exports("grid") { 21 | @if $include-html-grid-classes { 22 | /* Responsive Grid */ 23 | 24 | table.body { 25 | height: 100%; 26 | width: 100%; 27 | } 28 | 29 | table.container { 30 | width: $container-width; 31 | margin: 0 auto; 32 | text-align: inherit; 33 | } 34 | 35 | table.row { 36 | padding: 0px; 37 | width: 100%; 38 | position: relative; 39 | } 40 | 41 | table.container table.row { 42 | display: block; 43 | } 44 | 45 | td.wrapper { 46 | padding: $wrapper-padding-top $column-gutter 0px 0px; 47 | position: relative; 48 | } 49 | 50 | table.columns, 51 | table.column { 52 | margin: 0 auto; 53 | } 54 | 55 | table.columns td, 56 | table.column td { 57 | padding: 0px 0px $column-cell-padding-bottom; 58 | } 59 | 60 | @if $include-html-sub-colums-grid-classes { 61 | table.columns td.sub-columns, 62 | table.column td.sub-columns, 63 | table.columns td.sub-column, 64 | table.column td.sub-column { 65 | padding-right: $sub-column-padding-right; 66 | } 67 | 68 | td.sub-column, td.sub-columns { 69 | min-width: 0px; 70 | } 71 | } 72 | 73 | table.row td.last, 74 | table.container td.last { 75 | padding-right: 0px; 76 | } 77 | 78 | @for $i from 1 through $total-columns { 79 | table.#{number2word($i)} { 80 | width: grid-calc-px($i, $total-columns, $container-width, $column-gutter); 81 | } 82 | } 83 | 84 | @for $i from 1 through $total-columns { 85 | table.#{number2word($i)} center { 86 | min-width: grid-calc-px($i, $total-columns, $container-width, $column-gutter); 87 | } 88 | } 89 | 90 | @for $i from 1 through $total-columns { 91 | table.#{number2word($i)} .panel center { 92 | min-width: grid-calc-px($i, $total-columns, $container-width, $column-gutter) - 2 * $panel-padding; 93 | } 94 | } 95 | 96 | @for $i from 1 through $total-columns { 97 | .body .columns td.#{number2word($i)}, 98 | .body .column td.#{number2word($i)} { 99 | width: grid-calc-pct($i, $total-columns); 100 | } 101 | } 102 | 103 | @for $i from 1 through ($total-columns - 1) { 104 | td.offset-by-#{number2word($i)} { 105 | padding-left: grid-calc-px($i, $total-columns, $container-width, $column-gutter) + $column-gutter; 106 | } 107 | } 108 | td.expander { 109 | visibility: hidden; 110 | width: 0px; 111 | padding: 0 !important; 112 | } 113 | 114 | table.columns .text-pad, 115 | table.column .text-pad { 116 | padding-left: $text-padding; 117 | padding-right: $text-padding; 118 | } 119 | 120 | table.columns .left-text-pad, 121 | table.columns .text-pad-left, 122 | table.column .left-text-pad, 123 | table.column .text-pad-left { 124 | padding-left: $text-padding; 125 | } 126 | 127 | table.columns .right-text-pad, 128 | table.columns .text-pad-right, 129 | table.column .right-text-pad, 130 | table.column .text-pad-right { 131 | padding-right: $text-padding; 132 | } 133 | } 134 | } -------------------------------------------------------------------------------- /app/templates/scss/ink/components/_type.scss: -------------------------------------------------------------------------------- 1 | // Ink by ZURB 2 | // zurb.com/ink/ 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // @variables 9 | // 10 | $include-html-type-classes: $include-html-classes !default; 11 | 12 | // We use these to control font styles 13 | $base-font-color: #222222 !default; 14 | $base-font-family: Helvetica, Arial, sans-serif !default; 15 | $base-font-weight: normal !default; 16 | $base-line-height: 1.3 !default; 17 | 18 | $body-font-size: 14px !default; 19 | $body-line-height: 19px !default; 20 | 21 | // We use these to control header font sizes 22 | $h1-font-size: 40px !default; 23 | $h2-font-size: 36px !default; 24 | $h3-font-size: 32px !default; 25 | $h4-font-size: 28px !default; 26 | $h5-font-size: 24px !default; 27 | $h6-font-size: 20px !default; 28 | 29 | // A general styling 30 | $small-font-size: 10px !default; 31 | 32 | // We use these to style lead paragraphs 33 | $paragraph-lead-font-size: 18px !default; 34 | $paragraph-lead-line-height: 21px !default; 35 | 36 | // We use these to style anchors 37 | $anchor-text-decoration: none !default; 38 | $anchor-font-color: #2ba6cb !default; 39 | $anchor-font-color-visited: $anchor-font-color !default; 40 | $anchor-font-color-hover: #2795b6 !default; 41 | $anchor-font-color-active: $anchor-font-color-hover !default; 42 | 43 | $header-anchor-font-color: $anchor-font-color !default; 44 | $header-anchor-font-color-visited: $header-anchor-font-color !default; 45 | $header-anchor-font-color-active: $header-anchor-font-color !default; 46 | 47 | @include exports("type") { 48 | @if $include-html-type-classes { 49 | /* Typography */ 50 | 51 | body, table.body, h1, h2, h3, h4, h5, h6, p, td { 52 | color: color2hex($base-font-color); 53 | font-family: $base-font-family; 54 | font-weight: $base-font-weight; 55 | padding:0; 56 | margin: 0; 57 | text-align: left; 58 | line-height: $base-line-height; 59 | } 60 | 61 | h1, h2, h3, h4, h5, h6 { 62 | word-break: normal; 63 | } 64 | 65 | h1 {font-size: $h1-font-size;} 66 | h2 {font-size: $h2-font-size;} 67 | h3 {font-size: $h3-font-size;} 68 | h4 {font-size: $h4-font-size;} 69 | h5 {font-size: $h5-font-size;} 70 | h6 {font-size: $h6-font-size;} 71 | body, table.body, p, td {font-size: $body-font-size;line-height:$body-line-height;} 72 | 73 | p.lead, p.lede, p.leed { 74 | font-size: $paragraph-lead-font-size; 75 | line-height:$paragraph-lead-line-height; 76 | } 77 | 78 | p { 79 | margin-bottom: $paragraph-margin-bottom; 80 | } 81 | 82 | small { 83 | font-size: $small-font-size; 84 | } 85 | 86 | a { 87 | color: color2hex($anchor-font-color); 88 | text-decoration: $anchor-text-decoration; 89 | } 90 | 91 | a:hover { 92 | color: color2hex($anchor-font-color-hover) !important; 93 | } 94 | 95 | a:active { 96 | color: color2hex($anchor-font-color-active) !important; 97 | } 98 | 99 | a:visited { 100 | color: color2hex($anchor-font-color-visited) !important; 101 | } 102 | 103 | h1 a, 104 | h2 a, 105 | h3 a, 106 | h4 a, 107 | h5 a, 108 | h6 a { 109 | color: color2hex($header-anchor-font-color); 110 | } 111 | 112 | h1 a:active, 113 | h2 a:active, 114 | h3 a:active, 115 | h4 a:active, 116 | h5 a:active, 117 | h6 a:active { 118 | color: color2hex($header-anchor-font-color-active) !important; 119 | } 120 | 121 | h1 a:visited, 122 | h2 a:visited, 123 | h3 a:visited, 124 | h4 a:visited, 125 | h5 a:visited, 126 | h6 a:visited { 127 | color: color2hex($header-anchor-font-color-visited) !important; 128 | } 129 | } 130 | } -------------------------------------------------------------------------------- /app/templates/email_templates/jade/hero.jade: -------------------------------------------------------------------------------- 1 | extends layout/_layout 2 | 3 | block content 4 | include layout/_header 5 | 6 | // Email content 7 | 8 | table.container 9 | tr 10 | td 11 | // content start 12 | table.row 13 | tr 14 | td.wrapper.last 15 | table.twelve.columns 16 | tr 17 | td 18 | h1 Hi, Elijah Baily 19 | p.lead 20 | | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. 21 | img(width='580', height='300', src='http://placehold.it/580x300') 22 | td.expander 23 | table.row.callout 24 | tr 25 | td.wrapper.last 26 | table.twelve.columns 27 | tr 28 | td.panel 29 | p 30 | | Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. 31 | a(href='#') Click it! » 32 | td.expander 33 | table.row 34 | tr 35 | td.wrapper.last 36 | table.twelve.columns 37 | tr 38 | td 39 | h3 40 | | Title Ipsum 41 | small This is a note. 42 | p 43 | | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 44 | td.expander 45 | table.row 46 | tr 47 | td.wrapper.last 48 | table.three.columns 49 | tr 50 | td 51 | table.button 52 | tr 53 | td 54 | a(href='#') Click Me! 55 | td.expander 56 | table.row.footer 57 | tr 58 | td.wrapper 59 | table.six.columns 60 | tr 61 | td.left-text-pad 62 | h5 Connect With Us: 63 | table.tiny-button.facebook 64 | tr 65 | td 66 | a(href='#') Facebook 67 | br 68 | table.tiny-button.twitter 69 | tr 70 | td 71 | a(href='#') Twitter 72 | br 73 | table.tiny-button.google-plus 74 | tr 75 | td 76 | a(href='#') Google + 77 | td.expander 78 | td.wrapper.last 79 | table.six.columns 80 | tr 81 | td.last.right-text-pad 82 | h5 Contact Info: 83 | p Phone: 408.341.0600 84 | p 85 | | Email: 86 | a(href='mailto:hseldon@trantor.com') hseldon@trantor.com 87 | td.expander 88 | table.row 89 | tr 90 | td.wrapper.last 91 | table.twelve.columns 92 | tr 93 | td(align='center') 94 | center 95 | p(style='text-align:center;') 96 | a(href='#') Terms 97 | | | 98 | a(href='#') Privacy 99 | | | 100 | a(href='#') Unsubscribe 101 | td.expander 102 | // container end below 103 | 104 | include layout/_footer -------------------------------------------------------------------------------- /app/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var yeoman = require('yeoman-generator'); 4 | var chalk = require('chalk'); 5 | 6 | module.exports = yeoman.generators.Base.extend({ 7 | initializing: function () { 8 | this.pkg = require('../package.json'); 9 | this.version = this.pkg.version; 10 | this.currentYear = (new Date()).getFullYear(); 11 | }, 12 | 13 | prompting: { 14 | templateName: function () { 15 | var done = this.async(); 16 | 17 | if (!this.options['skip-welcome-message']) { 18 | this.log(chalk.yellow(require('yosay')('Welcome to html email generator. Hodd luck!'))); 19 | } 20 | 21 | var prompts = [{ 22 | name: 'name', 23 | message: 'What is name of this email template?', 24 | default: this.appname 25 | }]; 26 | 27 | this.prompt(prompts, function (props) { 28 | this.name = props.name; 29 | 30 | done(); 31 | }.bind(this)); 32 | }, 33 | 34 | templateType: function () { 35 | var done = this.async(); 36 | 37 | var prompts = [{ 38 | type: 'list', 39 | name: 'template', 40 | message: 'Please, choose your template (http://zurb.com/ink/templates.php)', 41 | choices: [{ 42 | name: 'Boilerplate', 43 | value: 'boilerplate' 44 | }, { 45 | name: 'Basic', 46 | value: 'basic' 47 | }, { 48 | name: 'Hero', 49 | value: 'hero' 50 | }, { 51 | name: 'Sidebar', 52 | value: 'sidebar' 53 | }, { 54 | name: 'Sidebar Hero', 55 | value: 'sidebar-hero' 56 | }], 57 | default: 0 58 | }]; 59 | 60 | this.prompt(prompts, function (props) { 61 | this.emailTemplate = props.template; 62 | 63 | done(); 64 | }.bind(this)); 65 | }, 66 | 67 | jade: function () { 68 | var done = this.async(); 69 | 70 | var prompts = [{ 71 | type: 'confirm', 72 | name: 'jade', 73 | message: 'Would you like to use Jade for html templating?', 74 | default: true 75 | }]; 76 | 77 | this.prompt(prompts, function (props) { 78 | this.jade = props.jade; 79 | 80 | done(); 81 | }.bind(this)); 82 | }, 83 | 84 | sass: function () { 85 | var done = this.async(); 86 | 87 | var prompts = [{ 88 | type: 'confirm', 89 | name: 'sass', 90 | message: 'Would you like to use SASS for css precompilation?', 91 | default: true 92 | }]; 93 | 94 | this.prompt(prompts, function (props) { 95 | this.sass = props.sass; 96 | 97 | done(); 98 | }.bind(this)); 99 | } 100 | }, 101 | 102 | configuring: { 103 | config: function () { 104 | this.config.save(); 105 | } 106 | }, 107 | 108 | writing: { 109 | readme: function() { 110 | this.template('_readme.md', 'readme.md'); 111 | }, 112 | 113 | app: function() { 114 | this.mkdir('app'); 115 | }, 116 | 117 | package: function() { 118 | this.template('_package.json', 'package.json'); 119 | }, 120 | 121 | gulpfile: function() { 122 | this.template('_gulpfile.js', 'gulpfile.js'); 123 | }, 124 | 125 | mailTemplates: function() { 126 | if (this.jade) { 127 | this.directory('email_templates/jade/layout', 'app/template/layout'); 128 | this.copy('email_templates/jade/' + this.emailTemplate + '.jade', 'app/template/index.jade'); 129 | } else { 130 | this.copy('email_templates/' + this.emailTemplate + '.html', 'app/index.html'); 131 | } 132 | }, 133 | 134 | styles: function() { 135 | if (this.sass) { 136 | this.directory('scss', 'app/styles/scss'); 137 | } else { 138 | this.copy('css/ink.css', 'app/styles/css/ink.css'); 139 | this.copy('css/main.css', 'app/styles/css/main.css'); 140 | } 141 | }, 142 | 143 | extras: function() { 144 | this.copy('jshintrc', '.jshintrc'); 145 | this.copy('gitignore', '.gitignore'); 146 | this.copy('gitattributes', '.gitattributes'); 147 | this.copy('editorconfig', '.editorconfig'); 148 | } 149 | }, 150 | 151 | install: function () { 152 | this.installDependencies({ 153 | skipInstall: this.options['skip-install'], 154 | bower: false 155 | }); 156 | } 157 | }); -------------------------------------------------------------------------------- /app/templates/email_templates/jade/sidebar-hero.jade: -------------------------------------------------------------------------------- 1 | extends layout/_layout 2 | 3 | block content 4 | include layout/_header 5 | 6 | // Email content 7 | 8 | br 9 | table.container 10 | tr 11 | td 12 | // content start 13 | table.row 14 | tr 15 | td.wrapper.last 16 | table.twelve.columns 17 | tr 18 | td 19 | h1 Welcome, Daneel Olivan 20 | p 21 | | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. 22 | img(width='580', height='300', src='http://placehold.it/580x300') 23 | td.expander 24 | table.twelve.columns 25 | tr 26 | td.panel 27 | p 28 | | Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. 29 | a(href='#') Click it! » 30 | td.expander 31 | br 32 | // Break Tag for row 33 | table.row 34 | tr 35 | td.wrapper 36 | table.six.columns 37 | tr 38 | td 39 | p 40 | | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet. 41 | p 42 | | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet. 43 | table.button 44 | tr 45 | td 46 | a(href='#') Click Me! 47 | td.expander 48 | td.wrapper.last 49 | table.six.columns 50 | tr 51 | td.panel 52 | h6 Header Thing 53 | p Sub-head or something 54 | table 55 | tr 56 | td 57 | a(href='#') Just a Plain Link » 58 | hr 59 | table 60 | tr 61 | td 62 | a(href='#') Just a Plain Link » 63 | hr 64 | table 65 | tr 66 | td 67 | a(href='#') Just a Plain Link » 68 | hr 69 | table 70 | tr 71 | td 72 | a(href='#') Just a Plain Link » 73 | hr 74 | table 75 | tr 76 | td 77 | a(href='#') Just a Plain Link » 78 | hr 79 | table 80 | tr 81 | td 82 | a(href='#') Just a Plain Link » 83 | hr 84 | table 85 | tr 86 | td 87 | a(href='#') Just a Plain Link » 88 | td.expander 89 | br 90 | table.six.columns 91 | tr 92 | td.panel 93 | h6(style='margin-bottom:5px;') Connect With Us: 94 | table.tiny-button.facebook 95 | tr 96 | td 97 | a(href='#') Facebook 98 | hr 99 | table.tiny-button.twitter 100 | tr 101 | td 102 | a(href='#') Twitter 103 | hr 104 | table.tiny-button.google-plus 105 | tr 106 | td 107 | a(href='#') Google + 108 | br 109 | h6(style='margin-bottom:5px;') Contact Info: 110 | p 111 | | Phone: 112 | b 408.341.0600 113 | p 114 | | Email: 115 | a(href='mailto:hseldon@trantor.com') hseldon@trantor.com 116 | td.expander 117 | br 118 | br 119 | // Legal + Unsubscribe 120 | table.row 121 | tr 122 | td.wrapper.last 123 | table.twelve.columns 124 | tr 125 | td(align='center') 126 | center 127 | p(style='text-align:center;') 128 | a(href='#') Terms 129 | | | 130 | a(href='#') Privacy 131 | | | 132 | a(href='#') Unsubscribe 133 | td.expander 134 | // container end below 135 | 136 | include layout/_footer -------------------------------------------------------------------------------- /app/templates/email_templates/jade/sidebar.jade: -------------------------------------------------------------------------------- 1 | extends layout/_layout 2 | 3 | block content 4 | 5 | include layout/_header 6 | 7 | // Email content 8 | 9 | br 10 | table.container 11 | tr 12 | td 13 | // content start 14 | table.row 15 | tr 16 | td.wrapper 17 | table.six.columns 18 | tr 19 | td 20 | h2 21 | | Hello, 22 | br 23 | | Han Fastolfe 24 | p 25 | | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. 26 | p 27 | | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet. 28 | td.expander 29 | table.six.columns 30 | tr 31 | td.panel 32 | p 33 | | Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. 34 | a(href='#') Click it! » 35 | td.expander 36 | table.six.columns 37 | tr 38 | td 39 | br 40 | p 41 | | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. 42 | p 43 | | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet. 44 | table.button 45 | tr 46 | td 47 | a(href='#') Click Me! 48 | td.expander 49 | td.wrapper.last 50 | table.six.columns 51 | tr 52 | td.panel 53 | h6 Header Thing 54 | p Sub-head or something 55 | table 56 | tr 57 | td 58 | a(href='#') Just a Plain Link » 59 | hr 60 | table 61 | tr 62 | td 63 | a(href='#') Just a Plain Link » 64 | hr 65 | table 66 | tr 67 | td 68 | a(href='#') Just a Plain Link » 69 | hr 70 | table 71 | tr 72 | td 73 | a(href='#') Just a Plain Link » 74 | hr 75 | table 76 | tr 77 | td 78 | a(href='#') Just a Plain Link » 79 | hr 80 | table 81 | tr 82 | td 83 | a(href='#') Just a Plain Link » 84 | hr 85 | table 86 | tr 87 | td 88 | a(href='#') Just a Plain Link » 89 | td.expander 90 | br 91 | table.six.columns 92 | tr 93 | td.panel 94 | h6(style='margin-bottom:5px;') Connect With Us: 95 | table.tiny-button.facebook 96 | tr 97 | td 98 | a(href='#') Facebook 99 | hr 100 | table.tiny-button.twitter 101 | tr 102 | td 103 | a(href='#') Twitter 104 | hr 105 | table.tiny-button.google-plus 106 | tr 107 | td 108 | a(href='#') Google + 109 | br 110 | h6(style='margin-bottom:5px;') Contact Info: 111 | p 112 | | Phone: 113 | b 408.341.0600 114 | p 115 | | Email: 116 | a(href='mailto:hseldon@trantor.com') hseldon@trantor.com 117 | td.expander 118 | br 119 | br 120 | // Legal + Unsubscribe 121 | table.row 122 | tr 123 | td.wrapper.last 124 | table.twelve.columns 125 | tr 126 | td(align='center') 127 | center 128 | p(style='text-align:center;') 129 | a(href='#') Terms 130 | | | 131 | a(href='#') Privacy 132 | | | 133 | a(href='#') Unsubscribe 134 | td.expander 135 | // container end below 136 | 137 | include layout/_footer -------------------------------------------------------------------------------- /app/templates/scss/ink/_settings.scss: -------------------------------------------------------------------------------- 1 | // Ink by ZURB 2 | // zurb.com/ink/ 3 | // Licensed under MIT Open Source 4 | 5 | // 6 | // INK SETTINGS 7 | // 8 | 9 | // Allows the use of rem-calc() or lower-bound() in your settings 10 | @import "functions"; 11 | 12 | // $base-line-height: 1.3; 13 | 14 | // We use this to control whether or not CSS classes come through in the gem files. 15 | // $include-html-classes: true; 16 | 17 | 18 | 19 | // 20 | // $GLOBAL 21 | // 22 | 23 | // $include-html-global-classes: $include-html-classes; 24 | 25 | // We use these to control font styles 26 | // $base-font-color: #222222; 27 | // $base-font-family: Helvetica, Arial, sans-serif; 28 | // $base-font-weight: normal; 29 | 30 | // $body-font-size: 14px; 31 | // $body-line-height: 19px; 32 | 33 | // We use these as default colors throughout 34 | // $primary-color: #2795b6; 35 | // $secondary-color: #e9e9e9; 36 | // $alert-color: #c60f13; 37 | // $success-color: #5da423; 38 | 39 | // We use this to control how much we darken things on hover 40 | // $secondary-border-color: #d0d0d0; 41 | // $alert-border-color: #457a1a; 42 | // $success-border-color: #970b0e; 43 | 44 | // We use these to make sure border radius matches unless we want it different. 45 | // $global-radius: 3px; 46 | // $global-rounded: 500px; 47 | 48 | // $column-gutter: 20px; 49 | 50 | 51 | 52 | // 53 | // $NORMALIZE 54 | // 55 | 56 | // $include-html-normalize-classes: $include-html-classes; 57 | 58 | 59 | 60 | // 61 | // $ALIGNMENT 62 | // 63 | 64 | // $include-html-alignment-classes: $include-html-classes; 65 | 66 | 67 | 68 | // 69 | // $GRID 70 | // 71 | 72 | // $include-html-grid-classes: $include-html-classes; 73 | // $include-html-sub-colums-grid-classes: $include-html-grid-classes; 74 | 75 | // $container-width: 580px; 76 | // $small-container-width: 95%; 77 | // $total-columns: 12; 78 | 79 | // $wrapper-padding-top: 10px; 80 | // $column-cell-padding-bottom: 10px; 81 | // $text-padding: 10px; 82 | 83 | // $sub-column-padding-right: $column-gutter / 2; 84 | 85 | 86 | 87 | // 88 | // $MEDIA-QUERY-RANGES 89 | // 90 | 91 | // $include-html-media-query-classes: $include-html-classes; 92 | 93 | // $small-range: (0px, $container-width * (600px / 580px)); 94 | 95 | // $screen: "only screen"; 96 | 97 | // $landscape: "#{$screen} and (orientation: landscape)"; 98 | // $portrait: "#{$screen} and (orientation: portrait)"; 99 | 100 | // $small-up: $screen; 101 | // $small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})"; 102 | 103 | 104 | 105 | // 106 | // $OUTLOOK-FIRST 107 | // 108 | 109 | // $include-html-outlook-first-classes: $include-html-classes; 110 | 111 | 112 | 113 | // 114 | // $TYPOGRAPHY 115 | // 116 | 117 | // $include-html-type-classes: $include-html-classes; 118 | 119 | // We use these to control header font sizes 120 | // $h1-font-size: 40px; 121 | // $h2-font-size: 36px; 122 | // $h3-font-size: 32px; 123 | // $h4-font-size: 28px; 124 | // $h5-font-size: 24px; 125 | // $h6-font-size: 20px; 126 | 127 | // A general styling 128 | // $small-font-size: 10px; 129 | 130 | // We use these to style lead paragraphs 131 | // $paragraph-margin-bottom: 10px; 132 | // $paragraph-lead-font-size: 18px; 133 | // $paragraph-lead-line-height: 21px; 134 | 135 | // We use these to style anchors 136 | // $anchor-text-decoration: none; 137 | // $anchor-font-color: #2ba6cb; 138 | // $anchor-font-color-visited: $anchor-font-color; 139 | // $anchor-font-color-hover: #2795b6; 140 | // $anchor-font-color-active: $anchor-font-color-hover; 141 | 142 | // $header-anchor-font-color: $anchor-font-color; 143 | // $header-anchor-font-color-visited: $header-anchor-font-color; 144 | // $header-anchor-font-color-active: $header-anchor-font-color; 145 | 146 | // We use these to style the
element 147 | // $hr-color: #d9d9d9; 148 | // $hr-height: 1px; 149 | 150 | 151 | 152 | // 153 | // $BLOCK-GRID 154 | // 155 | 156 | // $include-html-block-grid-classes: $include-html-grid-classes; 157 | 158 | // We use this to control the maximum number of block grid elements per row 159 | // $block-grid-elements: 8; 160 | // $block-grid-default-spacing: $column-gutter; 161 | // $align-block-grid-to-grid: false; 162 | 163 | 164 | 165 | // 166 | // $BUTTONS 167 | // 168 | 169 | // $include-html-button-classes: $include-html-classes; 170 | 171 | // We use these to build padding for buttons. 172 | // $button-dft: 8px 0; 173 | // $button-tny: 5px 0 4px; 174 | // $button-sml: 8px 0 7px; 175 | // $button-med: 12px 0 10px; 176 | // $button-lrg: 21px 0 18px; 177 | 178 | // We use these to control button text styles. 179 | // $button-font-family: $base-font-family; 180 | // $button-font-color: #ffffff; 181 | // $button-font-color-alt: #555555; 182 | // $button-font-tny: 12px; 183 | // $button-font-sml: 16px; 184 | // $button-font-med: 20px; 185 | // $button-font-lrg: 24px; 186 | 187 | // We use these to control button border styles. 188 | // $button-border-width: 1px; 189 | // $button-border-style: solid; 190 | // $button-bg: #2ba6cb; 191 | // $button-border-color: #2284a1; 192 | 193 | // We use this to set the default radius used throughout the core. 194 | // $button-radius: $global-radius; 195 | // $button-round: $global-rounded; 196 | 197 | 198 | 199 | // 200 | // $PANELS 201 | // 202 | 203 | // $include-html-panel-classes: $include-html-classes; 204 | 205 | // We use these to control the background and border styles 206 | // $panel-bg: #f2f2f2; 207 | // $panel-border-style: solid; 208 | // $panel-border-size: 1px; 209 | 210 | // We use this to control how much we darken things on hover 211 | // $panel-border-color: #d9d9d9; 212 | 213 | // We use this to set default padding 214 | // $panel-padding: 10px; -------------------------------------------------------------------------------- /app/templates/scss/ink/components/_buttons.scss: -------------------------------------------------------------------------------- 1 | // Ink by ZURB 2 | // zurb.com/ink/ 3 | // Licensed under MIT Open Source 4 | 5 | @import "global"; 6 | 7 | // 8 | // @variables 9 | // 10 | $include-html-button-classes: $include-html-classes !default; 11 | 12 | // We use these to build padding for buttons. 13 | $button-dft: 8px 0 !default; 14 | $button-tny: 5px 0 4px !default; 15 | $button-sml: 8px 0 7px !default; 16 | $button-med: 12px 0 10px !default; 17 | $button-lrg: 21px 0 18px !default; 18 | 19 | // We use these to control button text styles. 20 | $button-font-family: $base-font-family !default; 21 | $button-font-color: #ffffff !default; 22 | $button-font-color-alt: #555555 !default; 23 | $button-font-tny: 12px !default; 24 | $button-font-sml: 16px !default; 25 | $button-font-med: 20px !default; 26 | $button-font-lrg: 24px !default; 27 | 28 | // We use these to control button border styles. 29 | $button-border-width: 1px !default; 30 | $button-border-style: solid !default; 31 | $button-bg: #2ba6cb !default; 32 | $button-border-color: #2284a1 !default; 33 | 34 | // We use these as default colors throughout 35 | $primary-color: #2795b6 !default; 36 | $secondary-color: #e9e9e9 !default; 37 | $alert-color: #c60f13 !default; 38 | $success-color: #5da423 !default; 39 | $secondary-border-color: #d0d0d0 !default; 40 | $alert-border-color: #457a1a !default; 41 | $success-border-color: #970b0e !default; 42 | 43 | // We use this to set the default radius used throughout the core. 44 | $button-radius: $global-radius !default; 45 | $button-round: $global-rounded !default; 46 | 47 | @include exports("buttons") { 48 | @if $include-html-button-classes { 49 | /* Buttons */ 50 | 51 | table.button, 52 | table.tiny-button, 53 | table.small-button, 54 | table.medium-button, 55 | table.large-button { 56 | width: 100%; 57 | overflow: hidden; 58 | } 59 | 60 | table.button td, 61 | table.tiny-button td, 62 | table.small-button td, 63 | table.medium-button td, 64 | table.large-button td { 65 | display: block; 66 | width: auto !important; 67 | text-align: center; 68 | background: color2hex($button-bg); 69 | border: $button-border-width $button-border-style color2hex($button-border-color); 70 | color: color2hex($button-font-color); 71 | padding: $button-dft; 72 | } 73 | 74 | table.tiny-button td { 75 | padding: $button-tny; 76 | } 77 | 78 | table.small-button td { 79 | padding: $button-sml; 80 | } 81 | 82 | table.medium-button td { 83 | padding: $button-med; 84 | } 85 | 86 | table.large-button td { 87 | padding: $button-lrg; 88 | } 89 | 90 | table.button td a, 91 | table.tiny-button td a, 92 | table.small-button td a, 93 | table.medium-button td a, 94 | table.large-button td a { 95 | font-weight: bold; 96 | text-decoration: none; 97 | font-family: $button-font-family; 98 | color: color2hex($button-font-color); 99 | font-size: $button-font-sml; 100 | display: block; 101 | height: 100%; 102 | width: 100%; 103 | } 104 | 105 | table.tiny-button td a { 106 | font-size: $button-font-tny; 107 | font-weight: normal; 108 | } 109 | 110 | table.small-button td a { 111 | font-size: $button-font-sml; 112 | } 113 | 114 | table.medium-button td a { 115 | font-size: $button-font-med; 116 | } 117 | 118 | table.large-button td a { 119 | font-size: $button-font-lrg; 120 | } 121 | 122 | table.button:hover td, 123 | table.button:visited td, 124 | table.button:active td { 125 | background: color2hex($primary-color) !important; 126 | } 127 | 128 | table.button:hover td a, 129 | table.button:visited td a, 130 | table.button:active td a { 131 | color: color2hex($button-font-color) !important; 132 | } 133 | 134 | table.button:hover td, 135 | table.tiny-button:hover td, 136 | table.small-button:hover td, 137 | table.medium-button:hover td, 138 | table.large-button:hover td { 139 | background: color2hex($primary-color) !important; 140 | } 141 | 142 | table.button:hover td a, 143 | table.button:active td a, 144 | table.button td a:visited, 145 | table.tiny-button:hover td a, 146 | table.tiny-button:active td a, 147 | table.tiny-button td a:visited, 148 | table.small-button:hover td a, 149 | table.small-button:active td a, 150 | table.small-button td a:visited, 151 | table.medium-button:hover td a, 152 | table.medium-button:active td a, 153 | table.medium-button td a:visited, 154 | table.large-button:hover td a, 155 | table.large-button:active td a, 156 | table.large-button td a:visited { 157 | color: color2hex($button-font-color) !important; 158 | } 159 | 160 | table.secondary td { 161 | background: color2hex($secondary-color); 162 | border-color: color2hex($secondary-border-color); 163 | color: color2hex($button-font-color-alt); 164 | } 165 | 166 | table.secondary td a { 167 | color: color2hex($button-font-color-alt); 168 | } 169 | 170 | table.secondary:hover td { 171 | background: color2hex($secondary-border-color) !important; 172 | color: color2hex($button-font-color-alt); 173 | } 174 | 175 | table.secondary:hover td a, 176 | table.secondary td a:visited, 177 | table.secondary:active td a { 178 | color: color2hex($button-font-color-alt) !important; 179 | } 180 | 181 | table.success td { 182 | background: color2hex($success-color); 183 | border-color: color2hex($alert-border-color); 184 | } 185 | 186 | table.success:hover td { 187 | background: color2hex($alert-border-color) !important; 188 | } 189 | 190 | table.alert td { 191 | background: color2hex($alert-color); 192 | border-color: color2hex($success-border-color); 193 | } 194 | 195 | table.alert:hover td { 196 | background: color2hex($success-border-color) !important; 197 | } 198 | 199 | table.radius td { 200 | -webkit-border-radius: $global-radius; 201 | -moz-border-radius: $global-radius; 202 | border-radius: $global-radius; 203 | } 204 | 205 | table.round td { 206 | -webkit-border-radius: $global-rounded; 207 | -moz-border-radius: $global-rounded; 208 | border-radius: $global-rounded; 209 | } 210 | } 211 | } -------------------------------------------------------------------------------- /app/templates/email_templates/basic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 132 | 133 |
12 |
13 | 14 | 15 | 32 | 33 |
16 |
17 | 18 | 19 | 28 | 29 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
BASIC
27 |
30 |
31 |
34 | 35 | 36 | 37 | 127 | 128 |
38 | 39 | 40 | 52 | 53 |
41 | 42 | 43 | 48 | 49 | 50 |
44 |

Hi, Susan Calvin

45 |

Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae.

46 |

Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. consequat vel lacus. Sed iaculis pulvinar ligula, ornare fringilla ante viverra et. In hac habitasse platea dictumst. Donec vel orci mi, eu congue justo. Integer eget odio est, eget malesuada lorem. Aenean sed tellus dui, vitae viverra risus. Nullam massa sapien, pulvinar eleifend fringilla id, convallis eget nisi. Mauris a sagittis dui. Pellentesque non lacinia mi. Fusce sit amet libero sit amet erat venenatis sollicitudin vitae vel eros. Cras nunc sapien, interdum sit amet porttitor ut, congue quis urna.

47 |
51 |
54 | 55 | 56 | 66 | 67 |
57 | 58 | 59 | 62 | 63 | 64 |
60 |

Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. Click it! »

61 |
65 |
68 | 69 | 70 | 95 | 107 | 108 |
71 | 72 | 73 | 91 | 92 | 93 |
74 |
Connect With Us:
75 | 76 | 77 | 78 | 79 |
80 | 81 | 82 | 83 | 84 |
85 | 86 | 87 | 88 | 89 |
Google +
90 |
94 | 		96 | 97 | 98 | 103 | 104 | 105 |
99 |
Contact Info:
100 |

Phone: 408.341.0600

101 |

Email: hseldon@trantor.com

102 |
106 |
109 | 110 | 111 | 123 | 124 |
112 | 113 | 114 | 119 | 120 | 121 |
115 |
116 |

Terms | Privacy | Unsubscribe

117 |
118 |
122 |
125 | 126 |
129 | 130 |
131 |
134 | 135 | -------------------------------------------------------------------------------- /app/templates/email_templates/hero.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 165 | 166 |
12 |
13 | 14 | 15 | 32 | 33 |
16 |
17 | 18 | 19 | 28 | 29 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
BASIC
27 |
30 |
31 |
34 | 35 | 36 | 37 | 160 | 161 |
38 | 39 | 40 | 41 | 52 | 53 |
42 | 43 | 44 | 48 | 49 | 50 |
45 |

Hi, Elijah Baily

46 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.

47 |
51 |
54 | 55 | 56 | 66 | 67 |
57 | 58 | 59 | 62 | 63 | 64 |
60 |

Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. Click it! »

61 |
65 |
68 | 69 | 70 | 81 | 82 |
71 | 72 | 73 | 77 | 78 | 79 |
74 |

Title Ipsum This is a note.

75 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

76 |
80 |
83 | 84 | 85 | 99 | 100 |
86 | 87 | 88 | 95 | 96 | 97 |
89 | 90 | 91 | 92 | 93 |
Click Me!
94 |
98 |
101 | 102 | 103 | 128 | 140 | 141 |
104 | 105 | 106 | 124 | 125 | 126 |
107 |
Connect With Us:
108 | 109 | 110 | 111 | 112 |
113 | 114 | 115 | 116 | 117 |
118 | 119 | 120 | 121 | 122 |
Google +
123 |
127 | 		129 | 130 | 131 | 136 | 137 | 138 |
132 |
Contact Info:
133 |

Phone: 408.341.0600

134 |

Email: hseldon@trantor.com

135 |
139 |
142 | 143 | 144 | 156 | 157 |
145 | 146 | 147 | 152 | 153 | 154 |
148 |
149 |

Terms | Privacy | Unsubscribe

150 |
151 |
155 |
158 | 159 |
162 | 163 |
164 |
167 | 168 | -------------------------------------------------------------------------------- /app/templates/email_templates/sidebar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 181 | 182 |
12 |
13 | 14 | 15 | 32 | 33 |
16 |
17 | 18 | 19 | 28 | 29 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
BASIC
27 |
30 |
31 |
34 |
35 | 36 | 37 | 176 | 177 |
38 | 39 | 40 | 41 | 75 | 155 | 156 |
42 | 43 | 44 | 49 | 50 | 51 |
45 |

Hello,
Han Fastolfe

46 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.

47 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet.

48 |
52 | 53 | 54 | 57 | 58 | 59 |
55 |

Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. Click it! »

56 |
60 | 61 | 62 | 71 | 72 | 73 |

63 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.

64 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet.

65 | 66 | 67 | 68 | 69 |
Click Me!
70 |
74 | 		76 | 77 | 78 | 123 | 124 | 125 |
79 |
Header Thing
80 |

Sub-head or something

81 | 82 | 83 | 84 | 85 |
Just a Plain Link »
86 |
87 | 88 | 89 | 90 | 91 |
Just a Plain Link »
92 |
93 | 94 | 95 | 96 | 97 |
Just a Plain Link »
98 |
99 | 100 | 101 | 102 | 103 |
Just a Plain Link »
104 |
105 | 106 | 107 | 108 | 109 |
Just a Plain Link »
110 |
111 | 112 | 113 | 114 | 115 |
Just a Plain Link »
116 |
117 | 118 | 119 | 120 | 121 |
Just a Plain Link »
122 |

126 | 127 | 128 | 151 | 152 | 153 |
129 |
Connect With Us:
130 | 131 | 132 | 133 | 134 | 135 |
136 | 137 | 138 | 139 | 140 | 141 |
142 | 143 | 144 | 145 | 146 |
Google +

147 |
Contact Info:
148 |

Phone: 408.341.0600

149 |

Email: hseldon@trantor.com

150 |
154 |


157 | 158 | 159 | 160 | 172 | 173 |
161 | 162 | 163 | 168 | 169 | 170 |
164 |
165 |

Terms | Privacy | Unsubscribe

166 |
167 |
171 |
174 | 175 |
178 | 179 |
180 |
183 | 184 | -------------------------------------------------------------------------------- /app/templates/email_templates/sidebar-hero.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 187 | 188 |
12 |
13 | 14 | 15 | 32 | 33 |
16 |
17 | 18 | 19 | 28 | 29 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
BASIC
27 |
30 |
31 |
34 |
35 | 36 | 37 | 182 | 183 |
38 | 39 | 40 | 41 | 60 | 61 |
42 | 43 | 44 | 48 | 49 | 50 |
45 |

Welcome, Daneel Olivan

46 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.

47 |
51 | 52 | 53 | 56 | 57 | 58 |
54 |

Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. Click it! »

55 |
59 |

62 | 63 | 64 | 65 | 81 | 161 | 162 |
66 | 67 | 68 | 77 | 78 | 79 |
69 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet.

70 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet.

71 | 72 | 73 | 74 | 75 |
Click Me!
76 |
80 | 		82 | 83 | 84 | 129 | 130 | 131 |
85 |
Header Thing
86 |

Sub-head or something

87 | 88 | 89 | 90 | 91 |
Just a Plain Link »
92 |
93 | 94 | 95 | 96 | 97 |
Just a Plain Link »
98 |
99 | 100 | 101 | 102 | 103 |
Just a Plain Link »
104 |
105 | 106 | 107 | 108 | 109 |
Just a Plain Link »
110 |
111 | 112 | 113 | 114 | 115 |
Just a Plain Link »
116 |
117 | 118 | 119 | 120 | 121 |
Just a Plain Link »
122 |
123 | 124 | 125 | 126 | 127 |
Just a Plain Link »
128 |

132 | 133 | 134 | 157 | 158 | 159 |
135 |
Connect With Us:
136 | 137 | 138 | 139 | 140 | 141 |
142 | 143 | 144 | 145 | 146 | 147 |
148 | 149 | 150 | 151 | 152 |
Google +

153 |
Contact Info:
154 |

Phone: 408.341.0600

155 |

Email: hseldon@trantor.com

156 |
160 |


163 | 164 | 165 | 166 | 178 | 179 |
167 | 168 | 169 | 174 | 175 | 176 |
170 |
171 |

Terms | Privacy | Unsubscribe

172 |
173 |
177 |
180 | 181 |
184 | 185 |
186 |
189 | 190 | -------------------------------------------------------------------------------- /app/templates/css/ink.css: -------------------------------------------------------------------------------- 1 | /********************************************** 2 | * Ink v1.0.5 - Copyright 2013 ZURB Inc * 3 | **********************************************/ 4 | 5 | /* Client-specific Styles & Reset */ 6 | 7 | #outlook a { 8 | padding:0; 9 | } 10 | 11 | body{ 12 | width:100% !important; 13 | min-width: 100%; 14 | -webkit-text-size-adjust:100%; 15 | -ms-text-size-adjust:100%; 16 | margin:0; 17 | padding:0; 18 | } 19 | 20 | .ExternalClass { 21 | width:100%; 22 | } 23 | 24 | .ExternalClass, 25 | .ExternalClass p, 26 | .ExternalClass span, 27 | .ExternalClass font, 28 | .ExternalClass td, 29 | .ExternalClass div { 30 | line-height: 100%; 31 | } 32 | 33 | #backgroundTable { 34 | margin:0; 35 | padding:0; 36 | width:100% !important; 37 | line-height: 100% !important; 38 | } 39 | 40 | img { 41 | outline:none; 42 | text-decoration:none; 43 | -ms-interpolation-mode: bicubic; 44 | width: auto; 45 | max-width: 100%; 46 | float: left; 47 | clear: both; 48 | display: block; 49 | } 50 | 51 | center { 52 | width: 100%; 53 | min-width: 580px; 54 | } 55 | 56 | a img { 57 | border: none; 58 | } 59 | 60 | p { 61 | margin: 0 0 0 10px; 62 | } 63 | 64 | table { 65 | border-spacing: 0; 66 | border-collapse: collapse; 67 | } 68 | 69 | td { 70 | word-break: break-word; 71 | -webkit-hyphens: auto; 72 | -moz-hyphens: auto; 73 | hyphens: auto; 74 | border-collapse: collapse !important; 75 | } 76 | 77 | table, tr, td { 78 | padding: 0; 79 | vertical-align: top; 80 | text-align: left; 81 | } 82 | 83 | hr { 84 | color: #d9d9d9; 85 | background-color: #d9d9d9; 86 | height: 1px; 87 | border: none; 88 | } 89 | 90 | /* Responsive Grid */ 91 | 92 | table.body { 93 | height: 100%; 94 | width: 100%; 95 | } 96 | 97 | table.container { 98 | width: 580px; 99 | margin: 0 auto; 100 | text-align: inherit; 101 | } 102 | 103 | table.row { 104 | padding: 0px; 105 | width: 100%; 106 | position: relative; 107 | } 108 | 109 | table.container table.row { 110 | display: block; 111 | } 112 | 113 | td.wrapper { 114 | padding: 10px 20px 0px 0px; 115 | position: relative; 116 | } 117 | 118 | table.columns, 119 | table.column { 120 | margin: 0 auto; 121 | } 122 | 123 | table.columns td, 124 | table.column td { 125 | padding: 0px 0px 10px; 126 | } 127 | 128 | table.columns td.sub-columns, 129 | table.column td.sub-columns, 130 | table.columns td.sub-column, 131 | table.column td.sub-column { 132 | padding-right: 10px; 133 | } 134 | 135 | td.sub-column, td.sub-columns { 136 | min-width: 0px; 137 | } 138 | 139 | table.row td.last, 140 | table.container td.last { 141 | padding-right: 0px; 142 | } 143 | 144 | table.one { width: 30px; } 145 | table.two { width: 80px; } 146 | table.three { width: 130px; } 147 | table.four { width: 180px; } 148 | table.five { width: 230px; } 149 | table.six { width: 280px; } 150 | table.seven { width: 330px; } 151 | table.eight { width: 380px; } 152 | table.nine { width: 430px; } 153 | table.ten { width: 480px; } 154 | table.eleven { width: 530px; } 155 | table.twelve { width: 580px; } 156 | 157 | table.one center { min-width: 30px; } 158 | table.two center { min-width: 80px; } 159 | table.three center { min-width: 130px; } 160 | table.four center { min-width: 180px; } 161 | table.five center { min-width: 230px; } 162 | table.six center { min-width: 280px; } 163 | table.seven center { min-width: 330px; } 164 | table.eight center { min-width: 380px; } 165 | table.nine center { min-width: 430px; } 166 | table.ten center { min-width: 480px; } 167 | table.eleven center { min-width: 530px; } 168 | table.twelve center { min-width: 580px; } 169 | 170 | table.one .panel center { min-width: 10px; } 171 | table.two .panel center { min-width: 60px; } 172 | table.three .panel center { min-width: 110px; } 173 | table.four .panel center { min-width: 160px; } 174 | table.five .panel center { min-width: 210px; } 175 | table.six .panel center { min-width: 260px; } 176 | table.seven .panel center { min-width: 310px; } 177 | table.eight .panel center { min-width: 360px; } 178 | table.nine .panel center { min-width: 410px; } 179 | table.ten .panel center { min-width: 460px; } 180 | table.eleven .panel center { min-width: 510px; } 181 | table.twelve .panel center { min-width: 560px; } 182 | 183 | .body .columns td.one, 184 | .body .column td.one { width: 8.333333%; } 185 | .body .columns td.two, 186 | .body .column td.two { width: 16.666666%; } 187 | .body .columns td.three, 188 | .body .column td.three { width: 25%; } 189 | .body .columns td.four, 190 | .body .column td.four { width: 33.333333%; } 191 | .body .columns td.five, 192 | .body .column td.five { width: 41.666666%; } 193 | .body .columns td.six, 194 | .body .column td.six { width: 50%; } 195 | .body .columns td.seven, 196 | .body .column td.seven { width: 58.333333%; } 197 | .body .columns td.eight, 198 | .body .column td.eight { width: 66.666666%; } 199 | .body .columns td.nine, 200 | .body .column td.nine { width: 75%; } 201 | .body .columns td.ten, 202 | .body .column td.ten { width: 83.333333%; } 203 | .body .columns td.eleven, 204 | .body .column td.eleven { width: 91.666666%; } 205 | .body .columns td.twelve, 206 | .body .column td.twelve { width: 100%; } 207 | 208 | td.offset-by-one { padding-left: 50px; } 209 | td.offset-by-two { padding-left: 100px; } 210 | td.offset-by-three { padding-left: 150px; } 211 | td.offset-by-four { padding-left: 200px; } 212 | td.offset-by-five { padding-left: 250px; } 213 | td.offset-by-six { padding-left: 300px; } 214 | td.offset-by-seven { padding-left: 350px; } 215 | td.offset-by-eight { padding-left: 400px; } 216 | td.offset-by-nine { padding-left: 450px; } 217 | td.offset-by-ten { padding-left: 500px; } 218 | td.offset-by-eleven { padding-left: 550px; } 219 | 220 | td.expander { 221 | visibility: hidden; 222 | width: 0px; 223 | padding: 0 !important; 224 | } 225 | 226 | table.columns .text-pad, 227 | table.column .text-pad { 228 | padding-left: 10px; 229 | padding-right: 10px; 230 | } 231 | 232 | table.columns .left-text-pad, 233 | table.columns .text-pad-left, 234 | table.column .left-text-pad, 235 | table.column .text-pad-left { 236 | padding-left: 10px; 237 | } 238 | 239 | table.columns .right-text-pad, 240 | table.columns .text-pad-right, 241 | table.column .right-text-pad, 242 | table.column .text-pad-right { 243 | padding-right: 10px; 244 | } 245 | 246 | /* Block Grid */ 247 | 248 | .block-grid { 249 | width: 100%; 250 | max-width: 580px; 251 | } 252 | 253 | .block-grid td { 254 | display: inline-block; 255 | padding:10px; 256 | } 257 | 258 | .two-up td { 259 | width:270px; 260 | } 261 | 262 | .three-up td { 263 | width:173px; 264 | } 265 | 266 | .four-up td { 267 | width:125px; 268 | } 269 | 270 | .five-up td { 271 | width:96px; 272 | } 273 | 274 | .six-up td { 275 | width:76px; 276 | } 277 | 278 | .seven-up td { 279 | width:62px; 280 | } 281 | 282 | .eight-up td { 283 | width:52px; 284 | } 285 | 286 | /* Alignment & Visibility Classes */ 287 | 288 | table.center, td.center { 289 | text-align: center; 290 | } 291 | 292 | h1.center, 293 | h2.center, 294 | h3.center, 295 | h4.center, 296 | h5.center, 297 | h6.center { 298 | text-align: center; 299 | } 300 | 301 | span.center { 302 | display: block; 303 | width: 100%; 304 | text-align: center; 305 | } 306 | 307 | img.center { 308 | margin: 0 auto; 309 | float: none; 310 | } 311 | 312 | .show-for-small, 313 | .hide-for-desktop { 314 | display: none; 315 | } 316 | 317 | /* Typography */ 318 | 319 | body, table.body, h1, h2, h3, h4, h5, h6, p, td { 320 | color: #222222; 321 | font-family: "Helvetica", "Arial", sans-serif; 322 | font-weight: normal; 323 | padding:0; 324 | margin: 0; 325 | text-align: left; 326 | line-height: 1.3; 327 | } 328 | 329 | h1, h2, h3, h4, h5, h6 { 330 | word-break: normal; 331 | } 332 | 333 | h1 {font-size: 40px;} 334 | h2 {font-size: 36px;} 335 | h3 {font-size: 32px;} 336 | h4 {font-size: 28px;} 337 | h5 {font-size: 24px;} 338 | h6 {font-size: 20px;} 339 | body, table.body, p, td {font-size: 14px;line-height:19px;} 340 | 341 | p.lead, p.lede, p.leed { 342 | font-size: 18px; 343 | line-height:21px; 344 | } 345 | 346 | p { 347 | margin-bottom: 10px; 348 | } 349 | 350 | small { 351 | font-size: 10px; 352 | } 353 | 354 | a { 355 | color: #2ba6cb; 356 | text-decoration: none; 357 | } 358 | 359 | a:hover { 360 | color: #2795b6 !important; 361 | } 362 | 363 | a:active { 364 | color: #2795b6 !important; 365 | } 366 | 367 | a:visited { 368 | color: #2ba6cb !important; 369 | } 370 | 371 | h1 a, 372 | h2 a, 373 | h3 a, 374 | h4 a, 375 | h5 a, 376 | h6 a { 377 | color: #2ba6cb; 378 | } 379 | 380 | h1 a:active, 381 | h2 a:active, 382 | h3 a:active, 383 | h4 a:active, 384 | h5 a:active, 385 | h6 a:active { 386 | color: #2ba6cb !important; 387 | } 388 | 389 | h1 a:visited, 390 | h2 a:visited, 391 | h3 a:visited, 392 | h4 a:visited, 393 | h5 a:visited, 394 | h6 a:visited { 395 | color: #2ba6cb !important; 396 | } 397 | 398 | /* Panels */ 399 | 400 | .panel { 401 | background: #f2f2f2; 402 | border: 1px solid #d9d9d9; 403 | padding: 10px !important; 404 | } 405 | 406 | .sub-grid table { 407 | width: 100%; 408 | } 409 | 410 | .sub-grid td.sub-columns { 411 | padding-bottom: 0; 412 | } 413 | 414 | /* Buttons */ 415 | 416 | table.button, 417 | table.tiny-button, 418 | table.small-button, 419 | table.medium-button, 420 | table.large-button { 421 | width: 100%; 422 | overflow: hidden; 423 | } 424 | 425 | table.button td, 426 | table.tiny-button td, 427 | table.small-button td, 428 | table.medium-button td, 429 | table.large-button td { 430 | display: block; 431 | width: auto !important; 432 | text-align: center; 433 | background: #2ba6cb; 434 | border: 1px solid #2284a1; 435 | color: #ffffff; 436 | padding: 8px 0; 437 | } 438 | 439 | table.tiny-button td { 440 | padding: 5px 0 4px; 441 | } 442 | 443 | table.small-button td { 444 | padding: 8px 0 7px; 445 | } 446 | 447 | table.medium-button td { 448 | padding: 12px 0 10px; 449 | } 450 | 451 | table.large-button td { 452 | padding: 21px 0 18px; 453 | } 454 | 455 | table.button td a, 456 | table.tiny-button td a, 457 | table.small-button td a, 458 | table.medium-button td a, 459 | table.large-button td a { 460 | font-weight: bold; 461 | text-decoration: none; 462 | font-family: Helvetica, Arial, sans-serif; 463 | color: #ffffff; 464 | font-size: 16px; 465 | } 466 | 467 | table.tiny-button td a { 468 | font-size: 12px; 469 | font-weight: normal; 470 | } 471 | 472 | table.small-button td a { 473 | font-size: 16px; 474 | } 475 | 476 | table.medium-button td a { 477 | font-size: 20px; 478 | } 479 | 480 | table.large-button td a { 481 | font-size: 24px; 482 | } 483 | 484 | table.button:hover td, 485 | table.button:visited td, 486 | table.button:active td { 487 | background: #2795b6 !important; 488 | } 489 | 490 | table.button:hover td a, 491 | table.button:visited td a, 492 | table.button:active td a { 493 | color: #fff !important; 494 | } 495 | 496 | table.button:hover td, 497 | table.tiny-button:hover td, 498 | table.small-button:hover td, 499 | table.medium-button:hover td, 500 | table.large-button:hover td { 501 | background: #2795b6 !important; 502 | } 503 | 504 | table.button:hover td a, 505 | table.button:active td a, 506 | table.button td a:visited, 507 | table.tiny-button:hover td a, 508 | table.tiny-button:active td a, 509 | table.tiny-button td a:visited, 510 | table.small-button:hover td a, 511 | table.small-button:active td a, 512 | table.small-button td a:visited, 513 | table.medium-button:hover td a, 514 | table.medium-button:active td a, 515 | table.medium-button td a:visited, 516 | table.large-button:hover td a, 517 | table.large-button:active td a, 518 | table.large-button td a:visited { 519 | color: #ffffff !important; 520 | } 521 | 522 | table.secondary td { 523 | background: #e9e9e9; 524 | border-color: #d0d0d0; 525 | color: #555; 526 | } 527 | 528 | table.secondary td a { 529 | color: #555; 530 | } 531 | 532 | table.secondary:hover td { 533 | background: #d0d0d0 !important; 534 | color: #555; 535 | } 536 | 537 | table.secondary:hover td a, 538 | table.secondary td a:visited, 539 | table.secondary:active td a { 540 | color: #555 !important; 541 | } 542 | 543 | table.success td { 544 | background: #5da423; 545 | border-color: #457a1a; 546 | } 547 | 548 | table.success:hover td { 549 | background: #457a1a !important; 550 | } 551 | 552 | table.alert td { 553 | background: #c60f13; 554 | border-color: #970b0e; 555 | } 556 | 557 | table.alert:hover td { 558 | background: #970b0e !important; 559 | } 560 | 561 | table.radius td { 562 | -webkit-border-radius: 3px; 563 | -moz-border-radius: 3px; 564 | border-radius: 3px; 565 | } 566 | 567 | table.round td { 568 | -webkit-border-radius: 500px; 569 | -moz-border-radius: 500px; 570 | border-radius: 500px; 571 | } 572 | 573 | /* Outlook First */ 574 | 575 | body.outlook p { 576 | display: inline !important; 577 | } 578 | 579 | /* Media Queries */ 580 | 581 | @media only screen and (max-width: 600px) { 582 | 583 | table[class="body"] img { 584 | width: auto !important; 585 | height: auto !important; 586 | } 587 | 588 | table[class="body"] center { 589 | min-width: 0 !important; 590 | } 591 | 592 | table[class="body"] .container { 593 | width: 95% !important; 594 | } 595 | 596 | table[class="body"] .row { 597 | width: 100% !important; 598 | display: block !important; 599 | } 600 | 601 | table[class="body"] .wrapper { 602 | display: block !important; 603 | padding-right: 0 !important; 604 | } 605 | 606 | table[class="body"] .columns, 607 | table[class="body"] .column { 608 | table-layout: fixed !important; 609 | float: none !important; 610 | width: 100% !important; 611 | padding-right: 0px !important; 612 | padding-left: 0px !important; 613 | display: block !important; 614 | } 615 | 616 | table[class="body"] .wrapper.first .columns, 617 | table[class="body"] .wrapper.first .column { 618 | display: table !important; 619 | } 620 | 621 | table[class="body"] table.columns td, 622 | table[class="body"] table.column td { 623 | width: 100% !important; 624 | } 625 | 626 | table[class="body"] .columns td.one, 627 | table[class="body"] .column td.one { width: 8.333333% !important; } 628 | table[class="body"] .columns td.two, 629 | table[class="body"] .column td.two { width: 16.666666% !important; } 630 | table[class="body"] .columns td.three, 631 | table[class="body"] .column td.three { width: 25% !important; } 632 | table[class="body"] .columns td.four, 633 | table[class="body"] .column td.four { width: 33.333333% !important; } 634 | table[class="body"] .columns td.five, 635 | table[class="body"] .column td.five { width: 41.666666% !important; } 636 | table[class="body"] .columns td.six, 637 | table[class="body"] .column td.six { width: 50% !important; } 638 | table[class="body"] .columns td.seven, 639 | table[class="body"] .column td.seven { width: 58.333333% !important; } 640 | table[class="body"] .columns td.eight, 641 | table[class="body"] .column td.eight { width: 66.666666% !important; } 642 | table[class="body"] .columns td.nine, 643 | table[class="body"] .column td.nine { width: 75% !important; } 644 | table[class="body"] .columns td.ten, 645 | table[class="body"] .column td.ten { width: 83.333333% !important; } 646 | table[class="body"] .columns td.eleven, 647 | table[class="body"] .column td.eleven { width: 91.666666% !important; } 648 | table[class="body"] .columns td.twelve, 649 | table[class="body"] .column td.twelve { width: 100% !important; } 650 | 651 | table[class="body"] td.offset-by-one, 652 | table[class="body"] td.offset-by-two, 653 | table[class="body"] td.offset-by-three, 654 | table[class="body"] td.offset-by-four, 655 | table[class="body"] td.offset-by-five, 656 | table[class="body"] td.offset-by-six, 657 | table[class="body"] td.offset-by-seven, 658 | table[class="body"] td.offset-by-eight, 659 | table[class="body"] td.offset-by-nine, 660 | table[class="body"] td.offset-by-ten, 661 | table[class="body"] td.offset-by-eleven { 662 | padding-left: 0 !important; 663 | } 664 | 665 | table[class="body"] table.columns td.expander { 666 | width: 1px !important; 667 | } 668 | 669 | table[class="body"] .right-text-pad, 670 | table[class="body"] .text-pad-right { 671 | padding-left: 10px !important; 672 | } 673 | 674 | table[class="body"] .left-text-pad, 675 | table[class="body"] .text-pad-left { 676 | padding-right: 10px !important; 677 | } 678 | 679 | table[class="body"] .hide-for-small, 680 | table[class="body"] .show-for-desktop { 681 | display: none !important; 682 | } 683 | 684 | table[class="body"] .show-for-small, 685 | table[class="body"] .hide-for-desktop { 686 | display: inherit !important; 687 | } 688 | } 689 | --------------------------------------------------------------------------------