Class: Inkcite::Renderer::Responsive

Inherits:
Base
  • Object
show all
Defined in:
lib/inkcite/renderer/responsive.rb

Defined Under Namespace

Classes: Rule, TargetRule

Constant Summary collapse

BUTTON = 
'button'
DROP = 
'drop'
FILL = 
'fill'
FLUID = 
'fluid'
FLUID_DROP = 
'fluid-drop'
FLUID_STACK = 
'fluid-stack'
HIDE = 
'hide'
IMAGE = 
'img'
SHOW = 
'show'
SHOW_INLINE = 
'show-inline'
SWITCH = 
'switch'
SWITCH_UP = 
'switch-up'
TOGGLE = 
'toggle'
MOBILE_BGCOLOR =

For elements that take on different background properties when they go responsive

:'mobile-bgcolor'
MOBILE_BACKGROUND = 
:'mobile-background'
MOBILE_BACKGROUND_COLOR = 
:'mobile-background-color'
MOBILE_BACKGROUND_IMAGE = 
:'mobile-background-image'
MOBILE_BACKGROUND_REPEAT = 
:'mobile-background-repeat'
MOBILE_BACKGROUND_POSITION = 
:'mobile-background-position'
MOBILE_BACKGROUND_SIZE = 
:'mobile-background-size'
MOBILE_SRC = 
:'mobile-src'
MOBILE_PADDING =

Other mobile-specific properties

:'mobile-padding'

Constants inherited from Base

Base::BACKGROUND_COLOR, Base::BACKGROUND_GRADIENT, Base::BACKGROUND_IMAGE, Base::BACKGROUND_POSITION, Base::BACKGROUND_REPEAT, Base::BACKGROUND_SIZE, Base::BORDER_BOTTOM, Base::BORDER_COLLAPSE, Base::BORDER_LEFT, Base::BORDER_RADIUS, Base::BORDER_RIGHT, Base::BORDER_SPACING, Base::BORDER_TOP, Base::BOX_SHADOW, Base::DIMENSIONS, Base::DIRECTIONS, Base::FONT_FAMILY, Base::FONT_SIZE, Base::FONT_WEIGHT, Base::LETTER_SPACING, Base::LINE_HEIGHT, Base::LINK_COLOR, Base::MARGIN, Base::MARGIN_BOTTOM, Base::MARGIN_LEFT, Base::MARGIN_RIGHT, Base::MARGIN_TOP, Base::MAX_WIDTH, Base::NONE, Base::PADDING_X, Base::PADDING_Y, Base::POUND_SIGN, Base::TEXT_ALIGN, Base::TEXT_DECORATION, Base::TEXT_SHADOW, Base::TEXT_SHADOW_BLUR, Base::TEXT_SHADOW_OFFSET, Base::VERTICAL_ALIGN, Base::WEBKIT_ANIMATION, Base::WHITE_SPACE, Base::ZERO_WIDTH_NON_BREAKING_SPACE, Base::ZERO_WIDTH_SPACE

Class Method Summary collapse

Methods inherited from Base

#render

Class Method Details

.presets(ctx) ⇒ Object 



135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
 
# File 'lib/inkcite/renderer/responsive.rb', line 135

def self.presets ctx

  styles = []

  # HIDE, which can be used on any responsive element, makes it disappear
  # on mobile devices.
  styles << Rule.new(UNIVERSAL, HIDE, 'display: none !important;', false)

  # SHOW, which means the element is hidden on desktop but shown on mobile.
  styles << Rule.new('div', SHOW, 'display: block !important; max-height: none !important;', false)
  styles << Rule.new('div', SHOW_INLINE, 'display: inline !important; max-height: none !important;', false)

  # Brian Graves' Column Drop Pattern: Table goes to 100% width by way of
  # the FILL rule and its cells stack vertically.
  # http://briangraves.github.io/ResponsiveEmailPatterns/patterns/layouts/column-drop.html
  styles << Rule.new('td', DROP, 'display: block; width: 100% !important; background-size: 100% auto !important; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;', false)

  # Brian Graves' Column Switch Pattern: Allows columns in a table to
  # be reordered based on up and down states.
  # http://www.degdigital.com/blog/content-choreography-in-responsive-email/
  styles << Rule.new('td', SWITCH, 'display: table-footer-group; width: 100% !important; background-size: 100% auto !important;', false)
  styles << Rule.new('td', SWITCH_UP, 'display: table-header-group; width: 100% !important; background-size: 100% auto !important;', false)

  # FILL causes specific types of elements to expand to 100% of the available
  # width of the mobile device.
  styles << Rule.new('img', FILL, 'width: 100% !important; height: auto !important;', false)
  styles << Rule.new(['table', 'td'], FILL, 'width: 100% !important; background-size: 100% auto !important;', false)

  # For mobile-image tags.
  styles << Rule.new('span', IMAGE, 'display: block; background-position: center; background-size: cover;', false)

  # BUTTON causes ordinary links to transform into buttons based
  # on the styles configured by the developer.
  cfg = Button::Config.new(ctx)

  button_styles = {
      :color => "#{cfg.color} !important",
      :display => 'block'
  }

  button_styles[BACKGROUND_COLOR] = cfg.bgcolor unless cfg.bgcolor.blank?
  button_styles[:border] = cfg.border unless cfg.border.blank?
  button_styles[BORDER_BOTTOM] = cfg.border_bottom if cfg.bevel > 0
  button_styles[BORDER_RADIUS] = Renderer.px(cfg.border_radius) unless cfg.border_radius.blank?
  button_styles[FONT_WEIGHT] = cfg.font_weight unless cfg.font_weight.blank?
  button_styles[:height] = Renderer.px(cfg.height) if cfg.height > 0
  button_styles[MARGIN_TOP] = Renderer.px(cfg.margin_top) if cfg.margin_top > 0
  button_styles[:padding] = Renderer.px(cfg.padding) unless cfg.padding.blank?
  button_styles[TEXT_ALIGN] = 'center'
  button_styles[TEXT_SHADOW] = "0 -1px 0 #{cfg.text_shadow}" unless cfg.text_shadow.blank?

  styles << Rule.new('a', BUTTON, button_styles, false)

  styles
end