├── components ├── others │ ├── row.html │ ├── link.html │ ├── mspace.html │ ├── spacer.html │ ├── image.html │ ├── content.html │ └── mobile-hack.html ├── buttons │ ├── button-ghost.html │ ├── button-square.html │ └── button-border-radius.html ├── typography │ └── typograhpy.html └── heros │ ├── single-image-hero.html │ ├── image-hero-with-mobile-block.html │ └── background-image-text-overlay.html ├── snippets ├── sublime │ ├── arial.sublime-snippet │ ├── mspace.sublime-snippet │ ├── row.sublime-snippet │ ├── space.sublime-snippet │ ├── img.sublime-snippet │ ├── content.sublime-snippet │ ├── button.sublime-snippet │ ├── fgrid1.sublime-snippet │ ├── mobile-block-hack.sublime-snippet │ ├── rgrid1.sublime-snippet │ ├── fgrid2.sublime-snippet │ ├── hgrid1.sublime-snippet │ ├── rgrid2.sublime-snippet │ ├── fgrid3.sublime-snippet │ ├── boilerplate.sublime-snippet │ ├── rgrid3.sublime-snippet │ ├── fgrid4.sublime-snippet │ ├── rgrid4.sublime-snippet │ ├── fgrid5.sublime-snippet │ ├── rgrid5.sublime-snippet │ ├── css.sublime-snippet │ ├── hgrid2.sublime-snippet │ └── hgrid3.sublime-snippet └── atom │ └── snippets.cson ├── grids ├── fluid │ ├── fluid-grid1.html │ ├── fluid-grid2.html │ ├── fluid-grid3.html │ ├── fluid-grid4.html │ ├── fluid-grid5.html │ └── fluid-grid-master.html ├── responsive │ ├── responsive-grid1.html │ ├── responsive-grid2.html │ ├── responsive-grid3.html │ ├── responsive-grid4.html │ ├── responsive-grid5.html │ └── responsive-grid-master.html └── hybrid │ ├── hybrid-grid1.html │ ├── hybrid-grid2.html │ ├── hybrid-grid3.html │ └── hybrid-grid-master.html ├── boilerplate.html ├── mail.css └── README.md /components/others/row.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /components/others/link.html: -------------------------------------------------------------------------------- 1 | Link 2 | -------------------------------------------------------------------------------- /components/others/mspace.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/others/spacer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /components/others/image.html: -------------------------------------------------------------------------------- 1 |

-------------------------------------------------------------------------------- /snippets/sublime/arial.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 5 | arial 6 | 7 | -------------------------------------------------------------------------------- /components/others/content.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 |

4 | 5 |

8 | -------------------------------------------------------------------------------- /snippets/sublime/mspace.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | ]]> 5 | mspace 6 | 7 | -------------------------------------------------------------------------------- /snippets/sublime/row.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | $1 6 | 7 | 8 | ]]> 9 | row 10 | 11 | -------------------------------------------------------------------------------- /snippets/sublime/space.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | ]]> 7 | space 8 | 9 | -------------------------------------------------------------------------------- /snippets/sublime/img.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | ]]> 5 | img 6 | 7 | -------------------------------------------------------------------------------- /snippets/sublime/content.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | $2 7 | 8 | 9 | 10 | ]]> 11 | content 12 | 13 | -------------------------------------------------------------------------------- /components/buttons/button-ghost.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 |

4 | Button 5 |

-------------------------------------------------------------------------------- /components/buttons/button-square.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 |

4 | Button 5 |

-------------------------------------------------------------------------------- /components/buttons/button-border-radius.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 |

4 | Button 5 |

-------------------------------------------------------------------------------- /grids/fluid/fluid-grid1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 14 | 15 |

4 | 5 | 6 | 7 | 10 | 11 |

8 | Grid 1 9 |

12 | 13 |

-------------------------------------------------------------------------------- /components/others/mobile-hack.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | -------------------------------------------------------------------------------- /components/typography/typograhpy.html: -------------------------------------------------------------------------------- 1 |

Heading

2 |

Heading

3 |

Heading

4 |

Heading

5 |

Heading

6 |

Heading

