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](https://get.foundation/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.
-Our [web inliner](http://get.foundation/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.
++Our [web inliner](https://get.foundation/emails/inliner.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.
If you've ever created a static site, maybe you had five pages that all shared the same header and footer. You create your first page, and then copy and paste the common elements to the next page. But now if you need to make a change to the header, the change has to be made across multiple files. You can do this with Emails in your campaigns too!
-Panini is a flat file compiler that uses the concepts of templates, pages, and partials—powered by the [Handlebars](http://handlebarsjs.com/) templating language—to streamline the process of creating static prototypes.
+Panini is a flat file compiler that uses the concepts of templates, pages, and partials—powered by the [Handlebars](https://handlebarsjs.com/) templating language—to streamline the process of creating static prototypes.
- Our [prototyping template](starter-projects.html) uses Panini, along with a host of other tools for processing Sass and images, to make creating optimized templates easy. It's already been configured to utilize all of the features below, but if you want to learn the specifics of how to configure the library, head over to the [Panini GitHub page](https://github.com/zurb/panini).
+ Our [prototyping template](https://github.com/zurb/foundation-emails-template) uses Panini, along with a host of other tools for processing Sass and images, to make creating optimized templates easy. It's already been configured to utilize all of the features below, but if you want to learn the specifics of how to configure the library, head over to the [Panini GitHub page](https://github.com/zurb/panini).
---
```scss
// Text color of buttons.
- $button-color: $white !default;
+ $button-color: $white;
// Text color of buttons with a light background.
- $button-color-alt: $medium-gray !default;
+ $button-color-alt: $medium-gray;
// Font weight of buttons.
- $button-font-weight: bold !default;
+ $button-font-weight: bold;
// Background color of buttons.
- $button-background: $primary-color !default;
+ $button-background: $primary-color;
// Border around buttons.
- $button-border: 2px solid $button-background !default;
+ $button-border: 2px solid $button-background;
```
- We put together some [Best Practices on Sass file structure](https://zurb.com/university/lessons/avoid-a-cluttered-mess-sensible-sass-file-structure) that will help you keep your project clean.
-We put together some [Best Practices on Sass file structure](http://zurb.com/university/lessons/avoid-a-cluttered-mess-sensible-sass-file-structure) that will help you keep your project clean.
++We put together some [Best Practices on Sass file structure](https://zurb.com/university/lessons/avoid-a-cluttered-mess-sensible-sass-file-structure) that will help you keep your project clean.
Email and web development can get complicated fast. We’ve introduced the ZURB Stack which helps you get started faster and lets you do more - without having to spend time finding the right tool for the job. The ZURB Stack includes:
## Gulp
-This is our task runner of choice for Foundation. Gulp lets us queue up tasks to execute. This lets us do cool things like inlining automagically updating your browser. It’s what the Stack is built on. [Find out more about Gulp](http://gulpjs.com/).
+This is our task runner of choice for Foundation. Gulp lets us queue up tasks to execute. This lets us do cool things like inlining automagically updating your browser. It’s what the Stack is built on. [Find out more about Gulp](https://gulpjs.com/).
## Sass
-We use Libsass as our CSS preprocessor of choice. If you’re not familiar with Sass, it lets you use variables, nesting, and mixins (to name a few). [Learn more about Sass](http://sass-lang.com/).
+We use Libsass as our CSS preprocessor of choice. If you’re not familiar with Sass, it lets you use variables, nesting, and mixins (to name a few). [Learn more about Sass](https://sass-lang.com/).
## Inlining
- One of the biggest headaches and time-sucks used to be inlining your HTML email. Well, no more! We’re using gulp-inline to to scan your CSS file and and automatically inject your CSS when you’re ready. Just run `npm run build` in your project when you’re ready to inline.
+ One of the biggest headaches and time-sucks used to be inlining your HTML email. Well, no more! We’re using gulp-inline to to scan your CSS file and automatically inject your CSS when you’re ready. Just run `npm run build` in your project when you’re ready to inline.
## Build Options
By default the inliner works without removing whitespaces and inlining for you, you have to change your settings in the inliner function (`function inliner(css)`) on your gulpfile.babel.js which is the root of your project. To change these settings go and update this part of the function as you wish: ``` .pipe($.htmlmin, { collapseWhitespace: true, minifyCSS: true }); ```.
<li class="docs-nav-title">Guides</li>
<li><a href="sass.html">Using Sass</a></li>
<li><a href="inky.html">Using Inky</a></li>
-- <!-- <li><a href="styling.html">CSS with Inky</a></li> -->
<li><a href="media-query.html">Media Queries</a></li>
<li><a href="zurb-stack.html">ZURB Stack</a></li>
<li><a href="compatibility.html">Compatibility</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="spacer.html">Spacer</a></li>
<li><a href="wrapper.html">Wrapper</a></li>
-- <!-- <li><a href="thumbnail.html">Thumbnail</a></li> -->
<li><a href="typography.html">Typography</a></li>
<li><a href="visibility.html">Visibility Classes</a></li>
projects / thirdparty / foundation / foundation-emails.git / commitdiff
