├── images └── maizzle.png ├── .gitignore ├── .editorconfig ├── package.json ├── tailwind.config.js ├── config.js ├── config.production.js ├── css └── accordion.css ├── layouts └── main.html ├── LICENSE ├── README.md ├── emails ├── accordion.html └── carousel.html └── .github ├── logo-light.svg └── logo-dark.svg /images/maizzle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maizzle/starter-amp4email/HEAD/images/maizzle.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | build_local 3 | .DS_Store 4 | Thumbs.db 5 | .idea 6 | .vscode 7 | npm-debug.log 8 | yarn-error.log 9 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "type": "module", 4 | "scripts": { 5 | "dev": "maizzle serve", 6 | "build": "maizzle build production" 7 | }, 8 | "dependencies": { 9 | "@maizzle/framework": "latest", 10 | "tailwindcss-preset-email": "latest" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | presets: [ 4 | require('tailwindcss-preset-email'), 5 | ], 6 | content: [ 7 | './components/**/*.html', 8 | './emails/**/*.html', 9 | './layouts/**/*.html', 10 | ], 11 | theme: { 12 | screens: { 13 | md: '600px', 14 | }, 15 | }, 16 | } 17 | -------------------------------------------------------------------------------- /config.js: -------------------------------------------------------------------------------- 1 | /* 2 | |------------------------------------------------------------------------------- 3 | | Development config https://maizzle.com/docs/environments 4 | |------------------------------------------------------------------------------- 5 | | 6 | | This is the base configuration that Maizzle will use when you run commands 7 | | like `npm run build` or `npm run dev`. Additional config files will 8 | | inherit these settings, and can override them when necessary. 9 | | 10 | */ 11 | 12 | /** @type {import('@maizzle/framework').Config} */ 13 | export default { 14 | build: { 15 | content: ['emails/**/*.html'], 16 | static: { 17 | source: ['images/**/*.*'], 18 | destination: 'images', 19 | }, 20 | }, 21 | } 22 | -------------------------------------------------------------------------------- /config.production.js: -------------------------------------------------------------------------------- 1 | /* 2 | |------------------------------------------------------------------------------- 3 | | Production config https://maizzle.com/docs/environments 4 | |------------------------------------------------------------------------------- 5 | | 6 | | This is the production configuration that Maizzle will use when you run the 7 | | `npm run build` command. Settings here will be merged on top of the base 8 | | `config.js`, so you only need to add the options that are changing. 9 | | 10 | */ 11 | 12 | /** @type {import('@maizzle/framework').Config} */ 13 | export default { 14 | build: { 15 | output: { 16 | path: 'build_production', 17 | }, 18 | }, 19 | css: { 20 | purge: { 21 | safelist: ['.amp*'], 22 | }, 23 | shorthand: true, 24 | }, 25 | prettify: true, 26 | } 27 | -------------------------------------------------------------------------------- /css/accordion.css: -------------------------------------------------------------------------------- 1 | .accordion-item { 2 | @apply py-4 mb-2 border-solid border-0 border-b border-gray-200; 3 | 4 | &:last-child { 5 | @apply border-none; 6 | } 7 | 8 | .collapse { 9 | @apply hidden; 10 | } 11 | 12 | &[expanded] .expand { 13 | @apply hidden; 14 | } 15 | 16 | &[expanded] .collapse { 17 | @apply inline-block; 18 | } 19 | } 20 | 21 | .accordion-toggle { 22 | @apply bg-white border-none; 23 | 24 | h2 { 25 | @apply flex items-center text-lg font-semibold text-black; 26 | 27 | .icon { 28 | @apply w-6 h-6 mr-4 leading-4.5 rounded-full text-2xl text-center text-white bg-black; 29 | } 30 | } 31 | } 32 | 33 | .accordion-toggle:focus { 34 | @apply outline-none; 35 | } 36 | 37 | .accordion-content { 38 | @apply py-4; 39 | } 40 | 41 | @screen md { 42 | .accordion-content { 43 | @apply px-10; 44 | } 45 | } 46 | 47 | .inline-code { 48 | @apply px-2 py-0.5 font-mono rounded border-solid border border-gray-300 text-xs text-red-600 bg-gray-100; 49 | } 50 | -------------------------------------------------------------------------------- /layouts/main.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) Cosmin Popovici 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 |

3 | 4 | 5 | 6 | Maizzle Starter 7 | 8 | 9 |