7 |

Paragraph

8 | Link 9 | -------------------------------------------------------------------------------- /components/heros/single-image-hero.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 14 | 15 |

4 | 5 | 6 | 7 | 10 | 11 |

8 |

9 |

12 | 13 |

16 | -------------------------------------------------------------------------------- /snippets/sublime/button.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | $2 7 | 8 | 9 | 10 | ]]> 11 | button 12 | 13 | -------------------------------------------------------------------------------- /grids/responsive/responsive-grid1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 17 | 18 | 19 | 20 | 21 |

7 | 8 | 9 | 10 | 13 | 14 |

11 | Grid One 12 |

15 | 16 |

22 | -------------------------------------------------------------------------------- /snippets/sublime/fgrid1.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | 12 | 13 |

10 | $1 11 |

14 | 15 | 16 | 17 | 18 | ]]> 19 | fgrid1 20 | 21 | -------------------------------------------------------------------------------- /grids/fluid/fluid-grid2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 17 | 18 |

4 | 5 | 6 | 7 | 10 | 13 | 14 |

8 | Grid 2 9 |

11 | Grid 2 12 |

15 | 16 |

-------------------------------------------------------------------------------- /snippets/sublime/mobile-block-hack.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 14 | 15 | ]]> 16 | mobileblock 17 | 18 | -------------------------------------------------------------------------------- /grids/hybrid/hybrid-grid1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 9 | 10 | 15 | 16 |

11 | 12 | Grid One 13 | 14 |

17 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /snippets/sublime/rgrid1.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | 16 |

13 | $1 14 |

17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | ]]> 25 | rgrid1 26 | 27 | -------------------------------------------------------------------------------- /grids/responsive/responsive-grid2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 20 | 21 | 22 | 23 | 24 |

7 | 8 | 9 | 10 | 13 | 16 | 17 |

11 | Grid Two 12 |

14 | Grid Two 15 |

18 | 19 |

25 | -------------------------------------------------------------------------------- /snippets/sublime/fgrid2.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | 12 | 15 | 16 |

10 | $1 11 |

13 | $2 14 |

17 | 18 | 19 | 20 | 21 | ]]> 22 | fgrid2 23 | 24 | -------------------------------------------------------------------------------- /grids/fluid/fluid-grid3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 20 | 21 |

4 | 5 | 6 | 7 | 10 | 13 | 16 | 17 |

8 | Grid 3 9 |

11 | Grid 3 12 |

14 | Grid 3 15 |

18 | 19 |

-------------------------------------------------------------------------------- /boilerplate.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 13 | 14 | 15 | 16 | 17 | 18 | 22 | 23 |

19 | 20 | 21 |

24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /snippets/sublime/hgrid1.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 10 | 11 | 12 | 17 | 18 |

13 | 14 | $1 15 | 16 |

19 | 24 | 25 | 26 | ]]> 27 | hgrid1 28 | 29 | -------------------------------------------------------------------------------- /snippets/sublime/rgrid2.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | 18 | 19 |

13 | $1 14 |

16 | $2 17 |

20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | ]]> 28 | rgrid2 29 | 30 | -------------------------------------------------------------------------------- /snippets/sublime/fgrid3.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | 12 | 15 | 18 | 19 |

10 | $1 11 |

13 | $2 14 |

16 | $3 17 |

20 | 21 | 22 | 23 | 24 | ]]> 25 | fgrid3 26 | 27 | 28 | -------------------------------------------------------------------------------- /grids/fluid/fluid-grid4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 23 | 24 |

4 | 5 | 6 | 7 | 10 | 13 | 16 | 19 | 20 |

8 | Grid 4 9 |

11 | Grid 4 12 |

14 | Grid 4 15 |

17 | Grid 4 18 |

21 | 22 |

-------------------------------------------------------------------------------- /grids/responsive/responsive-grid3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 23 | 24 | 25 | 26 | 27 |

7 | 8 | 9 | 10 | 13 | 16 | 19 | 20 |

11 | Grid Three 12 |

14 | Grid Three 15 |

17 | Grid Three 18 |

21 | 22 |

