From 2e5d981f1ba2afc2deaca1302880442dc4d15601 Mon Sep 17 00:00:00 2001 From: Clement Date: Wed, 1 Jul 2020 15:29:05 +0200 Subject: [PATCH] :tada: Hello world --- .babelrc | 3 + .gitignore | 8 + LICENSE | 22 +++ README.md | 130 +++++++++++++ example.config.json | 32 ++++ gulpfile.babel.js | 232 ++++++++++++++++++++++++ package.json | 56 ++++++ src/assets/img/.gitkeep | 1 + src/assets/img/archive/.gitkeep | 0 src/assets/scss/_settings.scss | 147 +++++++++++++++ src/assets/scss/app.scss | 4 + src/assets/scss/template/_template.scss | 59 ++++++ src/helpers/raw.js | 10 + src/layouts/default.html | 30 +++ src/layouts/index-layout.html | 31 ++++ src/pages/archive/.gitkeep | 0 src/pages/basic.html | 51 ++++++ src/pages/drip.html | 60 ++++++ src/pages/hero.html | 65 +++++++ src/pages/index.html | 55 ++++++ src/pages/marketing.html | 81 +++++++++ src/pages/newsletter-2.html | 43 +++++ src/pages/newsletter.html | 44 +++++ src/pages/order.html | 86 +++++++++ src/pages/password.html | 40 ++++ src/pages/readlater.html | 56 ++++++ src/pages/sidebar-hero.html | 80 ++++++++ src/pages/sidebar.html | 70 +++++++ src/pages/welcome.html | 51 ++++++ src/partials/.gitkeep | 1 + 30 files changed, 1548 insertions(+) create mode 100644 .babelrc create mode 100644 .gitignore create mode 100644 LICENSE create mode 100644 README.md create mode 100644 example.config.json create mode 100644 gulpfile.babel.js create mode 100644 package.json create mode 100644 src/assets/img/.gitkeep create mode 100644 src/assets/img/archive/.gitkeep create mode 100644 src/assets/scss/_settings.scss create mode 100644 src/assets/scss/app.scss create mode 100644 src/assets/scss/template/_template.scss create mode 100644 src/helpers/raw.js create mode 100644 src/layouts/default.html create mode 100644 src/layouts/index-layout.html create mode 100644 src/pages/archive/.gitkeep create mode 100644 src/pages/basic.html create mode 100644 src/pages/drip.html create mode 100644 src/pages/hero.html create mode 100644 src/pages/index.html create mode 100644 src/pages/marketing.html create mode 100644 src/pages/newsletter-2.html create mode 100644 src/pages/newsletter.html create mode 100644 src/pages/order.html create mode 100644 src/pages/password.html create mode 100644 src/pages/readlater.html create mode 100644 src/pages/sidebar-hero.html create mode 100644 src/pages/sidebar.html create mode 100644 src/pages/welcome.html create mode 100644 src/partials/.gitkeep diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..c13c5f6 --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["es2015"] +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..2710699 --- /dev/null +++ b/.gitignore @@ -0,0 +1,8 @@ +.DS_Store +node_modules +npm-debug.log +bower_components +dist +.sass-cache +.awspublish* +config.json diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..e490776 --- /dev/null +++ b/LICENSE @@ -0,0 +1,22 @@ +Copyright (c) 2013-2017 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. diff --git a/README.md b/README.md new file mode 100644 index 0000000..db11f70 --- /dev/null +++ b/README.md @@ -0,0 +1,130 @@ +# Foundation for Emails Template + +[![devDependency Status](https://david-dm.org/zurb/foundation-emails-template/dev-status.svg)](https://david-dm.org/zurb/foundation-emails-template#info=devDependencies) + +**Please open all issues with this template on the main [Foundation for Emails](http://github.com/zurb/foundation-emails/issues) repo.** + +This is the official starter project for [Foundation for Emails](http://foundation.zurb.com/emails), a framework for creating responsive HTML devices that work in any email client. It has a Gulp-powered build system with these features: + +- Handlebars HTML templates with [Panini](http://github.com/zurb/panini) +- Simplified HTML email syntax with [Inky](http://github.com/zurb/inky) +- Sass compilation +- Image compression +- Built-in BrowserSync server +- Full email inlining process + +## Installation + +To use this template, your computer needs [Node.js](https://nodejs.org/en/) 0.12 or greater. The template can be installed with the Foundation CLI, or downloaded and set up manually. + +### Using the CLI + +Install the Foundation CLI with this command: + +```bash +npm install foundation-cli --global +``` + +Use this command to set up a blank Foundation for Emails project: + +```bash +foundation new --framework emails +``` + +The CLI will prompt you to give your project a name. The template will be downloaded into a folder with this name. + +### Manual Setup + +To manually set up the template, first download it with Git: + +```bash +git clone https://github.com/zurb/foundation-emails-template projectname +``` + +Then open the folder in your command line, and install the needed dependencies: + +```bash +cd projectname +npm install +``` + +## Build Commands + +Run `npm start` to kick off the build process. A new browser tab will open with a server pointing to your project files. + +Run `npm run build` to inline your CSS into your HTML along with the rest of the build process. + +Run `npm run litmus` to build as above, then submit to litmus for testing. *AWS S3 Account details required (config.json)* + +Run `npm run mail` to build as above, then send to specified email address for testing. *SMTP server details required (config.json)* + +Run `npm run zip` to build as above, then zip HTML and images for easy deployment to email marketing services. + +### Speeding Up Your Build + +If you create a lot of emails, your build can start to slow down, as each build rebuilds all of the emails in the +repository. A simple way to keep it fast is to archive emails you no longer need by moving the pages into `src/pages/archive`. +You can also move images that are no longer needed into `src/assets/img/archive`. The build will ignore pages and images that +are inside the archive folder. + +## Litmus Tests (config.json) + +Testing in Litmus requires the images to be hosted publicly. The provided gulp task handles this by automating hosting to an AWS S3 account. Provide your Litmus and AWS S3 account details in the `example.config.json` and then rename to `config.json`. Litmus config, and `aws.url` are required, however if you follow the [aws-sdk suggestions](http://docs.aws.amazon.com/AWSJavaScriptSDK/guide/node-configuring.html) you don't need to supply the AWS credentials into this JSON. + +```json +{ + "aws": { + "region": "us-east-1", + "accessKeyId": "YOUR_ACCOUNT_KEY", + "secretAccessKey": "YOUR_ACCOUNT_SECRET", + "params": { + "Bucket": "elasticbeanstalk-us-east-1-THIS_IS_JUST_AN_EXAMPLE" + }, + "url": "https://s3.amazonaws.com/elasticbeanstalk-us-east-1-THIS_IS_JUST_AN_EXAMPLE" + }, + "litmus": { + "username": "YOUR_LITMUS@EMAIL.com", + "password": "YOUR_ACCOUNT_PASSWORD", + "url": "https://YOUR_ACCOUNT.litmus.com", + "applications": ["ol2003","ol2007","ol2010","ol2011","ol2013","chromegmailnew","chromeyahoo","appmail9","iphone5s","ipad","android4","androidgmailapp"] + } +} +``` + +## Manual email tests (config.json) + +Similar to the Litmus tests, you can have the emails sent to a specified email address. Just like with the Litmus tests, you will need to provide AWS S3 account details in `config.json`. You will also need to specify to details of an SMTP server. The email address to send to emails to can either by configured in the `package.json` file or added as a parameter like so: `npm run mail -- --to="example.com"` + +```json +{ + "aws": { + "region": "us-east-1", + "accessKeyId": "YOUR_ACCOUNT_KEY", + "secretAccessKey": "YOUR_ACCOUNT_SECRET", + "params": { + "Bucket": "elasticbeanstalk-us-east-1-THIS_IS_JUST_AN_EXAMPLE" + }, + "url": "https://s3.amazonaws.com/elasticbeanstalk-us-east-1-THIS_IS_JUST_AN_EXAMPLE" + }, + "mail": { + "to": [ + "example@domain.com" + ], + "from": "Company name 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, + removeStyleTags: true, + preserveMediaQueries: true, + removeLinkTags: false + }) + .pipe($.replace, '', ``) + .pipe($.replace, '', '') + .pipe($.htmlmin, { + collapseWhitespace: true, + minifyCSS: true + }); + + return pipe(); +} + +// Ensure creds for Litmus are at least there. +function creds(done) { + var configPath = './config.json'; + try { CONFIG = JSON.parse(fs.readFileSync(configPath)); } + catch(e) { + beep(); + console.log('[AWS]'.bold.red + ' Sorry, there was an issue locating your config.json. Please see README.md'); + process.exit(); + } + done(); +} + +// Post images to AWS S3 so they are accessible to Litmus and manual test +function aws() { + var publisher = !!CONFIG.aws ? $.awspublish.create(CONFIG.aws) : $.awspublish.create(); + var headers = { + 'Cache-Control': 'max-age=315360000, no-transform, public' + }; + + return gulp.src('./dist/assets/img/*') + // publisher will add Content-Length, Content-Type and headers specified above + // If not specified it will set x-amz-acl to public-read by default + .pipe(publisher.publish(headers)) + + // create a cache file to speed up consecutive uploads + //.pipe(publisher.cache()) + + // print upload updates to console + .pipe($.awspublish.reporter()); +} + +// Send email to Litmus for testing. If no AWS creds then do not replace img urls. +function litmus() { + var awsURL = !!CONFIG && !!CONFIG.aws && !!CONFIG.aws.url ? CONFIG.aws.url : false; + + return gulp.src('dist/**/*.html') + .pipe($.if(!!awsURL, $.replace(/=('|")(\/?assets\/img)/g, "=$1"+ awsURL))) + .pipe($.litmus(CONFIG.litmus)) + .pipe(gulp.dest('dist')); +} + +// Send email to specified email for testing. If no AWS creds then do not replace img urls. +function mail() { + var awsURL = !!CONFIG && !!CONFIG.aws && !!CONFIG.aws.url ? CONFIG.aws.url : false; + + if (EMAIL) { + CONFIG.mail.to = [EMAIL]; + } + + return gulp.src('dist/**/*.html') + .pipe($.if(!!awsURL, $.replace(/=('|")(\/?assets\/img)/g, "=$1"+ awsURL))) + .pipe($.mail(CONFIG.mail)) + .pipe(gulp.dest('dist')); +} + +// Copy and compress into Zip +function zip() { + var dist = 'dist'; + var ext = '.html'; + + function getHtmlFiles(dir) { + return fs.readdirSync(dir) + .filter(function(file) { + var fileExt = path.join(dir, file); + var isHtml = path.extname(fileExt) == ext; + return fs.statSync(fileExt).isFile() && isHtml; + }); + } + + var htmlFiles = getHtmlFiles(dist); + + var moveTasks = htmlFiles.map(function(file){ + var sourcePath = path.join(dist, file); + var fileName = path.basename(sourcePath, ext); + + var moveHTML = gulp.src(sourcePath) + .pipe($.rename(function (path) { + path.dirname = fileName; + return path; + })); + + var moveImages = gulp.src(sourcePath) + .pipe($.htmlSrc({ selector: 'img'})) + .pipe($.rename(function (currentpath) { + currentpath.dirname = path.join(fileName, currentpath.dirname.replace('dist', '')); + return currentpath; + })); + + return merge(moveHTML, moveImages) + .pipe($.zip(fileName+ '.zip')) + .pipe(gulp.dest('dist')); + }); + + return merge(moveTasks); +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..5dead98 --- /dev/null +++ b/package.json @@ -0,0 +1,56 @@ +{ + "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", + "zip": "gulp zip --production", + "litmus": "gulp litmus --production", + "mail": "gulp mail --production" + }, + "author": "ZURB ", + "license": "MIT", + "dependencies": { + "foundation-emails": "^2.2.1" + }, + "devDependencies": { + "babel-core": "^6.3.26", + "babel-preset-es2015": "^6.3.13", + "babel-register": "^6.7.2", + "beepbeep": "^1.2.0", + "browser-sync": "^2.11.0", + "colors": "^1.1.2", + "gulp": "^4.0.0", + "gulp-awspublish": "^3.0.1", + "gulp-cli": "^1.1.0", + "gulp-html-src": "^1.0.0", + "gulp-htmlmin": "^1.1.1", + "gulp-if": "^2.0.0", + "gulp-imagemin": "^2.4.0", + "gulp-inline-css": "^3.0.0", + "gulp-litmus": "0.0.7", + "gulp-load-plugins": "^1.1.0", + "gulp-mail": "^0.1.1", + "gulp-rename": "^1.2.2", + "gulp-replace": "^0.5.4", + "gulp-sass": "^3.1.0", + "gulp-sourcemaps": "^1.6.0", + "gulp-uncss": "^1.0.1", + "gulp-zip": "^3.2.0", + "inky": "^1.3.6", + "lazypipe": "^1.0.1", + "merge-stream": "^1.0.0", + "panini": "^1.3.0", + "rimraf": "^2.3.3", + "siphon-media-query": "^1.0.0", + "yargs": "^4.1.0" + }, + "babel": { + "presets": [ + "es2015" + ] + } +} diff --git a/src/assets/img/.gitkeep b/src/assets/img/.gitkeep new file mode 100644 index 0000000..e054433 --- /dev/null +++ b/src/assets/img/.gitkeep @@ -0,0 +1 @@ +# You can delete this file. It's just here to make Git happy. diff --git a/src/assets/img/archive/.gitkeep b/src/assets/img/archive/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/src/assets/scss/_settings.scss b/src/assets/scss/_settings.scss new file mode 100644 index 0000000..b11bf00 --- /dev/null +++ b/src/assets/scss/_settings.scss @@ -0,0 +1,147 @@ +// Foundation for Emails Settings +// ------------------------------ +// +// Table of Contents: +// +// 1. Global +// 2. Grid +// 3. Block Grid +// 4. Typography +// 5. Button +// 6. Callout +// 7. Menu +// 8. Thumbnail + + +// 1. Global +// --------- + +$primary-color: #2199e8; +$secondary-color: #777777; +$success-color: #414141; +$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-padding: 16px; +$global-margin: 16px; +$global-radius: 3px; +$global-rounded: 500px; +$global-breakpoint: $global-width + $global-gutter; + +// 2. Grid +// ------- + +$grid-column-count: 12; +$column-padding-bottom: $global-padding; +$container-radius: 0; + +// 3. Block Grid +// ------------- + +$block-grid-max: 8; +$block-grid-gutter: $global-gutter; + +// 4. Typography +// ------------- + +$global-font-color: $black; +$body-font-family: Helvetica, Arial, sans-serif; +$global-font-weight: normal; +$header-color: inherit; +$global-line-height: 1.3; +$global-font-size: 16px; +$body-line-height: $global-line-height; +$header-font-family: $body-font-family; +$header-font-weight: $global-font-weight; +$h1-font-size: 34px; +$h2-font-size: 30px; +$h3-font-size: 28px; +$h4-font-size: 24px; +$h5-font-size: 20px; +$h6-font-size: 18px; +$header-margin-bottom: 10px; +$paragraph-margin-bottom: 10px; +$small-font-size: 80%; +$small-font-color: $medium-gray; +$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 $black; +$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-margin-bottom: $global-margin; +$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: 10px; +$menu-item-gutter: 10px; +$menu-item-color: $primary-color; + +// 8. Thumbnail +// ------------ + +$thumbnail-border: solid 4px $white; +$thumbnail-margin-bottom: $global-margin; +$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2); +$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5); +$thumbnail-transition: box-shadow 200ms ease-out; +$thumbnail-radius: $global-radius; + diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss new file mode 100644 index 0000000..7c64580 --- /dev/null +++ b/src/assets/scss/app.scss @@ -0,0 +1,4 @@ +@import 'settings'; +@import 'foundation-emails'; + +@import 'template/template'; \ No newline at end of file diff --git a/src/assets/scss/template/_template.scss b/src/assets/scss/template/_template.scss new file mode 100644 index 0000000..19fb309 --- /dev/null +++ b/src/assets/scss/template/_template.scss @@ -0,0 +1,59 @@ +// These are the styles to make some of the templates look extra nice. +// Feel free to remove these styles for production! + +// Body Styles +body, +html, +.body { + background: #f3f3f3 !important; +} + +.container.header { + background: #f3f3f3; +} + +.body-drip { + border-top: 4px solid #F45E43; +} + +// Full Width Headers +.header { + background: #8a8a8a; +} + +.header .columns { + padding-bottom: 0; +} + +.header p { + color: #fff; + padding-top: 15px; +} + +.header .wrapper-inner { + padding: 20px; +} + +.header .container { + background: transparent; +} + +// Social Media +table.button.facebook table td { + background: #3B5998 !important; + border-color: #3B5998; +} + +table.button.twitter table td { + background: #1daced !important; + border-color: #1daced; +} + +table.button.google table td { + background: #DB4A39 !important; + border-color: #DB4A39; +} + +.wrapper.secondary { + background: #f3f3f3; +} \ No newline at end of file diff --git a/src/helpers/raw.js b/src/helpers/raw.js new file mode 100644 index 0000000..7bfce7c --- /dev/null +++ b/src/helpers/raw.js @@ -0,0 +1,10 @@ +/** + * Any code used inside this helper is ignored by Handlebars. Use it if your email service provider uses a Handlebars-like syntax. + * @example + * {{{{raw}}}} + * {{ this }} code won't be parsed. + * {{{{/raw}}}} + */ +module.exports = function(content) { + return content.fn(); +} diff --git a/src/layouts/default.html b/src/layouts/default.html new file mode 100644 index 0000000..2912ce5 --- /dev/null +++ b/src/layouts/default.html @@ -0,0 +1,30 @@ +{{!-- This is the base layout for your project, and will be used on every page. --}} + + + + + + + + + {{subject}} + + + + {{description}} + + + + +
+
+ {{!-- Pages you create in the src/pages/ folder are inserted here when the flattened emails are created. --}} + {{> body}} +
+
+ +
                                                           
