diff --git a/.gitignore b/.gitignore index b5882790..9691719e 100644 --- a/.gitignore +++ b/.gitignore @@ -7,4 +7,5 @@ Homestead.yaml .env .vagrant _ide_helper.php -.idea \ No newline at end of file +.idea +resources/views/emails/build diff --git a/README.md b/README.md index 3779e358..74d67886 100644 --- a/README.md +++ b/README.md @@ -69,6 +69,20 @@ Finally, to compile and serve the assets in real time, run the following (and le gulp watch + +### Email templates + +Pony.fm's email templates are based on the Sass version of +[ZURB's Foundation for Emails](http://foundation.zurb.com/emails/docs/index.html). +framework. This framework takes most of the pain out of HTML email markup - see +their site for the full documentation. + +Email templates live in [the `resources/emails/src` directory](resources/emails/src). +Note that they are Handlebars templates which compile into Blade templates - +Pony.fm's asset pipeline automatically does this for you. Variables meant for +Blade need to be escaped with a backslash in the `.hbs` files (like so: `\{{ $myVariableName }}`). + + Configuring the servers ----------------------- diff --git a/gulpfile.js b/gulpfile.js index 89f56f82..bdd11cc2 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -26,7 +26,15 @@ var gulp = require("gulp"), webpackDevConfig = require("./webpack.dev.config.js"), webpackProductionConfig = require("./webpack.production.config.js"), webpackStream = require('webpack-stream'), - _ = require("underscore"); + _ = require("underscore"), + runSequence = require("run-sequence"), + rimraf = require("rimraf"), + panini = require("panini"), + inky = require("inky"), + fs = require("fs"), + siphon = require('siphon-media-query'), + lazypipe = require('lazypipe'), + ext_replace = require('gulp-ext-replace'); var plumberOptions = { errorHandler: plug.notify.onError("Error: <%= error.message %>") @@ -55,6 +63,9 @@ var licenseHeader = [ ].join('\n'); +const PRODUCTION = !!(argv.production); + + gulp.task("webpack-build", function() { return gulp.src(_.values(webpackProductionConfig.entry)) .pipe(webpackStream(webpackProductionConfig)) @@ -69,6 +80,8 @@ gulp.task("webpack-dev-server", function () { new WebpackDevServer(compiler, { // server and middleware options, currently blank + // stats: {chunks: false} + stats: 'minimal' }).listen(61999, "localhost", function (err) { if (err) throw new gutil.PluginError("webpack-dev-server", err); @@ -164,18 +177,139 @@ gulp.task('copy:templates', function () { .pipe(gulp.dest('public/build/scripts')); }); + + +//=============== ZURB Foundation Email stack =================// + +// These tasks are adapted from ZURB's gulpfile (https://github.com/zurb/foundation-emails-template/blob/master/gulpfile.babel.js). +// They have been modified for ES5, Gulp 3 compatibility, and namespaced with "email-" +// to avoid collisions with Pony.fm's other Gulp tasks. + +// Delete the "resources/views/emails/build" folder +// This happens every time a build starts +gulp.task("email-clean", function emailClean(done) { + rimraf('resources/views/emails/build', done); +}); + +// Compile layouts, pages, and partials into flat HTML files +// Then parse using Inky templates +gulp.task("email-pages", function emailPages() { + return gulp.src('resources/emails/src/pages/**/*.blade.php.hbs') + .pipe(panini({ + root: 'resources/emails/src/pages', + layouts: 'resources/emails/src/layouts', + partials: 'resources/emails/src/partials', + helpers: 'resources/emails/src/helpers' + })) + .pipe(inky()) + .pipe(ext_replace('.blade.php', '.blade.php.hbs')) + .pipe(gulp.dest('resources/views/emails/build')); +}); + +// Reset Panini's cache of layouts and partials +gulp.task("email-reset-pages", function emailResetPages(done) { + panini.refresh(); + done(); +}); + +// Compile Sass into CSS +gulp.task("email-sass", function emailSass() { + return gulp.src('resources/emails/src/assets/scss/app.scss') + .pipe(plug.if(!PRODUCTION, plug.sourcemaps.init())) + .pipe(plug.sass({ + includePaths: ['node_modules/foundation-emails/scss'] + }).on('error', plug.sass.logError)) + .pipe(plug.if(PRODUCTION, plug.uncss( + { + html: ['resources/views/emails/build/**/*.blade.php'] + }))) + .pipe(plug.if(!PRODUCTION, plug.sourcemaps.write())) + .pipe(gulp.dest('resources/views/emails/build/css')); +}); + +// Copy and compress images +gulp.task("email-images", function emailImages() { + return gulp.src('resources/emails/src/assets/img/**/*') + .pipe(plug.imagemin()) + .pipe(gulp.dest('./resources/views/emails/build/assets/img')); +}); + +// Inline CSS and minify HTML +gulp.task("email-inline", function emailInline() { + return gulp.src('resources/views/emails/build/**/*.blade.php') + .pipe(plug.if(PRODUCTION, emailInliner('resources/views/emails/build/css/app.css'))) + .pipe(gulp.dest('resources/views/emails/build')); +}); + + +// Helper tasks for email watchers +gulp.task("email-rebuild-handlebars", function(callback){ + runSequence("email-pages", "email-inline", callback); +}); +gulp.task("email-rebuild-layouts", function(callback){ + runSequence("email-reset-pages", "email-pages", "email-inline", callback); +}); +gulp.task("email-rebuild-sass", function(callback){ + runSequence("email-reset-pages", "email-sass", "email-pages", "email-inline", callback) +}); + +// Watch for file changes +gulp.task("email-watch", function (callback) { + gulp.watch('resources/emails/src/pages/**/*.blade.php.hbs', ["email-rebuild-handlebars"]); + gulp.watch(['resources/emails/src/layouts/**/*', 'resources/emails/src/partials/**/*'], ["email-rebuild-layouts"]); + gulp.watch(['resources/emails/src/assets/scss/**/*.scss'], ["email-rebuild-sass"]); + gulp.watch('resources/emails/src/assets/img/**/*', ["email-images"]); + callback(); +}); + + +// Inlines CSS into HTML, adds media query CSS into the ") + .pipe(plug.replace, '', '') + .pipe(plug.htmlmin, { + collapseWhitespace: true, + minifyCSS: true + }); +} + +// Build the "resources/views/emails/build" folder by running all of the above tasks +gulp.task('email-build', function(callback){ + runSequence("email-clean", "email-pages", "email-sass", "email-images", "email-inline", callback); +}); + + +// Build emails, run the server, and watch for file changes +gulp.task('email-default', function(callback) { + runSequence('email-build', "email-watch"); + callback(); +}); + +//=============== END Zurb Foundation Email stack =================// + gulp.task('build', [ 'webpack-build', 'copy:templates', 'styles-app', - 'styles-embed' + 'styles-embed', + 'email-build' ]); gulp.task("watch-legacy", ["build"], function () { gulp.watch("resources/assets/styles/**/*.{css,less}", ["styles-app"]); }); -gulp.task("watch", ["webpack-dev-server", "watch-legacy"], function () {}); +gulp.task("watch", ["webpack-dev-server", "email-default", "watch-legacy"], function () {}); function endsWith(str, suffix) { diff --git a/package.json b/package.json index 25d7a916..29374e3f 100644 --- a/package.json +++ b/package.json @@ -16,23 +16,39 @@ "chart.js": "2.1.0", "coffee-loader": "0.7.2", "coffee-script": "1.10.0", + "foundation-emails": "^2.2.1", + "fs": "0.0.1-security", "gulp": "3.9.1", "gulp-angular-templatecache": "1.8.0", "gulp-autoprefixer": "3.1.0", "gulp-cached": "1.1.0", "gulp-clean-css": "2.0.10", "gulp-concat": "2.6.0", + "gulp-ext-replace": "^0.3.0", "gulp-header": "1.8.2", + "gulp-htmlmin": "^3.0.0", "gulp-if": "2.0.1", + "gulp-imagemin": "^3.1.1", + "gulp-inject-string": "^1.1.0", + "gulp-inline-css": "^3.1.0", "gulp-less": "3.1.0", "gulp-livereload": "3.8.1", "gulp-load-plugins": "1.2.4", "gulp-notify": "2.2.0", "gulp-plumber": "1.1.0", + "gulp-replace": "^0.5.4", + "gulp-sass": "^3.0.0", "gulp-sourcemaps": "1.6.0", + "gulp-uncss": "^1.0.6", "gulp-util": "3.0.7", + "inky": "^1.3.7", "jquery": "2.2.4", + "lazypipe": "^1.0.1", + "panini": "^1.3.1", + "rimraf": "^2.5.4", + "run-sequence": "^1.2.2", "script-loader": "0.7.0", + "siphon-media-query": "^1.0.0", "underscore": "1.8.3", "webpack": "1.13.1", "webpack-dev-server": "1.14.1", diff --git a/resources/emails/src/assets/img/.gitkeep b/resources/emails/src/assets/img/.gitkeep new file mode 100644 index 00000000..e0544338 --- /dev/null +++ b/resources/emails/src/assets/img/.gitkeep @@ -0,0 +1 @@ +# You can delete this file. It's just here to make Git happy. diff --git a/resources/emails/src/assets/scss/_settings.scss b/resources/emails/src/assets/scss/_settings.scss new file mode 100644 index 00000000..57c3d0f6 --- /dev/null +++ b/resources/emails/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: #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-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/resources/emails/src/assets/scss/app.scss b/resources/emails/src/assets/scss/app.scss new file mode 100644 index 00000000..7c64580f --- /dev/null +++ b/resources/emails/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/resources/emails/src/assets/scss/template/_template.scss b/resources/emails/src/assets/scss/template/_template.scss new file mode 100644 index 00000000..31b7bb62 --- /dev/null +++ b/resources/emails/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: 8px solid #663399; +} + +// 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/resources/emails/src/helpers/raw.js b/resources/emails/src/helpers/raw.js new file mode 100644 index 00000000..7bfce7c7 --- /dev/null +++ b/resources/emails/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/resources/emails/src/layouts/default.hbs b/resources/emails/src/layouts/default.hbs new file mode 100644 index 00000000..3671c0e5 --- /dev/null +++ b/resources/emails/src/layouts/default.hbs @@ -0,0 +1,28 @@ +{{!-- This is the base layout for your project, and will be used on every page. --}} + + + +
+ + + +
+ |
+
+ |
+
BASIC
+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!
+Phone: 408-341-0600
+Email: foundation@zurb.com
+15 sections | 567 Min
+Hey you! It's you! Just a heads up, we just added this hot new class that will teach you how to NOT be a lame as a duck. Not the metaphorical lame duck, either, but a real duck that was actually lame, maybe from stepping on a land mine or something. Anyways, Foundation for Emails makes coding HTML emails like calling the Navy SEALS to invade a Pre-school, with pre-schoolers, armed with Crayolas.
+@copywrite nobody
+ hello@nocopywrite.com | Manage Email Notifications | Unsubscribe
HERO
+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!
+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.
+ + + +Phone: 408-341-0600
+Email: foundation@zurb.com
+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.
+ +Happy Coding,
+The Foundation Team
+ + +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.
+Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, quod quam unde earum.
+Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, quod quam unde earum.
+Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, quod quam unde earum.
+@copywrite nobody
+ hello@nocopywrite.com | Manage Email Notifications | Unsubscribe
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.
+ +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.
+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.
+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.
+ +You received this email because you're signed up to get updates from us. Click here to unsubscribe.
+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
+
Item | # | Price |
---|---|---|
Ship's Cannon | 2 | $100 |
Ship's Cannon | 2 | $100 |
Ship's Cannon | 2 | $100 |
Subtotal: | +$600 | +
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
+
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.
+SIDEBAR HERO
+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!
+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. 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.
+ +Sub-header
+ +CONTACT INFO:
+Phone: 408-341-0600
+Email: foundation@zurb.com
+SIDEBAR
+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. 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.
+ +Sub-header
+ +CONTACT INFO:
+Phone: 408-341-0600
+Email: foundation@zurb.com
+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.
+ +