28 | -------------------------------------------------------------------------------- /snippets/sublime/boilerplate.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | $1 11 | 12 | 14 | 15 | 16 | 17 | 18 | 19 | 24 | 25 |

20 | 21 | $2 22 | 23 |

26 | 27 | 28 | 29 | ]]> 30 | boilerplate 31 | 32 | -------------------------------------------------------------------------------- /snippets/sublime/rgrid3.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | 18 | 21 | 22 |

13 | $1 14 |

16 | $2 17 |

19 | $3 20 |

23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | ]]> 31 | rgrid3 32 | 33 | -------------------------------------------------------------------------------- /grids/responsive/responsive-grid4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 26 | 27 | 28 | 29 | 30 |

7 | 8 | 9 | 10 | 13 | 16 | 19 | 22 | 23 |

11 | Grid Four 12 |

14 | Grid Four 15 |

17 | Grid Four 18 |

20 | Grid Four 21 |

24 | 25 |

31 | -------------------------------------------------------------------------------- /snippets/sublime/fgrid4.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | 12 | 15 | 18 | 21 | 22 |

10 | $1 11 |

13 | $2 14 |

16 | $3 17 |

19 | $4 20 |

23 | 24 | 25 | 26 | 27 | ]]> 28 | fgrid4 29 | 30 | -------------------------------------------------------------------------------- /grids/fluid/fluid-grid5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 26 | 27 |

4 | 5 | 6 | 7 | 10 | 13 | 16 | 19 | 22 | 23 |

8 | Grid 5 9 |

11 | Grid 5 12 |

14 | Grid 5 15 |

17 | Grid 5 18 |

20 | Grid 5 21 |

24 | 25 |

-------------------------------------------------------------------------------- /components/heros/image-hero-with-mobile-block.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 14 | 15 |

4 | 5 | 6 | 7 | 10 | 11 |

8 |

9 |

12 | 13 |

16 | 17 | 18 | 27 | -------------------------------------------------------------------------------- /snippets/sublime/rgrid4.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | 18 | 21 | 24 | 25 |

13 | $1 14 |

16 | $2 17 |

19 | $3 20 |

22 | $4 23 |

26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | ]]> 34 | rgrid4 35 | 36 | -------------------------------------------------------------------------------- /grids/responsive/responsive-grid5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 29 | 30 | 31 | 32 | 33 |

7 | 8 | 9 | 10 | 13 | 16 | 19 | 22 | 25 | 26 |

11 | Grid Five 12 |

14 | Grid Five 15 |

17 | Grid Five 18 |

20 | Grid Five 21 |

23 | Grid Five 24 |

27 | 28 |

34 | -------------------------------------------------------------------------------- /snippets/sublime/fgrid5.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | 12 | 15 | 18 | 21 | 24 | 25 |

10 | $1 11 |

13 | $2 14 |

16 | $3 17 |

19 | $4 20 |

22 | $5 23 |

26 | 27 | 28 | 29 | 30 | ]]> 31 | fgrid5 32 | 33 | -------------------------------------------------------------------------------- /snippets/sublime/rgrid5.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | 18 | 21 | 24 | 27 | 28 |

13 | $1 14 |

16 | $2 17 |

19 | $3 20 |

22 | $4 23 |

25 | $5 26 |

