Skip to content

Instantly share code, notes, and snippets.

@apraditya
Created September 17, 2012 07:00
Show Gist options
  • Save apraditya/3735941 to your computer and use it in GitHub Desktop.
Save apraditya/3735941 to your computer and use it in GitHub Desktop.
This email layout and sass files can be used to reproduce this issue https://github.com/Mange/roadie/issues/14
/* Client-specific Styles */
#outlook
// Force Outlook to provide a "view in browser" menu link.
a
padding: 0
body
width: 100% !important
-webkit-text-size-adjust: 100%
-ms-text-size-adjust: 100%
margin: 0
padding: 0
// Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design.
.ExternalClass
// Force Hotmail to display emails at full width
width: 100%
// Force Hotmail to display normal line spacing. More on that: http://www.emailonacid.com/forum/viewthread/43/
p, span, font, td, div
line-height: 100%
#backgroundTable
margin: 0
padding: 0
width: 100% !important
line-height: 100% !important
/* End reset */
// Some sensible defaults for images
img
outline: none
text-decoration: none
-ms-interpolation-mode: bicubic
a img
border:none
.image_fix
display: block
// Yahoo paragraph fix: removes the proper spacing or the paragraph (p) tag.
p
margin: 1em 0
// Hotmail header color reset: Hotmail replaces your header color styles with a green color on H2, H3, H4, H5, and H6 tags.
h1, h2, h3, h4, h5, h6
color: black !important
a
color: blue !important
// Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure.
&:active
color: red !important
// Preferably not the same color as the normal header link color. There is limited support for psuedo classes in email clients, this was added just for good measure.
&:visited
color: purple !important
// Outlook 07, 10 Padding issue: These "newer" versions of Outlook add some padding around table cells potentially throwing off your perfectly pixeled table.
table td
border-collapse: collapse
// Remove spacing around Outlook 07, 10 tables
table
border-collapse: collapse
mso-table-lspace: 0pt
mso-table-rspace: 0pt
.footer_message
background:
color: #2b2b2b
image: url('assets/email/footer_message_background.jpg')
repeat: repeat-y no-repeat
color: #8f8f8f
font-size: 9px
height: 50px
GIT
remote: git://github.com/radar/forem.git
revision: 515839e73bccbcb2f228e23082538bc86e7114fc
ref: 515839e73b
specs:
forem (1.0.0.beta1)
cancan
forem-redcarpet (= 1.0.0)
rails (~> 3.1)
simple_form
workflow (= 0.8.0)
GEM
remote: https://rubygems.org/
specs:
ZenTest (4.8.0)
actionmailer (3.2.7)
actionpack (= 3.2.7)
mail (~> 2.4.4)
actionpack (3.2.7)
activemodel (= 3.2.7)
activesupport (= 3.2.7)
builder (~> 3.0.0)
erubis (~> 2.7.0)
journey (~> 1.0.4)
rack (~> 1.4.0)
rack-cache (~> 1.2)
rack-test (~> 0.6.1)
sprockets (~> 2.1.3)
activeadmin (0.4.3)
bourbon (>= 1.0.0)
devise (>= 1.1.2)
fastercsv
formtastic (>= 2.0.0)
inherited_resources (> 0)
jquery-rails (>= 1.0.0)
kaminari (>= 0.13.0)
meta_search (>= 0.9.2)
rails (>= 3.0.0)
sass (>= 3.1.0)
activemodel (3.2.7)
activesupport (= 3.2.7)
builder (~> 3.0.0)
activerecord (3.2.7)
activemodel (= 3.2.7)
activesupport (= 3.2.7)
arel (~> 3.0.2)
tzinfo (~> 0.3.29)
activeresource (3.2.7)
activemodel (= 3.2.7)
activesupport (= 3.2.7)
activesupport (3.2.7)
i18n (~> 0.6)
multi_json (~> 1.0)
acts_as_tree (1.1.0)
activerecord (>= 3.0.0)
addressable (2.2.8)
airbrake (3.0.9)
activesupport
builder
arel (3.0.2)
autotest (4.4.6)
ZenTest (>= 4.4.1)
autotest-fsevent (0.2.8)
sys-uname
autotest-growl (0.2.16)
awesome_print (1.0.2)
aws-sdk (1.4.1)
httparty (~> 0.7)
json (~> 1.4)
nokogiri (>= 1.4.4)
uuidtools (~> 2.1)
aws-ses (0.4.4)
builder
mail (> 2.2.5)
mime-types
xml-simple
bcrypt-ruby (3.0.1)
blankslate (2.1.2.4)
bourbon (1.4.0)
sass (>= 3.1)
brakeman (1.6.2)
activesupport
erubis (~> 2.6)
fastercsv (~> 1.5)
haml (~> 3.0)
highline (~> 1.6)
i18n
json_pure
ruby2ruby (~> 1.2)
ruby_parser (= 2.3.1)
sass (~> 3.0)
terminal-table (~> 1.4)
builder (3.0.0)
cancan (1.6.7)
capistrano (2.12.0)
highline
net-scp (>= 1.0.0)
net-sftp (>= 2.0.0)
net-ssh (>= 2.0.14)
net-ssh-gateway (>= 1.1.0)
capistrano-ext (1.2.1)
capistrano (>= 1.0.0)
capistrano_colors (0.5.5)
capybara (1.1.2)
mime-types (>= 1.16)
nokogiri (>= 1.3.3)
rack (>= 1.0.0)
rack-test (>= 0.5.4)
selenium-webdriver (~> 2.0)
xpath (~> 0.1.4)
carrierwave (0.6.2)
activemodel (>= 3.2.0)
activesupport (>= 3.2.0)
carrierwave_direct (0.0.5)
carrierwave
fog
uuid
childprocess (0.3.5)
ffi (~> 1.0, >= 1.0.6)
chosen-rails (0.9.8)
railties (~> 3.0)
thor (~> 0.14)
chronic (0.6.7)
cocaine (0.2.1)
coderay (1.0.6)
coffee-rails (3.2.2)
coffee-script (>= 2.2.0)
railties (~> 3.2.0)
coffee-script (2.2.0)
coffee-script-source
execjs
coffee-script-source (1.3.1)
colored (1.2)
columnize (0.3.6)
country-select (1.1.1)
css_parser (1.2.6)
addressable
rdoc
daemons (1.1.8)
dalli (2.1.0)
database_cleaner (0.7.2)
debugger (1.1.3)
columnize (>= 0.3.1)
debugger-linecache (~> 1.1.1)
debugger-ruby_core_source (~> 1.1.2)
debugger-linecache (1.1.1)
debugger-ruby_core_source (>= 1.1.1)
debugger-ruby_core_source (1.1.3)
delayed_job (3.0.2)
activesupport (~> 3.0)
delayed_job_active_record (0.3.2)
activerecord (> 2.1.0)
delayed_job (~> 3.0.0)
devise (2.0.4)
bcrypt-ruby (~> 3.0)
orm_adapter (~> 0.0.3)
railties (~> 3.1)
warden (~> 1.1.1)
diff-lcs (1.1.3)
erubis (2.7.0)
excon (0.14.3)
execjs (1.3.2)
multi_json (~> 1.0)
fabrication (1.4.0)
fakeweb (1.3.0)
faraday (0.8.0)
multipart-post (~> 1.1)
fastercsv (1.5.4)
ffaker (1.14.0)
ffi (1.0.11)
fog (1.4.0)
builder
excon (~> 0.14.0)
formatador (~> 0.2.0)
mime-types
multi_json (~> 1.0)
net-scp (~> 1.0.4)
net-ssh (>= 2.1.3)
nokogiri (~> 1.5.0)
ruby-hmac
forem-redcarpet (1.0.0)
pygments.rb (= 0.2.4)
redcarpet (= 2.0.1)
formatador (0.2.3)
formtastic (2.1.1)
actionpack (~> 3.0)
friendly_id (4.0.5)
haml (3.1.4)
has_scope (0.5.1)
hashie (1.2.0)
highline (1.6.11)
hike (1.2.1)
httparty (0.8.3)
multi_json (~> 1.0)
multi_xml
httpauth (0.1)
i18n (0.6.0)
inherited_resources (1.3.1)
has_scope (~> 0.5.0)
responders (~> 0.6)
journey (1.0.4)
jquery-rails (2.0.2)
railties (>= 3.2.0, < 5.0)
thor (~> 0.14)
json (1.7.4)
json_pure (1.7.3)
kaminari (0.13.0)
actionpack (>= 3.0.0)
activesupport (>= 3.0.0)
railties (>= 3.0.0)
kgio (2.7.4)
launchy (2.1.0)
addressable (~> 2.2.6)
libv8 (3.3.10.4)
libwebsocket (0.1.5)
addressable
liquid (2.3.0)
macaddr (1.6.1)
systemu (~> 2.5.0)
mail (2.4.4)
i18n (>= 0.4.0)
mime-types (~> 1.16)
treetop (~> 1.4.8)
meta_search (1.1.3)
actionpack (~> 3.1)
activerecord (~> 3.1)
activesupport (~> 3.1)
polyamorous (~> 0.5.0)
method_source (0.7.1)
mime-types (1.19)
multi_json (1.3.6)
multi_xml (0.5.0)
multipart-post (1.1.5)
mysql2 (0.3.11)
net-scp (1.0.4)
net-ssh (>= 1.99.1)
net-sftp (2.0.5)
net-ssh (>= 2.0.9)
net-ssh (2.3.0)
net-ssh-gateway (1.1.0)
net-ssh (>= 1.99.1)
newrelic_rpm (3.3.5)
nokogiri (1.5.2)
notifier (0.1.4)
oauth2 (0.6.1)
faraday (~> 0.7)
httpauth (~> 0.1)
multi_json (~> 1.3)
omniauth (1.1.0)
hashie (~> 1.2)
rack
omniauth-facebook (1.3.0)
omniauth-oauth2 (~> 1.0.2)
omniauth-oauth2 (1.0.2)
oauth2 (~> 0.6.0)
omniauth (~> 1.0)
orm_adapter (0.0.7)
panda (1.5.0)
faraday (>= 0.7.0)
multi_json
ruby-hmac (>= 0.3.2)
typhoeus
paperclip (2.7.0)
activerecord (>= 2.3.0)
activesupport (>= 2.3.2)
cocaine (>= 0.0.2)
mime-types
parallel (0.5.16)
parallel_tests (0.8.1)
parallel
polyamorous (0.5.0)
activerecord (~> 3.0)
polyglot (0.3.3)
pr_geohash (1.0.0)
progressbar (0.11.0)
pry (0.9.9.6)
coderay (~> 1.0.5)
method_source (~> 0.7.1)
slop (>= 2.4.4, < 3)
pry-debugger (0.1.0)
debugger (~> 1.1.3)
pry (~> 0.9.9)
pry-rails (0.1.6)
pry
pygments.rb (0.2.4)
rubypython (~> 0.5.3)
rabl (0.6.10)
activesupport (>= 2.3.14)
multi_json (~> 1.0)
rack (1.4.1)
rack-cache (1.2)
rack (>= 0.4)
rack-ssl (1.3.2)
rack
rack-test (0.6.1)
rack (>= 1.0)
rails (3.2.7)
actionmailer (= 3.2.7)
actionpack (= 3.2.7)
activerecord (= 3.2.7)
activeresource (= 3.2.7)
activesupport (= 3.2.7)
bundler (~> 1.0)
railties (= 3.2.7)
rails_best_practices (1.9.1)
activesupport
awesome_print
colored
erubis
i18n
progressbar
sexp_processor
railties (3.2.7)
actionpack (= 3.2.7)
activesupport (= 3.2.7)
rack-ssl (~> 1.3.2)
rake (>= 0.8.7)
rdoc (~> 3.4)
thor (>= 0.14.6, < 2.0)
raindrops (0.8.0)
rake (0.9.2.2)
rdoc (3.12)
json (~> 1.4)
redcarpet (2.0.1)
responders (0.9.1)
railties (~> 3.1)
roadie (2.3.2)
actionmailer (> 3.0.0, < 3.3.0)
css_parser
nokogiri (>= 1.4.4)
sprockets
rscribd (1.3.0)
mime-types
rsolr (1.0.8)
builder (>= 2.1.2)
rspec (2.11.0)
rspec-core (~> 2.11.0)
rspec-expectations (~> 2.11.0)
rspec-mocks (~> 2.11.0)
rspec-core (2.11.1)
rspec-expectations (2.11.2)
diff-lcs (~> 1.1.3)
rspec-mocks (2.11.1)
rspec-rails (2.11.0)
actionpack (>= 3.0)
activesupport (>= 3.0)
railties (>= 3.0)
rspec (~> 2.11.0)
ruby-hmac (0.4.0)
ruby2ruby (1.3.1)
ruby_parser (~> 2.0)
sexp_processor (~> 3.0)
ruby_parser (2.3.1)
sexp_processor (~> 3.0)
rubypython (0.5.3)
blankslate (>= 2.1.2.3)
ffi (~> 1.0.7)
rubyzip (0.9.9)
rvm-capistrano (1.2.5)
capistrano (>= 2.0.0)
sass (3.1.17)
sass-rails (3.2.5)
railties (~> 3.2.0)
sass (>= 3.1.10)
tilt (~> 1.3)
scribd_fu (2.0.11)
rscribd
selenium-webdriver (2.25.0)
childprocess (>= 0.2.5)
libwebsocket (~> 0.1.3)
multi_json (~> 1.0)
rubyzip
sexp_processor (3.2.0)
shoulda (3.0.1)
shoulda-context (~> 1.0.0)
shoulda-matchers (~> 1.0.0)
shoulda-context (1.0.0)
shoulda-matchers (1.0.0)
simple-rss (1.2.3)
simple_form (2.0.2)
actionpack (~> 3.0)
activemodel (~> 3.0)
simplecov (0.6.2)
multi_json (~> 1.3)
simplecov-html (~> 0.5.3)
simplecov-html (0.5.3)
sitemap_generator (3.1.1)
builder
slop (2.4.4)
spork (1.0.0rc3)
spork-rails (3.2.0)
rails (>= 3.0.0, < 3.3.0)
spork (>= 1.0rc0)
sprockets (2.1.3)
hike (~> 1.2)
rack (~> 1.0)
tilt (~> 1.1, != 1.3.0)
sunspot (1.3.2)
pr_geohash (~> 1.0)
rsolr (~> 1.0.7)
sunspot_rails (1.3.2)
nokogiri
sunspot (= 1.3.2)
sunspot_solr (1.3.2)
sys-uname (0.9.0)
ffi (>= 1.0.0)
systemu (2.5.1)
terminal-table (1.4.5)
test-unit (2.4.8)
test_notifier (1.0.0)
notifier
therubyracer (0.10.1)
libv8 (~> 3.3.10)
thor (0.15.4)
tilt (1.3.3)
tinymce-rails (3.4.9)
railties (>= 3.1.1)
tinymce-rails-imageupload (3.4.9.1)
railties (>= 3.1)
tinymce-rails (~> 3.4.9)
treetop (1.4.10)
polyglot
polyglot (>= 0.3.1)
typhoeus (0.3.3)
mime-types
tzinfo (0.3.33)
uglifier (1.2.4)
execjs (>= 0.3.0)
multi_json (>= 1.0.2)
unicorn (4.3.1)
kgio (~> 2.6)
rack
raindrops (~> 0.7)
uuid (2.3.5)
macaddr (~> 1.0)
uuidtools (2.1.2)
warden (1.1.1)
rack (>= 1.0)
workflow (0.8.0)
xml-simple (1.1.1)
xpath (0.1.4)
nokogiri (~> 1.3)
PLATFORMS
ruby
DEPENDENCIES
activeadmin (~> 0.4.3)
acts_as_tree
airbrake
autotest
autotest-fsevent
autotest-growl
aws-sdk
aws-ses (~> 0.4.4)
bourbon
brakeman
cancan
capistrano
capistrano-ext
capistrano_colors
capybara
carrierwave_direct
chosen-rails
chronic
coffee-rails (~> 3.2.1)
country-select
daemons
dalli (~> 2.1.0)
database_cleaner
delayed_job_active_record
execjs
fabrication
fakeweb
ffaker
forem!
formtastic (~> 2.1.1)
friendly_id
haml (= 3.1.4)
jquery-rails
kaminari
launchy
liquid (~> 2.3.0)
mysql2
newrelic_rpm
omniauth-facebook
panda (~> 1.5.0)
paperclip (~> 2.7)
parallel_tests
pry-debugger
pry-rails
rabl
rails (= 3.2.7)
rails_best_practices
responders
roadie
rscribd
rspec
rspec-rails
rvm-capistrano
sass-rails (~> 3.2.3)
scribd_fu
shoulda
simple-rss
simplecov
sitemap_generator
spork-rails
sunspot_rails
sunspot_solr
test-unit
test_notifier
therubyracer
tinymce-rails (~> 3.4.9)
tinymce-rails-imageupload (~> 3.4.9)
uglifier (>= 1.0.3)
unicorn
!!! Strict
%html{:xmlns => "http://www.w3.org/1999/xhtml"}
%head
%meta{:content => "text/html; charset=utf-8", "http-equiv" => "Content-Type"}/
%meta{:content => "width=device-width, initial-scale=1.0", :name => "viewport"}/
%title= yield :subject
%link{rel: 'stylesheet', type: 'text/css', href: :email}
= yield :stylesheets
%style{type: 'text/css'}
:sass
// Mobile targetting
@media only screen and (max-device-width: 480px)
// For mobile phones in general
a[href^="tel"], a[href^="sms"]
text-decoration: none
color: black
pointer-events: none
cursor: default
.mobile_link
a[href^="tel"], a[href^="sms"]
text-decoration: default
color: orange !important
pointer-events: auto
cursor: default
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
// For ipad (tablets, smaller screens, etc)
a[href^="tel"], a[href^="sms"]
text-decoration: none
color: black
pointer-events: none
cursor: default
.mobile_link
a[href^="tel"], a[href^="sms"]
text-decoration: default
color: orange !important
pointer-events: auto
cursor: default
@media only screen and (-webkit-min-device-pixel-ratio: 2)
// For iphone 4(S)
// Adroid targetting
@media only screen and (-webkit-device-pixel-ratio:.75)
// Put CSS for low density (ldpi) Android layouts in here
@media only screen and (-webkit-device-pixel-ratio:1)
// Put CSS for medium density (mdpi) Android layouts in here
@media only screen and (-webkit-device-pixel-ratio:1.5)
// Put CSS for high density (hdpi) Android layouts in here
// end Android targeting
/ Targeting Windows Mobile
/[if IEMobile 7]
<style type="text/css">
</style>
/
/[if gte mso 9]
<style>
\/* Target Outlook 2007 and 2010 */
</style>
%body
/ Wrapper/Container
%table#backgroundTable{border: '0', cellpadding: '0', cellspacing: '0'}
%tr
%td
/ Content
%table{border: '0', cellpadding: '0', cellspacing: '0', align: 'center'}
%tr
%td{:valign => "top", :width => "88"}
=image_tag 'email/content_line_left.jpg', class: 'image_fix', width: '88'
%td{:valign => "top", :width => "424"}
= yield
%td{:valign => "top", :width => "88"}
=image_tag 'email/content_line_right.jpg', class: 'image_fix', width: '88'
/ Bottom
%table{border: '0', cellpadding: '0', cellspacing: '0', align: 'center'}
%tr
%td{:valign => "top", :width => "600"}
=image_tag 'email/bottom_line.jpg', class: 'image_fix', width: '600', height: '90'
/ Footer
%table{border: '0', cellpadding: '0', cellspacing: '0', align: 'center'}
%tr
%td{:valign => "top", :width => "38"}
=image_tag 'email/footer_line_left.jpg', class: 'image_fix', width: '38', height: '50'
%td.footer_message{:valign => "top", :width => "292"}
= "This email was sent to #{@user.email}. You can always edit your "
= link_to 'profile', user_url(@user.screen_name, only_path: false)
to adjust email preferences.
%td{:valign => "top", :width => "270"}
=image_tag 'email/footer_line_right.jpg', class: 'image_fix', width: '270', height: '50'
/ End of wrapper table
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title></title>
<link rel="stylesheet" type="text/css" href="email.css" />
<style type="text/css">
/* Mobile targetting */
@media only screen and (max-device-width: 480px) {
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: black; /* or whatever your want */
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration: default;
color: orange !important; /* or whatever your want */
pointer-events: auto;
cursor: default;
}
}
/* More Specific Targeting */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* For ipad (tablets, smaller screens, etc) */
/* Step 1a: Repeating for the iPad */
a[href^="tel"], a[href^="sms"] {
text-decoration: none;
color: blue; /* or whatever your want */
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
text-decoration: default;
color: orange !important;
pointer-events: auto;
cursor: default;
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
/* Put your iPhone 4g styles in here */
}
/* Following Android targeting from:
http://developer.android.com/guide/webapps/targeting.html
http://pugetworks.com/2011/04/css-media-queries-for-targeting-different-mobile-devices/ */
@media only screen and (-webkit-device-pixel-ratio:.75){
/* Put CSS for low density (ldpi) Android layouts in here */
}
@media only screen and (-webkit-device-pixel-ratio:1){
/* Put CSS for medium density (mdpi) Android layouts in here */
}
@media only screen and (-webkit-device-pixel-ratio:1.5){
/* Put CSS for high density (hdpi) Android layouts in here */
}
/* end Android targeting */
</style>
<!-- Targeting Windows Mobile -->
<!--[if IEMobile 7]>
<style type="text/css">
</style>
<![endif]-->
<!--
****************************************************
End Mobile Targetting
****************************************************
-->
<!--[if gte mso 9]>
<style>
/* Target Outlook 2007 and 2010 */
</style>
<![endif]-->
</head>
<body>
<!-- Wrapper/Container -->
<table cellpadding="0" cellspacing="0" border="0" id="backgroundTable">
<tr>
<td>
<!-- Content -->
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td width="88" valign="top">
<%= image_tag 'email/content_line_left.jpg', class: 'image_fix', width: '88' %>
</td>
<td width="424" valign="top"><%= yield %></td>
<td width="88" valign="top">
<%= image_tag 'email/content_line_right.jpg', class: 'image_fix', width: '88' %>
</td>
</tr>
</table>
<!-- Bottom -->
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td width="600" valign="top">
<%= image_tag 'email/bottom_line.jpg', class: 'image_fix', width: '600', height: '90' %>
</td>
</tr>
</table>
<!-- Footer -->
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td width="38" valign="top">
<%= image_tag 'email/footer_line_left.jpg', class: 'image_fix', width: '38', height: '50' %>
</td>
<td width="292" valign="top" class="footer_message">
This email was sent to <%=@user.email%>. You can always edit your <%= link_to 'profile', user_url(@user.screen_name, only_path: false) %> to adjust email preferences, social media connectivity, roles, genre references, and more.
</td>
<td width="270" valign="top">
<%= image_tag 'email/footer_line_right.jpg', class: 'image_fix', width: '270', height: '50' %>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End of wrapper table -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment