+++ /dev/null
-<!DOCTYPE html>
-<html>
-<head>
- <link rel="stylesheet" type="text/css" href="css/ink.css">
- <!-- inject:mq-css -->
- <!-- endinject -->
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <meta name="viewport" content="width=device-width">
-</head>
-
-<body>
- <table class="body">
- <tr>
- <td class="center" align="center" valign="top">
- <center>
- <table class="container"><tbody><tr><td>
- <table class="row"><tbody><tr>
- <td class="wrapper last"><table class="small-12 large-12 columns"><tr><td class="sub-columns small-6 large-6">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.
- </p>
- </td><td class="sub-columns last small-6 large-6">
- <img src="http://placehold.it/400x100" alt="">
- </td><td class="expander"></td></tr></table></td>
- </tr></tbody></table>
- </td></tr></tbody></table>
-
- <br>
- <br>
- <br>
- <br>
-
- <table class="container"><tbody><tr><td>
- <table class="row"><tbody><tr>
- <td class="wrapper"><table class="small-12 large-6 columns"><tr></tr><tr><td><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.
- </p></td></tr><td class="expander"></td></table></td>
- <td class="wrapper last"><table class="small-12 large-6 columns"><tr></tr><tr><td><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.
- </p></td></tr><td class="expander"></td></table></td>
- </tr></tbody></table>
- </td></tr></tbody></table>
-
- </center>
- </td>
- </tr>
- </table>
-</body>
-</html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
-<head>
- <link rel="stylesheet" type="text/css" href="css/ink.css">
- <!-- inject:mq-css -->
- <!-- endinject -->
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <meta name="viewport" content="width=device-width">
-</head>
-
-<body>
- <table class="body">
- <tr>
- <td class="center" align="center" valign="top">
- <center>
- <table class="row"><tbody><tr>
- <td class="wrapper last"><table class="small-12 large-12 columns"><tr></tr><tr><td><h6>What's up</h6></td></tr><td class="expander"></td></table></td>
- </tr></tbody></table>
- </center>
- </td>
- </tr>
- </table>
-</body>
-</html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
-<head>
- <link rel="stylesheet" type="text/css" href="css/ink.css">
- <!-- inject:mq-css -->
- <!-- endinject -->
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <meta name="viewport" content="width=device-width">
-</head>
-
-<body>
- <table class="body">
- <tr>
- <td class="center" align="center" valign="top">
- <center>
- <table class="row header"><tbody><tr>
- <table class="container"><tbody><tr><td>
- </td><td class="wrapper last"><table class="small-12 large-12 columns"><tr><td class="sub-columns small-6 large-6">
- <img src="http://placehold.it/200x50">
- </td><td class="sub-columns last small-6 large-6">
- <span class="template-label">SIDEBAR HERO</span>
- </td><td class="expander"></td></tr></table></td>
- </tr></tbody></table></tr></tbody></table></center></td></tr></table>
-
- <table class="container"><tbody><tr><td>
- <table class="row"><tbody><tr>
- <td class="wrapper last"><table class="small-12 large-12 columns"><tr></tr><tr><td><h1>asdfakh</h1></td></tr><tr><td><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p></td></tr><img width="580" height="300" src="https://placekitten.com/g/580/300"><td class="expander"></td></table></td>
- </tr></tbody></table>
- <table class="row"><tbody><tr>
- <td class="wrapper last"><table class="small-12 large-12 columns"><tr><td class="callout">
- <p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae.</p>
- <table class="button"><tbody><tr><td><a href="#">Click it! »</a></td></tr></tbody></table>
- </td><td class="expander"></td></tr></table></td>
- </tr></tbody></table>
- <table class="row"><tbody><tr>
- <td class="wrapper"><table class="small-12 large-6 columns"><tr></tr><tr><td><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></td></tr><tr><td><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></td></tr><td><table class="button"><tbody><tr><td><a href="#">Click Me!</a></td></tr></tbody></table></td><tr><td><br></td></tr><td class="callout">
- <p>What a game</p>
- </td><td class="expander"></td></table></td>
- <td class="wrapper last"><table class="small-12 large-6 columns"><tr><td class="callout">
- <h6>Header Thing</h6>
- <p>Sub-head or something</p>
- <table class="inline-list"><tbody><tr><td class="vertical"><a href="#">Just a Plain Link »</a></td></tr><tr><td class="vertical"><a href="#">Just a Plain Link »</a></td></tr><tr><td class="vertical"><a href="#">Just a Plain Link »</a></td></tr><tr><td class="vertical"><hr></td></tr><tr><td class="vertical"><a href="#">Just a Plain Link »</a></td></tr><tr><td class="vertical"><hr></td></tr><tr><td class="vertical"><a href="#">Just a Plain Link »</a></td></tr><tr><td class="vertical"><hr></td></tr><tr><td class="vertical"><a href="#">Just a Plain Link »</a></td></tr><tr><td class="vertical"><hr></td></tr><tr><td class="vertical"><a href="#">Just a Plain Link »</a></td></tr></tbody></table>
- </td><td class="expander"></td></tr></table></td>
- </tr></tbody></table>
- <table class="row"><tbody><tr>
- <td class="wrapper"><table class="small-12 large-6 columns"><tr><td class="expander"></td></tr></table></td>
- <td class="wrapper last"><table class="small-12 large-6 columns"><tr><td class="callout">
- <h6 style="margin-bottom:5px;">Connect With Us:</h6>
- <table class="button tiny-button facebook"><tbody><tr><td>
- <a href="#">Facebook</a>
- </td></tr></tbody></table>
- <hr>
- <table class="button tiny-button twitter"><tbody><tr><td>
- <a href="#">Twitter</a>
- </td></tr></tbody></table>
- <hr>
- <table class="button tiny-button google-plus"><tbody><tr><td>
- <a href="#">Google</a>
- </td></tr></tbody></table>
- <br>
- <h6 style="margin-bottom:5px;">Contact Info:</h6>
- <p>Phone: <b>408.341.0600</b></p>
- <p>Email: <a href="mailto:hseldon@trantor.com">hseldon@trantor.com</a></p>
- </td><td class="expander"></td></tr></table></td>
- </tr></tbody></table>
- </td></tr></tbody></table>
-
-
-
-
-
-</body>
-</html>
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>
-<html>
-<head>
- <link rel="stylesheet" type="text/css" href="css/ink.css">
- <!-- inject:mq-css -->
- <!-- endinject -->
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <meta name="viewport" content="width=device-width">
-</head>
-
-<body>
- <table class="body">
- <tr>
- <td class="center" align="center" valign="top">
- <center>
- <table class="container"><tbody><tr><td>
- <table class="row"><tbody><tr>
- <td class="wrapper last"><table class="small-12 large-12 columns"><tr></tr><tr><td><p class="lead">Hi John,</p></td></tr><tr><td><p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet.</p></td></tr><td class="expander"></td></table></td>
- </tr></tbody></table>
- <table class="row"><tbody><tr>
- <td class="wrapper last"><table class="small-12 large-12 columns"><tr><img width="580" height="300" src="http://placehold.it/580x300"><td class="expander"></td></tr></table></td>
- </tr></tbody></table>
- <table class="row"><tbody><tr>
- <td class="wrapper last"><table class="small-12 large-12 columns"><tr></tr><tr><td><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p></td></tr><tr><td><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p></td></tr><tr><td><p>Cheers,<br>Bryan</p></td></tr><td class="expander"></td></table></td>
- </tr></tbody></table>
- <hr>
- <table class="row"><tbody><tr>
- <td class="wrapper"><table class="small-12 large-6 columns"><tr></tr><tr>
- <td class="tweet-pad panel tweet-head">
- <a href="https://twitter.com/ZURB/status/541043140933582848">
- <img align="left" class="tweet-avatar" src="http://placehold.it/50x50">
- <h3>ZURB</h3>
- <h6 class="tweet-handle">@ZURB</h6>
- </a>
- </td>
- <td class="expander"></td>
- </tr><tr>
- <td class="tweet-pad panel">
- <p>Introducing Foundation for Apps: Create beautiful web apps that look great on all devices. <a href="http://t.co/ufBR1IalT5">zurb.us/1yjUnj6</a></p>
- </td>
- <td class="expander"></td>
- </tr><tr>
- <td class="tweet-pad tweet-foot panel">
- <a href="https://twitter.com/ZURB/status/541043140933582848">
- <p class="tweet-date">8:35 PM - 5 Dec 2014</p>
- </a>
- </td>
- <td class="expander"></td>
- </tr><td class="expander"></td></table></td>
-
- <td class="wrapper last"><table class="small-12 large-6 columns"><tr></tr><tr>
- <td align="left" class="tweet-pad panel tweet-head">
- <a href="https://twitter.com/ZURB/status/541043140933582848">
- <img align="left" class="tweet-avatar" src="http://placehold.it/50x50">
- <h3>ZURB</h3>
- <h6 class="tweet-handle">@ZURB</h6>
- </a>
- </td>
- <td class="expander"></td>
- </tr><tr>
- <td class="tweet-pad panel">
- <p>Introducing Foundation for Apps: Create beautiful web apps that look great on all devices. <a href="http://t.co/ufBR1IalT5">zurb.us/1yjUnj6</a></p>
- </td>
- <td class="expander"></td>
- </tr><tr>
- <td class="tweet-pad tweet-foot panel">
- <a href="https://twitter.com/ZURB/status/541043140933582848">
- <p class="tweet-date">8:35 PM - 5 Dec 2014</p>
- </a>
- </td>
- <td class="expander"></td>
- </tr><td class="expander"></td></table></td>
- </tr></tbody></table>
- <hr>
-
-
-
-
- <table class="row copyright"><tbody><tr>
- <td class="wrapper last"><table class="small-12 large-12 columns"><tr></tr><tr><td><h5 class="center">Sharing is caring</h5></td></tr><tr><td><p class="center">Share ZURBnews and keep the good vibes going.</p></td></tr><td class="expander"></td></table></td>
- </tr></tbody></table>
-
- <!-- ^^^^^Expander not working^^^^^ -->
-
-
- <table class="row share-news" offset="1"><tbody><tr>
- <!-- ^^^Not sure how to best implement the offset class.^^^^
- It is applied to a td.wrapper that is automatically generated.
- This might be a proposed option -->
- <td class="wrapper"><table class="small-12 large-1 columns"><tr><td class="expander"></td></tr></table></td>
- <td class="wrapper"><table class="small-12 large-5 columns"><tr><td><table class="button facebook"><tbody><tr><td>
- <a href="#">Share on facebook</a>
- </td></tr></tbody></table></td><td class="expander"></td></tr></table></td>
- <td class="wrapper last"><table class="small-12 large-5 columns"><tr><td><table class="button facebook"><tbody><tr><td>
- <a href="#">Share on facebook</a>
- </td></tr></tbody></table></td><td class="expander"></td></tr></table></td>
- </tr></tbody></table>
- <hr>
- </td></tr></tbody></table>
-
- </center>
- </td>
- </tr>
- </table>
-</body>
-</html>
\ No newline at end of file
});
// Inline CSS and minify HTML
-gulp.task('inline', ['build'], function() {
+gulp.task('inline', function() {
// Extracts media query-specific CSS into a separate file
- mq('../_build/css/app.css', '../_build/css/app-mq.css');
+ mq('../_build/css/ink.css', '../_build/css/ink-mq.css');
- // Injects that extracted CSS into the HTML
- var inject = $.inject(gulp.src('../_build/css/app-mq.css'), {
- starttag: '<!-- inject:mq -->',
- transform: function(path, file) {
- return '<style>\n' + file.contents.toString() + '\n</style>';
- }
+ var inject = $.inject(gulp.src('../_build/css/ink-mq.css'), {
+ transform: function(path, file) { return '<style>' + file.contents.toString(); + '</style>'; }
});
return gulp.src('../_build/*.html')
.pipe($.inlineCss())
- .pipe(inject())
- .pipe($.htmlmin())
+ .pipe(inject)
+ // .pipe($.htmlmin())
.pipe(gulp.dest('../_build'));
});
// Build the "dist" folder by running all of the above tasks
-gulp.task('build', function(done) {
- var tasks = ['pages', 'sass'];
- if (isProduction) tasks.push('inline');
-
- sequence('clean', tasks, done);
+gulp.task('build', function(cb) {
+ sequence('clean', ['pages', 'sass'], 'inline', cb);
});
// Build emails, run the server, and watch for file changes
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/ink.css">
- <!-- inject:mq-css -->
+ <!-- inject:css -->
<!-- endinject -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width"/>