├── .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 |
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 | [](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 |
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 | | |
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 | | |