+ + + diff --git a/src/layouts/index-layout.html b/src/layouts/index-layout.html new file mode 100644 index 0000000..d627917 --- /dev/null +++ b/src/layouts/index-layout.html @@ -0,0 +1,31 @@ +{{!-- This is the base layout for your project, and will be used on every page. --}} + + + + + + + + + {{subject}} + + + + {{description}} + + + + +
+
+ + {{> body}} + +
+
+ +
                                                           
+ + + diff --git a/src/pages/archive/.gitkeep b/src/pages/archive/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/basic.html b/src/pages/basic.html new file mode 100644 index 0000000..262d3ca --- /dev/null +++ b/src/pages/basic.html @@ -0,0 +1,51 @@ +--- +subject: My Basic Email Template Subject +--- + + + + + + + + +

BASIC

+ + + + + + + + + + + + +

Hi, Susan Calvin

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, iste, amet consequatur a veniam.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut optio nulla et, fugiat. Maiores accusantium nostrum asperiores provident, quam modi ex inventore dolores id aspernatur architecto odio minima perferendis, explicabo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima quos quasi itaque beatae natus fugit provident delectus, magnam laudantium odio corrupti sit quam. Optio aut ut repudiandae velit distinctio asperiores?

+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit repellendus natus, sint ea optio dignissimos asperiores inventore a molestiae dolorum placeat repellat excepturi mollitia ducimus unde doloremque ad, alias eos!

