Update html-email
This commit is contained in:
Rico Sta. Cruz
parent
472f6b3ae6
commit
62eadce0d2
25
email.md
25
email.md
|
|
@ -1,25 +0,0 @@
|
||||||
---
|
|
||||||
title: Email
|
|
||||||
category: HTML
|
|
||||||
---
|
|
||||||
|
|
||||||
### Avoid these
|
|
||||||
|
|
||||||
* position (Yahoo, Gmail)
|
|
||||||
* box-shadow (Yahoo, Gmail)
|
|
||||||
* height (Outlook)
|
|
||||||
* width in p/div (Outlook)
|
|
||||||
* padding in p/div (Outlook)
|
|
||||||
* data-URI (all webmail)
|
|
||||||
|
|
||||||
### Basic layout
|
|
||||||
|
|
||||||
<table cellpadding=0 cellspacing=0"
|
|
||||||
<tr>
|
|
||||||
<td width=auto>
|
|
||||||
<td width=600px background=white>
|
|
||||||
<td width=auto>
|
|
||||||
|
|
||||||
### Responsive
|
|
||||||
|
|
||||||
@media only screen and (max-device-width: 480px)
|
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
---
|
||||||
|
title: HTML emails
|
||||||
|
category: HTML
|
||||||
|
layout: 2017/sheet
|
||||||
|
updated: 201708.29
|
||||||
|
---
|
||||||
|
|
||||||
|
### Properties to avoid
|
||||||
|
|
||||||
|
| Property | Where |
|
||||||
|
| --- | --- |
|
||||||
|
| `position` | (Outlook, Gmail, Yahoo) |
|
||||||
|
| `display` | (Outlook, Gmail) |
|
||||||
|
| `float` | (Outlook) |
|
||||||
|
| --- | --- |
|
||||||
|
| `height` | (Outlook) |
|
||||||
|
| `width` _in p/div_ | (Outlook) |
|
||||||
|
| `padding` _in p/div_ | (Outlook) |
|
||||||
|
| `background` | (Outlook, Gmail) |
|
||||||
|
| `min-width` | (Outlook) |
|
||||||
|
| `max-width` | (Outlook) |
|
||||||
|
| --- | --- |
|
||||||
|
| `opacity` | (Outlook, Gmail, Yahoo) |
|
||||||
|
| `box-shadow` | (Outlook, Gmail, Yahoo) |
|
||||||
|
| --- | --- |
|
||||||
|
| `rgba()` | (Outlook) |
|
||||||
|
| `data-uri` | (all webmail) |
|
||||||
|
|
||||||
|
### Selectors to avoid
|
||||||
|
|
||||||
|
| `E[attr]` | (Outlook, Gmail) |
|
||||||
|
| `E:nth-child(n)` | (Outlook, Gmail) |
|
||||||
|
| `::before` _and_ `::after` | (Outlook, Yahoo, Gmail) |
|
||||||
|
| `E F` | (Outlook, Gmail) |
|
||||||
|
| `E + F`, `E > F` _etc_ | (Gmail) |
|
||||||
|
|
||||||
|
Inline your CSS as much as possible.
|
||||||
|
|
||||||
|
### Basic layout
|
||||||
|
|
||||||
|
```html
|
||||||
|
<table cellpadding="0" cellspacing="0">
|
||||||
|
<tr>
|
||||||
|
<td width="auto"></td>
|
||||||
|
<td width="600" background="#ffffff">
|
||||||
|
···
|
||||||
|
</td>
|
||||||
|
<td width="auto"></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Responsive
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
@media only screen and (max-device-width: 480px)
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
`<style>` is supported in the head and body by everything except Gmail. Only use them for responsive styles.
|
||||||
|
|
||||||
|
## References
|
||||||
|
{: .-one-column}
|
||||||
|
|
||||||
|
- [CSS support matrix](https://www.campaignmonitor.com/css/) _campaignmonitor.com_
|
||||||
19
jekyll.md
19
jekyll.md
|
|
@ -408,16 +408,22 @@ Helpers and filters
|
||||||
### Array filters
|
### Array filters
|
||||||
|
|
||||||
```
|
```
|
||||||
site.posts | where:"year","2014"
|
{{ site.pages | where: "year","2014" }}
|
||||||
site.posts | group_by:"genre" #=> { name, items }
|
```
|
||||||
site.posts | sort
|
|
||||||
|
```
|
||||||
|
| where: "year","2014"
|
||||||
|
| where_exp: "item", "item.year >= 2014"
|
||||||
|
| group_by: "genre" #=> { name, items }
|
||||||
|
| sort
|
||||||
|
| sort: 'author'
|
||||||
```
|
```
|
||||||
|
|
||||||
```
|
```
|
||||||
| first
|
| first
|
||||||
| last
|
| last
|
||||||
| join: ","
|
| join: ","
|
||||||
| array_to_sentence_string #=> CSS, JavaScript and HTML
|
| array_to_sentence_string #=> "CSS, JS and HTML"
|
||||||
```
|
```
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
@ -425,6 +431,10 @@ site.posts | sort
|
||||||
| size
|
| size
|
||||||
```
|
```
|
||||||
|
|
||||||
|
```
|
||||||
|
{% assign list = list | push: 'd' %}
|
||||||
|
```
|
||||||
|
|
||||||
### String filters
|
### String filters
|
||||||
|
|
||||||
```rb
|
```rb
|
||||||
|
|
@ -530,6 +540,7 @@ Also see
|
||||||
{: .-one-column}
|
{: .-one-column}
|
||||||
|
|
||||||
* [Jekyll docs](http://jekyllrb.com/docs/home/) _jekyllrb.com_
|
* [Jekyll docs](http://jekyllrb.com/docs/home/) _jekyllrb.com_
|
||||||
|
* [CloudCannon Jekyll cheatsheet](https://learn.cloudcannon.com/jekyll-cheat-sheet/) _cloudcannon.com_
|
||||||
* [Jekyll: templates](http://jekyllrb.com/docs/templates/) _jekyllrb.com_
|
* [Jekyll: templates](http://jekyllrb.com/docs/templates/) _jekyllrb.com_
|
||||||
* [Liquid: output](http://docs.shopify.com/themes/liquid-basics/output) _shopify.com_
|
* [Liquid: output](http://docs.shopify.com/themes/liquid-basics/output) _shopify.com_
|
||||||
* [Liquid: logic](http://docs.shopify.com/themes/liquid-basics/logic) _shopify.com_
|
* [Liquid: logic](http://docs.shopify.com/themes/liquid-basics/logic) _shopify.com_
|
||||||
|
|
|
||||||
1
sass.md
1
sass.md
|
|
@ -4,6 +4,7 @@ category: CSS
|
||||||
layout: 2017/sheet
|
layout: 2017/sheet
|
||||||
tags: [Featured]
|
tags: [Featured]
|
||||||
updated: 201708
|
updated: 201708
|
||||||
|
weight: -5
|
||||||
---
|
---
|
||||||
|
|
||||||
## Basics
|
## Basics
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue