mjmlhelper 2.2.8 → 2.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/workflows/ci.yml +42 -0
- package/.gitignore +18 -15
- package/README.md +1 -0
- package/boilerplate/_inc/bottom.mjml +18 -18
- package/boilerplate/_inc/button.mjml +6 -6
- package/boilerplate/_inc/columns-inline.mjml +47 -47
- package/boilerplate/_inc/columns.mjml +25 -25
- package/boilerplate/_inc/divider.mjml +24 -24
- package/boilerplate/_inc/responsive.mjml +70 -70
- package/boilerplate/_inc/simple.mjml +37 -37
- package/boilerplate/_inc/top.mjml +8 -8
- package/boilerplate/_inc/two-col-right.mjml +11 -11
- package/boilerplate/example.gitignore +9 -9
- package/boilerplate/example.mjmlhelper.json +27 -27
- package/boilerplate/index.mjml +113 -113
- package/boilerplate/package.json +4 -0
- package/mjmlhelper.js +576 -576
- package/package.json +9 -5
- package/LICENSE.md +0 -21
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
name: CI
|
|
2
|
+
|
|
3
|
+
env:
|
|
4
|
+
CI: true
|
|
5
|
+
|
|
6
|
+
on:
|
|
7
|
+
push:
|
|
8
|
+
tags:
|
|
9
|
+
- 'v*'
|
|
10
|
+
- '[0-9]*'
|
|
11
|
+
|
|
12
|
+
jobs:
|
|
13
|
+
publish:
|
|
14
|
+
runs-on: ubuntu-latest
|
|
15
|
+
|
|
16
|
+
permissions:
|
|
17
|
+
contents: read
|
|
18
|
+
id-token: write
|
|
19
|
+
|
|
20
|
+
steps:
|
|
21
|
+
- name: Checkout
|
|
22
|
+
uses: actions/checkout@v6
|
|
23
|
+
|
|
24
|
+
- name: Node
|
|
25
|
+
uses: actions/setup-node@v6
|
|
26
|
+
with:
|
|
27
|
+
node-version-file: '.nvmrc'
|
|
28
|
+
registry-url: 'https://registry.npmjs.org'
|
|
29
|
+
package-manager-cache: false
|
|
30
|
+
|
|
31
|
+
- name: NPM
|
|
32
|
+
run: npm install
|
|
33
|
+
|
|
34
|
+
- name: Version
|
|
35
|
+
run: npm version "${GITHUB_REF_NAME#v}" --no-git-tag-version --allow-same-version
|
|
36
|
+
|
|
37
|
+
- name: Build
|
|
38
|
+
run: npm run prod --if-present
|
|
39
|
+
|
|
40
|
+
- name: Publish
|
|
41
|
+
run: npm publish
|
|
42
|
+
|
package/.gitignore
CHANGED
|
@@ -1,15 +1,18 @@
|
|
|
1
|
-
*
|
|
2
|
-
!.gitignore
|
|
3
|
-
!package.json
|
|
4
|
-
!.nvmrc
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
/
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
/boilerplate/
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
1
|
+
*
|
|
2
|
+
!.gitignore
|
|
3
|
+
!package.json
|
|
4
|
+
!.nvmrc
|
|
5
|
+
!/.github/
|
|
6
|
+
!/.github/workflows/
|
|
7
|
+
!/.github/workflows/ci.yml
|
|
8
|
+
!/boilerplate/
|
|
9
|
+
!/boilerplate/*
|
|
10
|
+
/boilerplate/index-converted.html
|
|
11
|
+
/boilerplate/index.zip
|
|
12
|
+
/boilerplate/mjmlhelper.json
|
|
13
|
+
/boilerplate/log.txt
|
|
14
|
+
!/boilerplate/*/
|
|
15
|
+
!/boilerplate/*/*
|
|
16
|
+
!mjmlhelper.js
|
|
17
|
+
!mjmlhelper.example.json
|
|
18
|
+
!README.md
|
package/README.md
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
[](https://github.com/vielhuber/mjmlhelper/actions)
|
|
1
2
|
[](https://github.com/vielhuber/mjmlhelper/tags)
|
|
2
3
|
[](https://www.php-fig.org/psr/psr-12/)
|
|
3
4
|
[](https://github.com/vielhuber/mjmlhelper/blob/main/LICENSE.md)
|
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
<mj-section background-color="transparent">
|
|
2
|
-
<mj-column>
|
|
3
|
-
<mj-text mj-class="small strong" padding-bottom="15px">
|
|
4
|
-
Sie haben diese E-Mail erhalten, weil Sie sich für den XXX Newsletter angemeldet haben.<br />
|
|
5
|
-
Hier können Sie sich vom
|
|
6
|
-
<a style="color: #000;" href="%UNSUBSCRIBE%" target="_blank">Newsletter abmelden</a>.
|
|
7
|
-
</mj-text>
|
|
8
|
-
<mj-text mj-class="smallest">
|
|
9
|
-
Impressum<br />
|
|
10
|
-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
|
|
11
|
-
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
|
|
12
|
-
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
|
|
13
|
-
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
|
|
14
|
-
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
|
|
15
|
-
sea takimata sanctus est Lorem ipsum dolor sit amet.
|
|
16
|
-
</mj-text>
|
|
17
|
-
</mj-column>
|
|
18
|
-
</mj-section>
|
|
1
|
+
<mj-section background-color="transparent">
|
|
2
|
+
<mj-column>
|
|
3
|
+
<mj-text mj-class="small strong" padding-bottom="15px">
|
|
4
|
+
Sie haben diese E-Mail erhalten, weil Sie sich für den XXX Newsletter angemeldet haben.<br />
|
|
5
|
+
Hier können Sie sich vom
|
|
6
|
+
<a style="color: #000;" href="%UNSUBSCRIBE%" target="_blank">Newsletter abmelden</a>.
|
|
7
|
+
</mj-text>
|
|
8
|
+
<mj-text mj-class="smallest">
|
|
9
|
+
Impressum<br />
|
|
10
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
|
|
11
|
+
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
|
|
12
|
+
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
|
|
13
|
+
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
|
|
14
|
+
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
|
|
15
|
+
sea takimata sanctus est Lorem ipsum dolor sit amet.
|
|
16
|
+
</mj-text>
|
|
17
|
+
</mj-column>
|
|
18
|
+
</mj-section>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
<mj-section>
|
|
2
|
-
<mj-column>
|
|
3
|
-
<!-- always provide an explicit link (otherwise outlook.com strips those tags) -->
|
|
4
|
-
<mj-button href="https://red.de" css-class="hover">Button</mj-button>
|
|
5
|
-
</mj-column>
|
|
6
|
-
</mj-section>
|
|
1
|
+
<mj-section>
|
|
2
|
+
<mj-column>
|
|
3
|
+
<!-- always provide an explicit link (otherwise outlook.com strips those tags) -->
|
|
4
|
+
<mj-button href="https://red.de" css-class="hover">Button</mj-button>
|
|
5
|
+
</mj-column>
|
|
6
|
+
</mj-section>
|
|
@@ -1,47 +1,47 @@
|
|
|
1
|
-
<mj-section>
|
|
2
|
-
<mj-column>
|
|
3
|
-
<mj-spacer height="40px" />
|
|
4
|
-
|
|
5
|
-
<mj-text>
|
|
6
|
-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
|
|
7
|
-
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
|
|
8
|
-
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
|
|
9
|
-
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
|
|
10
|
-
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
|
|
11
|
-
sea takimata sanctus est Lorem ipsum dolor sit amet.
|
|
12
|
-
</mj-text>
|
|
13
|
-
|
|
14
|
-
<!-- use this instead of mj-group; also include line-height:0px to prevent outlook from cutting off images -->
|
|
15
|
-
<mj-text padding="40px 0" line-height="0px">
|
|
16
|
-
<a href="https://www.facebook.com" target="_blank"
|
|
17
|
-
><img style="padding-bottom: 4px; vertical-align: middle;" src="_assets/32x32.jpg" width="32" /></a
|
|
18
|
-
>
|
|
19
|
-
<a href="https://www.facebook.com" target="_blank"
|
|
20
|
-
><img style="padding-bottom: 4px; vertical-align: middle;" src="_assets/32x32.jpg" width="32" /></a
|
|
21
|
-
>
|
|
22
|
-
<a href="https://www.facebook.com" target="_blank"
|
|
23
|
-
><img style="padding-bottom: 4px; vertical-align: middle;" src="_assets/32x32.jpg" width="32" /></a
|
|
24
|
-
>
|
|
25
|
-
<a href="https://www.facebook.com" target="_blank"
|
|
26
|
-
><img style="padding-bottom: 4px; vertical-align: middle;" src="_assets/32x32.jpg" width="32" /></a
|
|
27
|
-
>
|
|
28
|
-
<a href="https://www.facebook.com" target="_blank"
|
|
29
|
-
><img style="padding-bottom: 4px; vertical-align: middle;" src="_assets/32x32.jpg" width="32" /></a
|
|
30
|
-
>
|
|
31
|
-
<a href="https://www.facebook.com" target="_blank"
|
|
32
|
-
><img style="padding-bottom: 4px; vertical-align: middle;" src="_assets/32x32.jpg" width="32"
|
|
33
|
-
/></a>
|
|
34
|
-
</mj-text>
|
|
35
|
-
|
|
36
|
-
<mj-text>
|
|
37
|
-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
|
|
38
|
-
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
|
|
39
|
-
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
|
|
40
|
-
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
|
|
41
|
-
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
|
|
42
|
-
sea takimata sanctus est Lorem ipsum dolor sit amet.
|
|
43
|
-
</mj-text>
|
|
44
|
-
|
|
45
|
-
<mj-spacer height="40px" />
|
|
46
|
-
</mj-column>
|
|
47
|
-
</mj-section>
|
|
1
|
+
<mj-section>
|
|
2
|
+
<mj-column>
|
|
3
|
+
<mj-spacer height="40px" />
|
|
4
|
+
|
|
5
|
+
<mj-text>
|
|
6
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
|
|
7
|
+
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
|
|
8
|
+
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
|
|
9
|
+
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
|
|
10
|
+
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
|
|
11
|
+
sea takimata sanctus est Lorem ipsum dolor sit amet.
|
|
12
|
+
</mj-text>
|
|
13
|
+
|
|
14
|
+
<!-- use this instead of mj-group; also include line-height:0px to prevent outlook from cutting off images -->
|
|
15
|
+
<mj-text padding="40px 0" line-height="0px">
|
|
16
|
+
<a href="https://www.facebook.com" target="_blank"
|
|
17
|
+
><img style="padding-bottom: 4px; vertical-align: middle;" src="_assets/32x32.jpg" width="32" /></a
|
|
18
|
+
>
|
|
19
|
+
<a href="https://www.facebook.com" target="_blank"
|
|
20
|
+
><img style="padding-bottom: 4px; vertical-align: middle;" src="_assets/32x32.jpg" width="32" /></a
|
|
21
|
+
>
|
|
22
|
+
<a href="https://www.facebook.com" target="_blank"
|
|
23
|
+
><img style="padding-bottom: 4px; vertical-align: middle;" src="_assets/32x32.jpg" width="32" /></a
|
|
24
|
+
>
|
|
25
|
+
<a href="https://www.facebook.com" target="_blank"
|
|
26
|
+
><img style="padding-bottom: 4px; vertical-align: middle;" src="_assets/32x32.jpg" width="32" /></a
|
|
27
|
+
>
|
|
28
|
+
<a href="https://www.facebook.com" target="_blank"
|
|
29
|
+
><img style="padding-bottom: 4px; vertical-align: middle;" src="_assets/32x32.jpg" width="32" /></a
|
|
30
|
+
>
|
|
31
|
+
<a href="https://www.facebook.com" target="_blank"
|
|
32
|
+
><img style="padding-bottom: 4px; vertical-align: middle;" src="_assets/32x32.jpg" width="32"
|
|
33
|
+
/></a>
|
|
34
|
+
</mj-text>
|
|
35
|
+
|
|
36
|
+
<mj-text>
|
|
37
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
|
|
38
|
+
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
|
|
39
|
+
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
|
|
40
|
+
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
|
|
41
|
+
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
|
|
42
|
+
sea takimata sanctus est Lorem ipsum dolor sit amet.
|
|
43
|
+
</mj-text>
|
|
44
|
+
|
|
45
|
+
<mj-spacer height="40px" />
|
|
46
|
+
</mj-column>
|
|
47
|
+
</mj-section>
|
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
<mj-section>
|
|
2
|
-
<mj-column width="25%" padding="0% 2%">
|
|
3
|
-
<mj-text>
|
|
4
|
-
test
|
|
5
|
-
</mj-text>
|
|
6
|
-
</mj-column>
|
|
7
|
-
|
|
8
|
-
<mj-column width="25%" padding="0% 2%">
|
|
9
|
-
<mj-text>
|
|
10
|
-
test
|
|
11
|
-
</mj-text>
|
|
12
|
-
</mj-column>
|
|
13
|
-
|
|
14
|
-
<mj-column width="25%" padding="0% 2%">
|
|
15
|
-
<mj-text>
|
|
16
|
-
test
|
|
17
|
-
</mj-text>
|
|
18
|
-
</mj-column>
|
|
19
|
-
|
|
20
|
-
<mj-column width="25%" padding="0% 2%">
|
|
21
|
-
<mj-text>
|
|
22
|
-
test
|
|
23
|
-
</mj-text>
|
|
24
|
-
</mj-column>
|
|
25
|
-
</mj-section>
|
|
1
|
+
<mj-section>
|
|
2
|
+
<mj-column width="25%" padding="0% 2%">
|
|
3
|
+
<mj-text>
|
|
4
|
+
test
|
|
5
|
+
</mj-text>
|
|
6
|
+
</mj-column>
|
|
7
|
+
|
|
8
|
+
<mj-column width="25%" padding="0% 2%">
|
|
9
|
+
<mj-text>
|
|
10
|
+
test
|
|
11
|
+
</mj-text>
|
|
12
|
+
</mj-column>
|
|
13
|
+
|
|
14
|
+
<mj-column width="25%" padding="0% 2%">
|
|
15
|
+
<mj-text>
|
|
16
|
+
test
|
|
17
|
+
</mj-text>
|
|
18
|
+
</mj-column>
|
|
19
|
+
|
|
20
|
+
<mj-column width="25%" padding="0% 2%">
|
|
21
|
+
<mj-text>
|
|
22
|
+
test
|
|
23
|
+
</mj-text>
|
|
24
|
+
</mj-column>
|
|
25
|
+
</mj-section>
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
<mj-section>
|
|
2
|
-
<mj-column>
|
|
3
|
-
<!-- simple spacer -->
|
|
4
|
-
<mj-spacer height="40px" />
|
|
5
|
-
|
|
6
|
-
<!-- a divider only can be aligned center -->
|
|
7
|
-
<!-- it should also not have a fixed width (because of iphone bug) -->
|
|
8
|
-
<!-- if it should have a fixed width, use mj-button instead (see below) -->
|
|
9
|
-
<mj-divider border-width="1px" border-style="solid" border-color="#d3d3d3" />
|
|
10
|
-
|
|
11
|
-
<!-- to align a divider left, use an empty mj-button -->
|
|
12
|
-
<mj-button
|
|
13
|
-
border-bottom="1px solid #ff0000"
|
|
14
|
-
align="left"
|
|
15
|
-
width="90px"
|
|
16
|
-
padding-left="20px"
|
|
17
|
-
padding-right="20px"
|
|
18
|
-
padding-top="10px"
|
|
19
|
-
padding-bottom="10px"
|
|
20
|
-
background-color="transparent"
|
|
21
|
-
border-radius="0px"
|
|
22
|
-
></mj-button>
|
|
23
|
-
</mj-column>
|
|
24
|
-
</mj-section>
|
|
1
|
+
<mj-section>
|
|
2
|
+
<mj-column>
|
|
3
|
+
<!-- simple spacer -->
|
|
4
|
+
<mj-spacer height="40px" />
|
|
5
|
+
|
|
6
|
+
<!-- a divider only can be aligned center -->
|
|
7
|
+
<!-- it should also not have a fixed width (because of iphone bug) -->
|
|
8
|
+
<!-- if it should have a fixed width, use mj-button instead (see below) -->
|
|
9
|
+
<mj-divider border-width="1px" border-style="solid" border-color="#d3d3d3" />
|
|
10
|
+
|
|
11
|
+
<!-- to align a divider left, use an empty mj-button -->
|
|
12
|
+
<mj-button
|
|
13
|
+
border-bottom="1px solid #ff0000"
|
|
14
|
+
align="left"
|
|
15
|
+
width="90px"
|
|
16
|
+
padding-left="20px"
|
|
17
|
+
padding-right="20px"
|
|
18
|
+
padding-top="10px"
|
|
19
|
+
padding-bottom="10px"
|
|
20
|
+
background-color="transparent"
|
|
21
|
+
border-radius="0px"
|
|
22
|
+
></mj-button>
|
|
23
|
+
</mj-column>
|
|
24
|
+
</mj-section>
|
|
@@ -1,70 +1,70 @@
|
|
|
1
|
-
<!-- this is done inline because it should be AFTER all other styles -->
|
|
2
|
-
<mj-raw>
|
|
3
|
-
<style type="text/css">
|
|
4
|
-
/* iphone: full width images */
|
|
5
|
-
@media only screen and (max-width: 500px) {
|
|
6
|
-
/* option 1: all percentage columns */
|
|
7
|
-
.mj-column-per-X table,
|
|
8
|
-
.mj-column-per-X td,
|
|
9
|
-
.mj-column-per-X td img {
|
|
10
|
-
min-width: 100%;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
/* option 2: all columns except some manual */
|
|
14
|
-
.mj-column-X table,
|
|
15
|
-
.mj-column-X td,
|
|
16
|
-
.mj-column-X td img {
|
|
17
|
-
min-width: 100%;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.mj-column-X.no-mobile-full-width table,
|
|
21
|
-
.mj-column-X.no-mobile-full-width td,
|
|
22
|
-
.mj-column-X.no-mobile-full-width td img {
|
|
23
|
-
min-width: 0;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
/* option 3: manual class */
|
|
27
|
-
.mobile-full-width table,
|
|
28
|
-
.mobile-full-width td,
|
|
29
|
-
.mobile-full-width td img {
|
|
30
|
-
min-width: 100%;
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
</style>
|
|
34
|
-
<style type="text/css">
|
|
35
|
-
/* iphone: modify font sizes */
|
|
36
|
-
@media only screen and (max-width: 500px) {
|
|
37
|
-
.font-size-16px {
|
|
38
|
-
font-size: 20px !important;
|
|
39
|
-
line-height: 24px !important;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.font-size-13px {
|
|
43
|
-
font-size: 17px !important;
|
|
44
|
-
line-height: 22px !important;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.font-size-10px {
|
|
48
|
-
font-size: 15px !important;
|
|
49
|
-
line-height: 20px !important;
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
</style>
|
|
53
|
-
<style type="text/css">
|
|
54
|
-
/* iphone: text align center */
|
|
55
|
-
@media only screen and (max-width: 500px) {
|
|
56
|
-
.text-align-left {
|
|
57
|
-
text-align: center !important;
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
/* more aggressive (disabled) */
|
|
61
|
-
/*
|
|
62
|
-
@media only screen and (max-width: 500px) {
|
|
63
|
-
*[style*='text-align:left'],
|
|
64
|
-
*[style*='text-align: left'] {
|
|
65
|
-
text-align: center !important;
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
*/
|
|
69
|
-
</style>
|
|
70
|
-
</mj-raw>
|
|
1
|
+
<!-- this is done inline because it should be AFTER all other styles -->
|
|
2
|
+
<mj-raw>
|
|
3
|
+
<style type="text/css">
|
|
4
|
+
/* iphone: full width images */
|
|
5
|
+
@media only screen and (max-width: 500px) {
|
|
6
|
+
/* option 1: all percentage columns */
|
|
7
|
+
.mj-column-per-X table,
|
|
8
|
+
.mj-column-per-X td,
|
|
9
|
+
.mj-column-per-X td img {
|
|
10
|
+
min-width: 100%;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
/* option 2: all columns except some manual */
|
|
14
|
+
.mj-column-X table,
|
|
15
|
+
.mj-column-X td,
|
|
16
|
+
.mj-column-X td img {
|
|
17
|
+
min-width: 100%;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.mj-column-X.no-mobile-full-width table,
|
|
21
|
+
.mj-column-X.no-mobile-full-width td,
|
|
22
|
+
.mj-column-X.no-mobile-full-width td img {
|
|
23
|
+
min-width: 0;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/* option 3: manual class */
|
|
27
|
+
.mobile-full-width table,
|
|
28
|
+
.mobile-full-width td,
|
|
29
|
+
.mobile-full-width td img {
|
|
30
|
+
min-width: 100%;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
</style>
|
|
34
|
+
<style type="text/css">
|
|
35
|
+
/* iphone: modify font sizes */
|
|
36
|
+
@media only screen and (max-width: 500px) {
|
|
37
|
+
.font-size-16px {
|
|
38
|
+
font-size: 20px !important;
|
|
39
|
+
line-height: 24px !important;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.font-size-13px {
|
|
43
|
+
font-size: 17px !important;
|
|
44
|
+
line-height: 22px !important;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.font-size-10px {
|
|
48
|
+
font-size: 15px !important;
|
|
49
|
+
line-height: 20px !important;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
</style>
|
|
53
|
+
<style type="text/css">
|
|
54
|
+
/* iphone: text align center */
|
|
55
|
+
@media only screen and (max-width: 500px) {
|
|
56
|
+
.text-align-left {
|
|
57
|
+
text-align: center !important;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
/* more aggressive (disabled) */
|
|
61
|
+
/*
|
|
62
|
+
@media only screen and (max-width: 500px) {
|
|
63
|
+
*[style*='text-align:left'],
|
|
64
|
+
*[style*='text-align: left'] {
|
|
65
|
+
text-align: center !important;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
*/
|
|
69
|
+
</style>
|
|
70
|
+
</mj-raw>
|
|
@@ -1,37 +1,37 @@
|
|
|
1
|
-
<mj-section>
|
|
2
|
-
<mj-column>
|
|
3
|
-
<mj-text>
|
|
4
|
-
text
|
|
5
|
-
</mj-text>
|
|
6
|
-
|
|
7
|
-
<mj-text css-class="mobile-hidden">
|
|
8
|
-
this is hidden on most mobile devices
|
|
9
|
-
</mj-text>
|
|
10
|
-
|
|
11
|
-
<mj-text
|
|
12
|
-
color="red"
|
|
13
|
-
font-size="20px"
|
|
14
|
-
align="left"
|
|
15
|
-
>
|
|
16
|
-
Headline
|
|
17
|
-
</mj-text>
|
|
18
|
-
|
|
19
|
-
<mj-button
|
|
20
|
-
background-color="#f45e43"
|
|
21
|
-
color="white"
|
|
22
|
-
align="left"
|
|
23
|
-
border-radius="0px"
|
|
24
|
-
inner-padding="5px 10px"
|
|
25
|
-
>
|
|
26
|
-
Special headline with inline background
|
|
27
|
-
</mj-button>
|
|
28
|
-
|
|
29
|
-
<mj-image src="_assets/560x330.jpg" />
|
|
30
|
-
|
|
31
|
-
<mj-text>
|
|
32
|
-
Dies ist ein echter <a class="link-nostyle" href="https://test.de" target="_blank">Link</a>. Dies ist eine
|
|
33
|
-
Adresse <a href="" class="link-nostyle">Auenstraße 6, 80469 München</a>, die automatisch zum Link gemacht
|
|
34
|
-
wird.
|
|
35
|
-
</mj-text>
|
|
36
|
-
</mj-column>
|
|
37
|
-
</mj-section>
|
|
1
|
+
<mj-section>
|
|
2
|
+
<mj-column>
|
|
3
|
+
<mj-text>
|
|
4
|
+
text
|
|
5
|
+
</mj-text>
|
|
6
|
+
|
|
7
|
+
<mj-text css-class="mobile-hidden">
|
|
8
|
+
this is hidden on most mobile devices
|
|
9
|
+
</mj-text>
|
|
10
|
+
|
|
11
|
+
<mj-text
|
|
12
|
+
color="red"
|
|
13
|
+
font-size="20px"
|
|
14
|
+
align="left"
|
|
15
|
+
>
|
|
16
|
+
Headline
|
|
17
|
+
</mj-text>
|
|
18
|
+
|
|
19
|
+
<mj-button
|
|
20
|
+
background-color="#f45e43"
|
|
21
|
+
color="white"
|
|
22
|
+
align="left"
|
|
23
|
+
border-radius="0px"
|
|
24
|
+
inner-padding="5px 10px"
|
|
25
|
+
>
|
|
26
|
+
Special headline with inline background
|
|
27
|
+
</mj-button>
|
|
28
|
+
|
|
29
|
+
<mj-image src="_assets/560x330.jpg" />
|
|
30
|
+
|
|
31
|
+
<mj-text>
|
|
32
|
+
Dies ist ein echter <a class="link-nostyle" href="https://test.de" target="_blank">Link</a>. Dies ist eine
|
|
33
|
+
Adresse <a href="" class="link-nostyle">Auenstraße 6, 80469 München</a>, die automatisch zum Link gemacht
|
|
34
|
+
wird.
|
|
35
|
+
</mj-text>
|
|
36
|
+
</mj-column>
|
|
37
|
+
</mj-section>
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
<mj-section background-color="transparent">
|
|
2
|
-
<mj-column>
|
|
3
|
-
<mj-text mj-class="small strong">
|
|
4
|
-
Wird der Newsletter nicht richtig angezeigt? Dann bitte
|
|
5
|
-
<a class="link-nostyle" href="%WEBVERSION%" target="_blank">hier klicken</a>.
|
|
6
|
-
</mj-text>
|
|
7
|
-
</mj-column>
|
|
8
|
-
</mj-section>
|
|
1
|
+
<mj-section background-color="transparent">
|
|
2
|
+
<mj-column>
|
|
3
|
+
<mj-text mj-class="small strong">
|
|
4
|
+
Wird der Newsletter nicht richtig angezeigt? Dann bitte
|
|
5
|
+
<a class="link-nostyle" href="%WEBVERSION%" target="_blank">hier klicken</a>.
|
|
6
|
+
</mj-text>
|
|
7
|
+
</mj-column>
|
|
8
|
+
</mj-section>
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
<mj-section direction="rtl">
|
|
2
|
-
<mj-column width="50%" padding="0% 2%" css-class="mobile-full-width">
|
|
3
|
-
<mj-image src="_assets/276x165.jpg" />
|
|
4
|
-
</mj-column>
|
|
5
|
-
|
|
6
|
-
<mj-column width="50%" padding="0% 2%" css-class="mobile-full-width">
|
|
7
|
-
<mj-text>
|
|
8
|
-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
|
|
9
|
-
</mj-text>
|
|
10
|
-
</mj-column>
|
|
11
|
-
</mj-section>
|
|
1
|
+
<mj-section direction="rtl">
|
|
2
|
+
<mj-column width="50%" padding="0% 2%" css-class="mobile-full-width">
|
|
3
|
+
<mj-image src="_assets/276x165.jpg" />
|
|
4
|
+
</mj-column>
|
|
5
|
+
|
|
6
|
+
<mj-column width="50%" padding="0% 2%" css-class="mobile-full-width">
|
|
7
|
+
<mj-text>
|
|
8
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
|
|
9
|
+
</mj-text>
|
|
10
|
+
</mj-column>
|
|
11
|
+
</mj-section>
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
*
|
|
2
|
-
!.gitignore
|
|
3
|
-
!.nvmrc
|
|
4
|
-
!index.mjml
|
|
5
|
-
!package.json
|
|
6
|
-
!/_assets/
|
|
7
|
-
!/_assets/*
|
|
8
|
-
!/_inc/
|
|
9
|
-
!/_inc/*
|
|
1
|
+
*
|
|
2
|
+
!.gitignore
|
|
3
|
+
!.nvmrc
|
|
4
|
+
!index.mjml
|
|
5
|
+
!package.json
|
|
6
|
+
!/_assets/
|
|
7
|
+
!/_assets/*
|
|
8
|
+
!/_inc/
|
|
9
|
+
!/_inc/*
|
|
10
10
|
!mjmlhelper.json
|