While in the process of creating our official docs, this README.md file will be your guide to installing, running, and documentation for F4E. If you need to brush up on Ink, you can still find our [old docs here.](http://foundation.zurb.com/emails/docs.html)
## Requirements
-Requires NodeJS to be installed on your machine. Works with 0.10, 0.12, and 4.1! **Note that parts of our build process will break with NPM 3, due to the changes in how packages are installed.**
+Requires NodeJS to be installed on your machine. Works with 0.12, and 4.x, and 5.x! **Note that parts of our build process will break with NPM 3, due to the changes in how packages are installed.**
The Sass is compiled using libsass, which requires the GCC to be installed on your machine. Windows users can install it through [MinGW](http://www.mingw.org/), and Mac users can install it through the [Xcode Command-line Tools](http://osxdaily.com/2014/02/12/install-command-line-tools-mac-os-x/).
foundation-emails/
├── _build/
│ └── ...
-├── test/
+├── foundation-emails-template/
│ └── layouts
│ └── ...
│ └── pages
│ └── ...
```
-You'll be working within the `test/layouts` and `test/pages` to write your HTML emails. The `_build` directory will have all of your outputted emails.
+You'll be working within the `foundation-emails-template/layouts/` and `foundation-emails-template/pages/` to write your HTML emails. The `dist/` directory will have all of your outputted emails.
## Commands
You'll have two commands that will give you all the tools you need for F4E.
-Subproject commit 7be1038ca4c2269b28cd727100d242e240340c40
+Subproject commit ef52c6d49d097313924f4240d6a16920bdd95855
+++ /dev/null
-var gulp = require('gulp');
-var $ = require('gulp-load-plugins')();
-var mq = require('media-query-extractor');
-var rimraf = require('rimraf');
-var panini = require('panini');
-var yargs = require('yargs').argv;
-var sequence = require('run-sequence');
-var browser = require('browser-sync');
-
-console.log(process.argv);
-
-// Look for the --production flag
-var isProduction = !!(yargs.production);
-
-// Delete the "dist" folder
-// This happens every time a build starts
-gulp.task('clean', function(done) {
- rimraf('../_build', done);
-});
-
-// Compile layouts, pages, and partials into flat HTML files
-// Then parse using Inky templates
-gulp.task('pages', function() {
- return gulp.src('./pages/**/*.html')
- .pipe(panini({
- root: './pages',
- layouts: './layouts'
- }))
- .pipe($.inky())
- .pipe(gulp.dest('../_build'));
-});
-
-// Compile Sass into CSS
-gulp.task('sass', function() {
- return gulp.src('./scss/app.scss')
- .pipe($.if(!isProduction, $.sourcemaps.init()))
- .pipe($.sass().on('error', $.sass.logError))
- .pipe($.if(!isProduction, $.sourcemaps.write()))
- .pipe(gulp.dest('../_build/css'));
-});
-
-// Inline CSS and minify HTML
-gulp.task('inline', function() {
- return gulp.src('../_build/*.html')
- .pipe(inline({
- css: '../_build/css/app.css'
- }))
- .pipe(gulp.dest('../_build'));
-});
-
-gulp.task('server', ['build'], function() {
- browser.init({
- server: '../_build'
- });
-});
-
-// Build the "dist" folder by running all of the above tasks
-gulp.task('build', function(cb) {
- var tasks = ['clean', ['pages', 'sass']];
- if (isProduction) tasks.push('inline');
- tasks.push(cb);
- sequence.apply(this, tasks);
-});
-
-// Build emails, run the server, and watch for file changes
-gulp.task('default', ['server'], function() {
- gulp.watch('./pages/**/*.html', ['pages', browser.reload]);
- gulp.watch(['../scss/**/*.scss', './scss/**/*.scss'], ['sass', browser.reload]);
-});
-
-function inline(options) {
- var lazypipe = require('lazypipe');
- 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
-<!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>
\ No newline at end of file
+++ /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>
\ No newline at end of file
+++ /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
-// 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';
projects / thirdparty / foundation / foundation-emails.git / commitdiff
