Update html-email
This commit is contained in:
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
|
||||
|
||||
```
|
||||
site.posts | where:"year","2014"
|
||||
site.posts | group_by:"genre" #=> { name, items }
|
||||
site.posts | sort
|
||||
{{ site.pages | where: "year","2014" }}
|
||||
```
|
||||
|
||||
```
|
||||
| where: "year","2014"
|
||||
| where_exp: "item", "item.year >= 2014"
|
||||
| group_by: "genre" #=> { name, items }
|
||||
| sort
|
||||
| sort: 'author'
|
||||
```
|
||||
|
||||
```
|
||||
| first
|
||||
| last
|
||||
| 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
|
||||
```
|
||||
|
||||
```
|
||||
{% assign list = list | push: 'd' %}
|
||||
```
|
||||
|
||||
### String filters
|
||||
|
||||
```rb
|
||||
|
@ -530,6 +540,7 @@ Also see
|
|||
{: .-one-column}
|
||||
|
||||
* [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_
|
||||
* [Liquid: output](http://docs.shopify.com/themes/liquid-basics/output) _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
|
||||
tags: [Featured]
|
||||
updated: 201708
|
||||
weight: -5
|
||||
---
|
||||
|
||||
## Basics
|
||||
|
|
Loading…
Reference in New Issue