+ + + + + + + + + +
Connect With Us:
+ + + + + +
Contact Info:
+

Phone: 408-341-0600

+

Email: foundation@zurb.com

+ + + + diff --git a/src/pages/drip.html b/src/pages/drip.html new file mode 100644 index 0000000..7b2ce46 --- /dev/null +++ b/src/pages/drip.html @@ -0,0 +1,60 @@ +--- +subject: My Drip Email Template Subject +--- + + + + + + + + + + + + + + + +
+ +
+ + + + + +

Responsive Emails

+

15 sections | 567 Min

+ + + +
+ + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas ullamcorper tristique. Aenean pharetra, ipsum eu varius elementum, odio ex malesuada neque, eget tempus ipsum neque ut ante. Vivamus volutpat faucibus metus quis ultrices. Fusce hendrerit purus in elit tincidunt sollicitudin. Duis ultrices odio id faucibus sagittis. Sed nulla leo, gravida non massa vitae, bibendum interdum sapien. Pellentesque rutrum sem bibendum tellus volutpat congue.

+
+ +
+ + + + + + diff --git a/src/pages/hero.html b/src/pages/hero.html new file mode 100644 index 0000000..5dc7ab2 --- /dev/null +++ b/src/pages/hero.html @@ -0,0 +1,65 @@ +--- +subject: My Hero Email Template Subject +--- + + + + + + + + +

