Here's a breakdown of the files in the folder you got:
-- `css/foundation.css`: the Foundation for Emails CSS.
+- `css/foundation-emails.css`: the Foundation for Emails CSS.
- `index.html`: a blank boilerplate to get started.
- `templates/`: a set of pre-made templates following common email layouts.
<!-- Enables media queries -->
<meta name="viewport" content="width=device-width"/>
<!-- Link to the email's CSS, which will be inlined into the email -->
- <link rel="stylesheet" href="assets/css/foundation.css">
+ <link rel="stylesheet" href="assets/css/foundation-emails.css">
</head>
<body>
Email clients like Gmail and Outlook strip out `<style>` tag from the `<head>` and Gmails strips it from the `<body>` of the email as well. It's best to have your CSS written inline within your markup. Hand writing all your CSS inline in a style tag would be a real pain and would take a long time.
-Our [web inliner](http://foundation.zurb.com/emails/inliner-v2.html) automates this process for you. To use it, paste in the contents of `index.html` into the HTML field, paste in the contents of `css/foundation.css` into the CSS field, and then press "Inline!". Once it's done, you'll see a large soup of HTML that is your inlined email.
+Our [web inliner](http://foundation.zurb.com/emails/inliner-v2.html) automates this process for you. To use it, paste in the contents of `index.html` into the HTML field, paste in the contents of `css/foundation-emails.css` into the CSS field, and then press "Inline!". Once it's done, you'll see a large soup of HTML that is your inlined email.
Your email's CSS will include media queries for responsive styling which the inliner tool will move into the `<body>` so they are preserved.
<!-- Enables media queries -->
<meta name="viewport" content="width=device-width"/>
<!-- Link to the email's CSS, which will be inlined into the email -->
- <link rel="stylesheet" href="assets/css/foundation.css">
+ <link rel="stylesheet" href="assets/css/foundation-emails.css">
</head>
<body>
<ul class="vertical menu docs-nav" id="docs-menu">
<p class="docs-nav-version">
- <span data-docs-version>v2.1.0</span>
+ <span data-docs-version>v2.2.0</span>
<a href="https://github.com/zurb/foundation-emails/releases/" target="_blank">(Changelog)</a>
</p>
gulp.src('test/visual/pages/*.html')
.pipe($.wrap({ src: 'test/visual/_template.html' }))
.pipe(inky())
- .pipe(inliner('_build/assets/css/foundation.css'))
+ .pipe(inliner('_build/assets/css/foundation-emails.css'))
.pipe(gulp.dest('test/visual/_build'));
});
});
gulp.task('download:build:css', ['sass:foundation'], function() {
- return gulp.src('_build/assets/css/foundation.css')
+ return gulp.src('_build/assets/css/foundation-emails.css')
.pipe(gulp.dest('.download/css'));
})
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Title</title>
- <link rel="stylesheet" href="../assets/css/foundation.css" />
+ <link rel="stylesheet" href="../assets/css/foundation-emails.css" />
</head>
<body>