29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | ]]> 37 | rgrid5 38 | 39 | -------------------------------------------------------------------------------- /mail.css: -------------------------------------------------------------------------------- 1 | /* CLIENT-SPECIFIC STYLES */ 2 | body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } 3 | table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; } 4 | img { -ms-interpolation-mode: bicubic; } 5 | 6 | /* RESET STYLES */ 7 | img { border: 0; outline: none; text-decoration: none; } 8 | table { border-collapse: collapse !important; } 9 | body { margin: 0 !important; padding: 0 !important; width: 100% !important; } 10 | 11 | /* iOS BLUE LINKS */ 12 | a[x-apple-data-detectors] { 13 | color: inherit !important; 14 | text-decoration: none !important; 15 | font-size: inherit !important; 16 | font-family: inherit !important; 17 | font-weight: inherit !important; 18 | line-height: inherit !important; 19 | } 20 | 21 | /* ANDROID CENTER FIX */ 22 | div[style*="margin: 16px 0;"] { margin: 0 !important; } 23 | 24 | /* MEDIA QUERIES */ 25 | @media all and (max-width:639px){ 26 | .wrapper{ width:320px!important; padding: 0 !important; } 27 | .container{ width:300px!important; padding: 0 !important; } 28 | .mobile{ width:300px!important; display:block!important; padding: 0 !important; } 29 | .img{ width:100% !important; height:auto !important; } 30 | *[class="mobileOff"] { width: 0px !important; display: none !important; } 31 | *[class*="mobileOn"] { display: block !important; max-height:none !important; } 32 | } 33 | -------------------------------------------------------------------------------- /snippets/sublime/css.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 36 | css 37 | 38 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Email Framework 2 | 3 | The HTML Email Framework developed to help you build responsive HTML email templates. 4 | 5 | ### Getting Started 6 | 7 | * [Documentation](http://emailframe.work "Title") 8 | * [Download](https://github.com/g13nn/Email-Framework/archive/master.zip "Title") 9 | 10 | ### Support 11 | 12 | Need some help, or have a question. Get in touch: 13 | 14 | * 15 | * [Submit an Issue](https://github.com/g13nn/Email-Framework/issues/new "Title") 16 | 17 | ### License 18 | 19 | ``` 20 | Copyright (C) 2017 Glenn Smith 21 | 22 | Permission is hereby granted, free of charge, to any person obtaining a 23 | copy of this software and associated documentation files (the 24 | "Software"), to deal in the Software without restriction, including 25 | without limitation the rights to use, copy, modify, merge, publish, 26 | distribute, sublicense, and/or sell copies of the Software, and to 27 | permit persons to whom the Software is furnished to do so, subject to 28 | the following conditions: 29 | 30 | The above copyright notice and this permission notice shall be included 31 | in all copies or substantial portions of the Software. 32 | 33 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS 34 | OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 35 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 36 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 37 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 38 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 39 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 40 | ``` 41 | -------------------------------------------------------------------------------- /grids/hybrid/hybrid-grid2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | 10 | 11 | 49 | 50 |

12 | 17 |

18 | 19 | 20 | 25 | 26 |

21 | 22 | Grid Two 23 | 24 |

27 |

28 | 32 |

33 | 34 | 35 | 40 | 41 |

36 | 37 | Grid Two 38 | 39 |

42 |

43 | 48 |

51 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /snippets/sublime/hgrid2.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 11 | 12 | 13 | 51 | 52 |

14 | 19 |

20 | 21 | 22 | 27 | 28 |

23 | 24 | $1 25 | 26 |

29 |

30 | 34 |

35 | 36 | 37 | 42 | 43 |

38 | 39 | $2 40 | 41 |

44 |

45 | 50 |

53 | 58 | 59 | 60 | 61 | ]]> 62 | hgrid2 63 | 64 | -------------------------------------------------------------------------------- /components/heros/background-image-text-overlay.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 58 | 59 |

4 | 14 | 15 | 16 | 17 | 20 | 21 | 22 | 23 | 24 | 25 | 28 | 29 | 30 | 31 | 32 | 33 | 44 | 45 |

18 | Testing Modules for the email framework 19 |

26 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta purus porttitor enim scelerisque, vel malesuada lorem mattis. Curabitur ac orci libero. 27 |

34 | 35 | 36 | 37 | 40 | 41 |

38 | Button 39 |

42 | 43 |

46 | 47 | 56 | 57 |

60 | -------------------------------------------------------------------------------- /grids/hybrid/hybrid-grid3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 9 | 10 | 63 | 64 |

11 | 16 |

17 | 18 | 19 | 24 | 25 |

20 | 21 | Grid Three 22 | 23 |

26 |

27 | 31 |

32 | 33 | 34 | 39 | 40 |

35 | 36 | Grid Three 37 | 38 |

41 |

42 | 46 |

47 | 48 | 49 | 54 | 55 |

50 | 51 | Grid Three 52 | 53 |

56 |

57 | 62 |