HERO

+ + + + + + + + + + + +

Hi, Elijah Baily

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi impedit sapiente delectus molestias quia.

+ + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam assumenda, praesentium qui vitae voluptate dolores. Click it!

+ +

Title Ipsum This is a note.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi repellat, harum. Quas nobis id aut, aspernatur, sequi tempora laborum corporis cum debitis, ullam, dolorem dolore quisquam aperiam! Accusantium, ullam, nesciunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus consequuntur commodi, aut sed, quas quam optio accusantium recusandae nesciunt, architecto veritatis. Voluptatibus sunt esse dolor ipsum voluptates, assumenda quisquam.

+ + + + + + + + + + + + +
Connect With Us:
+ + + + + +
Contact Info:
+

Phone: 408-341-0600

+

Email: foundation@zurb.com

+ + + + +
+ + Terms + Privacy + Unsubscribe + +
+ + diff --git a/src/pages/index.html b/src/pages/index.html new file mode 100644 index 0000000..93bb243 --- /dev/null +++ b/src/pages/index.html @@ -0,0 +1,55 @@ +--- +layout: index-layout +subject: My Email Templates +--- + + + + + + + + + + +

Hi there!

+

Thanks for downloading Foundation for Emails! Your days of coding up painful HTML emails are officially over. You’ll soon be cranking out some slick, responsive emails in no time! To help get you up and running, we've put together 11 templates for the most common email use cases including newsletters, transactional emails, and marketing blasts. Feel free to customize them to your hearts content.

