├── .editorconfig ├── .ftppass-temp.json ├── .gitignore ├── LICENSE ├── README.md ├── gulpfile.js ├── package-lock.json ├── package.json ├── screens ├── Browserstack-logo.svg ├── Browserstack-logo@2x.png ├── android6.png ├── android7.png ├── android8.png ├── aol_chr26_win.png ├── aol_ff21_mac.png ├── aol_ff21_win.png ├── aol_si8_mac.png ├── applemail10.jpg ├── applemail11.jpg ├── bol_chr26_win.png ├── bol_ff21_win.png ├── bol_ie11_win.png ├── cc_chr26_win.png ├── cc_ff21_win.png ├── cc_ie11_win.png ├── email-template-preview.png ├── ffr_chr26_win.png ├── ffr_ff21_win.png ├── frt_chr26_win.png ├── frt_ff21_win.png ├── frt_ie11_win.png ├── gapps_chr26_win.png ├── gapps_ff21_win.png ├── gapps_ie11_win.png ├── gmail_chr26_mac.png ├── gmail_chr26_win.png ├── gmail_ff21_mac.png ├── gmail_ff21_win.png ├── gmail_ie11_win.png ├── gmail_si8_mac.png ├── gmx_chr26_win.png ├── ipadair_10.png ├── ipadair_11.png ├── ipadmini_10.png ├── ipadmini_11.png ├── ipadpro_10.png ├── ipadpro_10_11.png ├── ipadpro_11.png ├── ipadretina_10.png ├── ipadretina_11.png ├── iphone5s_11.png ├── iphone6_gmail.png ├── iphone6p_gmail.png ├── iphone7_11.png ├── iphone7_12.png ├── iphone7p_11.png ├── iphone7p_12.png ├── iphone8_11.png ├── iphone8_12.png ├── iphone8_outlook.png ├── iphone8p_11.png ├── iphone8p_12.png ├── iphonese_11.png ├── iphonese_12.png ├── iphonex_11.png ├── iphonex_12.png ├── macoutlook11.jpg ├── macoutlook16.jpg ├── mru_chr26_win.png ├── mru_ff21_win.png ├── mru_ie11_win.png ├── notes8.jpg ├── notes85.jpg ├── o365_chr26_win.png ├── o365_ff21_win.png ├── o365_ie11_win.png ├── ol_chr26_mac.png ├── ol_chr26_win.png ├── ol_ff21_mac.png ├── ol_ff21_win.png ├── ol_ie11_win.png ├── ol_si8_mac.png ├── outlook03.jpg ├── outlook07.jpg ├── outlook10.jpg ├── outlook10_d125.jpg ├── outlook13.jpg ├── outlook13_d125.jpg ├── outlook16.jpg ├── outlook16_win10.jpg ├── outlook16_win10_125.jpg ├── outlook19.jpg ├── outlook19_125.jpg ├── samsung_mail.png ├── thunderbird13.png ├── toe_chr26_win.png ├── wde_chr26_win.png ├── yb_chr26_win.png ├── yb_ff21_mac.png ├── yb_ff21_win.png └── yb_si8_mac.png └── src ├── config.js ├── scss ├── _helpers.scss ├── _layout.scss ├── _main.scss ├── _mixins.scss ├── _typograph.scss ├── _variables.scss ├── _visibility.scss └── styles.scss ├── static └── img │ ├── facebook.png │ ├── github.png │ ├── linkedin.png │ └── twitter.png └── template ├── index.pug ├── layout └── _layout.pug ├── mixins ├── _columns.pug ├── _elements.pug ├── _layout.pug └── _pug-mixin.pug └── outlook-fix └── outlook-fix.html /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | insert_final_newline = true 5 | charset = utf-8 6 | 7 | # Tab indentation (no size specified) 8 | [*.md] 9 | indent_style = tab 10 | 11 | # 2 space indentation 12 | [*.{css,json,js,scss,html,yml,pug}] 13 | indent_style = space 14 | indent_size = 2 15 | -------------------------------------------------------------------------------- /.ftppass-temp.json: -------------------------------------------------------------------------------- 1 | { 2 | "auth": { 3 | "user": "your_user", 4 | "pass": "your_pass" 5 | }, 6 | "host": "host", 7 | "port": 21, 8 | "remotePath": "/remote-pass/" 9 | } 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .ftppass.json 2 | build/ 3 | .idea/ 4 | 5 | # Created by https://www.gitignore.io/api/node,linux,macos,windows 6 | # Edit at https://www.gitignore.io/?templates=node,linux,macos,windows 7 | 8 | ### Linux ### 9 | *~ 10 | 11 | # temporary files which can be created if a process still has a handle open of a deleted file 12 | .fuse_hidden* 13 | 14 | # KDE directory preferences 15 | .directory 16 | 17 | # Linux trash folder which might appear on any partition or disk 18 | .Trash-* 19 | 20 | # .nfs files are created when an open file is removed but is still being accessed 21 | .nfs* 22 | 23 | ### macOS ### 24 | # General 25 | .DS_Store 26 | .AppleDouble 27 | .LSOverride 28 | 29 | # Icon must end with two \r 30 | Icon 31 | 32 | # Thumbnails 33 | ._* 34 | 35 | # Files that might appear in the root of a volume 36 | .DocumentRevisions-V100 37 | .fseventsd 38 | .Spotlight-V100 39 | .TemporaryItems 40 | .Trashes 41 | .VolumeIcon.icns 42 | .com.apple.timemachine.donotpresent 43 | 44 | # Directories potentially created on remote AFP share 45 | .AppleDB 46 | .AppleDesktop 47 | Network Trash Folder 48 | Temporary Items 49 | .apdisk 50 | 51 | ### Node ### 52 | # Logs 53 | logs 54 | *.log 55 | npm-debug.log* 56 | yarn-debug.log* 57 | yarn-error.log* 58 | lerna-debug.log* 59 | 60 | # Diagnostic reports (https://nodejs.org/api/report.html) 61 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 62 | 63 | # Runtime data 64 | pids 65 | *.pid 66 | *.seed 67 | *.pid.lock 68 | 69 | # Directory for instrumented libs generated by jscoverage/JSCover 70 | lib-cov 71 | 72 | # Coverage directory used by tools like istanbul 73 | coverage 74 | *.lcov 75 | 76 | # nyc test coverage 77 | .nyc_output 78 | 79 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 80 | .grunt 81 | 82 | # Bower dependency directory (https://bower.io/) 83 | bower_components 84 | 85 | # node-waf configuration 86 | .lock-wscript 87 | 88 | # Compiled binary addons (https://nodejs.org/api/addons.html) 89 | build/Release 90 | 91 | # Dependency directories 92 | node_modules/ 93 | jspm_packages/ 94 | 95 | # TypeScript v1 declaration files 96 | typings/ 97 | 98 | # TypeScript cache 99 | *.tsbuildinfo 100 | 101 | # Optional npm cache directory 102 | .npm 103 | 104 | # Optional eslint cache 105 | .eslintcache 106 | 107 | # Optional REPL history 108 | .node_repl_history 109 | 110 | # Output of 'npm pack' 111 | *.tgz 112 | 113 | # Yarn Integrity file 114 | .yarn-integrity 115 | 116 | # dotenv environment variables file 117 | .env 118 | .env.test 119 | 120 | # parcel-bundler cache (https://parceljs.org/) 121 | .cache 122 | 123 | # next.js build output 124 | .next 125 | 126 | # nuxt.js build output 127 | .nuxt 128 | 129 | # vuepress build output 130 | .vuepress/dist 131 | 132 | # Serverless directories 133 | .serverless/ 134 | 135 | # FuseBox cache 136 | .fusebox/ 137 | 138 | # DynamoDB Local files 139 | .dynamodb/ 140 | 141 | ### Windows ### 142 | # Windows thumbnail cache files 143 | Thumbs.db 144 | Thumbs.db:encryptable 145 | ehthumbs.db 146 | ehthumbs_vista.db 147 | 148 | # Dump file 149 | *.stackdump 150 | 151 | # Folder config file 152 | [Dd]esktop.ini 153 | 154 | # Recycle Bin used on file shares 155 | $RECYCLE.BIN/ 156 | 157 | # Windows Installer files 158 | *.cab 159 | *.msi 160 | *.msix 161 | *.msm 162 | *.msp 163 | 164 | # Windows shortcuts 165 | *.lnk 166 | 167 | # End of https://www.gitignore.io/api/node,linux,macos,windows 168 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Alexander Zidyganov 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 all 13 | 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 THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Responsive Email template
(extendable, framework) 4 | 5 | Browserstack.com 6 |
7 | 8 | Some times we need some simple email templates, for example I use it on a good service [Mailgun](https://mailgun.com) for testing contact form, subscribe or other needed features. 9 | 10 | Here you can take HTML files with inlined CSS in folder ```/build```. 11 | 12 | You can build something else yourself - it's easy. Build system works by SCSS, PUG preprocessors. Base on Gulp.js 13 | 14 | Steps use system 15 | 16 | Build system use SASS, JADE preprocessors. Base on Gulp.js 17 | 18 | [![CSSCODER email template](https://raw.githubusercontent.com/csscoderRU/Responsive-Email-Template-Builder/master/screens/email-template-preview.png)](http://222828.selcdn.com/temp-mail-images/simple-email-template/index-inline.html) 19 | 20 | ### Example [link](http://222828.selcdn.com/temp-mail-images/simple-email-template/index-inline.html) 21 | 22 | 23 | Steps use template builder 24 | 25 | // 1 check node version - it's work for "node": ">=10.0.0 =<10.16.0", and install dependencies 26 | 27 | npm install 28 | 29 | // 2 run dev mode (after that will be run local server http://localhost:7777) 30 | 31 | npm run dev 32 | 33 | // Build your email templates (with inlined css) you will find it in "./build" folder 34 | // before this task you must setup remote url for your images look at this file "./src/config.js" section "urlImageHost" 35 | 36 | npm run build 37 | 38 | 39 | Template tested by [emailonacid.com](https://emailonacid.com) 40 | * Outloolk 2000-2016 41 | * Lotus Notes 8 - 9 42 | * Thunderbird 43 | * Apple mail 44 | * Android, gmail.app 45 | * iOS 46 | * popular web clients 47 | 48 | Screens folder [link](https://github.com/csscoderRU/Responsive-Email-Template-Builder/tree/master/screens/) 49 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const { src, dest, parallel, watch, series } = require('gulp'); 2 | const gulpif = require('gulp-if'); 3 | const fileinclude = require('gulp-file-include'); 4 | const rename = require('gulp-rename'); 5 | const htmlmin = require('gulp-htmlmin'); 6 | const inliner = require('gulp-inline-css'); 7 | const replace = require('gulp-replace'); 8 | const mqpacker = require('css-mqpacker'); 9 | const gulpSCSS = require('gulp-sass'); 10 | const postcssGulp = require('gulp-postcss'); 11 | const autoprefixer = require('autoprefixer'); 12 | const beautify = require('gulp-jsbeautifier'); 13 | const del = require('del'); 14 | const pug = require('gulp-pug'); 15 | const clearingHTML = require('gulp-email-remove-unused-css'); 16 | const vftp = require('vinyl-ftp'); 17 | const fs = require('fs'); 18 | 19 | const PRODUCTION = process.env.NODE_ENV === 'production'; 20 | const config = require('./src/config'); 21 | const pkg = require('./package.json'); 22 | 23 | const Browser = require('browser-sync'); 24 | const browser = Browser.create(); 25 | 26 | // Start SCSS 27 | // ****************************************** 28 | { 29 | function scss() { 30 | return src(['./src/scss/styles.scss']) 31 | .pipe(gulpSCSS()) 32 | .pipe(postcssGulp([autoprefixer(), mqpacker()])) 33 | .pipe(dest('./build')) 34 | .pipe(gulpif(!PRODUCTION, browser.stream())); 35 | } 36 | 37 | exports.scss = scss; 38 | // END SCSS 39 | // ****************************************** 40 | } 41 | 42 | // Start server 43 | // ****************************************** 44 | { 45 | function server() { 46 | let config = { 47 | server: { 48 | ghostMode: false, 49 | baseDir: './build', 50 | serveStaticOptions: { 51 | extensions: ['html'] 52 | } 53 | }, 54 | injectChanges: true, 55 | serveStatic: ['build'], 56 | port: 7777, 57 | browser: 'google chrome' 58 | }; 59 | browser.init(config); 60 | } 61 | 62 | exports.server = server; 63 | } 64 | // End server 65 | // ****************************************** 66 | 67 | // Copy static 68 | // ****************************************** 69 | { 70 | function copyStatic() { 71 | return src('./src/static/**/*').pipe(dest('./build')); 72 | } 73 | 74 | exports.copyStatic = copyStatic; 75 | } 76 | // End Copy static 77 | // ****************************************** 78 | 79 | // Start HTML 80 | // ****************************************** 81 | { 82 | function html() { 83 | return src('./src/template/*.pug') 84 | .pipe( 85 | gulpif( 86 | !PRODUCTION, 87 | pug(), 88 | pug({ 89 | data: { 90 | final: true 91 | } 92 | }) 93 | ) 94 | ) 95 | .pipe(dest('./build')); 96 | } 97 | 98 | exports.html = html; 99 | } 100 | // End HTML 101 | // ****************************************** 102 | 103 | // Start inline styles 104 | // ****************************************** 105 | { 106 | function inlineStyle() { 107 | return src(['./build/*.html']) 108 | .pipe( 109 | fileinclude({ 110 | prefix: '@@', 111 | basepath: '@file' 112 | }) 113 | ) 114 | .pipe( 115 | inliner({ 116 | preserveMediaQueries: true 117 | }) 118 | ) 119 | .pipe( 120 | clearingHTML({ 121 | whitelist: [ 122 | '.ExternalClass', 123 | '.ReadMsgBody', 124 | '.yshortcuts', 125 | '.Mso*', 126 | '.maxwidth-apple-mail-fix', 127 | '#outlook', 128 | '.module-*' 129 | ] 130 | }) 131 | ) 132 | .pipe( 133 | gulpif( 134 | config.minifyResultHtml, 135 | htmlmin({ collapseWhitespace: true, minifyCSS: true }), 136 | beautify({ 137 | indent_char: '\t', 138 | indent_size: 1, 139 | max_preserve_newlines: 0 140 | }) 141 | ) 142 | ) 143 | .pipe( 144 | gulpif(!!config.urlImageHost, replace(/img\//g, config.urlImageHost)) 145 | ) 146 | .pipe( 147 | fileinclude({ 148 | prefix: '##', 149 | basepath: '@file' 150 | }) 151 | ) 152 | .pipe( 153 | rename({ 154 | suffix: '-inline' 155 | }) 156 | ) 157 | .pipe(dest('./build')); 158 | } 159 | 160 | exports.inlineStyle = inlineStyle; 161 | } 162 | // End inline styles 163 | // ****************************************** 164 | 165 | // Watch 166 | // ****************************************** 167 | { 168 | if (!PRODUCTION) { 169 | watch( 170 | ['./src/scss/**/*.scss'], 171 | { events: ['change', 'add'], delay: 100 }, 172 | scss 173 | ); 174 | 175 | watch(['./src/**/*.pug'], { events: ['change', 'add'], delay: 100 }, html); 176 | 177 | watch(['./build/*.html']).on('change', () => browser.reload()); 178 | } 179 | } 180 | // End Watch 181 | // ****************************************** 182 | 183 | // Start clear directory 184 | // ****************************************** 185 | { 186 | function clearBuildDir() { 187 | return del(['./build/**/*']); 188 | } 189 | 190 | exports.clearBuildDir = clearBuildDir; 191 | 192 | function clearTempFiles() { 193 | const arrayDel = [ 194 | './build/*.html', 195 | '!./build/*-inline.html', 196 | './build/*.css' 197 | ]; 198 | return del(arrayDel); 199 | } 200 | 201 | exports.clearTempFiles = clearTempFiles; 202 | } 203 | // End clear directory 204 | // ****************************************** 205 | 206 | // Upload images to ftp server 207 | // ****************************************** 208 | { 209 | function ftp(cb) { 210 | fs.access('./.ftppass.json', function(error) { 211 | const ftpPass = error 212 | ? require('./.ftppass-temp.json') 213 | : require('./.ftppass.json'); 214 | 215 | const configFTP = { 216 | host: ftpPass.host, 217 | user: ftpPass.auth.user, 218 | pass: ftpPass.auth.pass, 219 | port: ftpPass.port, 220 | parallel: 1, 221 | remotePath: `${ftpPass.remotePath}/${pkg.name}/` 222 | }; 223 | const gulpFTP = vftp.create(configFTP); 224 | src('./build/**', { buffer: false }) 225 | .pipe(gulpFTP.dest(configFTP.remotePath)) 226 | .on('end', function() { 227 | console.log(`Upload done - ${config.urlImageHost}`); 228 | cb(); 229 | }); 230 | }); 231 | } 232 | 233 | exports.ftp = ftp; 234 | } 235 | // End Upload images to ftp server 236 | // ****************************************** 237 | 238 | // Complex tasks 239 | // ****************************************** 240 | exports.default = series(parallel(html, scss, copyStatic), server); 241 | exports.build = series( 242 | clearBuildDir, 243 | parallel(html, scss, copyStatic), 244 | inlineStyle, 245 | clearTempFiles 246 | ); 247 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "simple-email-template", 3 | "version": "2.0.0", 4 | "description": "System build email template, simple email framework, use robust preprocessors.", 5 | "repository": { 6 | "type": "git", 7 | "url": "git+https://github.com/csscoderRU/Responsive-Email-Template-Builder.git" 8 | }, 9 | "keywords": [ 10 | "e-mail", 11 | "email", 12 | "template", 13 | "email-template" 14 | ], 15 | "scripts": { 16 | "dev": "cross-env NODE_ENV=development gulp", 17 | "build": "cross-env NODE_ENV=production gulp build", 18 | "ftp": "cross-env NODE_ENV=production gulp ftp" 19 | }, 20 | "engines": { 21 | "node": ">=10.0.0 =<12.16.2", 22 | "npm": ">=6.4.1" 23 | }, 24 | "author": "Alexander Zidyganov", 25 | "license": "MIT", 26 | "bugs": { 27 | "url": "https://github.com/csscoderRU/Responsive-Email-Template-Builder/issues" 28 | }, 29 | "homepage": "https://github.com/csscoderRU/Responsive-Email-Template-Builder#readme", 30 | "devDependencies": {}, 31 | "dependencies": { 32 | "autoprefixer": "10.0.1", 33 | "browser-sync": "2.26.13", 34 | "cross-env": "7.0.2", 35 | "css-mqpacker": "7.0.0", 36 | "del": "6.0.0", 37 | "gulp": "4.0.2", 38 | "gulp-email-remove-unused-css": "3.6.98", 39 | "gulp-file-include": "2.2.2", 40 | "gulp-htmlmin": "5.0.1", 41 | "gulp-if": "3.0.0", 42 | "gulp-inline-css": "4.0.0", 43 | "gulp-jsbeautifier": "3.0.1", 44 | "gulp-postcss": "9.0.0", 45 | "gulp-pug": "4.0.1", 46 | "gulp-rename": "2.0.0", 47 | "gulp-replace": "1.0.0", 48 | "gulp-sass": "4.1.0", 49 | "postcss": "8.1.4", 50 | "prettier": "2.1.2", 51 | "vinyl-ftp": "0.6.1" 52 | }, 53 | "prettier": { 54 | "singleQuote": true, 55 | "tabWidth": 2, 56 | "overrides": [ 57 | { 58 | "files": [ 59 | "*.scss", 60 | "*.css", 61 | "*.html" 62 | ], 63 | "options": { 64 | "singleQuote": false 65 | } 66 | } 67 | ] 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /screens/Browserstack-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 19 | Browserstack-logo-white 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 40 | 44 | 48 | 52 | 56 | 62 | 66 | 71 | 76 | 81 | 86 | 90 | 91 | -------------------------------------------------------------------------------- /screens/Browserstack-logo@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/Browserstack-logo@2x.png -------------------------------------------------------------------------------- /screens/android6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/android6.png -------------------------------------------------------------------------------- /screens/android7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/android7.png -------------------------------------------------------------------------------- /screens/android8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/android8.png -------------------------------------------------------------------------------- /screens/aol_chr26_win.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/aol_chr26_win.png -------------------------------------------------------------------------------- /screens/aol_ff21_mac.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/aol_ff21_mac.png -------------------------------------------------------------------------------- /screens/aol_ff21_win.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/aol_ff21_win.png -------------------------------------------------------------------------------- /screens/aol_si8_mac.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/aol_si8_mac.png -------------------------------------------------------------------------------- /screens/applemail10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/applemail10.jpg -------------------------------------------------------------------------------- /screens/applemail11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/applemail11.jpg -------------------------------------------------------------------------------- /screens/bol_chr26_win.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/bol_chr26_win.png -------------------------------------------------------------------------------- /screens/bol_ff21_win.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/bol_ff21_win.png -------------------------------------------------------------------------------- /screens/bol_ie11_win.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/bol_ie11_win.png -------------------------------------------------------------------------------- /screens/cc_chr26_win.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/cc_chr26_win.png -------------------------------------------------------------------------------- /screens/cc_ff21_win.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/cc_ff21_win.png -------------------------------------------------------------------------------- /screens/cc_ie11_win.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/cc_ie11_win.png -------------------------------------------------------------------------------- /screens/email-template-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/email-template-preview.png -------------------------------------------------------------------------------- /screens/ffr_chr26_win.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/ffr_chr26_win.png -------------------------------------------------------------------------------- /screens/ffr_ff21_win.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/ffr_ff21_win.png -------------------------------------------------------------------------------- /screens/frt_chr26_win.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/frt_chr26_win.png -------------------------------------------------------------------------------- /screens/frt_ff21_win.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/frt_ff21_win.png -------------------------------------------------------------------------------- /screens/frt_ie11_win.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/frt_ie11_win.png -------------------------------------------------------------------------------- /screens/gapps_chr26_win.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/gapps_chr26_win.png -------------------------------------------------------------------------------- /screens/gapps_ff21_win.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/gapps_ff21_win.png -------------------------------------------------------------------------------- /screens/gapps_ie11_win.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/gapps_ie11_win.png -------------------------------------------------------------------------------- /screens/gmail_chr26_mac.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/gmail_chr26_mac.png -------------------------------------------------------------------------------- /screens/gmail_chr26_win.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/gmail_chr26_win.png -------------------------------------------------------------------------------- /screens/gmail_ff21_mac.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/gmail_ff21_mac.png -------------------------------------------------------------------------------- /screens/gmail_ff21_win.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/gmail_ff21_win.png -------------------------------------------------------------------------------- /screens/gmail_ie11_win.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/gmail_ie11_win.png -------------------------------------------------------------------------------- /screens/gmail_si8_mac.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/gmail_si8_mac.png -------------------------------------------------------------------------------- /screens/gmx_chr26_win.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/gmx_chr26_win.png -------------------------------------------------------------------------------- /screens/ipadair_10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/ipadair_10.png -------------------------------------------------------------------------------- /screens/ipadair_11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/ipadair_11.png -------------------------------------------------------------------------------- /screens/ipadmini_10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/ipadmini_10.png -------------------------------------------------------------------------------- /screens/ipadmini_11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/ipadmini_11.png -------------------------------------------------------------------------------- /screens/ipadpro_10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/ipadpro_10.png -------------------------------------------------------------------------------- /screens/ipadpro_10_11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/ipadpro_10_11.png -------------------------------------------------------------------------------- /screens/ipadpro_11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/ipadpro_11.png -------------------------------------------------------------------------------- /screens/ipadretina_10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/ipadretina_10.png -------------------------------------------------------------------------------- /screens/ipadretina_11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/ipadretina_11.png -------------------------------------------------------------------------------- /screens/iphone5s_11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/iphone5s_11.png -------------------------------------------------------------------------------- /screens/iphone6_gmail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/iphone6_gmail.png -------------------------------------------------------------------------------- /screens/iphone6p_gmail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/iphone6p_gmail.png -------------------------------------------------------------------------------- /screens/iphone7_11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/iphone7_11.png -------------------------------------------------------------------------------- /screens/iphone7_12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/iphone7_12.png -------------------------------------------------------------------------------- /screens/iphone7p_11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/iphone7p_11.png -------------------------------------------------------------------------------- /screens/iphone7p_12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/iphone7p_12.png -------------------------------------------------------------------------------- /screens/iphone8_11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/iphone8_11.png -------------------------------------------------------------------------------- /screens/iphone8_12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/iphone8_12.png -------------------------------------------------------------------------------- /screens/iphone8_outlook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/iphone8_outlook.png -------------------------------------------------------------------------------- /screens/iphone8p_11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/iphone8p_11.png -------------------------------------------------------------------------------- /screens/iphone8p_12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/iphone8p_12.png -------------------------------------------------------------------------------- /screens/iphonese_11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/iphonese_11.png -------------------------------------------------------------------------------- /screens/iphonese_12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/iphonese_12.png -------------------------------------------------------------------------------- /screens/iphonex_11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/iphonex_11.png -------------------------------------------------------------------------------- /screens/iphonex_12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/iphonex_12.png -------------------------------------------------------------------------------- /screens/macoutlook11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/macoutlook11.jpg -------------------------------------------------------------------------------- /screens/macoutlook16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/macoutlook16.jpg -------------------------------------------------------------------------------- /screens/mru_chr26_win.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/mru_chr26_win.png -------------------------------------------------------------------------------- /screens/mru_ff21_win.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/mru_ff21_win.png -------------------------------------------------------------------------------- /screens/mru_ie11_win.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/mru_ie11_win.png -------------------------------------------------------------------------------- /screens/notes8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/notes8.jpg -------------------------------------------------------------------------------- /screens/notes85.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/notes85.jpg -------------------------------------------------------------------------------- /screens/o365_chr26_win.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/o365_chr26_win.png -------------------------------------------------------------------------------- /screens/o365_ff21_win.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/o365_ff21_win.png -------------------------------------------------------------------------------- /screens/o365_ie11_win.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/o365_ie11_win.png -------------------------------------------------------------------------------- /screens/ol_chr26_mac.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/ol_chr26_mac.png -------------------------------------------------------------------------------- /screens/ol_chr26_win.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/ol_chr26_win.png -------------------------------------------------------------------------------- /screens/ol_ff21_mac.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/ol_ff21_mac.png -------------------------------------------------------------------------------- /screens/ol_ff21_win.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/ol_ff21_win.png -------------------------------------------------------------------------------- /screens/ol_ie11_win.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/ol_ie11_win.png -------------------------------------------------------------------------------- /screens/ol_si8_mac.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/ol_si8_mac.png -------------------------------------------------------------------------------- /screens/outlook03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/outlook03.jpg -------------------------------------------------------------------------------- /screens/outlook07.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/outlook07.jpg -------------------------------------------------------------------------------- /screens/outlook10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/outlook10.jpg -------------------------------------------------------------------------------- /screens/outlook10_d125.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/outlook10_d125.jpg -------------------------------------------------------------------------------- /screens/outlook13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/outlook13.jpg -------------------------------------------------------------------------------- /screens/outlook13_d125.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/outlook13_d125.jpg -------------------------------------------------------------------------------- /screens/outlook16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/outlook16.jpg -------------------------------------------------------------------------------- /screens/outlook16_win10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/outlook16_win10.jpg -------------------------------------------------------------------------------- /screens/outlook16_win10_125.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/outlook16_win10_125.jpg -------------------------------------------------------------------------------- /screens/outlook19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/outlook19.jpg -------------------------------------------------------------------------------- /screens/outlook19_125.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/outlook19_125.jpg -------------------------------------------------------------------------------- /screens/samsung_mail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/samsung_mail.png -------------------------------------------------------------------------------- /screens/thunderbird13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/thunderbird13.png -------------------------------------------------------------------------------- /screens/toe_chr26_win.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/toe_chr26_win.png -------------------------------------------------------------------------------- /screens/wde_chr26_win.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/wde_chr26_win.png -------------------------------------------------------------------------------- /screens/yb_chr26_win.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/yb_chr26_win.png -------------------------------------------------------------------------------- /screens/yb_ff21_mac.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/yb_ff21_mac.png -------------------------------------------------------------------------------- /screens/yb_ff21_win.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/yb_ff21_win.png -------------------------------------------------------------------------------- /screens/yb_si8_mac.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/screens/yb_si8_mac.png -------------------------------------------------------------------------------- /src/config.js: -------------------------------------------------------------------------------- 1 | // 'http://222828.selcdn.com/temp-mail-images/email-framework-builder/img/' 2 | 3 | module.exports = { 4 | // if you want get minify html file set "true", else "false" 5 | minifyResultHtml: false, 6 | 7 | // for change url for images use this option 8 | // write full url to image from your server 9 | // like this "http://myserver/images-for-emails-template/v1/" 10 | // after that all urls will be updates 11 | // to 12 | urlImageHost: 'http://222828.selcdn.com/temp-mail-images/simple-email-template/img/' 13 | }; 14 | -------------------------------------------------------------------------------- /src/scss/_helpers.scss: -------------------------------------------------------------------------------- 1 | /* fonts combo */ 2 | $font1: Arial, Helvetica, sans-serif; 3 | $font2: Tahoma, Geneva, sans-serif; 4 | $font3: Georgia, serif; 5 | $font4: "Times New Roman", Times, serif; 6 | $font5: "Trebuchet MS", Helvetica, sans-serif; 7 | $font6: "Arial Black", Gadget, sans-serif; 8 | $font7: "Comic Sans MS", cursive, sans-serif; 9 | $font5: Impact, Charcoal, sans-serif; 10 | $font9: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 11 | $font10: Verdana, Geneva, sans-serif; 12 | $font11: "Courier New", Courier, monospace; 13 | $font12: "Lucida Console", Monaco, monospace; 14 | $font13: "Palatino Linotype", "Book Antiqua", Palatino, serif; 15 | 16 | 17 | /* padding class */ 18 | /* .pt20 => padding-top: 20px; */ 19 | @for $i from 0 through 50 { 20 | @if $i % 5 == 0 { 21 | .pt-#{$i} { 22 | padding-top: #{$i}px; 23 | } 24 | } 25 | } 26 | 27 | @for $i from 0 through 50 { 28 | .pl-#{$i} { 29 | padding-left: #{$i}px; 30 | } 31 | } 32 | 33 | @for $i from 0 through 50 { 34 | .pr-#{$i} { 35 | padding-right: #{$i}px; 36 | } 37 | } 38 | 39 | @for $i from 0 through 50 { 40 | @if $i % 5 == 0 { 41 | .pb-#{$i} { 42 | padding-bottom: #{$i}px; 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/scss/_layout.scss: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | } 4 | 5 | table { 6 | border-collapse: collapse; 7 | } 8 | 9 | .st-bodycolor { 10 | background-color: $bodyColor; 11 | } 12 | 13 | .st-wrapper { 14 | min-width: 300px; 15 | } 16 | 17 | .st-columns { 18 | font-size: 0; 19 | text-align: center; 20 | } 21 | 22 | .column, 23 | .m-wide { 24 | width: 100%; 25 | display: inline-block; 26 | vertical-align: top; 27 | text-align: center; 28 | @include mobile { 29 | max-width: 100% !important; 30 | } 31 | } 32 | 33 | .m-coll-td { 34 | @include mobile { 35 | padding-left: 10px !important; 36 | padding-right: 10px !important; 37 | } 38 | } 39 | 40 | .m-coll-td-full { 41 | @include mobile { 42 | padding-left: 20px !important; 43 | padding-right: 20px !important; 44 | } 45 | } 46 | 47 | .l-row { 48 | @include mobile { 49 | padding-left: 0px !important; 50 | padding-right: 0px !important; 51 | } 52 | } 53 | 54 | .m-tcenter { 55 | @include mobile { 56 | margin: 0 auto !important; 57 | float: none; 58 | } 59 | } 60 | 61 | .wrapper { 62 | -webkit-font-smoothing: antialiased; 63 | -webkit-text-size-adjust: 100% !important; 64 | -ms-text-size-adjust: 100% !important; 65 | } 66 | 67 | .m-full { 68 | @include mobile { 69 | width: 100% !important; 70 | max-width: 100% !important; 71 | min-width: 124px !important; 72 | height: auto; 73 | clear: both; 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /src/scss/_main.scss: -------------------------------------------------------------------------------- 1 | /* latin */ 2 | @media screen { 3 | @font-face { 4 | font-family: 'Roboto Condensed'; 5 | font-style: normal; 6 | font-weight: 400; 7 | font-display: swap; 8 | src: local('Roboto Condensed'), local('RobotoCondensed-Regular'), local('sans-serif-condensed'), url(https://fonts.gstatic.com/s/robotocondensed/v18/ieVl2ZhZI2eCN5jzbjEETS9weq8-19K7DQk6YvM.woff2) format('woff2'); 9 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 10 | } 11 | .webfont { 12 | font-family: 'Roboto Condensed', Arial, sans-serif !important; 13 | } 14 | } 15 | 16 | 17 | .title { 18 | font-weight: 400; 19 | color: #fff; 20 | @include font(40px, 32px); 21 | @include mobile { 22 | font-size: 30px !important; 23 | line-height: 30px !important; 24 | } 25 | 26 | a { 27 | color: #fff; 28 | text-decoration: none; 29 | } 30 | } 31 | 32 | .sub-title { 33 | font-weight: 400; 34 | color: #bbdefb; 35 | @include font(18px, 20px); 36 | } 37 | 38 | .title-h2 { 39 | color: #212121; 40 | @include font(20px, 22px); 41 | @include mobile { 42 | font-size: 16px !important; 43 | line-height: 18px !important; 44 | } 45 | } 46 | 47 | .main-text { 48 | @include font(16px, 22px); 49 | color: #757575; 50 | 51 | @include mobile { 52 | font-size: 14px !important; 53 | line-height: 16px !important; 54 | } 55 | 56 | a { 57 | color: #1976d2; 58 | 59 | span { 60 | text-decoration: underline; 61 | } 62 | } 63 | } 64 | 65 | .footer { 66 | @include font(12px, 14px); 67 | text-align: center; 68 | color: #757575; 69 | 70 | a { 71 | color: #757575; 72 | text-decoration: none; 73 | } 74 | } 75 | 76 | 77 | // button 78 | .btn-st1 { 79 | text-align: center; 80 | display: inline-block; 81 | vertical-align: top; 82 | text-decoration: none; 83 | width: 100%; 84 | 85 | a { 86 | color: #fff; 87 | } 88 | 89 | span { 90 | color: #fff; 91 | padding: 0 20px; 92 | @include font(19px, 20px); 93 | display: inline-block; 94 | font-weight: normal; 95 | vertical-align: top; 96 | } 97 | } 98 | 99 | -------------------------------------------------------------------------------- /src/scss/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin mobile { 2 | @media only screen and (max-width: 600px) { 3 | @content ; 4 | } 5 | } 6 | 7 | @function _strip-units($unit) { 8 | @return $unit / ($unit * 0 + 1); 9 | } 10 | 11 | @mixin font($fz, $lh: false, $family: false) { 12 | font-size: #{_strip-units($fz)}px; 13 | 14 | @if $lh == false { 15 | line-height: #{round(_strip-units($fz) * 1.4)}px; 16 | } @else { 17 | line-height: #{_strip-units($lh)}px; 18 | } 19 | @if $family == false { 20 | font-family: $font1; 21 | } @else { 22 | font-family: $family; 23 | } 24 | } 25 | 26 | @mixin font-important($fz, $lh: false, $family: false) { 27 | font-size: #{_strip-units($fz)}px !important; 28 | 29 | @if $lh == false { 30 | line-height: #{round(_strip-units($fz) * 1.4)}px !important; 31 | } @else { 32 | line-height: #{_strip-units($lh)}px !important; 33 | } 34 | @if $family == false { 35 | font-family: $font1 !important; 36 | } @else { 37 | font-family: $family !important; 38 | } 39 | } 40 | 41 | -------------------------------------------------------------------------------- /src/scss/_typograph.scss: -------------------------------------------------------------------------------- 1 | .text-center { 2 | text-align: center; 3 | } 4 | .text-center { 5 | text-align: center; 6 | } 7 | 8 | .text-left { 9 | text-align: left; 10 | } 11 | 12 | .text-right { 13 | text-align: right; 14 | } 15 | 16 | .text-just { 17 | text-align: justify; 18 | } 19 | 20 | .text-nowrap { 21 | white-space: nowrap; 22 | } 23 | 24 | /*Align text block*/ 25 | .st-center { 26 | text-align: center; 27 | } 28 | 29 | .st-left { 30 | text-align: left; 31 | } 32 | 33 | .st-right { 34 | text-align: right; 35 | } 36 | 37 | .st-just { 38 | text-align: justify; 39 | } 40 | // 41 | //// titles 42 | //.title { 43 | // @include font(38px, 50px, $font2); 44 | // font-weight: bold; 45 | // //color: #ffffff; 46 | //} 47 | //.sub-title { 48 | // color: #ffffff; 49 | // @include font(11px, 16px, $font2); 50 | //} 51 | // 52 | //.post-title { 53 | // @include font(20px, 31px, $font2); 54 | // font-size: 20px; 55 | // font-weight: 600; 56 | //} 57 | // 58 | //.group-title { 59 | // @include font(16px, 20px, $font2); 60 | // color: #40474e; 61 | // font-weight: 700; 62 | //} 63 | //.group-text { 64 | // @include font(14px, 20px, $font2); 65 | // color: #787b80; 66 | // 67 | // a { 68 | // color: #57c3af; 69 | // text-decoration: underline; 70 | // } 71 | //} 72 | //.post-text { 73 | // @include font(14px, 29px, $font2); 74 | //} 75 | 76 | .word-break { 77 | -ms-word-break: break-all; 78 | word-break: break-all; 79 | word-break: break-word; 80 | -ms-hyphens: auto; 81 | -webkit-hyphens: auto; 82 | -moz-hyphens: auto; 83 | hyphens: auto; 84 | } 85 | // 86 | //.footer-text { 87 | // @include font(14px, 23px, $font2); 88 | // color: #ffffff; 89 | //} 90 | // 91 | //.copyright-text { 92 | // @include font(14px, 23px, $font2); 93 | // color: #959595; 94 | // font-weight: 500; 95 | //} 96 | //.st-footer { 97 | // color: #aaacaf; 98 | // @include font(12px, 16px, $font2); 99 | // a { 100 | // text-decoration: underline !important; 101 | // color: #aaacaf; 102 | // } 103 | //} 104 | 105 | /*****************************/ 106 | /*MOBILE SECTION*/ 107 | /*****************************/ 108 | 109 | /*Align text mobile*/ 110 | .m-center { 111 | @include mobile { 112 | text-align: center !important; 113 | } 114 | } 115 | 116 | .m-left { 117 | @include mobile { 118 | text-align: left !important; 119 | } 120 | } 121 | 122 | .m-right { 123 | @include mobile { 124 | text-align: right !important; 125 | } 126 | } 127 | 128 | 129 | -------------------------------------------------------------------------------- /src/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | @import "_helpers"; 2 | 3 | /*Base gutter*/ 4 | //$gutter: 20px; 5 | $gutterHalf: 10px; 6 | 7 | /*Main background color*/ 8 | $bodyColor: #bbdefb; 9 | -------------------------------------------------------------------------------- /src/scss/_visibility.scss: -------------------------------------------------------------------------------- 1 | /*Visibility desktop*/ 2 | .hide, 3 | .mobile-only { 4 | font-size: 0; 5 | line-height: 0; 6 | display: none; 7 | visibility: hidden; 8 | width: 0; 9 | height: 0; 10 | padding: 0; 11 | margin: 0; 12 | overflow: hidden; 13 | float: left; 14 | max-width: 0; 15 | max-height: 0; 16 | mso-hide: all; 17 | } 18 | 19 | /*Visibility mobile*/ 20 | .m-hide { 21 | @include mobile { 22 | display: none !important; 23 | } 24 | } 25 | .mobile-only { 26 | @include mobile { 27 | visibility: visible !important; 28 | height: auto !important; 29 | max-width: none !important; 30 | max-height: none !important; 31 | display: block !important; 32 | width: auto !important; 33 | float: none !important; 34 | overflow: visible !important; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/scss/styles.scss: -------------------------------------------------------------------------------- 1 | /* Сombining Style */ 2 | @import "_variables"; 3 | @import "_mixins"; 4 | @import "_layout"; 5 | @import "_typograph"; 6 | @import "_visibility"; 7 | @import "_main"; 8 | -------------------------------------------------------------------------------- /src/static/img/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/src/static/img/facebook.png -------------------------------------------------------------------------------- /src/static/img/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/src/static/img/github.png -------------------------------------------------------------------------------- /src/static/img/linkedin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/src/static/img/linkedin.png -------------------------------------------------------------------------------- /src/static/img/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/csscoder/Responsive-Email-Template-Builder/1730b84360a17667d09b8b5ca7c99e3cdc2e5814/src/static/img/twitter.png -------------------------------------------------------------------------------- /src/template/index.pug: -------------------------------------------------------------------------------- 1 | //- include base template 2 | extends layout/_layout 3 | 4 | //- Base setting size layout 5 | block mainVariables 6 | - var gGutter = 20; //- gutter columns 7 | - var gContainer = 640; //- width container 8 | - var gColumns = 6; //- size column 9 | 10 | //- BODY EMAIL 11 | block content 12 | 13 | //- fist screen 14 | +wrapper('#BBDEFB') 15 | +table('100%', '#BBDEFB') 16 | tr 17 | +td.pl-20.pr-20 18 | 19 | +roll(20) 20 | 21 | +table('100%', '#2196F3') 22 | tr 23 | +td.pl-40.pr-40.m-center.text-right.m-coll-td 24 | +roll(30) 25 | .sub-title.webfont Responsive Email Template 26 | +roll(10) 27 | .title.webfont 28 | +a("https://emailcoder.pro") 29 | | EMAILCODER.PRO 30 | +roll(30) 31 | 32 | +table('100%', '#ffffff') 33 | tr 34 | +td.pl-40.pr-40.m-coll-td-full 35 | +roll(30) 36 | .title-h2 37 | | Welcome to simple Email Responsive template! 38 | +roll(20) 39 | .main-text 40 | | Hey there! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel nulla vehicula, vehicula est interdum, accumsan purus. In sed consequat erat. Donec consectetur vestibulum laoreet. Maecenas pulvinar vulputate sagittis. Praesent et posuere odio. Sed hendrerit vehicula mi, elementum scelerisque augue interdum dignissim. 41 | +roll(16) 42 | .main-text 43 | | Nam in tellus et nibh interdum posuere in 44 | =" " 45 | +a-text("https://google.com") Aliquam commodo 46 | =" " 47 | | ., sem at porta varius, dui nunc mattis tortor, nec pellentesque orci mi ornare nunc. Quisque at arcu vitae tortor posuere imperdiet nec pulvinar felis. In mattis, ante eget lobortis auctor, risus magna rhoncus mauris, et finibus nisi risus id sapien. 48 | 49 | +roll(40) 50 | +center 51 | +btn-st1("https://csscoder.pro/contact", "#FF5722", 250, 52, 16) 52 | .webfont CONTACT ME 53 | +roll(40) 54 | +table-align("center") 55 | tr 56 | +td.pr-10 57 | +a("https://www.facebook.com/csscoder") 58 | +img-inline("img/facebook.png", 40, 40, "facebook") 59 | +td.pr-10 60 | +a("https://github.com/csscoderRU") 61 | +img-inline("img/github.png", 40, 40, "github") 62 | +td.pr-10 63 | +a("https://www.linkedin.com/in/csscoder/") 64 | +img-inline("img/linkedin.png", 40, 40, "linkedin") 65 | +td 66 | +a("https://twitter.com/csscoder") 67 | +img-inline("img/twitter.png", 40, 40, "twitter") 68 | +roll(40) 69 | 70 | +table("100%", "#bbdefb") 71 | tr 72 | +td 73 | +roll(24) 74 | .footer.text-center.webfont 75 | | © 76 | =" " 77 | +a-text("https://emailcoder.pro") EMAILCODER.PRO 78 | +roll(24) 79 | 80 | //- END BODY EMAIL 81 | 82 | -------------------------------------------------------------------------------- /src/template/layout/_layout.pug: -------------------------------------------------------------------------------- 1 | block mainVariables 2 | if !gGutter 3 | -let gGutter = 20 4 | if !gContainer 5 | -let gContainer = 600 6 | if !gColumns 7 | -let gColumns = 6 8 | 9 | include ../mixins/_pug-mixin 10 | 11 | | 12 | html(xmlns="http://www.w3.org/1999/xhtml") 13 | head 14 | meta(http-equiv='Content-Type', content='text/html; charset=utf-8') 15 | meta(name="format-detection", content="telephone=no") 16 | meta(name="viewport", content="width=device-width, initial-scale=1.0") 17 | 18 | if final 19 | style(type="text/css") 20 | | @@include('styles.css') 21 | else 22 | link(href="styles.css", rel='stylesheet') 23 | body.st-bodycolor 24 | 25 | if final 26 | | ##include('../src/template/outlook-fix/outlook-fix.html') 27 | 28 | //- container 29 | .st-wrapper 30 | block content 31 | //- End container 32 | 33 | -------------------------------------------------------------------------------- /src/template/mixins/_columns.pug: -------------------------------------------------------------------------------- 1 | //- ******************************** 2 | //- Columns width gutter 3 | //- ******************************** 4 | 5 | //- first column in row 6 | mixin column-first(column, columnCommon ) 7 | - var width = Math.floor(( (gContainer - gGutter) / gColumns) * column) 8 | - var columnCommon = (typeof columnCommon === 'undefined') ? "100%" : Math.floor((gContainer / gColumns) * columnCommon) 9 | |
10 | | 11 | .column.first&attributes(attributes)(style=`max-width: ${width}px;`) 12 | +table 13 | tr 14 | +td(style=`padding-left: ${gGutter / 2}px; padding-right: ${gGutter / 2}px`).m-coll-td 15 | block 16 | 17 | //- inner column in row 18 | mixin column(column) 19 | - var width = Math.floor(((gContainer - gGutter) / gColumns) * column); 20 | | 21 | .column.inner&attributes(attributes)(style=`max-width: ${width}px;`) 22 | +table 23 | tr 24 | +td(style=`padding-left: ${gGutter / 2}px; padding-right: ${gGutter / 2}px`).m-coll-td 25 | block 26 | 27 | //- last column in row 28 | mixin column-last(column) 29 | - var width = Math.floor(((gContainer - gGutter) / gColumns) * column); 30 | | 31 | .column.last&attributes(attributes)(style=`max-width: ${width}px;`) 32 | +table 33 | tr 34 | +td(style=`padding-left: ${gGutter / 2}px; padding-right: ${gGutter / 2}px;`).m-coll-td 35 | block 36 | | 37 | |
38 | 39 | //- alone column in row 40 | mixin column-alone(column) 41 | - var width = Math.floor(((gContainer - gGutter) / gColumns) * column); 42 | |
43 | | 44 | .column.alone&attributes(attributes)(style=`max-width: ${width}px;`) 45 | +table 46 | tr 47 | +td(style=`padding-left: ${gGutter / 2}px; padding-right: ${gGutter / 2}px;`).m-coll-td 48 | block 49 | | 50 | |
51 | 52 | 53 | //- ******************************** 54 | //- Columns no gutter 55 | //- ******************************** 56 | 57 | //- first column in row 58 | mixin fcolumn-first(column, columnCommon) 59 | - var width = Math.floor((gContainer / gColumns) * column) 60 | - var columnCommon = (typeof columnCommon === 'undefined') ? "100%" : Math.floor((gContainer / gColumns) * columnCommon) 61 | | 62 | .column.first&attributes(attributes)(style=`max-width: ${width}px;`) 63 | block 64 | 65 | //- inner column in row 66 | mixin fcolumn(column) 67 | - var width = Math.floor((gContainer / gColumns) * column); 68 | | 69 | .column.inner&attributes(attributes)(style=`max-width: ${width}px;`) 70 | block 71 | 72 | //- last column in row 73 | mixin fcolumn-last(column) 74 | - var width = Math.floor((gContainer / gColumns) * column); 75 | | 76 | .column.last&attributes(attributes)(style=`max-width: ${width}px;`) 77 | block 78 | | 79 | 80 | //- alone column in row 81 | mixin fcolumn-alone(column) 82 | - var width = Math.floor((gContainer / gColumns) * column); 83 | +center 84 | | 85 | .column.alone&attributes(attributes)(style=`max-width: ${width}px;`) 86 | block 87 | | 88 | 89 | //- ******************************** 90 | //- Columns set width no gutter 91 | //- ******************************** 92 | 93 | mixin scolumn-first(columnWidth, boxFullWidth) 94 | | 95 | .column.first&attributes(attributes)(style=`max-width: ${columnWidth}px;`) 96 | block 97 | 98 | //- inner column in row 99 | mixin scolumn(columnWidth) 100 | | 101 | .column.inner&attributes(attributes)(style=`max-width: ${columnWidth}px;`) 102 | block 103 | 104 | //- last column in row 105 | mixin scolumn-last(columnWidth) 106 | | 107 | .column.last&attributes(attributes)(style=`max-width: ${columnWidth}px;`) 108 | block 109 | | 110 | 111 | //- alone column in row 112 | mixin scolumn-alone(columnWidth) 113 | | 114 | .column.alone&attributes(attributes)(style=`max-width: ${columnWidth}px;`) 115 | block 116 | | 117 | -------------------------------------------------------------------------------- /src/template/mixins/_elements.pug: -------------------------------------------------------------------------------- 1 | //- +a('http://ya.ru') link --> ... 2 | //- not for text link 3 | //- view bellow 4 | mixin a(link) 5 | - var link = (typeof link === 'undefined') ? "#3" : link 6 | a&attributes(attributes)(href=link, target="_blank") 7 | block 8 | 9 | //- +a('http://ya.ru') link --> link 10 | //- text link 11 | mixin a-text(link) 12 | - var link = (typeof link === 'undefined') ? "#3" : link 13 | a&attributes(attributes)(href=link, target="_blank") 14 | span 15 | block 16 | 17 | 18 | //- +img('img/logo.png', 100, 200) --> 19 | //- 20 | mixin img(src, width, height, alt) 21 | if alt 22 | img&attributes( 23 | attributes)(src=src, width=width, height=height, border="0", style="display:block; line-height: 100%;", alt=alt) 24 | else 25 | img&attributes( 26 | attributes)(src=src, width=width, height=height, border="0", style="display:block; line-height: 100%;") 27 | 28 | //- +img-inline('img/logo.png', 100, 200) --> 29 | //- 30 | mixin img-inline(src, width, height, alt) 31 | if alt 32 | img&attributes(attributes)(src=src, width=width, height=height, border="0", style="vertical-align: top;", alt=alt) 33 | else 34 | img&attributes(attributes)(src=src, width=width, height=height, border="0", style="vertical-align: top;") 35 | 36 | 37 | //- hr 38 | mixin hr(color, height, width) 39 | - var width = (typeof width === 'undefined') ? "100%" : width 40 | table(cellpadding="0", cellspacing="0", border="0", width=width, align="center") 41 | tr 42 | +td(style=`width: 100%; border-top: ${color} solid ${height}px;`) 43 | +roll(1) 44 | 45 | mixin button(link) 46 | a&attributes(attributes)(href=link, target="_blank").st-button 47 | span 48 | block 49 | 50 | mixin btn-st1(link, bgFone, staticWidth, staticHeight, paddingTB ) 51 | - var link = (typeof link === 'undefined') ? "#3" : link 52 | 53 | | 54 | div(style=`max-width: ${staticWidth}px; display: inline-block; width: 100%; vertical-align: top;`) 55 | table(cellpadding="0", cellspacing="0", border="0", style="border-collapse: separate;", width="100%") 56 | tr 57 | +td('center')(bgcolor=bgFone) 58 | | 59 | a&attributes(attributes)(href=link, target="_blank", style=`max-width: ${staticWidth}px`).btn-st1 60 | | 61 | +roll(paddingTB) 62 | | 63 | span 64 | block 65 | | 66 | +roll(paddingTB) 67 | | 68 | | 69 | | 70 | 71 | 72 | //- Mixin 73 | mixin btn-st3(link, bgFone, staticWidth, paddingTopBottom, borderColor, borderWidth, radius, btnHeight) 74 | - var link = (typeof link === 'undefined') ? "#3" : link 75 | - var staticWidth = staticWidth - (borderWidth * 2) 76 | - var ieWidth = staticWidth + (borderWidth * 2) 77 | | 78 | div(style=`max-width: ${ieWidth}px; display: inline-block; width: 100%; vertical-align: top;`) 79 | table(cellpadding="0", cellspacing="0", border="0", style="border-collapse: separate;", width="100%") 80 | tr 81 | +td('center')(style=`border: ${borderWidth}px solid ${borderColor}; border-radius: ${radius}px;` bgcolor=bgFone) 82 | | 83 | a&attributes(attributes)(href=link, target="_blank", style=`max-width: ${staticWidth}px`).st-btn3 84 | | 85 | +roll(paddingTopBottom) 86 | | 87 | span 88 | block 89 | | 90 | +roll(paddingTopBottom) 91 | | 92 | | 93 | | 94 | -------------------------------------------------------------------------------- /src/template/mixins/_layout.pug: -------------------------------------------------------------------------------- 1 | //- Main wrapper => +wrapper('default', '#ffffff'); 2 | mixin wrapper(bgcolor, bgcolorIn) 3 | 4 | - var bgcolorIn = (typeof bgcolorIn === 'undefined') ? bgcolor : bgcolorIn 5 | - var width = gContainer 6 | 7 | center 8 | table(cellpadding="0", cellspacing="0", border="0", width="100%", bgcolor=bgcolor, align="center") 9 | tr 10 | +td('center', 'top', '100%') 11 | | 12 | table&attributes( 13 | attributes)(cellpadding="0", cellspacing="0", border="0", bgcolor=bgcolorIn, width="100%", style=`max-width: ${width}px; background-color: ${bgcolorIn};`) 14 | tr 15 | +td()(bgcolor=bgcolorIn, style=`background-color: ${bgcolorIn}`) 16 | block 17 | | 18 | 19 | //- Main wrapper bg image fill 20 | mixin wrapper-bg(bgcolor, bgcolorIn, url, imgW, imgH) 21 | 22 | - var width = gContainer 23 | - var bgcolorIn = (typeof bgcolorIn === 'undefined') ? bgcolor : bgcolorIn 24 | 25 | center 26 | table(cellpadding="0", cellspacing="0", border="0", width="100%", bgcolor=bgcolor, align="center") 27 | tr 28 | +td('center', 'top', '100%') 29 | | 30 | table&attributes( 31 | attributes)(cellpadding="0", cellspacing="0", border="0", bgcolor=bgcolorIn, width="100%", style=`max-width: ${width}px`, background=`${url}` ).m-cover 32 | tr 33 | +td(background=`${url}`).m-cover 34 | | 35 | block 36 | | 37 | | 38 | 39 | //- Table block mixin 40 | mixin table(width, bgcolor) 41 | - var width = (typeof width === 'undefined') ? "100%" : width 42 | table&attributes(attributes)(cellpadding="0", cellspacing="0", border="0", width=width, bgcolor=bgcolor) 43 | block 44 | 45 | //- Table align mixin 46 | mixin table-align(align) 47 | table&attributes(attributes)(cellpadding="0", cellspacing="0", border="0", align=align) 48 | block 49 | 50 | //- td block mixin 51 | //- td(width="44%" valign="top" align="left") 52 | mixin td(align, valign, width) 53 | - var valign = (typeof valign === 'undefined') ? "top" : valign 54 | td&attributes(attributes)(align=align, valign=valign, width=width) 55 | block 56 | 57 | //- row column 58 | mixin row 59 | .st-columns&attributes(attributes) 60 | block 61 | 62 | //- center table-td 63 | mixin center() 64 | table(cellpadding="0", cellspacing="0", border="0", width="100%") 65 | tr 66 | td&attributes(attributes)(valign="top", align="center", width="100%") 67 | block 68 | 69 | //- paddings div 70 | //- +roll(16) 71 | //-
 
72 | mixin roll(height) 73 | - var height = (typeof height === 'undefined') ? "10" : height; 74 | div&attributes(attributes)(style=`font-size:${height}px; line-height: ${height}px; height: ${height}px;`) 75 | |   76 | 77 | //- Main wrapper bg image fill 78 | mixin table-img(bgcolor, url, imgW, imgH) 79 | +table&attributes(attributes) 80 | tr 81 | td(background=url, bgcolor=bgcolor, valign="top", style=`background: url('${url}'); background-repeat: no-repeat; background-color: ${bgcolor};`).m-cover.m-td-img 82 | | 83 | div 84 | block 85 | | 86 | -------------------------------------------------------------------------------- /src/template/mixins/_pug-mixin.pug: -------------------------------------------------------------------------------- 1 | include _columns 2 | include _elements 3 | include _layout 4 | -------------------------------------------------------------------------------- /src/template/outlook-fix/outlook-fix.html: -------------------------------------------------------------------------------- 1 | 2 | --------------------------------------------------------------------------------