--- /dev/null
+{
+ "presets": ["es2015"]
+}
--- /dev/null
+.DS_Store
+node_modules
+npm-debug.log
+bower_components
+dist
+.sass-cache
--- /dev/null
+Copyright (c) 2013-2015 ZURB, inc.
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
\ No newline at end of file
--- /dev/null
+# Foundation for Emails Template
+
+This is a starter template for a project created with Foundation for Emails, a responsive email framework from ZURB.
--- /dev/null
+{
+ "name": "foundation-emails-template",
+ "version": "0.0.1",
+ "authors": [
+ "ZURB <foundation@zurb.com>"
+ ],
+ "description": "Basic template for a Foundation for Emails project.",
+ "main": "gulpfile.js",
+ "license": "MIT",
+ "homepage": "http://foundation.zurb.com/emails",
+ "ignore": [
+ "**/.*",
+ "node_modules",
+ "bower_components",
+ "test",
+ "tests"
+ ]
+}
--- /dev/null
+import gulp from 'gulp';
+import plugins from 'gulp-load-plugins';
+import browser from 'browser-sync';
+import mq from 'media-query-extractor';
+import rimraf from 'rimraf';
+import panini from 'panini';
+import yargs from 'yargs';
+import lazypipe from 'lazypipe';
+import inky from 'inky';
+
+const $ = plugins();
+
+// Look for the --production flag
+const isProduction = !!(yargs.argv.production);
+
+// Only inline if the --production flag is enabled
+var buildTasks = [clean, copy, pages, sass];
+if (isProduction) buildTasks.push(inline);
+
+// Delete the "dist" folder
+// This happens every time a build starts
+function clean(done) {
+ rimraf('dist', done);
+}
+
+// Compile layouts, pages, and partials into flat HTML files
+// Then parse using Inky templates
+function pages() {
+ return gulp.src('src/pages/**/*.html')
+ .pipe(panini({
+ root: 'src/pages',
+ layouts: 'src/layouts',
+ partials: 'src/partials'
+ }))
+ .pipe(inky())
+ .pipe(gulp.dest('dist'));
+}
+
+function resetPages(done) {
+ panini.refresh();
+ done();
+}
+
+// Compile Sass into CSS
+function sass() {
+ return gulp.src('src/assets/scss/app.scss')
+ .pipe($.if(!isProduction, $.sourcemaps.init()))
+ .pipe($.sass().on('error', $.sass.logError))
+ .pipe($.if(!isProduction, $.sourcemaps.write()))
+ .pipe(gulp.dest('dist/css'));
+}
+
+// Inline CSS and minify HTML
+function inline() {
+ return gulp.src('dist/**/*.html')
+ .pipe(inliner({
+ css: 'dist/css/app.css'
+ }))
+ .pipe(gulp.dest('dist'));
+}
+
+// Copy static assets
+function copy() {
+ return gulp.src('src/assets/img/*')
+ .pipe(gulp.dest('./dist/assets/img'));
+}
+
+// Build the "dist" folder by running all of the above tasks
+gulp.task('build',
+ gulp.series.apply(gulp, buildTasks));
+
+// Build emails, run the server, and watch for file changes
+gulp.task('default',
+ gulp.series('build', server, watch));
+
+// Start a server with LiveReload to preview the site in
+function server(done) {
+ browser.init({
+ server: 'dist'
+ });
+ done();
+}
+
+// Watch for file changes
+function watch() {
+ gulp.watch('src/pages/**/*.html', gulp.series(pages, browser.reload));
+ gulp.watch(['src/layouts/**/*', 'src/partials/**/*'], gulp.series(resetPages, pages, browser.reload));
+ gulp.watch(['../scss/**/*.scss', 'src/assets/scss/**/*.scss'], gulp.series(sass, browser.reload));
+}
+
+function inliner(options) {
+ var cssPath = options.css;
+ var cssMqPath = cssPath.replace(/\.css$/, '-mq.css');
+
+ // Extracts media query-specific CSS into a separate file
+ mq(cssPath, cssMqPath, [
+ 'only screen and (max-width: 580px)|' + cssMqPath
+ ]);
+
+ var pipe = lazypipe()
+ .pipe($.inlineCss)
+ .pipe($.inject, gulp.src(cssMqPath), {
+ transform: function(path, file) {
+ return '<style>\n' + file.contents.toString() + '\n</style>';
+ }
+ })
+ .pipe($.htmlmin, {
+ collapseWhitespace: false,
+ minifyCSS: true
+ });
+
+ return pipe();
+}
--- /dev/null
+{
+ "name": "foundation-emails-template",
+ "version": "0.0.1",
+ "description": "Basic template for a Foundation for Emails project.",
+ "main": "gulpfile.js",
+ "scripts": {
+ "start": "gulp",
+ "build": "gulp --production"
+ },
+ "author": "ZURB <foundation@zurb.com>",
+ "license": "MIT",
+ "devDependencies": {
+ "babel-core": "^6.3.26",
+ "babel-preset-es2015": "^6.3.13",
+ "browser-sync": "^2.11.0",
+ "gulp": "git://github.com/gulpjs/gulp.git#4.0",
+ "gulp-cli": "^1.1.0",
+ "gulp-htmlmin": "^1.1.1",
+ "gulp-if": "^2.0.0",
+ "gulp-inject": "^3.0.0",
+ "gulp-inline-css": "^3.0.0",
+ "gulp-load-plugins": "^1.1.0",
+ "gulp-sass": "^2.1.0",
+ "gulp-sourcemaps": "^1.6.0",
+ "gulp-webserver": "^0.9.1",
+ "inky": "^0.1.0",
+ "lazypipe": "^1.0.1",
+ "media-query-extractor": "^0.1.1",
+ "panini": "^1.1.1",
+ "rimraf": "^2.3.3",
+ "yargs": "^3.9.0"
+ }
+}
--- /dev/null
+// Foundation for Emails Settings
+// ------------------------------
+//
+// Table of Contents:
+//
+// 1. Global
+// 2. Grid
+// 3. Block Grid
+// 4. Button
+// 5. Callout
+// 6. Media Query
+// 7. Normalize
+// 8. Thumbnail
+// 9. Typography
+
+
+// 1. Global
+// ---------
+
+$primary-color: #2199e8;
+$secondary-color: #777;
+$success-color: #3adb76;
+$warning-color: #ffae00;
+$alert-color: #ec5840;
+$light-gray: #f3f3f3;
+$medium-gray: #cacaca;
+$dark-gray: #8a8a8a;
+$black: #0a0a0a;
+$white: #fefefe;
+$pre-color: #ff6908;
+$column-gutter: 20px;
+$container-width: 580px;
+$global-radius: 3px;
+$global-rounded: 500px;
+
+// 2. Grid
+// -------
+
+$grid-column-count: 12;
+$wrapper-padding-top: 10px;
+$column-padding-bottom: 10px;
+$sub-column-padding-right: $column-gutter / 2;
+
+// 3. Block Grid
+// -------------
+
+$block-grid-elements: 8;
+$block-grid-spacing: $column-gutter;
+
+// 4. Button
+// ---------
+
+$button-padding: 12px 0 12px 0;
+$button-padding-tiny: 5px 0 4px 0;
+$button-padding-small: 8px 0 7px;
+$button-padding-large: 21px 0 18px;
+$button-font-color: $white;
+$button-font-color-alt: $medium-gray;
+$button-font-weight: bold;
+$button-font-size: 20px;
+$button-font-size-tiny: 12px;
+$button-font-size-small: 16px;
+$button-font-size-large: 24px;
+$button-background-color: $primary-color;
+$button-border: 1px solid darken($button-background-color, 10%);
+
+// 5. Callout
+// ----------
+
+$callout-background-color: $light-gray;
+$callout-padding: 10px;
+$callout-border: 1px solid darken($callout-background-color, 20%);
+$callout-border-success: 1px solid darken($success-color, 20%);
+$callout-border-warning: 1px solid darken($warning-color, 20%);
+$callout-border-alert: 1px solid darken darken($alert-color, 20%);
+
+// 6. Media Query
+// --------------
+
+$small-container-width: 95%;
+$small-range: $container-width;
+
+// 7. Normalize
+// ------------
+
+$hr-color: $medium-gray;
+$hr-height: 1px;
+
+// 8. Thumbnail
+// ------------
+
+$thumbnail-shadow-h: 0;
+$thumbnail-shadow-v: 0;
+$thumbnail-shadow-blur: 6px;
+$thumbnail-shadow-spread: 1px;
+$thumbnail-shadow-color: $primary-color;
+$thumbnail-shadow-opacity: 0.5;
+
+// 9. Typography
+// -------------
+
+$global-font-color: $black;
+$global-font-family: Helvetica, Arial, sans-serif;
+$global-font-weight: normal;
+$global-line-height: 1.3;
+$body-font-size: 14px;
+$body-line-height: 19px;
+$header-font-family: Georgia, Times, serif;
+$h1-font-size: 40px;
+$h2-font-size: 36px;
+$h3-font-size: 32px;
+$h4-font-size: 28px;
+$h5-font-size: 24px;
+$h6-font-size: 20px;
+$small-font-size: 10px;
+$paragraph-lead-font-size: 18px;
+$paragraph-lead-line-height: 21px;
+$paragraph-margin-bottom: 10px;
+$text-padding: 10px;
+$anchor-text-decoration: none;
+$anchor-font-color: $primary-color;
+$anchor-font-color-visited: $anchor-font-color;
+$anchor-font-color-hover: darken($primary-color, 10%);
+$anchor-font-color-active: $anchor-font-color-hover;
+
--- /dev/null
+@import 'settings';
+@import '../../../../scss/ink';
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <link rel="stylesheet" type="text/css" href="css/app.css">
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <meta name="viewport" content="width=device-width"/>
+ <!-- inject:css -->
+ <!-- endinject -->
+</head>
+
+<body>
+ <table class="body">
+ <tr>
+ <td class="center" align="center" valign="top">
+ <center>
+ {{> body}}
+ </center>
+ </td>
+ </tr>
+ </table>
+</body>
+</html>
--- /dev/null
+<row class="header">
+ <td class="center" align="center">
+ <center>
+ <container>
+ <columns large='12' small='12'>
+ <subcolumns large='6' small='6'>
+ <img src="http://placehold.it/200x50"/>
+ </subcolumns>
+ <subcolumns large='6' small='6' class=" sub-header">
+ <span class="template-label">Basic</span>
+ </subcolumns>
+ </columns>
+ </container>
+ </center>
+ </td>
+</row>
+<container>
+ <row>
+ <columns large='12' small='12'>
+ <h1>Hi, Susan Calvin</h1>
+ <p class="lead">Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae.</p>
+ <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.</p>
+ </columns>
+ </row>
+ <row class="callout">
+ <columns large='12' small='12'>
+ <td class="callout">
+ <p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. <a href="#">Click it! »</a></p>
+ </td>
+ </columns>
+ </row>
+ <row class="footer">
+ <columns large='6' small='12'>
+ <td class="left-text-pad">
+ <h5>Connect With Us:</h5>
+ <table class="button tiny facebook">
+ <tr>
+ <td>
+ <a href="#">Facebook</a>
+ </td>
+ </tr>
+ </table>
+ <br>
+ <table class="button tiny twitter">
+ <tr>
+ <td>
+ <a href="#">Twitter</a>
+ </td>
+ </tr>
+ </table>
+ <br>
+ <table class="button tiny google-plus">
+ <tr>
+ <td>
+ <a href="#">Google +</a>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </columns>
+ <columns large='6' small='12'>
+ <td class="last right-text-pad">
+ <h5>Contact Info:</h5>
+ <p>Phone: 408.341.0600</p>
+ <p>Email: <a href="mailto:hseldon@trantor.com">hseldon@trantor.com</a></p>
+ </td>
+ </columns>
+ </row>
+ <row>
+ <columns large='12' small='12'>
+ <center>
+ <p style="text-align:center;"><a href="#">Terms</a> | <a href="#">Privacy</a> | <a href="#">Unsubscribe</a></p>
+ </center>
+ </columns>
+ </row>
+</container>
--- /dev/null
+<row class="header">
+ <td class="center" align="center">
+ <center>
+ <container>
+ <columns large='12' small='12'>
+ <subcolumns large='6' small='6'>
+ <img src="http://placehold.it/200x50"/>
+ </subcolumns>
+ <subcolumns large='6' small='6' class=" sub-header">
+ <span class="template-label">Basic</span>
+ </subcolumns>
+ </columns>
+ </container>
+ </center>
+ </td>
+</row>
+<container>
+ <row>
+ <columns large='12' small='12'>
+ <h1>Hi, Susan Calvin</h1>
+ <p class="lead">Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae.</p>
+ <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.</p>
+ </columns>
+ </row>
+ <row class="callout">
+ <columns large='12' small='12'>
+ <td class="callout">
+ <p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. <a href="#">Click it! »</a></p>
+ </td>
+ </columns>
+ </row>
+ <row class="footer">
+ <columns large='6' small='12'>
+ <td class="left-text-pad">
+ <h5>Connect With Us:</h5>
+ <table class="button tiny facebook">
+ <tr>
+ <td>
+ <a href="#">Facebook</a>
+ </td>
+ </tr>
+ </table>
+ <br>
+ <table class="button tiny twitter">
+ <tr>
+ <td>
+ <a href="#">Twitter</a>
+ </td>
+ </tr>
+ </table>
+ <br>
+ <table class="button tiny google-plus">
+ <tr>
+ <td>
+ <a href="#">Google +</a>
+ </td>
+ </tr>
+ </table>
+ </td>
+ </columns>
+ <columns large='6' small='12'>
+ <td class="last right-text-pad">
+ <h5>Contact Info:</h5>
+ <p>Phone: 408.341.0600</p>
+ <p>Email: <a href="mailto:hseldon@trantor.com">hseldon@trantor.com</a></p>
+ </td>
+ </columns>
+ </row>
+ <row>
+ <columns large='12' small='12'>
+ <center>
+ <p style="text-align:center;"><a href="#">Terms</a> | <a href="#">Privacy</a> | <a href="#">Unsubscribe</a></p>
+ </center>
+ </columns>
+ </row>
+</container>
--- /dev/null
+<container>
+ <row>
+ <columns small="12" large="6">
+ <center>
+ <inky></inky>
+ </center>
+ </columns>
+ </row>
+</container>
+<container>
+ <row>
+ <columns small="6" large="6">
+ <h2>Hello,<br> Han Fastolfe</h2>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
+ <p>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.</p>
+ <br>
+
+ <p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. <a href="#">Click it! »</a></p>
+ <br>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
+ <p>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.</p>
+ <button>I'm a Button</button>
+ </columns>
+
+ <columns small="6" large="6">
+ <h6>Header Thing</h6>
+ <p>Sub-head or something</p>
+
+ <a href="#">Just a Plain Link »</a>
+ <a href="#">Just a Plain Link »</a>
+ <a href="#">Just a Plain Link »</a>
+ <a href="#">Just a Plain Link »</a>
+ <a href="#">Just a Plain Link »</a>
+ <a href="#">Just a Plain Link »</a>
+ <a href="#">Just a Plain Link »</a>
+ </columns>
+ </row>
+ <row>
+ <columns small="12" large="12">
+ <center>
+ <p style="text-align:center;"><a href="#">Terms</a> | <a href="#">Privacy</a> | <a href="#">Unsubscribe</a></p>
+ </center>
+ </columns>
+ </row>
+</container>
--- /dev/null
+<row>
+ <columns large='12'>
+ <center>
+ <p style="text-align:center;"><a href="#">Terms</a> | <a href="#">Privacy</a> | <a href="#">Unsubscribe</a></p>
+ </center>
+ </columns>
+</row>
\ No newline at end of file
projects / thirdparty / foundation / foundation-emails.git / commitdiff