65 | 70 | 71 | -------------------------------------------------------------------------------- /snippets/sublime/hgrid3.sublime-snippet: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 10 | 11 | 12 | 65 | 66 |

13 | 18 |

19 | 20 | 21 | 26 | 27 |

22 | 23 | $1 24 | 25 |

28 |

29 | 33 |

34 | 35 | 36 | 41 | 42 |

37 | 38 | $2 39 | 40 |

43 |

44 | 48 |

49 | 50 | 51 | 56 | 57 |

52 | 53 | $3 54 | 55 |

58 |

59 | 64 |

67 | 72 | 73 | 74 | ]]> 75 | hgrid3 76 | 77 | -------------------------------------------------------------------------------- /grids/hybrid/hybrid-grid-master.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hybrid Grid Master 6 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 42 | 43 | 44 | 45 | 101 | 102 | 103 | 104 | 173 | 174 | 175 |

22 | 27 | 28 | 29 | 34 | 35 |

30 | 31 | Grid One 32 | 33 |

36 | 41 |

46 | 47 | 52 | 53 | 54 | 92 | 93 |

55 | 60 |

61 | 62 | 63 | 68 | 69 |

64 | 65 | Grid Two 66 | 67 |

70 |

71 | 75 |

76 | 77 | 78 | 83 | 84 |

79 | 80 | Grid Two 81 | 82 |

85 |

86 | 91 |

94 | 99 | 100 |

105 | 110 | 111 | 112 | 165 | 166 |

113 | 118 |

119 | 120 | 121 | 126 | 127 |

122 | 123 | Grid Three 124 | 125 |

128 |

129 | 133 |

134 | 135 | 136 | 141 | 142 |

137 | 138 | Grid Three 139 | 140 |

143 |

144 | 148 |

149 | 150 | 151 | 156 | 157 |

152 | 153 | Grid Three 154 | 155 |

158 |

159 | 164 |

167 | 172 |

176 | 177 | 178 | -------------------------------------------------------------------------------- /grids/fluid/fluid-grid-master.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Fluid Grid Master 9 | 10 | 39 | 40 | 41 | 42 | 43 |

44 | 49 | 50 | 51 | 52 | 63 | 64 |

53 | 54 | 55 | 56 | 59 | 60 |

57 | Grid 1 58 |

61 | 62 |

65 | 66 | 67 | 68 | 82 | 83 |

69 | 70 | 71 | 72 | 75 | 78 | 79 |

73 | Grid 2 74 |

76 | Grid 2 77 |

80 | 81 |

84 | 85 | 86 | 87 | 104 | 105 |

88 | 89 | 90 | 91 | 94 | 97 | 100 | 101 |

92 | Grid 3 93 |

95 | Grid 3 96 |

98 | Grid 3 99 |

102 | 103 |

106 | 107 | 108 | 109 | 129 | 130 |

110 | 111 | 112 | 113 | 116 | 119 | 122 | 125 | 126 |

114 | Grid 4 115 |

117 | Grid 4 118 |

120 | Grid 4 121 |

123 | Grid 4 124 |

127 | 128 |

131 | 132 | 133 | 134 | 157 | 158 |

135 | 136 | 137 | 138 | 141 | 144 | 147 | 150 | 153 | 154 |

139 | Grid 5 140 |

142 | Grid 5 143 |

145 | Grid 5 146 |

148 | Grid 5 149 |

151 | Grid 5 152 |

155 | 156 |

159 | 160 | 165 |

166 | 167 | 168 | 169 | -------------------------------------------------------------------------------- /grids/responsive/responsive-grid-master.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Grids Master Template 9 | 10 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 200 | 201 |

58 | 59 | 60 | 61 | 62 | 63 | 64 | 75 | 76 | 77 | 78 | 79 |

65 | 66 | 67 | 68 | 71 | 72 |

69 | Grid One 70 |

73 | 74 |

80 | 81 | 82 | 83 | 84 | 85 | 86 | 100 | 101 | 102 | 103 | 104 |

87 | 88 | 89 | 90 | 93 | 96 | 97 |

91 | Grid Two 92 |

94 | Grid Two 95 |

98 | 99 |

