├── .gitignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── gulp.config.js
├── gulpfile.js
├── nodemailer.config.js.example
├── package.json
├── source
    ├── images
    │   ├── 200x50.png
    │   └── 580x300.png
    ├── layouts
    │   ├── basic.html
    │   ├── hero.html
    │   └── sidebar-hero.html
    ├── partials
    │   ├── basic
    │   │   ├── callout.html
    │   │   ├── connect.html
    │   │   └── introduction.html
    │   ├── boilerplate
    │   │   ├── full-width.html
    │   │   ├── three-columns.html
    │   │   └── two-columns.html
    │   ├── footer.html
    │   ├── header.html
    │   ├── hero
    │   │   ├── callout.html
    │   │   ├── connect.html
    │   │   ├── introduction.html
    │   │   └── secondary-copy.html
    │   └── sidebar-hero
    │   │   ├── introduction.html
    │   │   ├── left-column.html
    │   │   ├── panel.html
    │   │   ├── right-column.html
    │   │   └── secondary-copy.html
    └── stylesheets
    │   ├── main.scss
    │   ├── media-queries.scss
    │   └── modules
    │       ├── _buttons.scss
    │       ├── _colors.scss
    │       ├── _custom.scss
    │       ├── _grid.scss
    │       ├── _panels.scss
    │       ├── _reset.scss
    │       ├── _typography.scss
    │       └── _utilities.scss
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
1 | dist/
2 | node_modules/
3 | nodemailer.config.js
4 | source/.DS_Store


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Change Log
 2 | List of feature updates and fixes.
 3 | 
 4 | ## [1.0.2] - 2015-09-15
 5 | ### Changed
 6 | - Full Url paths to images when testing with Nodemailer
 7 | 
 8 | ## [1.0.0] - 2015-09-14
 9 | ### Added
