Giter VIP home page Giter VIP logo

bojler's Introduction

Bojler Heading

GitHub release Travis Github All Releases GitHub code size in bytes GitHub issues GitHub closed issues license

What is Bojler ?

Bojler is an email framework for developing responsive and lightweight email templates that will render correctly across each of the most popular email clients.

If you have experience with email template development, you know how painful it is to build a perfect email template that works across all email clients.

To make it easier for you to develop responsive and lightweight email templates we have created Bojler.

Project documentation 📖

Full project documentation can be found at https://bojler.slicejack.com/.

Quick-start guide 🚀

Full getting started guide can be found here.

1. Download

2. Install node packages: npm install

Secondly, install node packages in root of your newly downloaded folder with npm install command.

This is an example of what you should get after you run npm install command.

3. Start development server: npm start

Let's fire up our development server 🔥

Run npm start in your project root folder.

While your development server is running, every time you make and save changes they will be automatically compiled from src/ to dist/ folder.

This is an example of what you should get after you run npm start command and save some changes while your development server is running.

4. Project configuration and files editing

You’re ready to edit bojler configuration file in src/sass/_settings.scss.

You can take a deeper look at documentation section where we examine variables and maps more carefully.

Now, you can start adding HTML templates to src/templates folder.

In /templates folder you can find boilerplate.html and boilerplate-with-hero.html which you can use as starting point for new templates.

Available NPM commands

Command Description
npm start This command starts live development server and watch task. While your development server is running, every time you make and save changes they will be automatically compiled from src/ to dist/ folder. Take a look at example here.
npm run build This command builds everything from src/ to dist/ folder. Take a look at example here.
npm run assets This command copies all the assets from src/assets/ to dist/assets/ folder. You have to run this command every time you add a new asset in order to see changes. Take a look at example here.

Features

Quick features overview:

  • It’s responsive 🖥️ 💻 📱
  • Built with SASS 🎉
  • Automated SASS to CSS transpiler 🔢 🔀 🔠
  • Automated SASS linter (With email development rules) 🖌️
  • Automated CSS inlining 🔢 🔀 📦
  • Webserver with live reload 🔃
  • Default boilerplate template included
  • Reset styles
  • Typography ✍️
  • Grid system
  • Utility classes 🛠️
  • Components

Bugs and feature requests 🕷️

If you find a bug or need new feature please open a new issue and we will discuss about it.

How to contribute ? 🛠️

You can review the guidelines for contributing to this repository here.

Change Log

All notable changes to this project will be documented in CHANGELOG file.

Credits

Special thanks to:

License

All contents of this boilerplate are licensed under the MIT license.

bojler's People

Contributors

alenvuletic avatar anteprimorac avatar cayom avatar dependabot-preview[bot] avatar dependabot[bot] avatar luigimannoni avatar rubenstolk avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Forkers

sjoerdapp yadhn rabbit-bones jkupczak verveysteven aaroncolon justmelnyc julienrondeau oleteacher bilalqtech hadesain umarmughal fengweijp konstantinklepikov djhargrove morepozitiva heliomsolivas carrari botmaster vpineda7 josecarlospsh ekwoster melih filipclaeys kabudahab lagomistcreative rubenstolk plainspace ganesharulanantham linebreaker benjamin-hull sduplan sshyran powerhousefactories lgants jsleg trashsydowdev ro9ueadmin luisbraga logic21 luigimannoni mcspx mieras githubber tenq cayom zalexstudios imsushant12 sitedata davidalphafox designbytk lechrish cellinlab appabalwant convertiv pir8aye nstcactus arifcakiroglu

bojler's Issues

How do you copy images over?

Just read up about gulp and not sure how to copy my images to the public folder.
I read that you can compress them as well but it is quite a challenge for me.

I know I'm supposed to use a fixed URL for images but I need to develop locally.

Android 4.4 Kit-Kat email centering no longer supported with attribute selector

Much like the other issue I posted, I believe this is another victim of the Gmail update last fall. Attribute selectors are no longer supported so I imagine this no longer works.

			div[style*="margin: 16px 0"]{
				/* Centering emails in Android 4.4 KitKat. More info: - https://blog.jmwhite.co.uk/2015/09/19/revealing-why-emails-appear-off-centre-in-android-4-4-kitkat */
				margin: 0 !important;
			}

Alternatively, this might be a good solution?


		body > div {
			margin:0 !important;
		}

DPI Scaling in Outlook

Define all table cell pixel widths and heights using inline styles. They will then be converted to points by Outlook. This isn't necessary for percentage widths since it's already a relative unit.

More info here.

Gmail Hero component issue

Hi!
Thanks for this boilerplate! I found issue with Hero component in Gmail on PC web browser.
Aligment is broken - no center, always push on left.
https://ibb.co/dCnv3Q Here is preview.

And also button Click me! lost its style... Any ideas? This is pure template from Docs, and send via AcyMailing Joomla component as HTML message. The same email send to Thunderbird looks flawless!

WinSCP Live Dev

When editing the email.html file in winscp the dev does not update

Buttons

It would be great to have prebuilt buttons.

Images compress

It would be great to have automated images compression w/ gulp.

Embedded CSS

It would be great to have embedded.scss. It should not be inlined to final .html file, insted it should be placed inside <head> as separate CSS block.

Once we implement this we should move some things from _reset.scss to embedded.scss.

This should solve #28

Premade templates

It would be great to have few premade templates with components as an example for users.

Features:

  • MailChimp support (MailChimp snippets implemented)

Implement fallback for Outlook sans-serif fonts.

Add something like this to reset fonts on some Outlook email clients:

<!--[if mso]>
<style type="text/css">
	body, table, td {
		font-family: Arial, Helvetica, sans-serif !important;
	}
</style>
<![endif]-->

Utility classes

It would be great to have responsive utility classes such as text alignment and visibility classes.

Text alignment:

  • .align-center / .align-center-sm
  • .align-left / .align-left-sm
  • .align-right / .align-right-sm

Visibility:

  • .hidden / .hidden-sm

Spacing

  • .spacing-top
  • .spacing-bottom

Add example on how to add it on separate table element.

Inline and Full width tables

  • .table-full-width

Hide Gmail download icon no longer works

Looks like this happened when Google updated Gmail in Sep/Oct. They added support for classes and id's but removed attribute selector support. As a result this code no longer works.

* img[tabindex="0"] + div{
	/* Hide download icon in Gmail */
	display: none !important;
}

Instead, using img + div > div works. But obviously that can be dangerous since it's so general so adding a warning would be a good idea (or maybe not even include it at all?). Alternatively you can link the image with <a> or add a class to target it better.

Preheader

It would be great to have preheader example in every .html file.

Hero block w/ background image

It would be great to have an example of hero block with background image.
We need to add html xmlns and small code snippet for DPI clients.

Update docs for v2.1.0

To-Do list:

  • Heading utility classes #25
  • Examples (Markdown)
  • Examples (HTML)
  • Yahoo! Mail center class
  • How to use images (assets folder)
  • How to use embedded and inlined CSS
  • Body table spacing
  • See what's removed
  • Answer all issue questions
  • Update favicon
  • Update README.md

Finally, go through everything once again and document everything properly.

Add css style block to source html without it being stripped

I'm trying to add an [owa] rule, but the css injector doesn't have anywhere to apply it to so it gets stripped out on compile. I want to add it directly to a style block in my head, but then that too get's stripped out. Any ideas on how to add a style block without it getting stripped?

Update system font stack selector

Update system font stack selector to look like this:

body,
table td {
    color: $color-dark;
    font-family: 'Merriweather Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important; /* 2 */
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.