+ + + +
+ + Basic Template + Drip Template + Hero Template + Marketing Template + Newsletter Template + Newsletter 2 Template + Order Template + Password Template + Sidebar Template + Sidebar Hero Template + Welcome Template + +
+ + + +

Happy Coding,

+

The Foundation Team

+ + + + + + + + + + +
+ Keep on keepin' on. <3 ZURB +
+ + + diff --git a/src/pages/marketing.html b/src/pages/marketing.html new file mode 100644 index 0000000..cb5373b --- /dev/null +++ b/src/pages/marketing.html @@ -0,0 +1,81 @@ +--- +subject: My Marketing Email Template Subject +--- + + + + +
+ +
+ + +

Do Something Radical With This App.

+ + + + + + + + +

It's Never Been Easier to Do Things.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur pariatur unde magni repudiandae totam, accusamus facere eligendi. Ad nobis eius porro saepe et ab, aliquid, sed mollitia cumque suscipit aperiam.

+ + + + +
+ +
+
Feature One
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, quod quam unde earum.

+ + +
+ +
+
Feature Two
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, quod quam unde earum.

+ + +
+ +
+
Feature Three
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, quod quam unde earum.

+ + + + + + + +

What Are You Waiting For? Get Started Today.

+ + + + + + + + + + + + diff --git a/src/pages/newsletter-2.html b/src/pages/newsletter-2.html new file mode 100644 index 0000000..75b8015 --- /dev/null +++ b/src/pages/newsletter-2.html @@ -0,0 +1,43 @@ +--- +subject: My Other Newsletter Email Template Subject +--- + + + + + + + +
+ +
+ + + + +