10 | 11 | **⚡4email Starter** 12 | 13 |
14 | 15 | ## About 16 | 17 | AMP for Email templates, built with [Tailwind CSS](https://tailwindcss.com/) in [Maizzle](https://maizzle.com). 18 | 19 | ## Templates 20 | 21 | The following templates are included: 22 | 23 | - Accordion 24 | - Carousel 25 | 26 | ## Getting Started 27 | 28 | Run this command: 29 | 30 | ```bash 31 | npx create-maizzle 32 | ``` 33 | 34 | When prompted to select a Starter, choose **Custom → AMP4Email**. 35 | 36 | ## Development 37 | 38 | Start a local development server: 39 | 40 | ``` 41 | npm run dev 42 | ``` 43 | 44 | Build for production: 45 | 46 | ``` 47 | npm run build 48 | ``` 49 | 50 | ## Documentation 51 | 52 | Maizzle documentation is available at https://maizzle.com 53 | -------------------------------------------------------------------------------- /emails/accordion.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | 9 |
10 |
11 |
12 |
13 | 14 | 20 | 21 |
22 |
23 |

24 | Accordion 25 |

26 | 27 |

28 | UI element made up of vertically stacked items. 29 | Each item can be expanded or collapsed to reveal or hide its content. 30 |

31 | 32 |
33 |
34 |

35 | + 36 | – 37 | When should you use an accordion? 38 |

39 |
40 | 41 |
42 |

43 | Anytime you want to toggle the display of some content. 44 |

45 |
46 |
47 |
48 |
49 |

50 | + 51 | – 52 | Why should you use it? 53 |

54 |
55 | 56 |
57 | It's great for saving (vertical) space in your emails. 58 |
59 |
60 |
61 |
62 |

63 | + 64 | – 65 | Can I have just one item open at a time? 66 |

67 |
68 | 69 |
70 | Sure, just use the expand-single-section 71 | attribute on the <amp-accordion> element. 72 |
73 |
74 |
75 |
76 |

77 | + 78 | – 79 | What if I want one of the items already expanded? 80 |

81 |
82 | 83 |
84 | Add the expanded attribute 85 | on the <section> element 86 | you want to show as expanded. 87 |
88 |
89 | 90 |
91 |
92 |

93 | Powered by Maizzle 94 |

95 | 96 |

97 | Quickly build HTML emails with utility-first CSS 98 |

99 | 100 |

101 | Docs • 102 | Github • 103 | Twitter 104 |

105 |
106 |
107 |
108 |
109 | 110 | -------------------------------------------------------------------------------- /.github/logo-light.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /.github/logo-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /emails/carousel.html: -------------------------------------------------------------------------------- 1 | --- 2 | images: 3 | carousel: https://images.unsplash.com/photo-1565932887479-b18108f07ffd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1200&q=80 4 | --- 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 | 15 | 21 | 22 |
23 |
24 | 25 |
26 |
27 |

28 | First slide 29 |

30 | 31 |

32 | Consectetur esse cupidatat in aliqua pariatur anim pariatur dolor nisi. 33 | Adipisicing elit labore nisi ullamco qui sint cillum commodo nisi velit sunt dolore. 34 |

35 | 36 | 37 | Read more → 38 | 39 |
40 |
41 |
42 |
43 |

44 | Second slide 45 |

46 | 47 |

48 | Consectetur esse cupidatat in aliqua pariatur anim pariatur dolor nisi. 49 | Adipisicing elit labore nisi ullamco qui sint cillum commodo nisi velit sunt dolore. 50 |

51 | 52 | 53 | Read more → 54 | 55 |
56 |
57 |
58 |
59 |

60 | Third slide 61 |

62 | 63 |

64 | Consectetur esse cupidatat in aliqua pariatur anim pariatur dolor nisi. 65 | Adipisicing elit labore nisi ullamco qui sint cillum commodo nisi velit sunt dolore. 66 |

67 | 68 | 69 | Read more → 70 | 71 |
72 |
73 | 74 |
75 |
76 |
77 | 2 Feb, 2020 78 | 79 |

80 | Sit aliqua reprehenderit qui veniam culpa. 81 |

82 | 83 |

84 | Ex consequat deserunt id cupidatat exercitation irure commodo. 85 | Dolor et est irure elit cupidatat laborum veniam amet eiusmod Lorem ex ea do aliqua. 86 | Ipsum Lorem nulla sit aliqua quis veniam magna... 87 |

88 | 89 | 90 | Read more → 91 | 92 |
93 |
94 |
95 |
96 |
97 | 3 Feb, 2020 98 | 99 |

100 | Do ullamco reprehenderit ut dolor. 101 |

102 | 103 |

104 | Consectetur veniam ipsum ea sit est do voluptate laboris... 105 |

106 | 107 | 108 | Read more → 109 | 110 |
111 |
112 |
113 |
114 | 4 Feb, 2020 115 | 116 |

117 | Sunt in do sunt officia nisi enim qui eiusmod. 118 |

119 | 120 |

121 | Nulla officia mollit ipsum eiusmod excepteur ea... 122 |

123 | 124 | 125 | Read more → 126 | 127 |
128 |
129 |
130 |
131 |

132 | From the archives 133 |

134 | 135 | 160 |
161 | 169 |
170 |
171 | 172 | --------------------------------------------------------------------------------