inky
inky copied to clipboard
foundation
Bulletproof Email Buttons?
I saw somewhere in the foundation-emails roadmap that there's the idea of using the Bulletproof Email pattern for rounded buttons. Has anyone tried this? I'd be happy to take a stab at it, but I'd like know if anyone has worked on it before. Also, it seems like the only way to pull this off is define the style elements as attributes in the
Yeah it would be awesome to be able to type <button href="#" type="bulletproof">Button</button> and create the Bulletproof markup. There will need to be some CSS accompanied with it to make sure the backgrounds, text color, and other things still translate.
It would be awesome if you can create the PR in Inly for the markup. We can help with the styling stuff on foundation-emails!
Ok - looking at the button's markup, you'd need be able to attach attributes to the styling. Example:
<div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#1e3650" fill="t">
<v:fill type="tile" src="https://i.imgur.com/0xPEf.gif" color="#ffffff" />
<w:anchorlock/>
<center style="color:#030202;font-family:sans-serif;font-size:13px;font-weight:bold;">Show me the button!</center>
</v:roundrect>
<![endif]--><a href="http://"
style="background-color:#ffffff;background-image:url(https://i.imgur.com/0xPEf.gif);border:1px solid #1e3650;border-radius:4px;color:#030202;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;">Show me the button!</a></div>
Might look like
<button href="#" type="bulletproof" background="" size="" radius="">
- background needs to be set manually - maybe we can add a default?
- size is an alias for height and width - can be tiny, small, large to match existing button sizes
- radius can be a number translated to px
radius="3"
What are your thoughts on doing it this way?
I was thinking along the same lines; I don't see a way around defining the styles as attributes given that CSS can't be applied to to the color="" as well. My other concern is using sizes: I'm not sure how to match the sizes exactly, since the bulletproof markup uses height and width, not padding. That means an above-average length of text might run into two lines or overflow. I'm thinking I'll code it out to match the existing button sizes and then look at an optional manual height/width override in the attributes.
Good to see that this is being looked at as I have the similar predicament. Given it is written in node, you could parse the _settings.scss file accordingly and apply the styling where possible. Height can be calculated by taking the line height and top and bottom padding used, arc size can be taken from the border radius same with the other parts. It would be best to not have to keep specifying it continuously as it would be highly likely reused, and therefore should really be kept uniform to the original button approach.
@davidhouweling Thanks for the suggestion, I will look into that. Simpler, cleaner markup is definitely key here!
@rafibomb just wanted to let you know I'm still investigating solutions for parsing _settings.scss, hence the delay on this.
@sco-tt That's great! Maybe we can collaborate on this if you share your thoughts.
I'm having trouble finding a NPM package that can parse _settings.scss.
I've tried https://github.com/ryanbahniuk/scss-to-json
Where I get Error: unclosed parenthesis
It works when I comment out $button-padding and $button-font-siz
Do you know of any packages that do something similar? I could write something, but I'd prefer not to reinvent the well. Plus, something more general could be more useful for the entire framework.
@sco-tt would https://www.npmjs.com/package/gulp-sass-json or https://github.com/vigetlabs/sass-json-vars work?
@axelson gulp-sass-json doesn't support sass maps , which is the common problem I'm running into. That said, of all the implementations I've looked it it looks like the most straightforward to modify, so I'm going to try to submit a PR to that project soon. Thanks for the tip.
@axelson I'm in touch with the maintainers of gulp-sass-json about merging a PR, thanks again for the great find!
Cool, I'm glad it helped! Before this I didn't realize how new of a feature sass maps were.
Small update: My PR adding sass map support was accepted in gulp-sass-json, and the updated version is on NPM: https://www.npmjs.com/package/gulp-sass-json
I've been very busy, but I'm going to try to carve out some time to finish working on this feature over the next week.