This is a title

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam at, nihil quas harum mollitia dolores odio. Inventore delectus nihil soluta quos, magni doloribus, voluptas aspernatur explicabo atque perspiciatis possimus voluptates.

+

Learn more

+ + + + + + + +

Sub Section Title

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eum eius numquam sint dolore voluptatibus beatae ab ad, dignissimos fugiat? Nisi odio commodi debitis eveniet tenetur provident aliquid tempora placeat.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eum eius numquam sint dolore voluptatibus beatae ab ad, dignissimos fugiat? Nisi odio commodi debitis eveniet tenetur provident aliquid tempora placeat.

+ + +

Sub Section Title

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eum eius numquam sint dolore voluptatibus beatae ab ad, dignissimos fugiat? Nisi odio commodi debitis eveniet tenetur provident aliquid tempora placeat.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eum eius numquam sint dolore voluptatibus beatae ab ad, dignissimos fugiat? Nisi odio commodi debitis eveniet tenetur provident aliquid tempora placeat.

+ + + + +

You received this email because you're signed up to receive updates from us. Click here to unsubscribe.

+ + + diff --git a/src/pages/newsletter.html b/src/pages/newsletter.html new file mode 100644 index 0000000..1856bae --- /dev/null +++ b/src/pages/newsletter.html @@ -0,0 +1,44 @@ +--- +subject: My Newsletter Email Template Subject +--- + + + + + + + +