105 | 106 | 107 | 108 | 109 | 110 | 111 | 128 | 129 | 130 | 131 | 132 |

112 | 113 | 114 | 115 | 118 | 121 | 124 | 125 |

116 | Grid Three 117 |

119 | Grid Three 120 |

122 | Grid Three 123 |

126 | 127 |

133 | 134 | 135 | 136 | 137 | 138 | 139 | 159 | 160 | 161 | 162 | 163 |

140 | 141 | 142 | 143 | 146 | 149 | 152 | 155 | 156 |

144 | Grid Four 145 |

147 | Grid Four 148 |

150 | Grid Four 151 |

153 | Grid Four 154 |

157 | 158 |

164 | 165 | 166 | 167 | 168 | 169 | 170 | 193 | 194 | 195 | 196 | 197 |

171 | 172 | 173 | 174 | 177 | 180 | 183 | 186 | 189 | 190 |

175 | Grid Five 176 |

178 | Grid Five 179 |

181 | Grid Five 182 |

184 | Grid Five 185 |

187 | Grid Five 188 |

191 | 192 |

198 | 199 |

202 | 203 | 204 | 205 | -------------------------------------------------------------------------------- /snippets/atom/snippets.cson: -------------------------------------------------------------------------------- 1 | # Snippets for Email-Framwork 2 | 3 | '.text.html': 4 | 'Boiler Plate for Mails': 5 | 'prefix': 'mail-boilerplate' 6 | 'body': ''' 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 18 | 19 | 20 | 21 | 22 | 23 | 28 | 29 |

24 | 25 | $1 26 | 27 |

30 | 31 | 32 | 33 | ''' 34 | 35 | 'Mail Content': 36 | 'prefix': 'mail-content' 37 | 'body': ''' 38 | 39 | 40 | 43 | 44 |

41 | $2 42 |

45 | ''' 46 | 47 | 'Mail CSS': 48 | 'prefix': 'mail-css' 49 | 'body': ''' 50 | /* CLIENT-SPECIFIC STYLES */ 51 | body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } 52 | table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; } 53 | img { -ms-interpolation-mode: bicubic; } 54 | /* RESET STYLES */ 55 | img { border: 0; outline: none; text-decoration: none; } 56 | table { border-collapse: collapse !important; } 57 | body { margin: 0 !important; padding: 0 !important; width: 100% !important; } 58 | /* iOS BLUE LINKS */ 59 | a[x-apple-data-detectors] { 60 | color: inherit !important; 61 | text-decoration: none !important; 62 | font-size: inherit !important; 63 | font-family: inherit !important; 64 | font-weight: inherit !important; 65 | line-height: inherit !important; 66 | } 67 | /* ANDROID CENTER FIX */ 68 | div[style*="margin: 16px 0;"] { margin: 0 !important; } 69 | /* MEDIA QUERIES */ 70 | @media all and (max-width:639px){ 71 | .wrapper{ width:320px!important; padding: 0 !important; } 72 | .container{ width:300px!important; padding: 0 !important; } 73 | .mobile{ width:300px!important; display:block!important; padding: 0 !important; } 74 | .img{ width:100% !important; height:auto !important; } 75 | *[class="mobileOff"] { width: 0px !important; display: none !important; } 76 | *[class*="mobileOn"] { display: block !important; max-height:none !important; } 77 | } 78 | ''' 79 | 80 | 'Mail r Grid 1': 81 | 'prefix': 'mail-rgrid1' 82 | 'body': ''' 83 | 84 | 85 | 86 | 87 | 88 | 97 | 98 | 99 | 100 | 101 |

89 | 90 | 91 | 94 | 95 |

92 | $1 93 |

96 |

102 | ''' 103 | 104 | 'Mail r Grid 2': 105 | 'prefix': 'mail-rgrid2' 106 | 'body': ''' 107 | 108 | 109 | 110 | 111 | 112 | 124 | 125 | 126 | 127 | 128 |

113 | 114 | 115 | 118 | 121 | 122 |

116 | $1 117 |

119 | $2 120 |

123 |

