Allow contextual sizes for Spacer

[ethanmay]

This code allows you to add a size-sm and/or size-lg attribute to a <spacer> tag to have different sized spaces on small/large screens. The result is two <spacer>s rendered in HTML, with the show/hide-for-large classes applied to each.

[rafibomb]

Thanks for pointing this to develop and great PR! Just added a v2.2 branch for features. If you are able to point there, it would be better to allow more testing.

Can you include a test for this so we can get it merged in for 2.2.0 coming soon?

[ethanmay]

Yes, I will get on that! Could be a couple days.

[ethanmay]

Tests have been added, and one issue has been fixed. Please let me know if you need anything else!

[rafibomb]

Awesome PR! Tested and merged for 2.2!

[bc-ian]

Is there documentation for this somewhere? I dont see it in http://foundation.zurb.com/emails/docs/spacer.html

[antonydjames]

@bc-ian Looks like that page needs to be updated. I had to work this out myself...

An example implementation:

<spacer size-lg="16" size-sm="0"></spacer>

This would display a spacer with a height of 16px on screen sizes with a width of >597px, but zero height for those <=596px.

It's worth bearing in mind that this uses media queries so likely won't work for email clients/browsers that don't support those. I haven't had chance to test it but assume that in such cases the 'size-lg' value will always be used.

[lukepeach]

@rafibomb can you guys please update the foundation inky page for spacers to reflect the size-lg and size-sm attributes?

I was looking for this for weeks and finally stumbled upon this pull request.