The Insider

+
+ +
+ + + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa itaque illo doloribus soluta expedita dolores commodi fuga odit.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto reiciendis eos magni deleniti accusamus tempore, consectetur! Maxime amet, exercitationem nihil fugit eius esse voluptatum ab incidunt minima, saepe reiciendis ipsum.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto reiciendis eos magni deleniti accusamus tempore, consectetur! Maxime amet, exercitationem nihil fugit eius esse voluptatum ab incidunt minima, saepe reiciendis ipsum.

+ + + +

More Reading:

+ + + +

Get Involved:

+ + + + +

You received this email because you're signed up to get updates from us. Click here to unsubscribe.

+ + + diff --git a/src/pages/order.html b/src/pages/order.html new file mode 100644 index 0000000..def3831 --- /dev/null +++ b/src/pages/order.html @@ -0,0 +1,86 @@ + + + + + + + + +

Thanks for your order.

+

Thanks for shopping with us! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad earum ducimus, non, eveniet neque dolores voluptas architecto sed, voluptatibus aut dolorem odio. Cupiditate a recusandae, illum cum voluptatum modi nostrum.

+ + + + + + +

+ Payment Method
+ Dubloons +

+

+ Email Address
+ thecapn@pirates.org +

+

+ Order ID
+ 239235983749636 +

+ + +

+ Shipping Method
+ Boat (1–2 weeks)
+ Shipping Address
+ Captain Price
+ 123 Maple Rd
+ Campbell, CA 95112 +

+ + + + +

Order Details

+ + + + + + + + + + +
Item#Price
Ship's Cannon2$100
Ship's Cannon2$100
Ship's Cannon2$100
Subtotal:$600
+ +
+ +

What's Next?

+ +

Our carrier raven will prepare your order for delivery. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi necessitatibus itaque debitis laudantium doloribus quasi nostrum distinctio suscipit, magni soluta eius animi voluptatem qui velit eligendi quam praesentium provident culpa?

+ + + + + + + +

+ Call us at 800.555.1923
+ Email us at support@discount.boat +

+ + +

+ 123 Maple Rd
+ Campbell, CA 95112 +

+ + + diff --git a/src/pages/password.html b/src/pages/password.html new file mode 100644 index 0000000..abc0c55 --- /dev/null +++ b/src/pages/password.html @@ -0,0 +1,40 @@ +--- +subject: My Password Email Template Subject +--- + + + + + + + + +

Pirate Retirement Services

+ + + + + + + +
+ +
+ + + +

Forgot Your Password?

+ + + +

It happens. Click the link below to reset your password.

+ + +
+ +

You're getting this email because you've signed up for email updates. If you want to opt-out of future emails, unsubscribe here.

+ + + + + diff --git a/src/pages/readlater.html b/src/pages/readlater.html new file mode 100644 index 0000000..75ba7d5 --- /dev/null +++ b/src/pages/readlater.html @@ -0,0 +1,56 @@ +--- +subject: ReadLaterByEmail link +--- + + + + + + + + + + + + + + + + + +
Responsive Emails
+ + + + + + +
+ + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas ullamcorper tristique. Aenean pharetra, ipsum eu varius elementum, odio ex malesuada neque, eget tempus ipsum neque ut ante. Vivamus volutpat faucibus metus quis ultrices. Fusce hendrerit purus in elit tincidunt sollicitudin. Duis ultrices odio id faucibus sagittis. Sed nulla leo, gravida non massa vitae, bibendum interdum sapien. Pellentesque rutrum sem bibendum tellus volutpat congue.

+
+ +
+ + + + + + + + + + + + + +

Hi, Elijah Baily

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi impedit sapiente delectus molestias quia.

+
+ +
+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam assumenda, praesentium qui vitae voluptate dolores. Click it!

+ + + + + +

