Inkcite 1.18.3

Div

Stylable and responsive generic content container

Inkcite’s {div} helper is a more powerful equivalent of the generic container you’ve used in other HTML development.

Usage

Example Inkcite markup:

 {div font=large mobile-text-align=center}
    ...
 {/div}

An example of the resulting email HTML output:

 
<div class="m1" style="color:#ff0000;font-family:serif;font-size:24px;font-weight:bold;line-height:24px">
  ...
</div>

Inkcite’s markup is 52% shorter than conventional HTML.

Attributes

align
Specifies the alignment of the text within this element. Set alignment to justify to enable justified text within this element.
background-gradient
The background gradient color for this element or none to disable an inherited gradient
background-gradient-position
Controls the position of the background gradient - accepts standard CSS background positions such as top left, bottom and center. The default depends on the shape of the gradient. radial gradients default to center whereas linear gradients default to the bottom.
background-gradient-shape
Controls the shape of the background gradient - either liner or radial.
bgcolor
The background color for this element
border
Specifies a CSS border that appears on all sides of this element - e.g. 2px solid #445566. You can also the border for a specific direction on the element using a direction like border-top.
border-radius
When a border is enabled for this element this attribute applies a radius to the border corners, in pixels.
color
Specifies the color of the text on or inside this element. Colors specified in CSS shorthard (e.g. #345) will automatically expand to the full declaration (e.g. #334455) to maximize compatibility.
display
Specifies the CSS display attribute for this container.
font
Specifies the named font style corresponding to one or more values set in the helpers.tsv file describing the font.
font-family
Specifies one or more font familes for this element in the order they will be used per CSS standards.
font-size
Specifies the size of the font in pixels for text on or inside of this element.
font-weight
Specifies the font weight for this element’s text either as a weight (e.g. 400) or simply as bold. Overrides the font weight attribute of the named font style if it is applied to this element.
height
The height of the container element in pixels
letter-spacing
Specifies the spacing in pixels between the letters on this element. Overrides the letter spacing if a named font style is applied to this element.
line-height
Specifies the line height in pixels by default, or if units are provided (e.g. 1.5em) they will be converted to pixels to maximize compatibility. Overrides the line height of the named font style if it is applied to this element.
margin
Specifies margin (in pixels) around this element. Supports directional margin (e.g. margin-left).
mobile
Specifies one of several built-in mobile Apply the “mobile” attribute or use the override if one was provided.
mobile-border
Specifies the border for this element when it appears on mobile devices. You may also specify side-specific border such as mobile-border-top.
mobile-display
Allows you to override the CSS display attribute for this element on mobile devices.
mobile-height
The height of the container element in pixels when viewed on a mobile device.
mobile-no-wrap
This boolean attribute indicates that, when viewed on a mobile device, the contents of this container element should not wrap.
mobile-width
The width of the container element in pixels when viewed on a mobile device.
mobile-wrap
This boolean attribute indicates that, if nowrap is also present, when viewed on a mobile device the contents of this container element will wrap normally.
nowrap
This boolean attribute indicates text within the container element should not wrap.
padding
Specifies the padding in pixels of the container element as either a single value applied to all sides (e.g. 10) or any of the standard CSS formats for directional padding (e.g. 10px 20px). Note! Outlook compatibility is not guaranteed if the latter format is used.
shadow
Enables text shadowing in the specified hex color. By default the shadow is offset directly below the text by one pixel.
shadow-blur
When shadow is enabled, overrides the CSS blur default value in pixels.
shadow-offset
When shadow is enabled, overrides the vertical CSS shadow offset, set in pixels.
valign
Specifies the vertical alignment of content within the container - top, middle or bottom
width
The desired width of the container element in pixels.

Project Config

Set the default values for all {Div} Helpers by setting these attributes in helpers.tsv:

outlook-text-shadows

When set to true enables verbose MSO-specific styles enabling text shadows in certain versions of Microsoft Outlook (e.g. 2007-2016) whenever shadow is applied to an element.