129 | ''' 130 | 131 | 'Mail r Grid 3': 132 | 'prefix': 'mail-rgrid3' 133 | 'body': ''' 134 | 135 | 136 | 137 | 138 | 139 | 154 | 155 | 156 | 157 | 158 |

140 | 141 | 142 | 145 | 148 | 151 | 152 |

143 | $1 144 |

146 | $2 147 |

149 | $3 150 |

153 |

159 | ''' 160 | 161 | 'Mail r Grid 4': 162 | 'prefix': 'mail-rgrid4' 163 | 'body': ''' 164 | 165 | 166 | 167 | 168 | 169 | 187 | 188 | 189 | 190 | 191 |

170 | 171 | 172 | 175 | 178 | 181 | 184 | 185 |

173 | $1 174 |

176 | $2 177 |

179 | $3 180 |

182 | $4 183 |

186 |

192 | ''' 193 | 194 | 'Mail r Grid 5': 195 | 'prefix': 'mail-rgrid5' 196 | 'body': ''' 197 | 198 | 199 | 200 | 201 | 202 | 223 | 224 | 225 | 226 | 227 |

203 | 204 | 205 | 208 | 211 | 214 | 217 | 220 | 221 |

206 | $1 207 |

209 | $2 210 |

212 | $3 213 |

215 | $4 216 |

218 | $5 219 |

222 |

228 | ''' 229 | 230 | 'Mail f Grid 1': 231 | 'prefix': 'mail-fgrid1' 232 | 'body': ''' 233 | 234 | 235 | 245 | 246 |

236 | 237 | 238 | 239 | 242 | 243 |

240 | $1 241 |

244 |

247 | ''' 248 | 249 | 'Mail f Grid 2': 250 | 'prefix': 'mail-fgrid2' 251 | 'body': ''' 252 | 253 | 254 | 267 | 268 |

255 | 256 | 257 | 258 | 261 | 264 | 265 |

259 | $1 260 |

262 | $2 263 |

266 |

269 | ''' 270 | 271 | 'Mail f Grid 3': 272 | 'prefix': 'mail-fgrid3' 273 | 'body': ''' 274 | 275 | 276 | 292 | 293 |

277 | 278 | 279 | 280 | 283 | 286 | 289 | 290 |

281 | $1 282 |

284 | $2 285 |

287 | $3 288 |

291 |

294 | ''' 295 | 296 | 'Mail f Grid 4': 297 | 'prefix': 'mail-fgrid4' 298 | 'body': ''' 299 | 300 | 301 | 320 | 321 |

302 | 303 | 304 | 305 | 308 | 311 | 314 | 317 | 318 |

306 | $1 307 |

309 | $2 310 |

312 | $3 313 |

315 | $4 316 |

319 |

322 | ''' 323 | 324 | 'Mail f Grid 5': 325 | 'prefix': 'mail-fgrid5' 326 | 'body': ''' 327 | 328 | 329 | 351 | 352 |

330 | 331 | 332 | 333 | 336 | 339 | 342 | 345 | 348 | 349 |

334 | $1 335 |

337 | $2 338 |

340 | $3 341 |

343 | $4 344 |

346 | $5 347 |

350 |

353 | ''' 354 | 355 | 'Mail img': 356 | 'prefix': 'mail-img' 357 | 'body': ''' 358 |

359 | ''' 360 | 361 | 'Mail Block Mobile': 362 | 'prefix': 'mail-mobileblock' 363 | 'body': ''' 364 | 365 | 374 | 375 | ''' 376 | 377 | 'Mail mspace': 378 | 'prefix': 'mail-mspace' 379 | 'body': ''' 380 | 381 | ''' 382 | 383 | 'Mail Row': 384 | 'prefix': 'mail-row' 385 | 'body': ''' 386 | 387 | 388 | $1 389 | 390 | 391 | ''' 392 | 393 | 'Mail Space': 394 | 'prefix': 'mail-space' 395 | 'body': ''' 396 | 397 | 398 | 399 | ''' 400 | 401 | 'Mail Button': 402 | 'prefix': 'mail-button' 403 | 'body': ''' 404 | 405 | 406 | 409 | 410 |

407 | $2 408 |

411 | ''' 412 | --------------------------------------------------------------------------------