Hello, Han Fastolfe

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam nobis velit, aliquid pariatur at fugit. Omnis at quae, libero iusto quisquam animi blanditiis neque, alias minima corporis, ab in explicabo?

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime dignissimos voluptas minus, cupiditate voluptatem, voluptatum iste molestiae consectetur temporibus quae dolore nam possimus reprehenderit blanditiis laborum iusto sit. Perspiciatis, dolor.

+ + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quas optio totam quidem, placeat sunt, sit iusto fugit. Harum omnis deleniti enim nihil iure, quis laudantium veniam velit animi debitis. Click It! + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores minus eius amet alias odit accusantium, fugit perspiciatis nulla suscipit nisi. Laborum aliquid, voluptatum consectetur fugiat maxime architecto enim molestias aperiam!

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eveniet veritatis, magnam ipsam et vero necessitatibus. Deserunt facilis impedit, adipisci illo laboriosam assumenda fugiat dolorum nam odio aliquid, sit est.

+ + + + +
Header
+

Sub-header

+ + Just a Plain Link » + Just a Plain Link » + Just a Plain Link » + Just a Plain Link » + Just a Plain Link » + Just a Plain Link » + Just a Plain Link » + + + +
CONNECT WITH US:
+ + + +

CONTACT INFO:

+

Phone: 408-341-0600

+

Email: foundation@zurb.com

+ + + + +
+ + Terms + Privacy + Unsubscribe + +
+ + diff --git a/src/pages/sidebar.html b/src/pages/sidebar.html new file mode 100644 index 0000000..45ac03c --- /dev/null +++ b/src/pages/sidebar.html @@ -0,0 +1,70 @@ +--- +subject: My Hero Sidebar Template Subject +--- + + + + + + + + +

SIDEBAR

+ + + + + + + + + + + +

Hello, Han Fastolfe

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam nobis velit, aliquid pariatur at fugit. Omnis at quae, libero iusto quisquam animi blanditiis neque, alias minima corporis, ab in explicabo?

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime dignissimos voluptas minus, cupiditate voluptatem, voluptatum iste molestiae consectetur temporibus quae dolore nam possimus reprehenderit blanditiis laborum iusto sit. Perspiciatis, dolor.

+ + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quas optio totam quidem, placeat sunt, sit iusto fugit. Harum omnis deleniti enim nihil iure, quis laudantium veniam velit animi debitis. Click It! + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores minus eius amet alias odit accusantium, fugit perspiciatis nulla suscipit nisi. Laborum aliquid, voluptatum consectetur fugiat maxime architecto enim molestias aperiam!

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eveniet veritatis, magnam ipsam et vero necessitatibus. Deserunt facilis impedit, adipisci illo laboriosam assumenda fugiat dolorum nam odio aliquid, sit est.

+ + + + +
Header
+

Sub-header

+ + Just a Plain Link » + Just a Plain Link » + Just a Plain Link » + Just a Plain Link » + Just a Plain Link » + Just a Plain Link » + Just a Plain Link » + + + +
CONNECT WITH US:
+ + + +

CONTACT INFO:

+

Phone: 408-341-0600

+

Email: foundation@zurb.com

+ + + + + +
+ + Terms + Privacy + Unsubscribe + +
+ + + diff --git a/src/pages/welcome.html b/src/pages/welcome.html new file mode 100644 index 0000000..dcc1139 --- /dev/null +++ b/src/pages/welcome.html @@ -0,0 +1,51 @@ +--- +subject: My Welcome Email Template Subject +--- + + + + +

Welcome to Kraken Academy

+ +
+ + About + Course List + Campus Map + Contact + +
+ + + + + + + + + + + +
+ +
+ + + +

An exciting future of terrorizing sailors awaits you at Kraken Academy.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque culpa vel architecto, perspiciatis eius cum autem quidem, sunt consequuntur, impedit dolor vitae illum nobis sint nihil aliquid? Assumenda, amet, officia.

+ +
+ + krakenacademy.com + Facebook + Twitter + (408)-555-0123 + +
+ + + + + + diff --git a/src/partials/.gitkeep b/src/partials/.gitkeep new file mode 100644 index 0000000..e054433 --- /dev/null +++ b/src/partials/.gitkeep @@ -0,0 +1 @@ +# You can delete this file. It's just here to make Git happy.