With Foundation for Emails 2, confusing and tedious tables are a thing of the past. The new Inky markup will save you time and energy coding your emails. It looks like:
-```
+```html
<container>
<row>
<column small="12" large="4">
In the Ink 1.0, we needed extra tags to support a wrapper element. This used to control the gutter and margins of a column.
-```
+```html
<table class="container">
<tr>
<td>
Also, we stitched `<td>`'s to `<th>`'s because that allows Android 4 native to be responsive - win!
-```
+```html
<table class="container">
<tr>
<td>
#### New Markup (Inky HTML)
-```
+```html
<container>
<row>
<columns small="12" large="12">
#### Old Markup
-```
+```html
<table class="container">
<tr>
<td class="wrapper last">
#### New Markup (Plain HTML)
-```
+```html
<table class="container">
<tr>
<td>
<table class="row">
<tr>
- <th class="first large-6 small-6 columns">
+ <th class="first large-6 small-6 columns">
</th>
#### New Markup (Inky HTML)
-```
+```html
<container>
<row>
<columns small="6">
#### Old Markup
-```
+```html
<table class="block-grid three-up">
<tr>
<td>
#### New Markup (Plain HTML)
-```
+```html
<table class="block-grid up-3">
<tr>
<th class="column first">
#### New Markup (Inky HTML)
-```
+```html
<block-grid up="3">
<column>Thing 1</column>
<column>Thing 2</column>
#### Old Markup
-```
+```html
<table class="row">
<tr>
<td class="wrapper offset-by-four">
#### New Markup (Plain HTML)
-```
+```html
<table class="row">
<tr>
<th class="small-4 small-offset-8 large-4 large-offset-8 columns">
#### New Markup (Inky HTML)
-```
+```html
<row>
<columns small="4" large="4" class="small-offset-8 large-offset-8">
#### Old Markup
-```
+```html
<table class="button">
<tr>
<td>
#### New Markup (Plain HTML)
-```
+```html
<table class="button">
<tr>
<td>
#### New Markup (Inky HTML)
-```
+```html
<button href="https://zurb.com"></button>
```
#### Old Markup
-```
+```html
<table class="twelve columns">
<tr>
<td class="panel">
#### New Markup (Plain HTML)
-```
+```html
<table class="callout">
<tr>
<td class="callout-inner">
#### New Markup (Inky HTML)
-```
+```html
<row>
<columns small="6">
<p>One Word</p>
#### Old Markup (Plain HTML)
-```
+```html
<table class="container">
<tr>
- <td>
+ <td>
<table class="menu">
<tr>
#### New Markup (Inky HTML)
-```
+```html
<menu>
<item href="one.html">Item One</item>
<item href="one.html">Item Two</item>
#### New Markup (Inky HTML)
-```
+```html
<spacer size="100"></spacer>
```
#### New Markup (Inky HTML)
-```
+```html
<wrapper>
content here
</wrapper>
If you don't see the right helper, you can write your own. Add a javascript file to 'src/helpers', restart npm, then call it in your templates.
-```
+```javascript
// Example file src/helpers/bold.js
module.exports = function(options) {
// options.fn(this) = Handlebars content between {{#bold}} HERE {{/bold}}
```
Then in your projects call your custom `{{#bold}}` helper
-```
+```handlebars
{{#bold}}ideas{{/bold}}
```
Variables can also be added globally by creating an external JSON or YML file, and adding it to the `src/data` folder in your project. Let's create a file called `breakfast.yml`:
-```
+```yaml
- eggs
- bacon
- toast
## Tutorials
-[Staying D.R.Y. with Panini](https://zurb.com/university/lessons/staying-d-r-y-with-panini)
+[Staying D.R.Y. with Panini](https://zurb.com/university/lessons/staying-d-r-y-with-panini)
Panini comes with tons of Handlebars helpers built in, like a repeat helper or markdown parser, but in this lesson we’ll take a look at creating a custom month/year helper for an HTML email.
This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content—so, did you know that female Giant Squids on average are around twice the size of (and around 10 feet longer than) their potential mates? Pretty cool. Use the `<strong>` and `<em>` tags to denote text that should be displayed or read with emphasis. Browsers will <strong>bold</strong> and <em>italicize</em> them, while screen readers will read the words with <em>emphasis</em>.
-```
+```html
<p>This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content—so, did you know that female Giant Squids on average are around twice the size of (and around 10 feet longer than) their potential mates? Pretty cool. Use the `<strong>` and `<em>` tags to denote text that should be displayed or read with emphasis. Browsers will <strong>bold</strong> and <em>italicize</em> them, while screen readers will read the words with <em>emphasis</em>.</p>
```
Links are very standard, and the color is preset to the Foundation primary color. [Learn more about Foundation's global colors](global.html).
-```
+```html
<p>Links are very standard, and the color is preset to the Foundation primary color. <a href="global.html">Learn more about Foundation's global colors.</a></p>
```
Use dividers to define thematic breaks between paragraphs or sections of your email.
-```
+```html
<hr/>
```
projects / thirdparty / foundation / foundation-emails.git / commitdiff
