Bootstrap Email for NodeJS
If you know Bootstrap, you know Bootstrap Email.
[](https://nodei.co/npm/bootstrap-email/)
Based on the original [Bootstrap Email by stuyam](https://github.com/stuyam/bootstrap-email), this library allows you to compile a regular HTML markdown with usual Bootstrap classes into cringy table-based email-layouts ... with **JAVASCRIPT 🎉🎊✨**. # Table of contents - [Supported Bootstrap Classes](#supported-bootstrap-classes) - [Additional Classes](#additional-classes) - [Installation and usage](#installation-and-usage) - [Options](#options) - [Methods](#methods) - [Todos](#todos) - [Known Bugs](#known-bugs) ## Supported Bootstrap Classes {color} in these examples is `primary`, `secondary`, `success`, `warning`, `danger`, `light`, and `dark` - [Alerts](https://bootstrapemail.com/docs/alert): `.alert`, `.alert-{color}` - [Badges](https://bootstrapemail.com/docs/badge): `.badge`, `.badge-{color}`, `.badge-pill` - [Buttons](https://bootstrapemail.com/docs/button): `.btn`, `.btn-{color}`, `.btn-outline-{color}` - [Cards](https://bootstrapemail.com/docs/card): `.card`, `.card-body` - [Color](https://bootstrapemail.com/docs/color): `.text-{color}`, `.bg-{color}` - [Containers](https://bootstrapemail.com/docs/container): `.container`, `.container-fluid` - [Floats](https://bootstrapemail.com/docs/float): `.float-left`, `.float-right` - [Grid](https://bootstrapemail.com/docs/grid): `.row`, `.col-{1-12}`, `.col-lg-{1-12}` - [Hrs](https://bootstrapemail.com/docs/hr): `
` - [Spacing](https://bootstrapemail.com/docs/spacing): `.p{tlbrxy}-{lg-}{0-5}`, `.m{tby}-{lg-}{0-5}`, `mx-auto` - [Width](): `w-{lg-}{25,50,75,100}` - [Tables](https://bootstrapemail.com/docs/table): `.table`, `.table-striped`,`.table-bordered`, `.thead-light`, `.thead-dark`, `.table-{color}`, `.table-dark` - [Typography](https://bootstrapemail.com/docs/typography): `
`, ``, ``, ``, ``, ``, ``, ``, ``, ``, `.text-{sm|lg-}left`, `.text-{sm|lg-}center`, `.text-{sm|lg-}right`, `.display-{1-4}`, `.lead`, `.small`
## Additional Classes
- [Visibility](https://bootstrapemail.com/docs/visibility): `.d-desktop`, `.d-mobile`
## Installation and usage
Install package with `npm i bootstrap-email -S`
To compile a default template:
```javascript
const BootstrapEmail = require('bootstrap-email');
const template = new BootstrapEmail('.html');
// const template = new BootstrapEmail([
// '.html',
// '.html',
// ]);
//
// const template = new BootstrapEmail('...');
template.compileAndSave('.html');
```
Alternatively use the [Gulp plugin](https://github.com/schwarzdavid/gulp-bootstrap-email) to integrate Bootstrap Email into your templating workflow.
## Options
- `style` _string_ (optional) - Path to css or scss file, which should be inlined. Default is `bootstrap-email.scss`
- `head` _string_ (optional) - Path to css or scss file, which should be injected to `head`. Default is `head.scss`
- `templates` _array<string>_ - Array with paths to html files you want to compile.
- `logLevel`
## Methods
##### new BootstrapEmail(templates, options)
##### compile(): _string | [{path: string, document: string}]_
Performs a full compile and returns compiled document(s).
If only one template is about to compile, returns the compiled template, otherwise an array containing objects with the path of the input-file and the compiled document.
```javascript
const singleTemplate = new BootstrapEmail('.html');
// returns string
singleTemplate.compile();
const multipleTemplates = new BootstrapEmail(['', ...]);
// returns [{path:'', document: '...'}, ...]
multipleTemplates.compile();
```
##### compileAndSave(path): _void_
Performs a full compile and saves compiled files into given path.
If only one template is given, pass a full path including filename and extension. Otherwise pass only a directory name. The filenames will be used from the source files.
```javascript
const singleTemplate = new BootstrapEmail('.html');
singleTemplate.compileAndSave('.html');
const multipleTemplates = new BootstrapEmail(['', ...]);
multipleTemplates.compileAndSave('');
```
## Todos
- [ ] Support multiple CSS/SASS-files
- [ ] Add Typescript typings
- [ ] Implement bootstrap-like vertical align classes
- [ ] Extract automatically CSS that cannot be inlined (`:hover`, `:focus`, ...)
- [ ] Add option for output formatting (minimized, formatted, ...)
- [ ] Write better docs & examples
- [ ] Write cli script
# Known Bugs
- Outlook 2013 on Windows 10 with 120DPI can't scale images properly
- Paddings don't work properly on Outlook (Windows ofc)
- Auto-sized tables behave as if they would have width="100%" on Outlook 2003 (Windows ofc)
- Outlook 2003 (Windows) is fucked up in general
`, ``, ``, ``, ``, ``, ``, ``, `.text-{sm|lg-}left`, `.text-{sm|lg-}center`, `.text-{sm|lg-}right`, `.display-{1-4}`, `.lead`, `.small`
## Additional Classes
- [Visibility](https://bootstrapemail.com/docs/visibility): `.d-desktop`, `.d-mobile`
## Installation and usage
Install package with `npm i bootstrap-email -S`
To compile a default template:
```javascript
const BootstrapEmail = require('bootstrap-email');
const template = new BootstrapEmail('.html');
// const template = new BootstrapEmail([
// '.html',
// '.html',
// ]);
//
// const template = new BootstrapEmail('...');
template.compileAndSave('.html');
```
Alternatively use the [Gulp plugin](https://github.com/schwarzdavid/gulp-bootstrap-email) to integrate Bootstrap Email into your templating workflow.
## Options
- `style` _string_ (optional) - Path to css or scss file, which should be inlined. Default is `bootstrap-email.scss`
- `head` _string_ (optional) - Path to css or scss file, which should be injected to `head`. Default is `head.scss`
- `templates` _array<string>_ - Array with paths to html files you want to compile.
- `logLevel`
## Methods
##### new BootstrapEmail(templates, options)
##### compile(): _string | [{path: string, document: string}]_
Performs a full compile and returns compiled document(s).
If only one template is about to compile, returns the compiled template, otherwise an array containing objects with the path of the input-file and the compiled document.
```javascript
const singleTemplate = new BootstrapEmail('.html');
// returns string
singleTemplate.compile();
const multipleTemplates = new BootstrapEmail(['', ...]);
// returns [{path:'', document: '...'}, ...]
multipleTemplates.compile();
```
##### compileAndSave(path): _void_
Performs a full compile and saves compiled files into given path.
If only one template is given, pass a full path including filename and extension. Otherwise pass only a directory name. The filenames will be used from the source files.
```javascript
const singleTemplate = new BootstrapEmail('.html');
singleTemplate.compileAndSave('.html');
const multipleTemplates = new BootstrapEmail(['', ...]);
multipleTemplates.compileAndSave('');
```
## Todos
- [ ] Support multiple CSS/SASS-files
- [ ] Add Typescript typings
- [ ] Implement bootstrap-like vertical align classes
- [ ] Extract automatically CSS that cannot be inlined (`:hover`, `:focus`, ...)
- [ ] Add option for output formatting (minimized, formatted, ...)
- [ ] Write better docs & examples
- [ ] Write cli script
# Known Bugs
- Outlook 2013 on Windows 10 with 120DPI can't scale images properly
- Paddings don't work properly on Outlook (Windows ofc)
- Auto-sized tables behave as if they would have width="100%" on Outlook 2003 (Windows ofc)
- Outlook 2003 (Windows) is fucked up in general
`, ``, ``, ``, ``, ``, `.text-{sm|lg-}left`, `.text-{sm|lg-}center`, `.text-{sm|lg-}right`, `.display-{1-4}`, `.lead`, `.small`
## Additional Classes
- [Visibility](https://bootstrapemail.com/docs/visibility): `.d-desktop`, `.d-mobile`
## Installation and usage
Install package with `npm i bootstrap-email -S`
To compile a default template:
```javascript
const BootstrapEmail = require('bootstrap-email');
const template = new BootstrapEmail('.html');
// const template = new BootstrapEmail([
// '.html',
// '.html',
// ]);
//
// const template = new BootstrapEmail('...');
template.compileAndSave('.html');
```
Alternatively use the [Gulp plugin](https://github.com/schwarzdavid/gulp-bootstrap-email) to integrate Bootstrap Email into your templating workflow.
## Options
- `style` _string_ (optional) - Path to css or scss file, which should be inlined. Default is `bootstrap-email.scss`
- `head` _string_ (optional) - Path to css or scss file, which should be injected to `head`. Default is `head.scss`
- `templates` _array<string>_ - Array with paths to html files you want to compile.
- `logLevel`
## Methods
##### new BootstrapEmail(templates, options)
##### compile(): _string | [{path: string, document: string}]_
Performs a full compile and returns compiled document(s).
If only one template is about to compile, returns the compiled template, otherwise an array containing objects with the path of the input-file and the compiled document.
```javascript
const singleTemplate = new BootstrapEmail('.html');
// returns string
singleTemplate.compile();
const multipleTemplates = new BootstrapEmail(['', ...]);
// returns [{path:'', document: '...'}, ...]
multipleTemplates.compile();
```
##### compileAndSave(path): _void_
Performs a full compile and saves compiled files into given path.
If only one template is given, pass a full path including filename and extension. Otherwise pass only a directory name. The filenames will be used from the source files.
```javascript
const singleTemplate = new BootstrapEmail('.html');
singleTemplate.compileAndSave('.html');
const multipleTemplates = new BootstrapEmail(['', ...]);
multipleTemplates.compileAndSave('');
```
## Todos
- [ ] Support multiple CSS/SASS-files
- [ ] Add Typescript typings
- [ ] Implement bootstrap-like vertical align classes
- [ ] Extract automatically CSS that cannot be inlined (`:hover`, `:focus`, ...)
- [ ] Add option for output formatting (minimized, formatted, ...)
- [ ] Write better docs & examples
- [ ] Write cli script
# Known Bugs
- Outlook 2013 on Windows 10 with 120DPI can't scale images properly
- Paddings don't work properly on Outlook (Windows ofc)
- Auto-sized tables behave as if they would have width="100%" on Outlook 2003 (Windows ofc)
- Outlook 2003 (Windows) is fucked up in general
...
');
template.compileAndSave('