Horizontal Ruler Helper - Outlook compatible

[Creativenauts]

Created another useful helper that I'm sharing the community here. This is a nice way to add a horizontal ruler to your email template. Create file named "ruler.js" and place it in your helper folder.

Paste this code in the ruler.js file you created.

module.exports = function(options) {

	var color = options.hash.color;
	var spacing = options.hash.spacing;
	var height = options.hash.height;
	var width = options.hash.width;
	var widthType = '';
	var trimWidth = width.replace(/\D/g,'');
	var spacer = '';
	
	if (typeof color === 'undefined') color = '';
	if (typeof height === 'undefined') height = '';
	if (typeof width === 'undefined') width = '';

	if(width.match('%$')) {
		widthType = width = trimWidth+'%';
	} else if (width.match('px$')) {
		widthType = trimWidth+'px';
		width = trimWidth;
	} else {
		widthType = 'auto';
		width = trimWidth;
	}

	if (typeof spacing === 'undefined') {
		spacer = '';
	} else {
		spacer = '<tr height="'+spacing+'"><td height="'+spacing+'"></td></tr>';
	};

	var ruler = '<table align="center" border="0" cellpadding="0" cellspacing="0" width="'+width+'" height="'+height+'" style="width:'+widthType+' !important; height: '+height+'px !important;">\
		'+spacer+'\
		<tr height="'+height+'"><td bgcolor="'+color+'" align="center" valign="top" width="'+width+'" height="'+height+'" style="font-size: 0%; line-height:'+height+'px; mso-line-height-rule:exactly;">\
			<img src="https://spacergif.org/spacer.gif" width="'+width+'" height="'+height+'" />\
		</td></tr>\
		'+spacer+'\
	</table>';

	return ruler;
}

Then all you need to do is use this handlebar:

{{{ruler color="#009F8C" width="60" height="3" spacing="20"}}}

Spacing is above and below the ruler. You can leave it blank if you do not wish to have spacing before and after the ruler.

Here is an example of one of the templates I'm working on so you can see how it looks. Basically, it's the little rulers between the headline and sub headline text.

Hope you all enjoy and let me know if you have better solution as well because I really suck at javascript and coding in general :)

[canterberrie]

This is cool! Can you do a PR for this?

[davehoran]

@DerekBess This is a great add. Definitely put in a PR for this.

[Creativenauts]

@canterberrie @davehoran thanks, still got a few little tweaks to make. How do you do a PR?

[IamManchanda]

https://akrabat.com/the-beginners-guide-to-contributing-to-a-github-project/

@DerekBess

[Creativenauts]

@IamManchanda thank you for that. I'll mess around with it this week.

[Creativenauts]

@canterberrie @davehoran @IamManchanda I just added the pull request. Hopefully I did it right but looks like I had to do it on the foundation-emails-template repository.

foundation/foundation-emails-template#40

[IamManchanda]

@DerekBess commented 4 hours ago

@IamManchanda thank you for that. I'll mess around with it this week.

@DerekBess commented 2 hours ago

@IamManchanda I just added the pull request.

That's interesting, so your 1 week was just 2 hours short 😈

[Creativenauts]

@IamManchanda lol, thanks. I'm still trying to get the hang of how the flow works with the requests.

[stevesmename]

Really cool @DerekBess - however just curious, why not use inky?

<spacer size="3" class="orange width-short"></spacer>

And then style the spacer so width isn't 100% and background-color is what you desire. Didn't review the pull request, but I'd think it would be ideal to patch the inky syntax with new attributes you're suggesting (color, width, spacing). I also never liked "size" as an attribute for <spacer>, I mistakenly type "height" a lot.

[Creativenauts]

@stevesmename I'll test out spacer tag this weekend when I get some free time. I believe the issue is going to be the spacer tag will not be as flexible as the helper I created when it comes to outlook. I tried to make it as email client friendly as possible which means sacrificing additional markup for optimization but that's the way the cookie crumbles with MSO :(

[davehoran]

@DerekBess I used the helper tag for a campaign I put together yesterday. Worked great. Thanks again for the code!

@stevesmename I used to use a styled spacer element for this, then switched to a modified

---

tag. That said, @DerekBess solution is much smoother.

[Creativenauts]

@davehoran sweet! Glad to hear someone has actually used it other then myself. I have used it in three separate client projects and I have yet to come across any type of styling issues as of yet. We could consolidate the markup if it weren't for pesky mso!

[elliottregan]

Works great, but it isn't centered in Yahoo! webmail. The line gets justified to the left.

[Creativenauts]

@elliottregan Thanks for the taking the time to test my helper. I'll be honest, I haven't had a whole lot of time to get back to this as I'm working on a project at the moment. I'll get back to this soon though and I'll test this with Email on Acid to see what needs to happen. I'll investigate how we can get the ruler to align properly on Yahoo mail client. If you have any suggestions, fixes or workarounds to make this happen, please let me know so I can modify the helper to improve client support.

Thanks again and take care!