10 | - Send test emails via Nodemailer
11 | 
12 | ## [0.3.0] - 2015-09-13
13 | ### Added
14 | - Copy to clipboard
15 | - Clone a template
16 | - Remove a template
17 | 
18 | ## 0.2.x - 2015-09-13
19 | ### Added
20 | - Changelog file
21 | - Features so far can be found [here](https://github.com/koomai/bulletproof-email/blob/v0.2.3/README.md).
22 | 
23 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015.
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ## Bulletproof Email  
  2 | 
  3 | **Bulletproof Email** is an HTML email template builder powered by Gulp.
  4 | 
  5 | The main features are:
  6 | 
  7 | *   A basic front-end templating system with layouts and partials
  8 | *   Modular sections for different email layouts
  9 | *   SASS stylesheets
 10 | *   CSS inliner
 11 | *   Images and HTML Minifier
 12 | *   Gulp build tool and BrowserSync for live reloading
 13 | *   Send test emails via [Nodemailer](https://github.com/andris9/nodemailer)
 14 | *   Gulp tasks for an efficient workflow  
 15 | 
 16 | Bulletproof Email utilises [Zurb Ink](http://zurb.com/ink/templates.php) for its starter templates – however, this is not a requirement.
 17 | 
 18 | ### Getting started
 19 | 
 20 | ##### Install node.js
 21 | 
 22 | You can download it from [nodejs.org](https://nodejs.org/)
 23 | 
 24 | ##### Ensure you have the latest version of the npm package manager
 25 | 
 26 | `sudo npm install npm -g`
 27 | 
 28 | ##### Install gulp globally
 29 | 
 30 | `npm install --global gulp`
 31 | 
 32 | ##### Install the gulp plugins in package.json
 33 | 
 34 | ```shell
 35 | $ npm install
 36 | # Or using Yarn
 37 | $ yarn install
 38 | ```
 39 | 
 40 | #### Usage
 41 | 
 42 | `gulp serve` - starts a local webserver on **[http://localhost:8080](http://localhost:8080)**  
 43 | `gulp serve --port=8888` - starts a local webserver on **[http://localhost:8888](http://localhost:8888)**  
 44 | `gulp serve --open` - opens the URL on your default browser automatically.  
 45 | `gulp serve -o` - alias for the above task  
 46 | 
 47 | `gulp build` - builds production ready files in *dist/production* folder.  
 48 | `gulp build --minify` - minifies your HTML files  
 49 | `gulp build --zip` - builds files + creates a zip file of your images directory (for Campaign Monitor)  
 50 | `gulp build --zip=all` - builds files and creates a zip file of everything (for Mailchimp)  
 51 | 
 52 | `gulp mail --template=NAME` - send a test email using your default configuration in `nodemailer.config.js`  
 53 | `gulp mail -t NAME` - alias for the above task  
 54 | `gulp mail --template=NAME --to=email@example.com --subject='Lorem Ipsum'` - send a test email with overrides  
 55 | 
 56 | `gulp copy --template=NAME` - copies your built template to the clipboard  
 57 | `gulp copy -t NAME` - alias for the above task  
 58 | 
 59 | `gulp clone --from=NAME --to=NEW` - clones template NAME into NEW  
 60 | 
 61 | `gulp remove --template=NAME` - removes template NAME from source and build directories  
 62 | `gulp remove -t NAME` - alias for the above task  
 63 | 
 64 | `gulp clean` - empty your build directories  
 65 | 
 66 | Continue reading below for more details  
 67 | 
 68 | ### Working with files
 69 | 
 70 | All files are in the *source* folder organised into the following:
 71 | 
 72 | *   **layouts** - layout templates
 73 | *   **partials** - partial files, e.g. header, footer and other components
 74 | *   **stylesheets** - SASS files for all styling
 75 | *   **images** - all images go here
 76 | 
 77 | ### HTML
 78 | Your master templates in `layouts` consist of files from `partials`,
 79 | following the convention of most templating systems.
 80 | 
 81 | The syntax to include files is:
 82 | 
 83 | `{{ include('../partials/header.html') }}`
 84 | 
 85 | You can also pass variables to your partials.
 86 | 
 87 | ##### *Layout*
 88 | 
 89 | `{{ include('../partials/header.html', { "templateLabel" : "BASIC" }) }}`
 90 | 
 91 | ##### *Partial*
 92 | 
 93 | `<span class="template-label">{{ templateLabel }}</span>`
 94 | 
 95 | **Note**: Make sure there is a space after the opening double braces and before the closing double braces.
 96 | 
 97 | 
 98 | ### SASS
 99 | 
100 | The styles have been broken down into smaller modules in `stylesheets/modules`.
101 | 
102 | Custom styling can be added to `stylesheets/modules/_custom.scss`.
103 | You can also create your own files and import them into `stylesheets/main.scss`.
104 | 
105 | **Note:** Add all styling for smallers screens (< 580px) to `stylesheets/media-queries.scss`. This is included separately into the HTML files.
106 | 
107 | ### Local server
108 | 
109 | Run `gulp serve` to start a local webserver.
110 | Visit **[http://localhost:8080](http://localhost:8080)** on your browser to test your templates.
111 | 
112 | You can run `gulp serve --open` or `gulp serve -o` to open the URL automatically on your default browser. You can set this option permanently by setting `browsersync.open` to `true` in `gulp.config.js`.
113 | 
114 | This also instantiates a watcher that:
115 | 
116 | *   watches for changes in the source folder
117 | *   compiles SASS to CSS
118 | *   builds the HTML files from the templates
119 | *   outputs latest files to *dist/local* folder
120 | *   uses Browsersync to reload the browser
121 | 
122 | You can also choose a different port by passing the `--port` argument, e.g. `gulp serve --port=8888`.  
123 | You can also change the port permanently in `gulp.config.js`.
124 | 
125 | ### Production files
126 | 
127 | Run `gulp build` to generate production-ready files.
128 | 
129 | This compiles production-ready HTML to the *dist/production* folder. It does the following:
130 | 
131 | *   compiles SASS to CSS
132 | *   builds the HTML files from the templates
133 | *   brings the CSS inline into the HTML and removes the CSS files (except `media-queries.css`)
134 | *   minifies the images (only those that have changed)
135 | 
136 | #### Minify
137 | 
138 | If your newsletters are very long, you should minify the HTML so that Gmail doesn't
139 | [clip them](https://www.campaignmonitor.com/forums/topic/8088/what-rule-does-gmail-use-to-decide-when-to-clip-a-message/).
140 | 
141 | Run `gulp build --minify` to minify your HTML files.
142 | 
143 | #### Zip files
144 | 
145 | Some email tools require zip files to upload new templates.
146 | 
147 | Run `gulp build --zip` to compress images only.
148 | 
149 | Run `gulp build --zip=all` to compress images and HTML.
150 | 
151 | ### Configuration
152 | 
153 | All configuration options are in the `gulp.config.js` file.  
154 | To send emails using Nodemailer, update `nodemailer.config.js` with your email credentials and other mail options.
155 | 
156 | ### Nodemailer
157 | 
158 | [Nodemailer](https://github.com/andris9/nodemailer) lets you quickly test your html email templates.
159 | 
160 | First update `nodemailer.config.js` with your email credentials and default mail options.
161 | 
162 | **Email credentials**
163 | 
164 | ```js
165 | transportOptions: {
166 |   service: 'mailgun',
167 |   auth: {
168 |     user: '',
169 |     pass: ''
170 |   }
171 | }
172 | ```
173 | 
174 | Nodemailer supports a lot of services -
175 | see the full list [here](https://github.com/andris9/nodemailer-wellknown#supported-services).
176 | To use your own SMTP configuration, see instructions [here](https://github.com/andris9/nodemailer-smtp-transport#usage).
177 | 
178 | **Mail Options**
179 | 
180 | ```js
181 | mailOptions: {
182 |   to: '',
183 |   from: '',
184 |   subject: ''
185 | }
186 | ```
187 | 
188 | Set default `to`, `from` and `subject` values. `to` and `subject` can be overridden by passing arguments to the task.
189 | 
190 | Finally, update `imageHost` with the full Url of the directory where your images are uploaded.
191 | The mail task replaces the relative paths with this Url.
192 | 
193 | `gulp mail --template=NAME`
194 | `gulp mail -t NAME`
195 | `gulp mail --template=NAME --to=email@example.com --subject='Lorem Ipsum'`
196 | 
197 | TODO: upload automatically to S3/Rackspace
198 | 
199 | ### Misc
200 | 
201 | Run `gulp clean` to clean up your build directories.
202 | 
203 | ### Contributing
204 | 
205 | To contribute, please fork the project and submit pull requests against the `develop` branch.
206 | 


--------------------------------------------------------------------------------
/gulp.config.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | * All gulpfile configuration options
 3 | */
 4 | 
 5 | var nodemailerConfig = require('./nodemailer.config')();
 6 | 
 7 | module.exports = function() {
 8 |   var sourceDir = 'source';
 9 |   var localDir = 'dist/local';
10 |   var productionDir = 'dist/production';
11 | 
12 |   var config = {
13 |     localDir: localDir,
14 |     productionDir: productionDir,
15 |     sourceDir: sourceDir,
16 |     localFiles: [
17 |       localDir + '/css/*.css', 
18 |       localDir + '/images/**/*', 
19 |       localDir + '/*.html'
20 |     ],
21 |     sourcePath: {
22 |       sass: sourceDir + '/stylesheets/**/*.scss',
23 |       html: sourceDir + '/**/*.html',
24 |       layouts: sourceDir + '/layouts/*.html',
25 |       images: sourceDir + '/images/**/*'
26 |     },
27 |     browsersync: {
28 |       port: 8080,
29 |       open: false,
30 |       notify: true
31 |     },
32 |     nodemailer: nodemailerConfig
33 |   };
34 |   return config;
35 | }


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
  1 | // Gulp packages
  2 | var gulp = require('gulp');
  3 | var sass = require('gulp-sass');
  4 | var fileinclude = require('gulp-file-include');
  5 | var inlineCss = require('gulp-inline-css');
  6 | var minifyHTML = require('gulp-minify-html');
  7 | var imagemin = require('gulp-imagemin');
  8 | var zip = require('gulp-zip');
  9 | var gulpIf = require('gulp-if');
 10 | var changed = require('gulp-changed');
 11 | var replace = require('gulp-replace');
 12 | var gutil = require('gulp-util');
 13 | var plumber = require('gulp-plumber');
 14 | var clipboard = require('gulp-clipboard');
 15 | var rename = require('gulp-rename');
 16 | var argv = require('yargs').argv;
 17 | var del = require('del');
 18 | var browserSync = require('browser-sync').create();
 19 | var nodemailer = require('nodemailer');
 20 | var fs = require('fs');
 21 | // Config files
 22 | var config = require('./gulp.config')();
 23 | 
 24 | // Local web server (Default localhost:8080)
 25 | // Pass argument --port=XXXX to change
 26 | gulp.task('connect', ['html'], function() {
 27 |   browserSync.init({
 28 |           // Serve files from the local directory
 29 |           server: {
 30 |               baseDir: config.localDir,
 31 |               directory: true
 32 |           },
 33 |           port: argv.port ? argv.port : config.browsersync.port,
 34 |           open: config.browsersync.open || (argv.open || (argv.o || false)),
 35 |           notify: config.browsersync.notify
 36 |       });
 37 | 
 38 |     gulp.watch([config.sourcePath.sass, config.sourcePath.html], ['html']);
 39 |     gulp.watch(config.sourcePath.images, ['images:local']);
 40 | 
 41 |     gulp.watch(config.localFiles)
 42 |       .on('change', browserSync.reload);
 43 | });
 44 | 
 45 | // Build CSS files
 46 | gulp.task('sass', function() {
 47 |   log('Compiling SASS to CSS');
 48 |   return gulp.src('source/stylesheets/*.scss')
 49 |     .pipe(plumber({ errorHandler: handleError }))
 50 |     .pipe(sass())
 51 |     .pipe(gulp.dest(config.localDir + '/css'));
 52 | });
 53 | 
 54 | // Compile Layouts into HTML files
 55 | gulp.task('html', ['sass'], function() {
 56 |   log('Compiling HTML Templates');
 57 |   return gulp.src(config.sourcePath.layouts)
 58 |       .pipe(fileinclude({
 59 |           prefix: '{{ ',
 60 |           suffix: ' }}',
 61 |           basepath: '@file'
 62 |       }))
 63 |       .pipe(gulp.dest(config.localDir));
 64 | });
 65 | 
 66 | // Inline all CSS styles
 67 | // Minify HTML (Optional argument: --minify) 
 68 | gulp.task('inline-css', ['html'], function() {
 69 |   log('Moving CSS inline');
 70 |   return gulp.src(config.localDir + '/*.html')
 71 |     .pipe(inlineCss({
 72 |             applyStyleTags: true,
 73 |             applyLinkTags: true,
 74 |             removeStyleTags: false,
 75 |             removeLinkTags: true
 76 |     }))
 77 |     .pipe(gulpIf(argv.minify, minifyHTML({ conditionals: true, spare: true, quotes: true})))
 78 |     .pipe(gulp.dest(config.productionDir));
 79 | });
 80 | 
 81 | // Copy Images folder
 82 | gulp.task('images:local', function () {
 83 |   log('Copying images');
 84 |   gulp.src(config.sourcePath.images)
 85 |     .pipe(gulp.dest(config.localDir + '/images'));
 86 | });
 87 | 
 88 | // Copy Images folder and Minify for production
 89 | gulp.task('images:production', function () {
 90 |   log('Minifying and Copying images');
 91 |   return gulp.src(config.sourcePath.images)
 92 |     .pipe(changed(config.productionDir + '/images'))
 93 |     .pipe(imagemin({ progressive: true }))
 94 |     .pipe(gulp.dest(config.productionDir + '/images'));
 95 | });
 96 | 
 97 | // Zip all files or images only
 98 | gulp.task('zip', ['images:production'], function () {
 99 |   if (! argv.zip) 
100 |     return;
101 |   log('Compressing images into zip file');
102 |   if(argv.zip == 'all') {
103 |     return gulp.src(config.productionDir + '/**/**')
104 |       .pipe(zip('all_files.zip'))
105 |       .pipe(gulp.dest(config.productionDir));
106 |   } else {
107 |     return gulp.src(config.productionDir + '/images/**/*')
108 |       .pipe(zip('images.zip'))
109 |       .pipe(gulp.dest(config.productionDir));
110 |   }
111 | });
112 | 
113 | // Empty distribution folders
114 | gulp.task('clean', function () {
115 |   log('Cleaning up generated files');
116 |   del([
117 |     config.productionDir + '/**/**', 
118 |     config.localDir + '/**/**'
119 |   ]);
120 | });
121 | 
122 | // Copy a template to the clipboard
123 | // Pass a template name as an argument --template=NAME or -t NAME
124 | gulp.task('copy', function() {
125 |   var template = argv.template ? argv.template : (argv.t ? argv.t : null);
126 | 
127 |   if (! template) {
128 |     return log('***ERROR***: Name of template is missing.\n', 'red');
129 |   }
130 |   // Copy to Clipboard
131 |   gulp.src(config.productionDir + '/' + template + '.html')
132 |     .pipe(clipboard());
133 | 
134 |   return log('Copied ' + gutil.colors.magenta(template + '.html') + ' to clipboard.\n');
135 | });
136 | 
137 | // Clone a Template
138 | gulp.task('clone', function() {
139 | 
140 |   if (! argv.from) {
141 |     return log('***ERROR***: You need to specify a source template.\n', 'red');
142 |   }
143 |   if (! argv.to) {
144 |     return log('***ERROR***: You need to specify a name for the new template.\n', 'red');
145 |   }
146 |   // Clone layout
147 |   gulp.src([config.sourceDir + '/layouts/' + argv.from + '.html'])
148 |     .pipe(rename(argv.to + '.html'))
149 |     .pipe(replace(argv.from, argv.to))
150 |     .pipe(gulp.dest(config.sourceDir + '/layouts/'));
151 |   // Clone partials
152 |   gulp.src([config.sourceDir + '/partials/' + argv.from + '/*'])
153 |     .pipe(gulp.dest(config.sourceDir + '/partials/' + argv.to));
154 | 
155 |   return gutil.log('Cloned to ' + gutil.colors.magenta(argv.to) + ' successfully.\n');
156 | });
157 | 
158 | // Remove a Template
159 | gulp.task('remove', function() {
160 |   var template = argv.template ? argv.template : (argv.t ? argv.t : null);
161 | 
162 |   if (! template) {
163 |     return log('***ERROR***: Name of template is missing.\n', 'red');
164 |   }
165 |   // Delete from source directory and build directories
166 |   del([
167 |     config.sourceDir + '/layouts/' + template + '.html', 
168 |     config.sourceDir + '/partials/' + template,
169 |     config.productionDir + '/' + template + '.html', 
170 |     config.localDir + '/' + template + '.html'
171 |   ]);
172 | 
173 |   return log('Removed template ' + gutil.colors.magenta(template) + ' successfully.\n');
174 | });
175 | 
176 | // Send test emails
177 | gulp.task('mail', function() {
178 |   var template = argv.template ? argv.template : (argv.t ? argv.t : null);
179 | 
180 |   if (! template) {
181 |     return log('***ERROR***: Name of template is missing\n', 'red');
182 |   }
183 | 
184 |   // Nodemailer
185 |   var transporter = nodemailer.createTransport(config.nodemailer.transportOptions);
186 |   var mailOptions = config.nodemailer.mailOptions;
187 |   // Update config values
188 |   mailOptions.to = argv.to ? argv.to : config.nodemailer.mailOptions.to;
189 |   mailOptions.subject = argv.subject ? argv.subject : config.nodemailer.mailOptions.subject;
190 | 
191 |   // get template contents and send email
192 |   fs.readFile(config.productionDir + '/' + template + '.html', 'utf8', function(err, data) {
193 |     if(err) {
194 |       handleError(err);
195 |     }
196 |     var regExp = /(\.\.)?\/?images\//g;
197 |     mailOptions.html = data.replace(regExp, config.nodemailer.imageHost);
198 | 
199 |     // Send the email
200 |     transporter.sendMail(mailOptions, function(err, info){
201 |       if(err) {
202 |         handleError(err);
203 |       }
204 |       log('Test email for template ' + gutil.colors.magenta(template) + ' sent successfully \n');
205 |     });
206 | 
207 |   });
208 | });
209 | 
210 | /* Tasks */
211 | // Build for local and start browsersync server
212 | gulp.task('serve', ['sass', 'html', 'images:local', 'connect']);
213 | 
214 | // Build for Production
215 | gulp.task('build', ['sass', 'html', 'inline-css', 'images:production', 'zip']);
216 | 
217 | // Default
218 | gulp.task('default', ['serve']);
219 | 
220 | /* Global functions */
221 | // Injects custom messages into stream
222 | function log(msg, color) {
223 |   var msgColor = color ? gutil.colors[color] : gutil.colors.blue;
224 |   if (typeof(msg) === 'object') {
225 |     for (var item in msg) {
226 |       if(msg.hasOwnProperty(item)) {
227 |         gutil.log(msgColor(msg[item]));
228 |       }
229 |     }
230 |   } else {
231 |     gutil.log(msgColor(msg));
232 |   }
233 | }
234 | // Handles error without breaking stream
235 | function handleError(err) {
236 |   gutil.beep();
237 |   log(err.toString(), 'red');
238 |   this.emit('end');
239 | }
240 | 


--------------------------------------------------------------------------------
/nodemailer.config.js.example:
--------------------------------------------------------------------------------
 1 | /*
 2 | * Nodemailer configuration
 3 | * For supported services, see https://github.com/andris9/nodemailer-wellknown#supported-services
 4 | */
 5 | 
 6 | module.exports = function() {
 7 | 
 8 |   var config = {
 9 |     transportOptions: {
10 |       service: 'mailgun', 
11 |       auth: {
12 |         user: '',
13 |         pass: ''
14 |       }
15 |     },
16 |     mailOptions: {
17 |       to: 'default@test.email.com', // Default address(es) to send test emails to (can be comma separated)
18 |       from: 'Gulp Test <gulp@bulletproof.mailgun.org>', // Sender details 
19 |       subject: 'Test email - sent by Bulletproof Email' // Default subject line
20 |     },
21 |     imageHost: '' // Full url path to your image host, with a trailing slash.
22 |   };
23 |   return config;
24 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "bulletproof-email",
 3 |   "version": "1.0.2",
 4 |   "description": "Bulletproof Email",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "postinstall": "cp nodemailer.config.js.example nodemailer.config.js"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git@github.com:koomai/bulletproof-email.git"
12 |   },
13 |   "author": "Sid K",
14 |   "license": "MIT",
15 |   "devDependencies": {
16 |     "browser-sync": "2.8.2",
17 |     "del": "~1.2.0",
18 |     "fs": "0.0.2",
19 |     "gulp": "3.8.11",
20 |     "gulp-changed": "~1.2.1",
21 |     "gulp-clipboard": "0.1.1",
22 |     "gulp-file-include": "~0.9.0",
23 |     "gulp-if": "~1.2.5",
24 |     "gulp-imagemin": "~2.2.1",
25 |     "gulp-inline-css": "~2.0.0",
26 |     "gulp-minify-html": "~1.0.2",
27 |     "gulp-plumber": "1.0.1",
28 |     "gulp-rename": "1.2.2",
29 |     "gulp-replace": "~0.5.3",
30 |     "gulp-sass": "3.1.0",
31 |     "gulp-shell": "~0.4.2",
32 |     "gulp-util": "3.0.6",
33 |     "gulp-zip": "~3.0.2",
34 |     "node-sass": "4.5.1",
35 |     "nodemailer": "1.4.0",
36 |     "nodemailer-smtp-transport": "1.0.3",
37 |     "yargs": "3.21.0"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/source/images/200x50.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/koomai/bulletproof-email/7bccb538165ea6facfcd20827a49d0042b8b4856/source/images/200x50.png


--------------------------------------------------------------------------------
/source/images/580x300.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/koomai/bulletproof-email/7bccb538165ea6facfcd20827a49d0042b8b4856/source/images/580x300.png


--------------------------------------------------------------------------------
/source/layouts/basic.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 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="css/main.css" />
 7 |         <!-- Media Queries -->
 8 |         <style>
 9 |             {{ include('../../dist/local/css/media-queries.css') }}
10 |         </style>
11 |     </head>
12 |     <body>
13 |         <table class="body">
14 |             <tr>
15 |                 <td class="center" align="center" valign="top">
16 |                     <center>
17 |                       
18 |                       {{ include('../partials/header.html', { "templateLabel" : "BASIC" }) }}
19 | 
20 |                       {{ include('../partials/basic/introduction.html') }}
21 | 
22 |                       {{ include('../partials/basic/callout.html') }}
23 | 
24 |                       {{ include('../partials/basic/connect.html') }}
25 | 
26 |                       {{ include('../partials/footer.html') }}
27 | 
28 |                     </center>
29 |                 </td>
30 |             </tr>
31 |         </table>
32 |     </body>
33 | </html>


--------------------------------------------------------------------------------
/source/layouts/hero.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 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="css/main.css" />
 7 |         <!-- Media Queries -->
 8 |         <style>
 9 |             {{ include('../../dist/local/css/media-queries.css') }}
10 |         </style>
11 |     </head>
12 |     <body>
13 |         <table class="body">
14 |             <tr>
15 |                 <td class="center" align="center" valign="top">
16 |                     <center>
17 |                       
18 |                       {{ include('../partials/header.html', { "templateLabel" : "HERO" }) }}
19 | 
20 |                       {{ include('../partials/hero/introduction.html') }}
21 | 
22 |                       {{ include('../partials/hero/callout.html') }}
23 | 
24 |                       {{ include('../partials/hero/secondary-copy.html') }}
25 | 
26 |                       {{ include('../partials/hero/connect.html') }}
27 | 
28 |                       {{ include('../partials/footer.html') }}
29 | 
30 |                     </center>
31 |                 </td>
32 |             </tr>
33 |         </table>
34 |     </body>
35 | </html>


--------------------------------------------------------------------------------
/source/layouts/sidebar-hero.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 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="css/main.css" />
 7 |         <!-- Media Queries -->
 8 |         <style>
 9 |             {{ include('../../dist/local/css/media-queries.css') }}
10 |         </style>
11 |     </head>
12 |     <body>
13 |         <table class="body">
14 |             <tr>
15 |                 <td class="center" align="center" valign="top">
16 |                     <center>
17 |                       
18 |                         {{ include('../partials/header.html', { "templateLabel" : "SIDEBAR HERO" }) }}
19 | 
20 |                         {{ include('../partials/sidebar-hero/introduction.html') }}
21 | 
22 |                         {{ include('../partials/sidebar-hero/panel.html') }}
23 | 
24 |                         <!-- two columns -->
25 |                         <table class="row">
26 |                           <tr>
27 |                               <td class="center" align="center">
28 |                                   <center>
29 | 
30 |                                       <table class="container">
31 |                                           <tr>
32 |                                               <td class="wrapper">
33 |                                                 {{ include('../partials/sidebar-hero/left-column.html') }}
34 |                                               </td>
35 |                                               <td class="wrapper last">
36 |                                                 {{ include('../partials/sidebar-hero/right-column.html') }}
37 |                                               </td>
38 |                                           </tr>
39 |                                       </table>
40 | 
41 |                                   </center>
42 |                               </td>
43 |                           </tr>
44 |                         </table>
45 |                         <!-- end two columns -->
46 |                         
47 |                         {{ include('../partials/footer.html') }}
48 | 
49 |                     </center>
50 |                 </td>
51 |             </tr>
52 |         </table>
53 |     </body>
54 | </html>


--------------------------------------------------------------------------------
/source/partials/basic/callout.html:
--------------------------------------------------------------------------------
 1 | <table class="row callout">
 2 |     <tr>
 3 |         <td class="center" align="center">
 4 |             <center>
 5 | 
 6 |                 <table class="container">
 7 |                     <tr>
 8 |                         <td class="wrapper last">
 9 | 
10 |                             <table class="twelve columns">
11 |                                 <tr>
12 |                                     <td class="panel">
13 |                                         <p>
14 |                                             Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. <a href="#">Click it! »</a>
15 |                                         </p>
16 |                                     </td>
17 |                                     <td class="expander"></td>
18 |                                 </tr>
19 |                             </table>
20 | 
21 |                         </td>
22 |                     </tr>
23 |                 </table>
24 | 
25 |             </center>
26 |         </td>
27 |     </tr>
28 | </table>


--------------------------------------------------------------------------------
/source/partials/basic/connect.html:
--------------------------------------------------------------------------------
 1 | <table class="row connect">
 2 |     <tr>
 3 |         <td class="center" align="center">
 4 |             <center>
 5 | 
 6 |                 <table class="container">
 7 |                     <tr>
 8 |                         <td class="wrapper">
 9 | 
10 |                             <table class="six columns">
11 |                                 <tr>
12 |                                     <td class="left-text-pad">
13 |                                         <h5>Connect With Us:</h5>
14 |                                         
15 |                                         <table class="tiny-button facebook">
16 |                                             <tr>
17 |                                                 <td>
18 |                                                     <a href="#">Facebook</a>
19 |                                                 </td>
20 |                                             </tr>
21 |                                         </table>
22 | 
23 |                                         <br>
24 | 
25 |                                         <table class="tiny-button twitter">
26 |                                             <tr>
27 |                                                 <td>
28 |                                                   <a href="#">Twitter</a>
29 |                                                 </td>
30 |                                             </tr>
31 |                                         </table>
32 | 
33 |                                         <br>
34 | 
35 |                                         <table class="tiny-button google-plus">
36 |                                             <tr>
37 |                                                 <td>
38 |                                                     <a href="#">Google +</a>
39 |                                                 </td>
40 |                                             </tr>
41 |                                         </table>
42 | 
43 |                                     </td>
44 |                                     <td class="expander"></td>
45 |                                 </tr>
46 |                             </table>
47 | 
48 |                         </td>
49 | 
50 |                         <td class="wrapper last">
51 |                           
52 |                             <table class="six columns">
53 |                                 <tr>
54 |                                     <td class="last right-text-pad">
55 |                                         <h5>Contact Info:</h5>
56 |                                         <p>Phone: 408.341.0600</p>
57 |                                         <p>Email: <a href="mailto:hseldon@trantor.com">hseldon@trantor.com</a></p>
58 |                                     </td>
59 |                                     <td class="expander"></td>
60 |                                 </tr>
61 |                             </table>
62 | 
63 |                         </td>
64 |                     </tr>
65 |                 </table>
66 | 
67 |             </center>
68 |         </td>
69 |     </tr>
70 | </table>


--------------------------------------------------------------------------------
/source/partials/basic/introduction.html:
--------------------------------------------------------------------------------
 1 | <table class="row introduction">
 2 |     <tr>
 3 |         <td class="center" align="center">
 4 |             <center>
 5 | 
 6 |                 <table class="container">
 7 |                     <tr>
 8 |                         <td class="wrapper last">
 9 | 
10 |                             <table class="twelve columns">
11 |                                 <tr>
12 |                                     <td>
13 |                                         <h1>Hi, Susan Calvin!</h1>
14 |                                         <p class="lead">
15 |                                             Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae.
16 |                                         </p>
17 |                                         <p>
18 |                                             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.
19 |                                         </p>
20 |                                     </td>
21 |                                     <td class="expander"></td>
22 |                                 </tr>
23 |                             </table>
24 | 
25 |                         </td>
26 |                     </tr>
27 |                 </table>
28 | 
29 |             </center>
30 |         </td>
31 |     </tr>
32 | </table>


--------------------------------------------------------------------------------
/source/partials/boilerplate/full-width.html:
--------------------------------------------------------------------------------
 1 | <table class="row">
 2 |     <tr>
 3 |         <td class="center" align="center">
 4 |             <center>
 5 | 
 6 |                 <table class="container">
 7 |                     <tr>
 8 |                         <td class="wrapper last">
 9 | 
10 |                             <table class="twelve columns">
11 |                                 <tr>
12 |                                     <td>
13 |                                         <!-- Content goes here -->
14 |                                     </td>
15 |                                     <td class="expander"></td>
16 |                                 </tr>
17 |                             </table>
18 | 
19 |                         </td>
20 |                     </tr>
21 |                 </table>
22 | 
23 |             </center>
24 |         </td>
25 |     </tr>
26 | </table>
27 | 


--------------------------------------------------------------------------------
/source/partials/boilerplate/three-columns.html:
--------------------------------------------------------------------------------
 1 | <table class="row">
 2 |     <tr>
 3 |         <td class="center" align="center">
 4 |             <center>
 5 | 
 6 |                 <table class="container">
 7 |                     <tr>
 8 |                         <!-- Left column -->
 9 |                         <td class="wrapper">
10 |                             
11 |                             <table class="four columns">
12 |                                 <tr>
13 |                                     <td>
14 |                                         <!-- Content goes here -->
15 |                                     </td>
16 |                                     <td class="expander"></td>
17 |                                 </tr>
18 |                             </table>
19 | 
20 |                         </td>
21 | 
22 |                         <!-- Middle column -->
23 |                         <td class="wrapper">
24 |                             
25 |                             <table class="four columns">
26 |                                 <tr>
27 |                                     <td>
28 |                                         <!-- Content goes here -->
29 |                                     </td>
30 |                                     <td class="expander"></td>
31 |                                 </tr>
32 |                             </table>
33 | 
34 |                         </td>
35 | 
36 |                         <!-- Right column -->
37 |                         <td class="wrapper last">
38 | 
39 |                             <table class="four columns">
40 |                                 <tr>
41 |                                     <td>
42 |                                         <!-- Content goes here -->
43 |                                     </td>
44 |                                     <td class="expander"></td>
45 |                                 </tr>
46 |                             </table>
47 | 
48 |                         </td>
49 |                     </tr>
50 |                 </table>
51 | 
52 |             </center>
53 |         </td>
54 |     </tr>
55 | </table>


--------------------------------------------------------------------------------
/source/partials/boilerplate/two-columns.html:
--------------------------------------------------------------------------------
 1 | <table class="row">
 2 |     <tr>
 3 |         <td class="center" align="center">
 4 |             <center>
 5 | 
 6 |                 <table class="container">
 7 |                     <tr>
 8 |                         <!-- Left column -->
 9 |                         <td class="wrapper">
10 |                             
11 |                             <table class="six columns">
12 |                                 <tr>
13 |                                     <td>
14 |                                         <!-- Content goes here -->
15 |                                     </td>
16 |                                     <td class="expander"></td>
17 |                                 </tr>
18 |                             </table>
19 | 
20 |                         </td>
21 | 
22 |                         <!-- Right column -->
23 |                         <td class="wrapper last">
24 | 
25 |                             <table class="six columns">
26 |                                 <tr>
27 |                                     <td>
28 |                                         <!-- Content goes here -->
29 |                                     </td>
30 |                                     <td class="expander"></td>
31 |                                 </tr>
32 |                             </table>
33 |                             
34 |                         </td>
35 |                     </tr>
36 |                 </table>
37 | 
38 |             </center>
39 |         </td>
40 |     </tr>
41 | </table>


--------------------------------------------------------------------------------
/source/partials/footer.html:
--------------------------------------------------------------------------------
 1 | <table class="row footer">
 2 |     <tr>
 3 |         <td class="center" align="center">
 4 |             <center>
 5 | 
 6 |                 <table class="container">
 7 |                     <tr>
 8 |                         <td class="wrapper last">
 9 | 
10 |                             <table class="twelve columns">
11 |                                 <tr>
12 |                                     <td align="center">
13 |                                         <center>
14 |                                             <p style="text-align:center;">
15 |                                                 <a href="#">Terms</a> | 
16 |                                                 <a href="#">Privacy</a> | 
17 |                                                 <a href="#">Unsubscribe</a>
18 |                                             </p>
19 |                                         </center>
20 |                                     </td>
21 |                                     <td class="expander"></td>
22 |                                 </tr>
23 |                             </table>
24 | 
25 |                         </td>
26 |                     </tr>
27 |                 </table>
28 | 
29 |             </center>
30 |         </td>
31 |     </tr>
32 | </table>
33 | 


--------------------------------------------------------------------------------
/source/partials/header.html:
--------------------------------------------------------------------------------
 1 | <table class="row header">
 2 |     <tr>
 3 |         <td class="center" align="center">
 4 |             <center>
 5 | 
 6 |                 <table class="container">
 7 |                     <tr>
 8 |                         <td class="wrapper last">
 9 | 
10 |                           <table class="twelve columns">
11 |                             <tr>
12 |                                 <td class="six sub-columns">
13 |                                     <img src="images/200x50.png" width="200">
14 |                                 </td>
15 |                                 <td class="six sub-columns last" style="text-align:right; vertical-align:middle;">
16 |                                     <span class="template-label">{{ templateLabel }}</span>
17 |                                 </td>
18 |                                 <td class="expander"></td>
19 |                             </tr>
20 |                           </table>
21 | 
22 |                         </td>
23 |                     </tr>
24 |                 </table>
25 | 
26 |             </center>
27 |         </td>
28 |     </tr>
29 | </table>
30 | 


--------------------------------------------------------------------------------
/source/partials/hero/callout.html:
--------------------------------------------------------------------------------
 1 | <table class="row callout">
 2 |     <tr>
 3 |         <td class="center" align="center">
 4 |             <center>
 5 | 
 6 |                 <table class="container">
 7 |                     <tr>
 8 |                         <td class="wrapper last">
 9 | 
10 |                             <table class="twelve columns">
11 |                                 <tr>
12 |                                     <td class="panel">
13 |                                         <p>
14 |                                             Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. <a href="#">Click it! »</a>
15 |                                         </p>
16 |                                     </td>
17 |                                     <td class="expander"></td>
18 |                                 </tr>
19 |                             </table>
20 | 
21 |                         </td>
22 |                     </tr>
23 |                 </table>
24 | 
25 |             </center>
26 |         </td>
27 |     </tr>
28 | </table>


--------------------------------------------------------------------------------
/source/partials/hero/connect.html:
--------------------------------------------------------------------------------
 1 | <table class="row connect">
 2 |     <tr>
 3 |         <td class="center" align="center">
 4 |             <center>
 5 | 
 6 |                 <table class="container">
 7 |                     <tr>
 8 |                         <td class="wrapper">
 9 | 
10 |                             <table class="six columns">
11 |                                 <tr>
12 |                                     <td class="left-text-pad">
13 |                                         <h5>Connect With Us:</h5>
14 |                                         
15 |                                         <table class="tiny-button facebook">
16 |                                             <tr>
17 |                                                 <td>
18 |                                                     <a href="#">Facebook</a>
19 |                                                 </td>
20 |                                             </tr>
21 |                                         </table>
22 | 
23 |                                         <br>
24 | 
25 |                                         <table class="tiny-button twitter">
26 |                                             <tr>
27 |                                                 <td>
28 |                                                   <a href="#">Twitter</a>
29 |                                                 </td>
30 |                                             </tr>
31 |                                         </table>
32 | 
33 |                                         <br>
34 | 
35 |                                         <table class="tiny-button google-plus">
36 |                                             <tr>
37 |                                                 <td>
38 |                                                     <a href="#">Google +</a>
39 |                                                 </td>
40 |                                             </tr>
41 |                                         </table>
42 | 
43 |                                     </td>
44 |                                     <td class="expander"></td>
45 |                                 </tr>
46 |                             </table>
47 | 
48 |                         </td>
49 | 
50 |                         <td class="wrapper last">
51 |                           
52 |                             <table class="six columns">
53 |                                 <tr>
54 |                                     <td class="last right-text-pad">
55 |                                         <h5>Contact Info:</h5>
56 |                                         <p>Phone: 408.341.0600</p>
57 |                                         <p>Email: <a href="mailto:hseldon@trantor.com">hseldon@trantor.com</a></p>
58 |                                     </td>
59 |                                     <td class="expander"></td>
60 |                                 </tr>
61 |                             </table>
62 | 
63 |                         </td>
64 |                     </tr>
65 |                 </table>
66 | 
67 |             </center>
68 |         </td>
69 |     </tr>
70 | </table>


--------------------------------------------------------------------------------
/source/partials/hero/introduction.html:
--------------------------------------------------------------------------------
 1 | <br>
 2 | <table class="row introduction">
 3 |     <tr>
 4 |         <td class="center" align="center">
 5 |             <center>
 6 | 
 7 |                 <table class="container">
 8 |                     <tr>
 9 |                         <td class="wrapper last">
10 | 
11 |                             <table class="twelve columns">
12 |                                 <tr>
13 |                                     <td>
14 |                                         <h1>Hi, Elijah Baily</h1>
15 |                                         <p class="lead">
16 |                                             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.
17 |                                         </p>
18 |                                         <img width="580" height="300" src="images/580x300.png">
19 |                                     </td>
20 |                                     <td class="expander"></td>
21 |                                 </tr>
22 |                             </table>
23 | 
24 |                         </td>
25 |                     </tr>
26 |                 </table>
27 | 
28 |             </center>
29 |         </td>
30 |     </tr>
31 | </table>


--------------------------------------------------------------------------------
/source/partials/hero/secondary-copy.html:
--------------------------------------------------------------------------------
 1 | <table class="row secondary-copy">
 2 |     <tr>
 3 |         <td class="center" align="center">
 4 |             <center>
 5 | 
 6 |                 <table class="container">
 7 |                     <tr>
 8 |                         <td class="wrapper last">
 9 | 
10 |                             <table class="twelve columns">
11 |                                 <tr>
12 |                                     <td>
13 |                                         <h3>Title Ipsum <small>This is a note.</small></h3>
14 |                                         <p>
15 |                                             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.
16 |                                         </p>
17 |                                     </td>
18 |                                     <td class="expander"></td>
19 |                                 </tr>
20 |                             </table>
21 | 
22 |                         </td>
23 |                     </tr>
24 |                     <tr>
25 |                         <td>
26 |                             <!-- Button -->
27 |                             <table class="row">
28 |                                 <tr>
29 |                                     <td class="wrapper last">
30 | 
31 |                                         <table class="three columns">
32 |                                             <tr>
33 |                                                 <td>
34 | 
35 |                                                     <table class="button">
36 |                                                         <tr>
37 |                                                             <td>
38 |                                                                 <a href="#">Click Me!</a>
39 |                                                             </td>
40 |                                                         </tr>
41 |                                                     </table>
42 | 
43 |                                                 </td>
44 |                                                 <td class="expander"></td>
45 |                                             </tr>
46 |                                         </table>
47 | 
48 |                                     </td>
49 |                                 </tr>
50 |                             </table>
51 |                         </td>
52 |                     </tr>
53 |                 </table>
54 | 
55 |             </center>
56 |         </td>
57 |     </tr>
58 | </table>


--------------------------------------------------------------------------------
/source/partials/sidebar-hero/introduction.html:
--------------------------------------------------------------------------------
 1 | <br>
 2 | <table class="row introduction">
 3 |     <tr>
 4 |         <td class="center" align="center">
 5 |             <center>
 6 | 
 7 |                 <table class="container">
 8 |                     <tr>
 9 |                         <td class="wrapper last">
10 | 
11 |                             <table class="twelve columns">
12 |                                 <tr>
13 |                                     <td>
14 |                                         <h1>Welcome, Daneel Olivan</h1>
15 |                                         <p>
16 |                                             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.
17 |                                         </p>
18 |                                         <img width="580" height="300" src="images/580x300.png">
19 |                                     </td>
20 |                                     <td class="expander"></td>
21 |                                 </tr>
22 |                             </table>
23 | 
24 |                         </td>
25 |                     </tr>
26 |                 </table>
27 | 
28 |             </center>
29 |         </td>
30 |     </tr>
31 | </table>


--------------------------------------------------------------------------------
/source/partials/sidebar-hero/left-column.html:
--------------------------------------------------------------------------------
 1 | <table class="six columns">
 2 |     <tr>
 3 |         <td>
 4 |             <p>
 5 |                 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.
 6 |             </p>
 7 |             <p>
 8 |                 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.
 9 |             </p>
10 | 
11 |             <table class="button">
12 |                 <tr>
13 |                     <td>
14 |                         <a href="#">Click Me!</a>
15 |                     </td>
16 |                 </tr>
17 |             </table>
18 | 
19 |         </td>
20 |         <td class="expander"></td>
21 |     </tr>
22 | </table>


--------------------------------------------------------------------------------
/source/partials/sidebar-hero/panel.html:
--------------------------------------------------------------------------------
 1 | <table class="row">
 2 |     <tr>
 3 |         <td class="center" align="center">
 4 |             <center>
 5 | 
 6 |                 <table class="container">
 7 |                     <tr>
 8 |                         <td class="wrapper last">
 9 | 
10 |                             <table class="twelve columns">
11 |                                 <tr>
12 |                                     <td class="panel">
13 |                                         <p>
14 |                                             Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. <a href="#">Click it! »</a>
15 |                                         </p>
16 |                                     </td>
17 |                                     <td class="expander"></td>
18 |                                 </tr>
19 |                             </table>
20 | 
21 |                         </td>
22 |                     </tr>
23 |                 </table>
24 | 
25 |             </center>
26 |         </td>
27 |     </tr>
28 | </table>


--------------------------------------------------------------------------------
/source/partials/sidebar-hero/right-column.html:
--------------------------------------------------------------------------------
 1 | <table class="six columns">
 2 |     <tr>
 3 |         <td class="panel">
 4 |             <h6>Header Thing</h6>
 5 |             <p>Sub-head or something</p>
 6 |             
 7 |             <table>
 8 |                 <tr>
 9 |                     <td>
10 |                       <a href="#">Just a Plain Link &raquo;</a>
11 |                     </td>
12 |                 </tr>
13 |             </table>
14 |             
15 |             <hr>
16 | 
17 |             <table>
18 |                 <tr>
19 |                     <td>
20 |                         <a href="#">Just a Plain Link &raquo;</a>
21 |                     </td>
22 |                 </tr>
23 |             </table>
24 |             
25 |             <hr>
26 |             
27 |             <table>
28 |                 <tr>
29 |                     <td>
30 |                         <a href="#">Just a Plain Link &raquo;</a>
31 |                     </td>
32 |                 </tr>
33 |             </table>
34 |             
35 |             <hr>
36 |             
37 |             <table>
38 |                 <tr>
39 |                     <td>
40 |                       <a href="#">Just a Plain Link &raquo;</a>
41 |                     </td>
42 |                 </tr>
43 |             </table>
44 |         </td>
45 |         <td class="expander"></td>
46 |     </tr>
47 | </table>
48 | 
49 | <br>
50 | <!-- connect -->
51 | <table class="six columns">
52 |     <tr>
53 |         <td class="panel">
54 |             <h6 style="margin-bottom:5px;">Connect With Us:</h6>
55 |             <table class="tiny-button facebook">
56 |                 <tr>
57 |                     <td>
58 |                         <a href="#">Facebook</a>
59 |                     </td>
60 |                 </tr>
61 |             </table>
62 |             
63 |             <hr>
64 | 
65 |             <table class="tiny-button twitter">
66 |                 <tr>
67 |                     <td>
68 |                         <a href="#">Twitter</a>
69 |                     </td>
70 |                 </tr>
71 |             </table>
72 | 
73 |             <hr>
74 | 
75 |             <table class="tiny-button google-plus">
76 |                 <tr>
77 |                     <td>
78 |                         <a href="#">Google +</a>
79 |                     </td>
80 |                 </tr>
81 |             </table>
82 |       
83 |             <br>
84 |       
85 |             <h6 style="margin-bottom:5px;">Contact Info:</h6>
86 |             <p>Phone: <b>408.341.0600</b></p>
87 |             <p>Email: <a href="mailto:hseldon@trantor.com">hseldon@trantor.com</a></p>
88 |         </td>
89 |         <td class="expander"></td>
90 |     </tr>
91 | </table>


--------------------------------------------------------------------------------
/source/partials/sidebar-hero/secondary-copy.html:
--------------------------------------------------------------------------------
 1 | <table class="row secondary-copy">
 2 |     <tr>
 3 |         <td class="center" align="center">
 4 |             <center>
 5 | 
 6 |                 <table class="container">
 7 |                     <tr>
 8 |                         <td class="wrapper last">
 9 | 
10 |                             <table class="twelve columns">
11 |                                 <tr>
12 |                                     <td>
13 |                                         <h3>Title Ipsum <small>This is a note.</small></h3>
14 |                                         <p>
15 |                                             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.
16 |                                         </p>
17 |                                     </td>
18 |                                     <td class="expander"></td>
19 |                                 </tr>
20 |                             </table>
21 | 
22 |                         </td>
23 |                     </tr>
24 |                     <tr>
25 |                         <td>
26 |                             <!-- Button -->
27 |                             <table class="row">
28 |                                 <tr>
29 |                                     <td class="wrapper last">
30 | 
31 |                                         <table class="three columns">
32 |                                             <tr>
33 |                                                 <td>
34 | 
35 |                                                     <table class="button">
36 |                                                         <tr>
37 |                                                             <td>
38 |                                                                 <a href="#">Click Me!</a>
39 |                                                             </td>
40 |                                                         </tr>
41 |                                                     </table>
42 | 
43 |                                                 </td>
44 |                                                 <td class="expander"></td>
45 |                                             </tr>
46 |                                         </table>
47 | 
48 |                                     </td>
49 |                                 </tr>
50 |                             </table>
51 |                         </td>
52 |                     </tr>
53 |                 </table>
54 | 
55 |             </center>
56 |         </td>
57 |     </tr>
58 | </table>


--------------------------------------------------------------------------------
/source/stylesheets/main.scss:
--------------------------------------------------------------------------------
 1 | @import "modules/_colors.scss";
 2 | @import "modules/_reset.scss";
 3 | @import "modules/_typography.scss";
 4 | @import "modules/_utilities.scss";
 5 | @import "modules/_grid.scss";
 6 | @import "modules/_buttons.scss";
 7 | @import "modules/_panels.scss";
 8 | 
 9 | /* Import custom styles */
10 | @import "modules/_custom.scss";


--------------------------------------------------------------------------------
/source/stylesheets/media-queries.scss:
--------------------------------------------------------------------------------
  1 | $breakpoint: 600px;
  2 | 
  3 | @media only screen and (max-width: $breakpoint) {
  4 | 
  5 |   table[class="body"] img {
  6 |     width: auto !important;
  7 |     height: auto !important;
  8 |   }
  9 | 
 10 |   table[class="body"] center {
 11 |     min-width: 0 !important;
 12 |   }
 13 | 
 14 |   table[class="body"] .container {
 15 |     width: 95% !important;
 16 |   }
 17 | 
 18 |   table[class="body"] .row {
 19 |     width: 100% !important;
 20 |     display: block !important;
 21 |   }
 22 | 
 23 |   table[class="body"] .wrapper {
 24 |     display: block !important;
 25 |     padding-right: 0 !important;
 26 |   }
 27 | 
 28 |   table[class="body"] .columns,
 29 |   table[class="body"] .column {
 30 |     table-layout: fixed !important;
 31 |     float: none !important;
 32 |     width: 100% !important;
 33 |     padding-right: 0px !important;
 34 |     padding-left: 0px !important;
 35 |     display: block !important;
 36 |   }
 37 | 
 38 |   table[class="body"] .wrapper.first .columns,
 39 |   table[class="body"] .wrapper.first .column {
 40 |     display: table !important;
 41 |   }
 42 | 
 43 |   table[class="body"] table.columns td,
 44 |   table[class="body"] table.column td {
 45 |     width: 100% !important;
 46 |   }
 47 | 
 48 |   table[class="body"] .columns td.one,
 49 |   table[class="body"] .column td.one { width: 8.333333% !important; }
 50 |   table[class="body"] .columns td.two,
 51 |   table[class="body"] .column td.two { width: 16.666666% !important; }
 52 |   table[class="body"] .columns td.three,
 53 |   table[class="body"] .column td.three { width: 25% !important; }
 54 |   table[class="body"] .columns td.four,
 55 |   table[class="body"] .column td.four { width: 33.333333% !important; }
 56 |   table[class="body"] .columns td.five,
 57 |   table[class="body"] .column td.five { width: 41.666666% !important; }
 58 |   table[class="body"] .columns td.six,
 59 |   table[class="body"] .column td.six { width: 50% !important; }
 60 |   table[class="body"] .columns td.seven,
 61 |   table[class="body"] .column td.seven { width: 58.333333% !important; }
 62 |   table[class="body"] .columns td.eight,
 63 |   table[class="body"] .column td.eight { width: 66.666666% !important; }
 64 |   table[class="body"] .columns td.nine,
 65 |   table[class="body"] .column td.nine { width: 75% !important; }
 66 |   table[class="body"] .columns td.ten,
 67 |   table[class="body"] .column td.ten { width: 83.333333% !important; }
 68 |   table[class="body"] .columns td.eleven,
 69 |   table[class="body"] .column td.eleven { width: 91.666666% !important; }
 70 |   table[class="body"] .columns td.twelve,
 71 |   table[class="body"] .column td.twelve { width: 100% !important; }
 72 | 
 73 |   table[class="body"] td.offset-by-one,
 74 |   table[class="body"] td.offset-by-two,
 75 |   table[class="body"] td.offset-by-three,
 76 |   table[class="body"] td.offset-by-four,
 77 |   table[class="body"] td.offset-by-five,
 78 |   table[class="body"] td.offset-by-six,
 79 |   table[class="body"] td.offset-by-seven,
 80 |   table[class="body"] td.offset-by-eight,
 81 |   table[class="body"] td.offset-by-nine,
 82 |   table[class="body"] td.offset-by-ten,
 83 |   table[class="body"] td.offset-by-eleven {
 84 |     padding-left: 0 !important;
 85 |   }
 86 | 
 87 |   table[class="body"] table.columns td.expander {
 88 |     width: 1px !important;
 89 |   }
 90 | 
 91 |   table[class="body"] .right-text-pad,
 92 |   table[class="body"] .text-pad-right {
 93 |     padding-left: 10px !important;
 94 |   }
 95 | 
 96 |   table[class="body"] .left-text-pad,
 97 |   table[class="body"] .text-pad-left {
 98 |     padding-right: 10px !important;
 99 |   }
100 | 
101 |   table[class="body"] .hide-for-small,
102 |   table[class="body"] .show-for-desktop {
103 |     display: none !important;
104 |   }
105 | 
106 |   table[class="body"] .show-for-small,
107 |   table[class="body"] .hide-for-desktop {
108 |     display: inherit !important;
109 |   }
110 | 
111 |   table[class="body"] .right-text-pad {
112 |     padding-left: 10px !important;
113 |   }
114 | 
115 |   table[class="body"] .left-text-pad {
116 |     padding-right: 10px !important;
117 |   }
118 | 
119 | }


--------------------------------------------------------------------------------
/source/stylesheets/modules/_buttons.scss:
--------------------------------------------------------------------------------
  1 | /* Buttons */
  2 | 
  3 | table.button,
  4 | table.tiny-button,
  5 | table.small-button,
  6 | table.medium-button,
  7 | table.large-button {
  8 |   width: 100%;
  9 |   overflow: hidden;
 10 | }
 11 | 
 12 | table.button td,
 13 | table.tiny-button td,
 14 | table.small-button td,
 15 | table.medium-button td,
 16 | table.large-button td {
 17 |   display: block;
 18 |   width: auto !important;
 19 |   text-align: center;
 20 |   background: $button-bg-color;
 21 |   border: 1px solid $button-border-color;
 22 |   color: #ffffff;
 23 |   padding: 8px 0;
 24 | }
 25 | 
 26 | table.tiny-button td {
 27 |   padding: 5px 0 4px;
 28 | }
 29 | 
 30 | table.small-button td {
 31 |   padding: 8px 0 7px;
 32 | }
 33 | 
 34 | table.medium-button td {
 35 |   padding: 12px 0 10px;
 36 | }
 37 | 
 38 | table.large-button td {
 39 |   padding: 21px 0 18px;
 40 | }
 41 | 
 42 | table.button td a,
 43 | table.tiny-button td a,
 44 | table.small-button td a,
 45 | table.medium-button td a,
 46 | table.large-button td a {
 47 |   font-weight: bold;
 48 |   text-decoration: none;
 49 |   font-family: Helvetica, Arial, sans-serif;
 50 |   color: #ffffff;
 51 |   font-size: 16px;
 52 | }
 53 | 
 54 | table.tiny-button td a {
 55 |   font-size: 12px;
 56 |   font-weight: normal;
 57 | }
 58 | 
 59 | table.small-button td a {
 60 |   font-size: 16px;
 61 | }
 62 | 
 63 | table.medium-button td a {
 64 |   font-size: 20px;
 65 | }
 66 | 
 67 | table.large-button td a {
 68 |   font-size: 24px;
 69 | }
 70 | 
 71 | table.button:hover td,
 72 | table.button:visited td,
 73 | table.button:active td {
 74 |   background: #2795b6 !important;
 75 | }
 76 | 
 77 | table.button:hover td a,
 78 | table.button:visited td a,
 79 | table.button:active td a {
 80 |   color: #fff !important;
 81 | }
 82 | 
 83 | table.button:hover td,
 84 | table.tiny-button:hover td,
 85 | table.small-button:hover td,
 86 | table.medium-button:hover td,
 87 | table.large-button:hover td {
 88 |   background: #2795b6 !important;
 89 | }
 90 | 
 91 | table.button:hover td a,
 92 | table.button:active td a,
 93 | table.button td a:visited,
 94 | table.tiny-button:hover td a,
 95 | table.tiny-button:active td a,
 96 | table.tiny-button td a:visited,
 97 | table.small-button:hover td a,
 98 | table.small-button:active td a,
 99 | table.small-button td a:visited,
100 | table.medium-button:hover td a,
101 | table.medium-button:active td a,
102 | table.medium-button td a:visited,
103 | table.large-button:hover td a,
104 | table.large-button:active td a,
105 | table.large-button td a:visited {
106 |   color: #ffffff !important; 
107 | }
108 | 
109 | table.secondary td {
110 |   background: #e9e9e9;
111 |   border-color: #d0d0d0;
112 |   color: #555;
113 | }
114 | 
115 | table.secondary td a {
116 |   color: #555;
117 | }
118 | 
119 | table.secondary:hover td {
120 |   background: #d0d0d0 !important;
121 |   color: #555;
122 | }
123 | 
124 | table.secondary:hover td a,
125 | table.secondary td a:visited,
126 | table.secondary:active td a {
127 |   color: #555 !important;
128 | }
129 | 
130 | table.success td {
131 |   background: #5da423;
132 |   border-color: #457a1a;
133 | }
134 | 
135 | table.success:hover td {
136 |   background: #457a1a !important;
137 | }
138 | 
139 | table.alert td {
140 |   background: #c60f13;
141 |   border-color: #970b0e;
142 | }
143 | 
144 | table.alert:hover td {
145 |   background: #970b0e !important;
146 | }
147 | 
148 | table.radius td {
149 |   -webkit-border-radius: 3px;
150 |   -moz-border-radius: 3px;
151 |   border-radius: 3px;
152 | }
153 | 
154 | table.round td {
155 |   -webkit-border-radius: 500px;
156 |   -moz-border-radius: 500px;
157 |   border-radius: 500px;
158 | }
159 | 
160 | /* Social Buttons */
161 | 
162 | table.facebook td {
163 |   background: #3b5998;
164 |   border-color: #2d4473;
165 | }
166 | 
167 | table.facebook:hover td {
168 |   background: #2d4473 !important;
169 | }
170 | 
171 | table.twitter td {
172 |   background: #00acee;
173 |   border-color: #0087bb;
174 | }
175 | 
176 | table.twitter:hover td {
177 |   background: #0087bb !important;
178 | }
179 | 
180 | table.google-plus td {
181 |   background-color: #DB4A39;
182 |   border-color: #CC0000;
183 | }
184 | 
185 | table.google-plus:hover td {
186 |   background: #CC0000 !important;
187 | }


--------------------------------------------------------------------------------
/source/stylesheets/modules/_colors.scss:
--------------------------------------------------------------------------------
 1 | // Backgrounds
 2 | $body-background: #ffffff;
 3 | $dark-background: #999999;
 4 | $light-background: #ebebeb;
 5 | $panel-background: #2c3e50;
 6 | 
 7 | // Text Colors
 8 | $text-color: #222222;
 9 | $alt-text-color: #ffffff;
10 | 
11 | // Link Colors
12 | $link-color: #2ba6cb;
13 | $link-color-hover: darken($link-color, 5%);
14 | 
15 | // Button Colors
16 | $button-bg-color: #2ba6cb;
17 | $button-bg-color-hover: lighten($button-bg-color, 5%);
18 | $button-border-color: #2284a1;
19 | $button-text-color: #ffffff;
20 | 


--------------------------------------------------------------------------------
/source/stylesheets/modules/_custom.scss:
--------------------------------------------------------------------------------
 1 | /* Template-specific Styles */
 2 | 
 3 | .template-label {
 4 |   color: #ffffff;
 5 |   font-weight: bold;
 6 |   font-size: 11px;
 7 | }
 8 | 
 9 | .callout .wrapper {
10 |   padding-bottom: 20px;
11 | }
12 | 
13 | .callout .panel {
14 |   background: #ECF8FF;
15 |   border-color: #b9e5ff;
16 | }
17 | 
18 | .header {
19 |   background: $dark-background;
20 | }
21 | 
22 | .connect .wrapper {
23 |   background: $light-background;
24 | }
25 | 
26 | .connect h5 {
27 |   padding-bottom: 10px;
28 | }
29 | 
30 | table.columns .text-pad {
31 |   padding-left: 10px;
32 |   padding-right: 10px;
33 | }
34 | 
35 | table.columns .left-text-pad {
36 |   padding-left: 10px;
37 | }
38 | 
39 | table.columns .right-text-pad {
40 |   padding-right: 10px;
41 | }


--------------------------------------------------------------------------------
/source/stylesheets/modules/_grid.scss:
--------------------------------------------------------------------------------
  1 | /* Responsive Grid */
  2 | 
  3 | table.body {
  4 |   height: 100%;
  5 |   width: 100%;
  6 | }
  7 | 
  8 | table.container {
  9 |   width: 580px;
 10 |   margin: 0 auto;
 11 |   text-align: inherit;
 12 | }
 13 | 
 14 | table.row { 
 15 |   padding: 0px; 
 16 |   width: 100%;
 17 |   position: relative;
 18 | }
 19 | 
 20 | table.container table.row {
 21 |   display: block;
 22 | }
 23 | 
 24 | td.wrapper {
 25 |   padding: 10px 20px 0px 0px;
 26 |   position: relative;
 27 | }
 28 | 
 29 | table.columns,
 30 | table.column {
 31 |   margin: 0 auto;
 32 | }
 33 | 
 34 | table.columns td,
 35 | table.column td {
 36 |   padding: 0px 0px 10px; 
 37 | }
 38 | 
 39 | table.columns td.sub-columns,
 40 | table.column td.sub-columns,
 41 | table.columns td.sub-column,
 42 | table.column td.sub-column {
 43 |   padding-right: 10px;
 44 | }
 45 | 
 46 | td.sub-column, td.sub-columns {
 47 |   min-width: 0px;
 48 | }
 49 | 
 50 | table.row td.last,
 51 | table.container td.last {
 52 |   padding-right: 0px;
 53 | }
 54 | 
 55 | table.one { width: 30px; }
 56 | table.two { width: 80px; }
 57 | table.three { width: 130px; }
 58 | table.four { width: 180px; }
 59 | table.five { width: 230px; }
 60 | table.six { width: 280px; }
 61 | table.seven { width: 330px; }
 62 | table.eight { width: 380px; }
 63 | table.nine { width: 430px; }
 64 | table.ten { width: 480px; }
 65 | table.eleven { width: 530px; }
 66 | table.twelve { width: 580px; }
 67 | 
 68 | table.one center { min-width: 30px; }
 69 | table.two center { min-width: 80px; }
 70 | table.three center { min-width: 130px; }
 71 | table.four center { min-width: 180px; }
 72 | table.five center { min-width: 230px; }
 73 | table.six center { min-width: 280px; }
 74 | table.seven center { min-width: 330px; }
 75 | table.eight center { min-width: 380px; }
 76 | table.nine center { min-width: 430px; }
 77 | table.ten center { min-width: 480px; }
 78 | table.eleven center { min-width: 530px; }
 79 | table.twelve center { min-width: 580px; }
 80 | 
 81 | table.one .panel center { min-width: 10px; }
 82 | table.two .panel center { min-width: 60px; }
 83 | table.three .panel center { min-width: 110px; }
 84 | table.four .panel center { min-width: 160px; }
 85 | table.five .panel center { min-width: 210px; }
 86 | table.six .panel center { min-width: 260px; }
 87 | table.seven .panel center { min-width: 310px; }
 88 | table.eight .panel center { min-width: 360px; }
 89 | table.nine .panel center { min-width: 410px; }
 90 | table.ten .panel center { min-width: 460px; }
 91 | table.eleven .panel center { min-width: 510px; }
 92 | table.twelve .panel center { min-width: 560px; }
 93 | 
 94 | .body .columns td.one,
 95 | .body .column td.one { width: 8.333333%; }
 96 | .body .columns td.two,
 97 | .body .column td.two { width: 16.666666%; }
 98 | .body .columns td.three,
 99 | .body .column td.three { width: 25%; }
100 | .body .columns td.four,
101 | .body .column td.four { width: 33.333333%; }
102 | .body .columns td.five,
103 | .body .column td.five { width: 41.666666%; }
104 | .body .columns td.six,
105 | .body .column td.six { width: 50%; }
106 | .body .columns td.seven,
107 | .body .column td.seven { width: 58.333333%; }
108 | .body .columns td.eight,
109 | .body .column td.eight { width: 66.666666%; }
110 | .body .columns td.nine,
111 | .body .column td.nine { width: 75%; }
112 | .body .columns td.ten,
113 | .body .column td.ten { width: 83.333333%; }
114 | .body .columns td.eleven,
115 | .body .column td.eleven { width: 91.666666%; }
116 | .body .columns td.twelve,
117 | .body .column td.twelve { width: 100%; }
118 | 
119 | td.offset-by-one { padding-left: 50px; }
120 | td.offset-by-two { padding-left: 100px; }
121 | td.offset-by-three { padding-left: 150px; }
122 | td.offset-by-four { padding-left: 200px; }
123 | td.offset-by-five { padding-left: 250px; }
124 | td.offset-by-six { padding-left: 300px; }
125 | td.offset-by-seven { padding-left: 350px; }
126 | td.offset-by-eight { padding-left: 400px; }
127 | td.offset-by-nine { padding-left: 450px; }
128 | td.offset-by-ten { padding-left: 500px; }
129 | td.offset-by-eleven { padding-left: 550px; }
130 | 
131 | td.expander {
132 |   visibility: hidden;
133 |   width: 0px;
134 |   padding: 0 !important;
135 | }
136 | 
137 | table.columns .text-pad,
138 | table.column .text-pad {
139 |   padding-left: 10px;
140 |   padding-right: 10px;
141 | }
142 | 
143 | table.columns .left-text-pad,
144 | table.columns .text-pad-left,
145 | table.column .left-text-pad,
146 | table.column .text-pad-left {
147 |   padding-left: 10px;
148 | }
149 | 
150 | table.columns .right-text-pad,
151 | table.columns .text-pad-right,
152 | table.column .right-text-pad,
153 | table.column .text-pad-right {
154 |   padding-right: 10px;
155 | }
156 | 
157 | /* Block Grid */
158 | 
159 | .block-grid {
160 |   width: 100%;
161 |   max-width: 580px;
162 | }
163 | 
164 | .block-grid td {
165 |   display: inline-block;
166 |   padding:10px;
167 | }
168 | 
169 | .two-up td {
170 |   width:270px;
171 | }
172 | 
173 | .three-up td {
174 |   width:173px;
175 | }
176 | 
177 | .four-up td {
178 |   width:125px;
179 | }
180 | 
181 | .five-up td {
182 |   width:96px;
183 | }
184 | 
185 | .six-up td {
186 |   width:76px;
187 | }
188 | 
189 | .seven-up td {
190 |   width:62px;
191 | }
192 | 
193 | .eight-up td {
194 |   width:52px;
195 | }


--------------------------------------------------------------------------------
/source/stylesheets/modules/_panels.scss:
--------------------------------------------------------------------------------
 1 | // Panels
 2 | 
 3 | .panel {
 4 |   background: #f2f2f2;
 5 |   border: 1px solid #d9d9d9;
 6 |   padding: 10px !important;
 7 | }
 8 | 
 9 | .sub-grid table {
10 |   width: 100%;
11 | }
12 | 
13 | .sub-grid td.sub-columns {
14 |   padding-bottom: 0;
15 | }
16 | 


--------------------------------------------------------------------------------
/source/stylesheets/modules/_reset.scss:
--------------------------------------------------------------------------------
 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 | /* Outlook First */
91 | 
92 | body.outlook p {
93 |   display: inline !important;
94 | }


--------------------------------------------------------------------------------
/source/stylesheets/modules/_typography.scss:
--------------------------------------------------------------------------------
  1 | // Fonts
  2 | $font-family-sans-serif:  Helvetica, Arial, sans-serif;
  3 | $font-family-serif:       "Times New Roman", Times, serif;
  4 | 
  5 | $font-size-base:          14px;
  6 | $font-size-large:         ceil(($font-size-base * 1.25)); // ~18px
  7 | $font-size-small:         ceil(($font-size-base * 0.7)); // ~10px
  8 | 
  9 | $font-size-h1:            ceil(($font-size-base * 2.85)); // ~40px
 10 | $font-size-h2:            ceil(($font-size-base * 2.55)); // ~36px
 11 | $font-size-h3:            ceil(($font-size-base * 2.25)); // ~32px
 12 | $font-size-h4:            ceil(($font-size-base * 2)); // ~28px
 13 | $font-size-h5:            ceil(($font-size-base * 1.7)); // ~24px
 14 | $font-size-h6:            ceil(($font-size-base * 1.4)); // ~20px
 15 | 
 16 | $line-height: 1.3;
 17 | $line-height-px: ceil($font-size-base * $line-height); // ~19px
 18 | 
 19 | body, table.body, h1, h2, h3, h4, h5, h6, p, td {
 20 |   color: $text-color;
 21 |   font-size: $font-size-base;
 22 |   font-family: $font-family-sans-serif;
 23 |   font-weight: normal;
 24 |   padding:0;
 25 |   margin: 0;
 26 |   text-align: left;
 27 |   line-height: $line-height;
 28 | }
 29 | 
 30 | body, table.body, p, td {
 31 |   font-size: $font-size-base;
 32 |   line-height: $line-height-px;
 33 | }
 34 | 
 35 | p.lead, p.lede, p.leed {
 36 |   font-size: $font-size-large;
 37 |   line-height: 21px;
 38 | }
 39 | 
 40 | h1 {
 41 |   font-size: $font-size-h1;
 42 |   color: $text-color;
 43 |   font-weight: normal;
 44 |   word-break: normal;
 45 | 
 46 |   a {
 47 |     color: $link-color;
 48 |     text-decoration: none;
 49 | 
 50 |     &:hover,
 51 |     &:active,
 52 |     &:focus,
 53 |     &:visited {
 54 |       color: $link-color-hover;
 55 |       text-decoration: none;
 56 |     }
 57 |   }
 58 | }
 59 | 
 60 | h2 {
 61 |   font-size: $font-size-h2;
 62 |   color: $text-color;
 63 |   font-weight: normal;
 64 |   word-break: normal;
 65 | 
 66 |   a {
 67 |     color: $link-color;
 68 |     text-decoration: none;
 69 | 
 70 |     &:hover,
 71 |     &:active,
 72 |     &:focus,
 73 |     &:visited {
 74 |       color: $link-color-hover;
 75 |       text-decoration: none;
 76 |     }
 77 |   }
 78 | }
 79 | 
 80 | h3 {
 81 |   font-size: $font-size-h3;
 82 |   color: $text-color;
 83 |   font-weight: normal;
 84 |   word-break: normal;
 85 | 
 86 |   a {
 87 |     color: $link-color;
 88 |     text-decoration: none;
 89 | 
 90 |     &:hover,
 91 |     &:active,
 92 |     &:focus,
 93 |     &:visited {
 94 |       color: $link-color-hover;
 95 |       text-decoration: none;
 96 |     }
 97 |   }
 98 | }
 99 | 
100 | h4 {
101 |   font-size: $font-size-h4;
102 |   color: $text-color;
103 |   font-weight: normal;
104 |   word-break: normal;
105 | 
106 |   a {
107 |     color: $link-color;
108 |     text-decoration: none;
109 | 
110 |     &:hover,
111 |     &:active,
112 |     &:focus,
113 |     &:visited {
114 |       color: $link-color-hover;
115 |       text-decoration: none;
116 |     }
117 |   }
118 | }
119 | 
120 | h5 {
121 |   font-size: $font-size-h5;
122 |   color: $text-color;
123 |   font-weight: normal;
124 |   word-break: normal;
125 | 
126 |   a {
127 |     color: $link-color;
128 |     text-decoration: none;
129 | 
130 |     &:hover,
131 |     &:active,
132 |     &:focus,
133 |     &:visited {
134 |       color: $link-color-hover;
135 |       text-decoration: none;
136 |     }
137 |   }
138 | }
139 | 
140 | h6 {
141 |   font-size: $font-size-h6;
142 |   color: $text-color;
143 |   font-weight: normal;
144 |   word-break: normal;
145 | 
146 |   a {
147 |     color: $link-color;
148 |     text-decoration: none;
149 | 
150 |     &:hover,
151 |     &:active,
152 |     &:focus,
153 |     &:visited {
154 |       color: $link-color-hover;
155 |       text-decoration: none;
156 |     }
157 |   }
158 | }
159 | 
160 | p {
161 |   margin-bottom: 10px;
162 | 
163 |   &.lead {
164 |     font-size: $font-size-large;
165 |   }
166 | }
167 | 
168 | small {
169 |   font-size: $font-size-small;
170 | }
171 | 
172 | a {
173 |   color: $link-color;
174 |   text-decoration: underline;
175 | 
176 |   &:hover,
177 |   &:active,
178 |   &:focus,
179 |   &:visited {
180 |     color: $link-color-hover;
181 |   }
182 | }
183 | 


--------------------------------------------------------------------------------
/source/stylesheets/modules/_utilities.scss:
--------------------------------------------------------------------------------
 1 | /* Alignment & Visibility Classes */
 2 | 
 3 | table.center, td.center {
 4 |   text-align: center;
 5 | }
 6 | 
 7 | h1.center,
 8 | h2.center,
 9 | h3.center,
10 | h4.center,
11 | h5.center,
12 | h6.center {
13 |   text-align: center;
14 | }
15 | 
16 | span.center {
17 |   display: block;
18 |   width: 100%;
19 |   text-align: center;
20 | }
21 | 
22 | img.center {
23 |   margin: 0 auto;
24 |   float: none;
25 | }
26 | 
27 | .show-for-small,
28 | .hide-for-desktop {
29 |   display: none;
30 | }


--------------------------------------------------------------------------------