var browser = require('browser-sync');
var foundationDocs = require('foundation-docs');
var octophant = require('octophant');
+var inky = require('inky');
+var siphon = require('siphon-media-query');
+var lazypipe = require('lazypipe');
+var fs = require('fs');
// Configuration for the documentation generator
supercollider
gulp.watch(['docs/assets/scss/**/*', 'node_modules/foundation-docs/scss/**/*'], ['sass:docs', browser.reload]);
gulp.watch('scss/**/*.scss', ['sass:foundation', browser.reload]);
});
+
+gulp.task('test', ['sass', 'test:compile'], function() {
+ browser.init({ server: 'test/visual/_build', directory: true });
+ gulp.watch('scss/**/*.scss', ['sass:foundation', browser.reload]);
+ gulp.watch('test/visual/pages/*.html', ['test:compile', browser.reload]);
+});
+
+gulp.task('test:compile', function() {
+ gulp.src('test/visual/pages/*.html')
+ .pipe($.wrap({ src: 'test/visual/_template.html' }))
+ .pipe(inky())
+ .pipe(inliner('_build/assets/css/foundation.css'))
+ .pipe(gulp.dest('test/visual/_build'));
+});
+
+function inliner(css) {
+ var css = fs.readFileSync(css).toString();
+ var mqCss = siphon(css);
+
+ var pipe = lazypipe()
+ .pipe($.inlineCss, {
+ applyStyleTags: false
+ })
+ .pipe($.injectString.replace, '<!-- <style> -->', `<style>${mqCss}</style>`)
+ .pipe($.htmlmin, {
+ collapseWhitespace: true,
+ minifyCSS: true
+ });
+
+ return pipe();
+}
"scripts": {
"start": "gulp",
"test": "cd testing && npm start",
+ "test:visual": "gulp test",
"production": "cd testing && npm run build"
},
"repository": "https://github.com/zurb/foundation-emails",
"gulp-autoprefixer": "^2.3.1",
"gulp-cached": "^1.1.0",
"gulp-concat": "^2.6.0",
- "gulp-htmlmin": "^1.1.1",
+ "gulp-htmlmin": "^1.3.0",
"gulp-if": "^2.0.0",
"gulp-inject": "^1.2.0",
+ "gulp-inject-string": "^1.1.0",
"gulp-inline-css": "^2.0.0",
"gulp-load-plugins": "^1.0.0-rc.1",
"gulp-ruby-sass": "^1.0.5",
"gulp-sass-lint": "^1.1.1",
"gulp-sourcemaps": "^1.6.0",
"gulp-webserver": "^0.9.1",
+ "gulp-wrap": "^0.11.0",
"handlebars": "^3.0.3",
"highlight.js": "^8.7.0",
- "inky": "^1.2.2",
+ "inky": "^1.2.3",
"lazypipe": "^1.0.1",
"marked": "^0.3.5",
"media-query-extractor": "^0.1.1",
"panini": "^1.2.0",
"rimraf": "^2.4.2",
"run-sequence": "^1.1.2",
+ "siphon-media-query": "^1.0.0",
"string-template": "^0.2.1",
"supercollider": "^1.4.0",
"typeahead.js": "^0.11.1",
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width"/>
- <link rel="stylesheet" type="text/css" href="css/app.css">
+ <link rel="stylesheet" href="../assets/css/foundation.css">
</head>
-
+
<body>
<!-- <style> -->
<table class="body" data-made-with-foundation>
<tr>
<td class="center" align="center" valign="top">
<center>
- {{> body}}
+ <%= contents %>
</center>
</td>
</tr>
--- /dev/null
+../../_build/assets
\ No newline at end of file
+++ /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 rimraf from 'rimraf';
-import panini from 'panini';
-import yargs from 'yargs';
-import lazypipe from 'lazypipe';
-import inky from 'inky';
-import fs from 'fs';
-import siphon from 'siphon-media-query';
-
-const $ = plugins();
-
-// Look for the --production flag
-const PRODUCTION = !!(yargs.argv.production);
-
-// Build the "dist" folder by running all of the above tasks
-gulp.task('build',
- gulp.series(clean, pages, sass, images, inline));
-
-// Build emails, run the server, and watch for file changes
-gulp.task('default',
- gulp.series('build', server, watch));
-
-// 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'));
-}
-
-// Reset Panini's cache of layouts and partials
-function resetPages(done) {
- panini.refresh();
- done();
-}
-
-// Compile Sass into CSS
-function sass() {
- return gulp.src('src/assets/scss/app.scss')
- .pipe($.if(!PRODUCTION, $.sourcemaps.init()))
- .pipe($.sass({
- includePaths: ['node_modules/foundation-emails/scss']
- }).on('error', $.sass.logError))
- .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
- .pipe(gulp.dest('dist/css'));
-}
-
-// Copy and compress images
-function images() {
- return gulp.src('src/assets/img/*')
- .pipe($.imagemin())
- .pipe(gulp.dest('./dist/assets/img'));
-}
-
-// Inline CSS and minify HTML
-function inline() {
- return gulp.src('dist/**/*.html')
- .pipe($.if(PRODUCTION, inliner('dist/css/app.css')))
- .pipe(gulp.dest('dist'));
-}
-
-// 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, inline, browser.reload));
- gulp.watch(['src/layouts/**/*', 'src/partials/**/*'], gulp.series(resetPages, pages, inline, browser.reload));
- gulp.watch(['../scss/**/*.scss', 'src/assets/scss/**/*.scss'], gulp.series(sass, pages, inline, browser.reload));
- gulp.watch('src/img/**/*', gulp.series(images, browser.reload));
-}
-
-// Inlines CSS into HTML, adds media query CSS into the <style> tag of the email, and compresses the HTML
-function inliner(css) {
- var css = fs.readFileSync(css).toString();
- var mqCss = siphon(css);
-
- var pipe = lazypipe()
- .pipe($.inlineCss, {
- applyStyleTags: false
- })
- .pipe($.injectString.replace, '<!-- <style> -->', `<style>${mqCss}</style>`)
- .pipe($.htmlmin, {
- collapseWhitespace: true,
- minifyCSS: true
- });
-
- return pipe();
-}
+++ /dev/null
-{
- "name": "foundation-emails-template",
- "version": "1.0.0",
- "description": "Basic template for a Foundation for Emails project.",
- "repository": "zurb/foundation-emails-template",
- "main": "gulpfile.babel.js",
- "scripts": {
- "start": "gulp",
- "build": "gulp --production"
- },
- "author": "ZURB <foundation@zurb.com>",
- "license": "MIT",
- "dependencies": {
- "foundation-emails": "2.0.0-rc.3"
- },
- "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-imagemin": "^2.4.0",
- "gulp-inject-string": "^1.1.0",
- "gulp-inline-css": "^3.0.0",
- "gulp-load-plugins": "^1.1.0",
- "gulp-sass": "^2.1.0",
- "gulp-sourcemaps": "^1.6.0",
- "inky": "^1.2.0",
- "lazypipe": "^1.0.1",
- "panini": "^1.2.0",
- "rimraf": "^2.3.3",
- "siphon-media-query": "^1.0.0",
- "yargs": "^4.1.0"
- }
-}
+++ /dev/null
-
-@media only screen and (max-width: #{$small-range}) {
- .float-right {
- margin: 0 auto;
- float: none;
- text-align: center;
- }
-}
\ No newline at end of file
+++ /dev/null
-// Foundation for Emails Settings
-// ------------------------------
-//
-// Table of Contents:
-//
-// 1. Global
-// 2. Grid
-// 3. Block Grid
-// 4. Typography
-// 5. Button
-// 6. Callout
-// 7. Menu
-// 8. Thumbnial
-
-
-// 1. Global
-// ---------
-
-$primary-color: #2199e8;
-$secondary-color: #777777;
-$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;
-$global-width: 580px;
-$global-width-small: 95%;
-$global-gutter: 16px;
-$body-background: $light-gray;
-$container-background: $white;
-$global-font-color: $black;
-$body-font-family: Helvetica, Arial, sans-serif;
-$global-padding: 16px;
-$global-margin: 32px;
-$global-radius: 3px;
-$global-rounded: 500px;
-$global-breakpoint: $global-width + $global-gutter;
-
-// 2. Grid
-// -------
-
-$grid-column-count: 12;
-$column-padding-bottom: $global-padding;
-
-// 3. Block Grid
-// -------------
-
-$block-grid-max: 8;
-$block-grid-gutter: $global-gutter;
-
-// 4. Typography
-// -------------
-
-$global-font-weight: normal;
-$header-color: inherit;
-$global-line-height: 1.3;
-$global-font-size: 14px;
-$body-line-height: 19px;
-$header-font-family: $body-font-family;
-$header-font-weight: $global-font-weight;
-$h1-font-size: 40px;
-$h2-font-size: 36px;
-$h3-font-size: 32px;
-$h4-font-size: 28px;
-$h5-font-size: 24px;
-$h6-font-size: 20px;
-$header-margin-bottom: 10px;
-$paragraph-margin-bottom: 10px;
-$small-font-size: 10px;
-$lead-font-size: $global-font-size * 1.25;
-$lead-line-height: 1.6;
-$text-padding: 10px;
-$subheader-lineheight: 1.4;
-$subheader-color: $dark-gray;
-$subheader-font-weight: $global-font-weight;
-$subheader-margin-top: 4px;
-$subheader-margin-bottom: 8px;
-$hr-width: $global-width;
-$hr-border: 1px solid $medium-gray;
-$hr-margin: 20px auto;
-$anchor-text-decoration: none;
-$anchor-color: $primary-color;
-$anchor-color-visited: $anchor-color;
-$anchor-color-hover: darken($primary-color, 10%);
-$anchor-color-active: $anchor-color-hover;
-$stat-font-size: 40px;
-
-// 5. Button
-// ---------
-
-$button-padding: (
- tiny: 4px 8px 4px 8px,
- small: 5px 10px 5px 10px,
- default: 8px 16px 8px 16px,
- large: 10px 20px 10px 20px,
-);
-$button-font-size: (
- tiny: 10px,
- small: 12px,
- default: 16px,
- large: 20px,
-);
-$button-color: $white;
-$button-color-alt: $medium-gray;
-$button-font-weight: bold;
-$button-margin: 0 0 $global-margin 0;
-$button-background: $primary-color;
-$button-border: 2px solid $button-background;
-$button-radius: $global-radius;
-$button-rounded: $global-rounded;
-
-// 6. Callout
-// ----------
-
-$callout-background: $white;
-$callout-background-fade: 85%;
-$callout-padding: 10px;
-$callout-border: 1px solid darken($callout-background, 20%);
-$callout-border-secondary: 1px solid darken($secondary-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($alert-color, 20%);
-
-// 7. Menu
-// -------
-
-$menu-item-padding: 20px;
-$menu-simple-item-spacing: 10px;
-
-// 8. Thumbnial
-// ------------
-
-$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
-
+++ /dev/null
-@import 'settings';
-@import '../../../../scss/foundation';
-
-@media only screen and (max-width: #{$global-breakpoint}) {
- .small-float-center {
- margin: 0 auto;
- float: none;
- text-align: center;
- }
-
- .small-text-center {
- text-align: center;
- }
-
- table.menu.small-vertical {
- td,
- th,
- a {
- display: block !important;
- }
- }
-}
-
-
-
-.header {
- background: $light-gray;
- border-radius: 10px;
- Margin-bottom: $global-margin * 2;
-
- .columns {
- padding-bottom: 0;
- }
-
- p {
- margin-bottom: 0;
- }
-
- img {
- padding-top: $global-padding;
- padding-bottom: $global-padding;
- }
-}
-
-.container {
- border-radius: 10px;
-}
-
-.feature-block {
- background: $light-gray;
- Margin-bottom: $global-padding * 2;
-
- .columns {
- padding-top: $global-padding * 2;
- padding-bottom: $global-padding * 2;
- }
-}
-
-.gallery {
- img {
- Margin-bottom: $global-margin;
- }
-
- .gallery-name {
- text-align: center;
- font-weight: bold;
- Margin-bottom: 0;
- }
-
- .gallery-age {
- color: $secondary-color;
- text-align: center;
- }
-}
-
-
-// building block
-
-.feature-list {
-
- .feature-list-item {
- border-top: 1px solid $light-gray;
- td, th {
- padding: 10px 0 10px 0;
- }
- }
-
- .feature-list-item-info {
- font-size: 14px;
- line-height: 21px;
- text-transform: uppercase;
- color: $medium-gray;
- Margin-bottom: 0;
- }
-
- .feature-list-item-header {
- font-size: 20px;
- line-height: 30px;
- Margin-bottom: 5px;
-
- a {
- color: $black;
- }
- }
-}
-
-
+++ /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
