packages feed

mjml (empty) → 0.1.0.0

raw patch · 343 files changed

+30058/−0 lines, 343 filesdep +basedep +containersdep +directory

Dependencies added: base, containers, directory, filepath, mjml, tasty-bench, text, text-builder-linear, transformers

Files

+ CHANGELOG.md view
@@ -0,0 +1,5 @@+# Revision history for mjml++## 0.1.0.0 -- 2026-10-31++* First version.
+ LICENSE view
@@ -0,0 +1,21 @@+MIT License++Copyright (c) 2026 Kronor++Permission is hereby granted, free of charge, to any person obtaining a copy+of this software and associated documentation files (the "Software"), to deal+in the Software without restriction, including without limitation the rights+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell+copies of the Software, and to permit persons to whom the Software is+furnished to do so, subject to the following conditions:++The above copyright notice and this permission notice shall be included in all+copies or substantial portions of the Software.++THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE+SOFTWARE.
+ README.md view
@@ -0,0 +1,67 @@+# mjml++Render [MJML](https://mjml.io) responsive email templates to HTML from Haskell,+without Node.js.++MJML describes an email with a few components (sections, columns, text,+images, buttons) and compiles them to the nested tables, inline styles and+Outlook conditional comments that render the same in every mail client, with+columns that stack on phones. This package is a port of the reference+JavaScript implementation and produces the same HTML as MJML 5. To write+templates in Haskell with compile-time checks, see+[`mjml-hamlet`](https://github.com/kronor-io/mjml/tree/main/mjml-hamlet); for a full example with screenshots, see the+[repository README](https://github.com/kronor-io/mjml#readme).++```haskell+import Data.Text.IO qualified as T+import Text.Mjml (defaultOptions, renderText)++main :: IO ()+main =+    either print T.putStrLn $+        renderText defaultOptions+            "<mjml>\+            \  <mj-body>\+            \    <mj-section>\+            \      <mj-column>\+            \        <mj-text font-size=\"20px\">Your order is on its way</mj-text>\+            \        <mj-button href=\"https://example.com/track\">Track it</mj-button>\+            \      </mj-column>\+            \    </mj-section>\+            \  </mj-body>\+            \</mjml>"+```++## Escaping++Like MJML, the renderer copies attribute values and the content of ending tags+(`mj-text`, `mj-button`, `mj-raw`, …) into the output as they are: they are+HTML source, not text. Escape anything that comes from user data before putting+it into a document.++## Compatibility++The output is compared with MJML 5.4.1 for the 155 documents in+`test/fixtures`. The comparison ignores whitespace, attribute order and the+order of CSS declarations, and nothing else.++Not supported yet:++* `mj-include`, which MJML also ignores unless asked to read files;+* inlining `<mj-style inline="inline">` (the style is kept in the head);+* `mj-html-attributes`;+* minification and beautification.++## Updating the fixtures++The expected HTML is regenerated with the reference implementation:++```sh+npm ci --prefix scripts+node scripts/update-fixtures.mjs+```++## License++MIT. The fixture inputs come from [mrml](https://github.com/jdrouet/mrml),+also MIT; see `test/fixtures/NOTICE.md`.
+ bench/Main.hs view
@@ -0,0 +1,72 @@+-- | Rendering time for a typical email, and how it grows with the number of+-- rows and with the size of the text in a single element. Each pair of sizes+-- is 4× apart, so linear code takes about 4× as long for the larger one.+module Main (main) where++import Data.Text (Text)+import Data.Text qualified as T+import Test.Tasty.Bench++import Text.Mjml (defaultOptions, parseText, renderText)+++main :: IO ()+main =+    defaultMain+        [ bench "typical order confirmation" (nf render (rows 10))+        , bgroup+            "rows"+            [ bench "100" (nf render (rows 100))+            , bench "400" (nf render (rows 400))+            ]+        , bgroup+            "text content"+            [ bench "50 KB" (nf render (bigText 50))+            , bench "200 KB" (nf render (bigText 200))+            ]+        , bgroup+            "parse only, text content"+            [ bench "50 KB" (nf parse (bigText 50))+            , bench "200 KB" (nf parse (bigText 200))+            ]+        ]+  where+    render = either (error . show) id . renderText defaultOptions+    parse = either (error . show) (const ()) . parseText defaultOptions+++-- | A receipt with a header, one grouped two-column row per item, a total and+-- a button.+rows :: Int -> Text+rows n =+    T.concat $+        [ "<mjml><mj-head><mj-title>Order</mj-title><mj-attributes>"+        , "<mj-all font-family=\"Helvetica, Arial, sans-serif\" /><mj-text font-size=\"15px\" color=\"#333333\" />"+        , "</mj-attributes></mj-head><mj-body background-color=\"#f4f4f4\">"+        , "<mj-section background-color=\"#ffffff\" padding=\"24px\"><mj-column>"+        , "<mj-text font-size=\"22px\" font-weight=\"bold\">Thanks!</mj-text>"+        , "<mj-text>We have received your order.</mj-text></mj-column></mj-section>"+        ]+            <> concat+                [ [ "<mj-section background-color=\"#ffffff\" padding=\"0 24px\"><mj-group>"+                  , "<mj-column width=\"70%\"><mj-text>2 × Item number "+                  , T.pack (show i)+                  , "</mj-text></mj-column><mj-column width=\"30%\"><mj-text align=\"right\">€18.00</mj-text>"+                  , "</mj-column></mj-group></mj-section>"+                  ]+                | i <- [1 .. n]+                ]+            <> [ "<mj-section background-color=\"#ffffff\"><mj-column>"+               , "<mj-divider border-color=\"#dddddd\" border-width=\"1px\" />"+               , "<mj-text align=\"right\">Total €43.00</mj-text>"+               , "<mj-button href=\"https://example.com/track\">Track your parcel</mj-button>"+               , "</mj-column></mj-section></mj-body></mjml>"+               ]+++-- | One text element holding roughly this many kilobytes of HTML.+bigText :: Int -> Text+bigText kb =+    "<mjml><mj-body><mj-section><mj-column><mj-text>"+        <> T.replicate (kb * 1024 `div` 64) "<p>Lorem ipsum <b>dolor</b> sit amet, consectetur adipiscing.</p>"+        <> "</mj-text></mj-column></mj-section></mj-body></mjml>"
+ mjml.cabal view
@@ -0,0 +1,104 @@+cabal-version:      3.0+name:               mjml+version:            0.1.0.0+synopsis:           Render MJML responsive email templates to HTML+description:+  A Haskell implementation of the MJML email framework. It renders MJML+  documents to the same HTML that the reference JavaScript implementation+  produces, without Node.js at runtime.+license:            MIT+license-file:       LICENSE+author:             José Lorenzo Rodríguez+maintainer:         lorenzo@kronor.io+copyright:          2026 Kronor+category:           Text, Web, Email+build-type:         Simple+extra-doc-files:    CHANGELOG.md+                    README.md+extra-source-files: test/fixtures/*.mjml+                    test/fixtures/*.html+tested-with:        GHC ==9.10.3 || ==9.12.4 || ==9.14.1++common warnings+  ghc-options: -Wall -Wcompat -Widentities -Wincomplete-record-updates+               -Wincomplete-uni-patterns -Wredundant-constraints++library+  import:           warnings+  hs-source-dirs:   src+  default-language: GHC2021+  default-extensions:+    OverloadedStrings+    LambdaCase+    MultiWayIf+    DerivingStrategies+    OverloadedRecordDot+    DuplicateRecordFields+  exposed-modules:+    Text.Mjml+    Text.Mjml.Node+    Text.Mjml.Parser+    Text.Mjml.Render+    Text.Mjml.Js+    Text.Mjml.Schema+  other-modules:+    Text.Mjml.Component.Accordion+    Text.Mjml.Component.Body+    Text.Mjml.Component.Button+    Text.Mjml.Component.Carousel+    Text.Mjml.Component.Column+    Text.Mjml.Component.Divider+    Text.Mjml.Component.Group+    Text.Mjml.Component.Head+    Text.Mjml.Component.Hero+    Text.Mjml.Component.Image+    Text.Mjml.Component.Navbar+    Text.Mjml.Component.Raw+    Text.Mjml.Component.Section+    Text.Mjml.Component.Social+    Text.Mjml.Component.Spacer+    Text.Mjml.Component.Table+    Text.Mjml.Component.Text+    Text.Mjml.Component.Wrapper+    Text.Mjml.Components+    Text.Mjml.Skeleton+  build-depends:+      base >=4.20 && <5+    , containers >=0.6 && <0.9+    , text >=2.0 && <2.2+    , text-builder-linear >=0.1.3 && <0.2+    , transformers >=0.6 && <0.7++test-suite fixtures+  import:           warnings+  type:             exitcode-stdio-1.0+  hs-source-dirs:   test+  main-is:          Main.hs+  other-modules:    HtmlCompare+  default-language: GHC2021+  default-extensions:+    OverloadedStrings+    LambdaCase+    DerivingStrategies+  build-depends:+      base+    , containers+    , directory >=1.3 && <1.4+    , filepath >=1.4 && <1.6+    , mjml+    , text++benchmark render+  import:           warnings+  type:             exitcode-stdio-1.0+  hs-source-dirs:   bench+  main-is:          Main.hs+  default-language: GHC2021+  default-extensions:+    OverloadedStrings+  ghc-options:      -rtsopts+  build-depends:+      base+    , mjml+    , tasty-bench >=0.3 && <0.6+    , text
+ src/Text/Mjml.hs view
@@ -0,0 +1,98 @@+-- | Render MJML documents to HTML.+--+-- > renderText defaultOptions "<mjml><mj-body><mj-text>Hello</mj-text></mj-body></mjml>"+module Text.Mjml (+    -- * Rendering+    renderText,+    renderNode,+    Options (..),+    defaultOptions,+    MjmlError (..),+    -- * Documents+    Node (..),+    parseText,+    -- * Components+    Registry,+    defaultRegistry,+    endingTagNames,+) where++import Data.Text (Text)+import Data.Text qualified as T+import Data.Text.Builder.Linear (runBuilder)++import Text.Mjml.Component.Head (handleHead)+import Text.Mjml.Components (defaultRegistry, endingTagNames)+import Text.Mjml.Node (Node (..))+import Text.Mjml.Parser (ParseError (..), parseMjml)+import Text.Mjml.Render+import Text.Mjml.Skeleton (skeleton)+++data Options = Options+    { components :: Registry+    , webFonts :: [(Text, Text)]+    -- ^ Web fonts imported when a @font-family@ in the output names them.+    }+++defaultOptions :: Options+defaultOptions =+    Options+        { components = defaultRegistry+        , webFonts =+            [ ("Open Sans", "https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700")+            , ("Droid Sans", "https://fonts.googleapis.com/css?family=Droid+Sans:300,400,500,700")+            , ("Lato", "https://fonts.googleapis.com/css?family=Lato:300,400,500,700")+            , ("Roboto", "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700")+            , ("Ubuntu", "https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700")+            ]+        }+++newtype MjmlError = MjmlError Text+    deriving stock (Show, Eq)+++parseText :: Options -> Text -> Either MjmlError Node+parseText opts src = case parseMjml (endingTagNames opts.components) src of+    Left (ParseError e) -> Left (MjmlError e)+    Right n -> Right n+++renderText :: Options -> Text -> Either MjmlError Text+renderText opts src = parseText opts src >>= renderNode opts+++-- | Render a parsed document, rooted at @mjml@.+renderNode :: Options -> Node -> Either MjmlError Text+renderNode opts root+    | tagName root /= "mjml" = Left (MjmlError "Malformed MJML. Check that your structure is correct and enclosed in <mjml> tags.")+    | otherwise = case [c | c <- children root, tagName c == "mj-body"] of+        [] -> Left (MjmlError "Malformed MJML. Check that your structure is correct and enclosed in <mjml> tags.")+        body : _ ->+            let rootAttr k = lookup k (attributes root)+                g0 =+                    (initialGlobalData opts.webFonts)+                        { lang = nonEmptyOr "und" (rootAttr "lang")+                        , dir = nonEmptyOr "auto" (rootAttr "dir")+                        , forceOWADesktop = rootAttr "owa" == Just "desktop"+                        }+                go = do+                    mapM_ handleHead [c | c <- take 1 [h | h <- children root, tagName h == "mj-head"]]+                    mi <- instantiate opts.components "" [] rootProps [] body+                    maybe (pure "") render mi+                (content', gd) = runR go g0+                beforeDoctype =+                    [ T.strip (content c)+                    | c <- children root+                    , tagName c == "mj-raw"+                    , lookup "position" (attributes c) == Just "file-start"+                    ]+                prefix = if null beforeDoctype then "" else T.intercalate "\n" beforeDoctype <> "\n"+             in Right (runBuilder (skeleton gd prefix (runBuilder content')))+  where+    nonEmptyOr d = \case+        Just v | not (T.null v) -> v+        _ -> d+    rootProps = Props 0 True True 1 1 []
+ src/Text/Mjml/Component/Accordion.hs view
@@ -0,0 +1,375 @@+-- | @mj-accordion@ and its parts: @mj-accordion-element@,+-- @mj-accordion-title@ and @mj-accordion-text@.+module Text.Mjml.Component.Accordion (+    mjAccordion,+    mjAccordionElement,+    mjAccordionTitle,+    mjAccordionText,+) where++import Data.List (intersperse)+import Data.Map.Strict qualified as Map+import Data.Text (Text)+import Data.Text qualified as T++import Text.Mjml.Component.Section (setContext)+import Text.Mjml.Node (Node (..), element)+import Text.Mjml.Render+++-- | The attributes an accordion and each element hand down to their children.+childrenAttrNames :: [Text]+childrenAttrNames =+    [ "border"+    , "icon-align"+    , "icon-width"+    , "icon-height"+    , "icon-position"+    , "icon-wrapped-url"+    , "icon-wrapped-alt"+    , "icon-unwrapped-url"+    , "icon-unwrapped-alt"+    ]+++childrenAttr :: Self -> Attrs+childrenAttr s = [(k, v) | k <- childrenAttrNames, Just v <- [attr s k]]+++iconAttributes :: [(Text, Text)]+iconAttributes =+    [ ("icon-align", "enum(top,middle,bottom)")+    , ("icon-width", "unit(px,%)")+    , ("icon-height", "unit(px,%)")+    , ("icon-wrapped-url", "string")+    , ("icon-wrapped-alt", "string")+    , ("icon-unwrapped-url", "string")+    , ("icon-unwrapped-alt", "string")+    , ("icon-position", "enum(left,right)")+    ]+++paddingAttributes :: [(Text, Text)]+paddingAttributes =+    [ ("padding-bottom", "unit(px,%)")+    , ("padding-left", "unit(px,%)")+    , ("padding-right", "unit(px,%)")+    , ("padding-top", "unit(px,%)")+    , ("padding", "unit(px,%){1,4}")+    ]+++mjAccordion :: Component+mjAccordion =+    (defComponent "mj-accordion" build')+        { allowedAttributes =+            [ ("container-background-color", "color")+            , ("border", "string")+            , ("font-family", "string")+            ]+                <> iconAttributes+                <> paddingAttributes+        , defaults =+            [ ("border", "2px solid black")+            , ("font-family", "Ubuntu, Helvetica, Arial, sans-serif")+            , ("icon-align", "middle")+            , ("icon-wrapped-url", "https://i.imgur.com/bIXv1bk.png")+            , ("icon-wrapped-alt", "+")+            , ("icon-unwrapped-url", "https://i.imgur.com/w4uTygT.png")+            , ("icon-unwrapped-alt", "-")+            , ("icon-position", "right")+            , ("icon-height", "32px")+            , ("icon-width", "32px")+            , ("padding", "10px 25px")+            ]+        , componentHeadStyle = Just (const accordionHeadStyle)+        }+  where+    build' s =+        let inst =+                (defInstance s (render' inst))+                    { getStyles = \case+                        "table" ->+                            [ style "width" "100%"+                            , style "border-collapse" "collapse"+                            , ("border", attr s "border")+                            , style "border-bottom" "none"+                            , ("font-family", attr s "font-family")+                            ]+                        _ -> []+                    , childContext = setContext [("accordionFontFamily", attr s "font-family")] (context s)+                    }+         in inst++    render' inst = do+        kids <- renderChildren inst defChildOptions {childAttributes = childrenAttr (self inst)}+        pure $+            mconcat+                [ "<table"+                , htmlAttributes+                    inst+                    [ ("cellspacing", AV "0")+                    , ("cellpadding", AV "0")+                    , ("class", AV "mj-accordion")+                    , ("style", AStyleOf "table")+                    ]+                , "><tbody>"+                , kids+                , "</tbody></table>"+                ]+++accordionHeadStyle :: Text+accordionHeadStyle =+    T.unlines+        [ "noinput.mj-accordion-checkbox { display:block!important; }"+        , "@media yahoo, only screen and (min-width:0) {"+        , "  .mj-accordion-element { display:block; }"+        , "  .mj-accordion-checkbox[type=\"checkbox\"], .mj-accordion-less { display:none!important; }"+        , "  .mj-accordion-checkbox[type=\"checkbox\"] + * .mj-accordion-title { cursor:pointer; touch-action:manipulation; -webkit-user-select:none; -moz-user-select:none; user-select:none; }"+        , "  .mj-accordion-checkbox[type=\"checkbox\"] + * .mj-accordion-content { overflow:hidden; display:none; }"+        , "  .mj-accordion-checkbox[type=\"checkbox\"] + * .mj-accordion-more { display:block!important; }"+        , "  .mj-accordion-checkbox:checked + * .mj-accordion-content { display:block; }"+        , "  .mj-accordion-checkbox:checked + * .mj-accordion-more { display:none!important; }"+        , "  .mj-accordion-checkbox:checked + * .mj-accordion-less { display:block!important; }"+        , "}"+        , ".moz-text-html input.mj-accordion-checkbox + * .mj-accordion-title { cursor: auto; touch-action: auto; -webkit-user-select: auto; -moz-user-select: auto; user-select: auto; }"+        , ".moz-text-html input.mj-accordion-checkbox + * .mj-accordion-content { overflow: hidden; display: block; }"+        , ".moz-text-html input.mj-accordion-checkbox + * .mj-accordion-ico { display: none; }"+        , "@goodbye { @gmail }"+        ]+++mjAccordionElement :: Component+mjAccordionElement =+    (defComponent "mj-accordion-element" build')+        { allowedAttributes =+            [ ("background-color", "color")+            , ("border", "string")+            , ("font-family", "string")+            ]+                <> iconAttributes+        }+  where+    build' s =+        let inst =+                (defInstance s (render' inst))+                    { getStyles = \case+                        "td" -> [style "padding" "0px", ("background-color", attr s "background-color")]+                        "label" -> [style "font-size" "13px", ("font-family", attr s "font-family")]+                        "input" -> [style "display" "none"]+                        _ -> []+                    , childContext = setContext [("elementFontFamily", attr s "font-family")] (context s)+                    }+         in inst++    -- handleMissingChildren: a title or text left out is rendered empty, built+    -- outside the tree with only the inherited attributes.+    handleMissingChildren inst = do+        let s = self inst+            kids = children (node s)+            inherited = childrenAttr s+            has t = any ((== t) . tagName) kids+            standalone c =+                render . build c $+                    Self+                        { attrs = defaults c `merge` inherited+                        , attrIndex = Map.fromList (defaults c `merge` inherited)+                        , props = Props 0 True True 0 0 []+                        , context = childContext inst+                        , node = element (name c) [] []+                        , registry = registry s+                        , component = c+                        , mjClassScope = mjClassScope s+                        }+        title <- if has "mj-accordion-title" then pure [] else (: []) <$> standalone mjAccordionTitle+        body <- renderChildren inst defChildOptions {childAttributes = inherited}+        text <- if has "mj-accordion-text" then pure [] else (: []) <$> standalone mjAccordionText+        pure (mconcat (intersperse "\n" (title <> [body] <> text)))++    render' inst = do+        let s = self inst+        inner <- handleMissingChildren inst+        pure $+            mconcat+                [ "<tr"+                , htmlAttributes inst [("class", maybe ANone AV (attr s "css-class"))]+                , "><td"+                , htmlAttributes inst [("style", AStyleOf "td")]+                , "><label"+                , htmlAttributes inst [("class", AV "mj-accordion-element"), ("style", AStyleOf "label")]+                , ">"+                , conditionalTag True $+                    "<input"+                        <> htmlAttributes+                            inst+                            [ ("class", AV "mj-accordion-checkbox")+                            , ("type", AV "checkbox")+                            , ("style", AStyleOf "input")+                            ]+                        <> " />"+                , "<div>"+                , inner+                , "</div></label></td></tr>"+                ]+++-- | @resolveFontFamily@: the element's own @font-family@ when it set one,+-- otherwise the enclosing element's, otherwise the accordion's.+--+-- MJML checks the attributes written on the element itself, so an+-- @mj-attributes@ default does not count as the element's own choice.+resolveFontFamily :: Self -> Maybe Text+resolveFontFamily s+    | any ((== "font-family") . fst) (attributes (node s)) = attr s "font-family"+    | truthy (ctx s "elementFontFamily") = ctx s "elementFontFamily"+    | truthy (ctx s "accordionFontFamily") = ctx s "accordionFontFamily"+    | otherwise = Nothing+++mjAccordionTitle :: Component+mjAccordionTitle =+    (defComponent "mj-accordion-title" build')+        { endingTag = True+        , allowedAttributes =+            [ ("background-color", "color")+            , ("color", "color")+            , ("font-size", "unit(px)")+            , ("font-family", "string")+            , ("font-weight", "string")+            ]+                <> paddingAttributes+        , defaults = [("font-size", "13px"), ("padding", "16px")]+        }+  where+    build' s =+        let inst =+                (defInstance s (pure rendered))+                    { getStyles = \case+                        "td" ->+                            [ style "width" "100%"+                            , ("background-color", attr s "background-color")+                            , ("color", attr s "color")+                            , ("font-size", attr s "font-size")+                            , ("font-family", resolveFontFamily s)+                            , ("font-weight", attr s "font-weight")+                            , ("padding", attr s "padding")+                            , ("padding-bottom", attr s "padding-bottom")+                            , ("padding-left", attr s "padding-left")+                            , ("padding-right", attr s "padding-right")+                            , ("padding-top", attr s "padding-top")+                            ]+                        "table" -> [style "width" "100%", ("border-bottom", attr s "border")]+                        "td2" ->+                            [ style "padding" "16px"+                            , ("background", attr s "background-color")+                            , ("vertical-align", attr s "icon-align")+                            ]+                        "img" ->+                            [ style "display" "none"+                            , ("width", attr s "icon-width")+                            , ("height", attr s "icon-height")+                            ]+                        _ -> []+                    }+            renderTitle =+                "<td"+                    <> htmlAttributes inst [("class", maybe ANone AV (attr s "css-class")), ("style", AStyleOf "td")]+                    <> ">"+                    <> fromText (getContent s)+                    <> "</td>"+            renderIcons =+                conditionalTag True $+                    mconcat+                        [ "<td"+                        , htmlAttributes inst [("class", AV "mj-accordion-ico"), ("style", AStyleOf "td2")]+                        , "><img"+                        , htmlAttributes+                            inst+                            [ ("src", maybe ANone AV (attr s "icon-wrapped-url"))+                            , ("alt", maybe ANone AV (attr s "icon-wrapped-alt"))+                            , ("class", AV "mj-accordion-more")+                            , ("style", AStyleOf "img")+                            ]+                        , " /><img"+                        , htmlAttributes+                            inst+                            [ ("src", maybe ANone AV (attr s "icon-unwrapped-url"))+                            , ("alt", maybe ANone AV (attr s "icon-unwrapped-alt"))+                            , ("class", AV "mj-accordion-less")+                            , ("style", AStyleOf "img")+                            ]+                        , " /></td>"+                        ]+            elements =+                if attr s "icon-position" == Just "right"+                    then [renderTitle, renderIcons]+                    else [renderIcons, renderTitle]+            rendered =+                mconcat+                    [ "<div"+                    , htmlAttributes inst [("class", AV "mj-accordion-title")]+                    , "><table"+                    , htmlAttributes+                        inst+                        [("cellspacing", AV "0"), ("cellpadding", AV "0"), ("style", AStyleOf "table")]+                    , "><tbody><tr>"+                    , mconcat (intersperse "\n" elements)+                    , "</tr></tbody></table></div>"+                    ]+         in inst+++mjAccordionText :: Component+mjAccordionText =+    (defComponent "mj-accordion-text" build')+        { endingTag = True+        , allowedAttributes =+            [ ("background-color", "color")+            , ("font-size", "unit(px)")+            , ("font-family", "string")+            , ("font-weight", "string")+            , ("letter-spacing", "unitWithNegative(px,em)")+            , ("line-height", "unit(px,%,)")+            , ("color", "color")+            ]+                <> paddingAttributes+        , defaults = [("font-size", "13px"), ("line-height", "1"), ("padding", "16px")]+        }+  where+    build' s =+        let inst =+                (defInstance s (pure rendered))+                    { getStyles = \case+                        "td" ->+                            [ ("background", attr s "background-color")+                            , ("font-size", attr s "font-size")+                            , ("font-family", resolveFontFamily s)+                            , ("font-weight", attr s "font-weight")+                            , ("letter-spacing", attr s "letter-spacing")+                            , ("line-height", attr s "line-height")+                            , ("color", attr s "color")+                            , ("padding", attr s "padding")+                            , ("padding-bottom", attr s "padding-bottom")+                            , ("padding-left", attr s "padding-left")+                            , ("padding-right", attr s "padding-right")+                            , ("padding-top", attr s "padding-top")+                            ]+                        "table" -> [style "width" "100%", ("border-bottom", attr s "border")]+                        _ -> []+                    }+            rendered =+                mconcat+                    [ "<div"+                    , htmlAttributes inst [("class", AV "mj-accordion-content")]+                    , "><table"+                    , htmlAttributes+                        inst+                        [("cellspacing", AV "0"), ("cellpadding", AV "0"), ("style", AStyleOf "table")]+                    , "><tbody><tr><td"+                    , htmlAttributes inst [("class", maybe ANone AV (attr s "css-class")), ("style", AStyleOf "td")]+                    , ">"+                    , fromText (getContent s)+                    , "</td></tr></tbody></table></div>"+                    ]+         in inst
+ src/Text/Mjml/Component/Body.hs view
@@ -0,0 +1,72 @@+-- | @mj-body@.+module Text.Mjml.Component.Body (+    mjBody,+) where++import Control.Monad.Trans.State.Strict (get)+import Data.Text qualified as T++import Text.Mjml.Render+++mjBody :: Component+mjBody =+    (defComponent "mj-body" build')+        { allowedAttributes =+            [ ("width", "unit(px)")+            , ("background-color", "color")+            , ("id", "string")+            ]+        , defaults = [("width", "600px")]+        }+  where+    build' s =+        let inst =+                (defInstance s (render' inst))+                    { getStyles = \case+                        "body" -> bodyStyles+                        "div" -> bodyStyles+                        _ -> []+                    , childContext = merge (context s) [("containerWidth", attrOr s "width" "")]+                    }+         in inst+      where+        bodyStyles =+            [ style "word-spacing" "normal"+            , ("background-color", attr s "background-color")+            ]++    render' inst = do+        let s = self inst+        g <- get+        kids <- renderChildren inst defChildOptions+        let previewHtml+                | T.null (preview g) = ""+                | otherwise =+                    "<div style=\"display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;\">"+                        <> fromText (preview g)+                        <> "</div>"+        pure $+            mconcat+                [ "<body"+                , htmlAttributes+                    inst+                    [ ("id", maybe ANone AV (attr s "id"))+                    , ("class", maybe ANone AV (attr s "css-class"))+                    , ("style", AStyleOf "body")+                    ]+                , ">"+                , previewHtml+                , "<div"+                , htmlAttributes inst $+                    [("aria-label", AV (title g)) | not (T.null (title g))]+                        <> [ ("aria-roledescription", AV "email")+                           , ("role", AV "article")+                           , ("lang", AV (lang g))+                           , ("dir", AV (dir g))+                           , ("style", AStyleOf "div")+                           ]+                , ">"+                , kids+                , "</div></body>"+                ]
+ src/Text/Mjml/Component/Button.hs view
@@ -0,0 +1,167 @@+-- | @mj-button@.+module Text.Mjml.Component.Button (+    mjButton,+) where+++import Text.Mjml.Js (showNumber)+import Text.Mjml.Render+++mjButton :: Component+mjButton =+    (defComponent "mj-button" build')+        { endingTag = True+        , allowedAttributes =+            [ ("align", "enum(left,center,right)")+            , ("background-color", "color")+            , ("border-bottom", "string")+            , ("border-left", "string")+            , ("border-radius", "string")+            , ("border-right", "string")+            , ("border-top", "string")+            , ("border", "string")+            , ("color", "color")+            , ("container-background-color", "color")+            , ("font-family", "string")+            , ("font-size", "unit(px)")+            , ("font-style", "string")+            , ("font-weight", "string")+            , ("height", "unit(px,%)")+            , ("href", "string")+            , ("name", "string")+            , ("title", "string")+            , ("inner-padding", "unit(px,%){1,4}")+            , ("letter-spacing", "unitWithNegative(px,em)")+            , ("line-height", "unit(px,%,)")+            , ("padding-bottom", "unit(px,%)")+            , ("padding-left", "unit(px,%)")+            , ("padding-right", "unit(px,%)")+            , ("padding-top", "unit(px,%)")+            , ("padding", "unit(px,%){1,4}")+            , ("rel", "string")+            , ("target", "string")+            , ("text-decoration", "string")+            , ("text-transform", "string")+            , ("vertical-align", "enum(top,bottom,middle)")+            , ("text-align", "enum(left,right,center)")+            , ("width", "unit(px,%)")+            ]+        , defaults =+            [ ("align", "center")+            , ("background-color", "#414141")+            , ("border", "none")+            , ("border-radius", "3px")+            , ("color", "#ffffff")+            , ("font-family", "Ubuntu, Helvetica, Arial, sans-serif")+            , ("font-size", "13px")+            , ("font-weight", "normal")+            , ("inner-padding", "10px 25px")+            , ("line-height", "120%")+            , ("padding", "10px 25px")+            , ("target", "_blank")+            , ("text-decoration", "none")+            , ("text-transform", "none")+            , ("vertical-align", "middle")+            ]+        }+++build' :: Self -> Instance+build' s = inst+  where+    inst = (defInstance s (pure rendered)) {getStyles = stylesFor}++    stylesFor = \case+        "table" ->+            [ style "border-collapse" "separate"+            , ("width", attr s "width")+            , style "line-height" "100%"+            ]+        "td" ->+            [ ("border", attr s "border")+            , ("border-bottom", attr s "border-bottom")+            , ("border-left", attr s "border-left")+            , ("border-radius", attr s "border-radius")+            , ("border-right", attr s "border-right")+            , ("border-top", attr s "border-top")+            , style "cursor" "auto"+            , ("font-style", attr s "font-style")+            , ("height", attr s "height")+            , ("mso-padding-alt", attr s "inner-padding")+            , ("text-align", attr s "text-align")+            , ("background", attr s "background-color")+            ]+        "content" ->+            [ style "display" "inline-block"+            , ("width", calculateAWidth (attr s "width"))+            , ("background", attr s "background-color")+            , ("color", attr s "color")+            , ("font-family", attr s "font-family")+            , ("font-size", attr s "font-size")+            , ("font-style", attr s "font-style")+            , ("font-weight", attr s "font-weight")+            , ("line-height", attr s "line-height")+            , ("letter-spacing", attr s "letter-spacing")+            , style "margin" "0"+            , ("text-decoration", attr s "text-decoration")+            , ("text-transform", attr s "text-transform")+            , ("padding", attr s "inner-padding")+            , style "mso-padding-alt" "0px"+            , ("border-radius", attr s "border-radius")+            ]+        _ -> []++    calculateAWidth = \case+        Just width+            | truthy (Just width) ->+                let (parsed, unit) = widthParser True width+                    innerPaddings = shorthandValue s "inner-padding" "left" + shorthandValue s "inner-padding" "right"+                 in if unit /= "px"+                        then Nothing+                        else Just (showNumber (parsed - innerPaddings - borders (boxWidths s)) <> "px")+        _ -> Nothing++    tag = if truthy (attr s "href") then "a" else "p"++    rendered =+        mconcat+            [ "<table"+            , htmlAttributes+                inst+                [ ("border", AV "0")+                , ("cellpadding", AV "0")+                , ("cellspacing", AV "0")+                , ("role", AV "presentation")+                , ("style", AStyleOf "table")+                ]+            , "><tbody><tr><td"+            , htmlAttributes+                inst+                [ ("align", AV "center")+                , ( "bgcolor"+                  , case attr s "background-color" of+                        Just "none" -> ANone+                        v -> maybe ANone AV v+                  )+                , ("role", AV "presentation")+                , ("style", AStyleOf "td")+                , ("valign", maybe ANone AV (attr s "vertical-align"))+                ]+            , "><"+            , tag+            , htmlAttributes+                inst+                [ ("href", maybe ANone AV (attr s "href"))+                , ("name", maybe ANone AV (attr s "name"))+                , ("rel", maybe ANone AV (attr s "rel"))+                , ("title", maybe ANone AV (attr s "title"))+                , ("style", AStyleOf "content")+                , ("target", if tag == "a" then maybe ANone AV (attr s "target") else ANone)+                ]+            , ">"+            , fromText (getContent s)+            , "</"+            , tag+            , "></td></tr></tbody></table>"+            ]
+ src/Text/Mjml/Component/Carousel.hs view
@@ -0,0 +1,444 @@+-- | @mj-carousel@ and @mj-carousel-image@.+module Text.Mjml.Component.Carousel (+    mjCarousel,+    mjCarouselImage,+) where++import Data.Maybe (fromMaybe)+import Data.Text (Text)+import Data.Text qualified as T++import Text.Mjml.Component.Section (setContext)+import Text.Mjml.Js (parseIntJs, showNumber)+import Text.Mjml.Node (Node (..))+import Text.Mjml.Render+++-- | The identifier MJML draws at random in the carousel's constructor, kept+-- in the instance's props.+carouselIdKey :: Text+carouselIdKey = "mj-carousel-id"+++-- | Which of the image's methods the carousel is calling: MJML renders the+-- same children three times, through @renderRadio@, @renderThumbnail@ and+-- @render@.+imageModeKey :: Text+imageModeKey = "mj-carousel-render"+++tshow :: Int -> Text+tshow = T.pack . show+++mjCarousel :: Component+mjCarousel =+    (defComponent "mj-carousel" build')+        { allowedAttributes =+            [ ("align", "enum(left,center,right)")+            , ("border-radius", "string")+            , ("container-background-color", "color")+            , ("icon-width", "unit(px,%)")+            , ("left-icon", "string")+            , ("padding", "unit(px,%){1,4}")+            , ("padding-top", "unit(px,%)")+            , ("padding-bottom", "unit(px,%)")+            , ("padding-left", "unit(px,%)")+            , ("padding-right", "unit(px,%)")+            , ("right-icon", "string")+            , ("thumbnails", "enum(visible,hidden,supported)")+            , ("tb-border", "string")+            , ("tb-border-radius", "string")+            , ("tb-hover-border-color", "color")+            , ("tb-selected-border-color", "color")+            , ("tb-width", "unit(px,%)")+            ]+        , defaults =+            [ ("align", "center")+            , ("border-radius", "6px")+            , ("icon-width", "44px")+            , ("left-icon", "https://i.imgur.com/xTh3hln.png")+            , ("right-icon", "https://i.imgur.com/os7o9kz.png")+            , ("thumbnails", "visible")+            , ("tb-border", "2px solid transparent")+            , ("tb-border-radius", "6px")+            , ("tb-hover-border-color", "#fead0d")+            , ("tb-selected-border-color", "#ccc")+            ]+        , prepare = \s -> do+            i <- nextId+            pure s {props = (props s) {extra = merge (extra (props s)) [(carouselIdKey, i)]}}+        }+  where+    build' s = inst+      where+        carouselId = fromMaybe "" (lookup carouselIdKey (extra (props s)))+        kids = children (node s)+        len = length kids+        a = attrOr s++        inst =+            (defInstance s render')+                { getStyles = \case+                    "carousel.div" ->+                        [ style "display" "table"+                        , style "width" "100%"+                        , style "table-layout" "fixed"+                        , style "text-align" "center"+                        , style "font-size" "0px"+                        ]+                    "carousel.table" ->+                        [ style "caption-side" "top"+                        , style "display" "table-caption"+                        , style "table-layout" "fixed"+                        , style "width" "100%"+                        ]+                    "images.td" -> [style "padding" "0px"]+                    "controls.div" -> [style "display" "none", style "mso-hide" "all"]+                    "controls.img" ->+                        [style "display" "block", ("width", attr s "icon-width"), style "height" "auto"]+                    "controls.td" ->+                        [ style "font-size" "0px"+                        , style "display" "none"+                        , style "mso-hide" "all"+                        , style "padding" "0px"+                        ]+                    _ -> []+                , childContext = setContext [("thumbnails", attr s "thumbnails")] (context s)+                , instanceHeadStyle = Just (const headStyle')+                }++        -- With no parent width in the context MJML's division is NaN, which+        -- lodash's min skips, so the default is always 110px.+        thumbnailsWidth+            | len == 0 = "0"+            | otherwise = case attr s "tb-width" of+                Just w | truthy (Just w) -> w+                _ -> "110px"++        modeOptions mode = defChildOptions {childProps = [(imageModeKey, mode)]}++        generateRadios =+            renderChildren+                inst+                (modeOptions "radio") {childAttributes = [("carouselId", carouselId)]}++        generateThumbnails+            | a "thumbnails" "" `notElem` ["visible", "supported"] = pure ""+            | otherwise =+                renderChildren+                    inst+                    (modeOptions "thumbnail")+                        { childAttributes =+                            [ ("tb-border", a "tb-border" "")+                            , ("tb-border-radius", a "tb-border-radius" "")+                            , ("tb-width", thumbnailsWidth)+                            , ("carouselId", carouselId)+                            ]+                        }++        generateControls direction icon =+            mconcat+                [ "<td"+                , htmlAttributes+                    inst+                    [ ("class", AV ("mj-carousel-" <> carouselId <> "-icons-cell"))+                    , ("style", AStyleOf "controls.td")+                    ]+                , "><div"+                , htmlAttributes+                    inst+                    [ ("class", AV ("mj-carousel-" <> direction <> "-icons"))+                    , ("style", AStyleOf "controls.div")+                    ]+                , ">"+                , mconcat+                    [ mconcat+                        [ "<label"+                        , htmlAttributes+                            inst+                            [ ("for", AV ("mj-carousel-" <> carouselId <> "-radio-" <> tshow i))+                            , ("class", AV ("mj-carousel-" <> direction <> " mj-carousel-" <> direction <> "-" <> tshow i))+                            ]+                        , "><img"+                        , htmlAttributes+                            inst+                            [ ("src", maybe ANone AV icon)+                            , ("alt", AV direction)+                            , ("style", AStyleOf "controls.img")+                            , ("width", AV (showNumber (parseIntJs (a "icon-width" ""))))+                            ]+                        , " /></label>"+                        ]+                    | i <- [1 .. len]+                    ]+                , "</div></td>"+                ]++        generateImages = do+            images <- renderChildren inst defChildOptions {childAttributes = borderRadius}+            pure $+                mconcat+                    [ "<td"+                    , htmlAttributes inst [("style", AStyleOf "images.td")]+                    , "><div"+                    , htmlAttributes inst [("class", AV "mj-carousel-images")]+                    , ">"+                    , images+                    , "</div></td>"+                    ]++        borderRadius = [("border-radius", a "border-radius" "")]++        generateCarousel = do+            images <- generateImages+            pure $+                mconcat+                    [ "<table"+                    , htmlAttributes+                        inst+                        [ ("style", AStyleOf "carousel.table")+                        , ("border", AV "0")+                        , ("cellpadding", AV "0")+                        , ("cellspacing", AV "0")+                        , ("width", AV "100%")+                        , ("role", AV "presentation")+                        , ("class", AV "mj-carousel-main")+                        ]+                    , "><tbody><tr>"+                    , generateControls "previous" (attr s "left-icon")+                    , images+                    , generateControls "next" (attr s "right-icon")+                    , "</tr></tbody></table>"+                    ]++        renderFallback = case kids of+            [] -> pure ""+            k : _ ->+                msoConditionalTag False+                    <$> renderChildren inst defChildOptions {childNodes = Just [k], childAttributes = borderRadius}++        render' = do+            radios <- generateRadios+            thumbnails <- generateThumbnails+            carousel <- generateCarousel+            fallback <- renderFallback+            pure $+                msoConditionalTag+                    True+                    ( mconcat+                        [ "<div"+                        , htmlAttributes inst [("class", AV "mj-carousel")]+                        , ">"+                        , radios+                        , "<div"+                        , htmlAttributes+                            inst+                            [ ("class", AV ("mj-carousel-content mj-carousel-" <> carouselId <> "-content"))+                            , ("style", AStyleOf "carousel.div")+                            ]+                        , ">"+                        , thumbnails+                        , carousel+                        , "</div></div>"+                        ]+                    )+                    <> fallback++        -- componentHeadStyle+        headStyle'+            | len == 0 = ""+            | otherwise = carouselCss <> "\n" <> fallbackCss+        cid = carouselId+        rep str n = T.replicate (max 0 n) str+        range = [0 .. len - 1]+        selectorList f = T.intercalate "," (map f range)+        carouselCss =+            T.unlines+                [ ".mj-carousel { -webkit-user-select: none; -moz-user-select: none; user-select: none; }"+                , ".mj-carousel-" <> cid <> "-icons-cell { display: table-cell !important; width: " <> a "icon-width" "" <> " !important; }"+                , ".mj-carousel-radio, .mj-carousel-next, .mj-carousel-previous { display: none !important; }"+                , ".mj-carousel-thumbnail, .mj-carousel-next, .mj-carousel-previous { touch-action: manipulation; }"+                , selectorList (\i -> ".mj-carousel-" <> cid <> "-radio:checked " <> rep "+ * " i <> "+ .mj-carousel-content .mj-carousel-image")+                    <> " { display: none !important; }"+                , selectorList (\i -> radioChecked i <> "+ .mj-carousel-content .mj-carousel-image-" <> tshow (i + 1))+                    <> " { display: block !important; }"+                , ".mj-carousel-previous-icons,\n.mj-carousel-next-icons,\n"+                    <> selectorList (\i -> radioChecked i <> "+ .mj-carousel-content .mj-carousel-next-" <> tshow ((i + (1 `mod` len) + len) `mod` len + 1))+                    <> ",\n"+                    <> selectorList (\i -> radioChecked i <> "+ .mj-carousel-content .mj-carousel-previous-" <> tshow ((i - (1 `mod` len) + len) `mod` len + 1))+                    <> " { display: block !important; }"+                , selectorList (\i -> radioChecked i <> "+ .mj-carousel-content .mj-carousel-" <> cid <> "-thumbnail-" <> tshow (i + 1))+                    <> " { border-color: "+                    <> a "tb-selected-border-color" ""+                    <> " !important; }"+                , selectorList (\i -> radioChecked i <> "+ .mj-carousel-content .mj-carousel-" <> cid <> "-thumbnail\n          ")+                    <> " { display: inline-block !important; }"+                , ".mj-carousel-image img + div, .mj-carousel-thumbnail img + div { display: none !important; }"+                , selectorList (\i -> ".mj-carousel-" <> cid <> "-thumbnail:hover " <> rep "+ * " (len - i - 1) <> "+ .mj-carousel-main .mj-carousel-image")+                    <> " { display: none !important; }"+                , ".mj-carousel-thumbnail:hover { border-color: " <> a "tb-hover-border-color" "" <> " !important; }"+                , selectorList (\i -> ".mj-carousel-" <> cid <> "-thumbnail-" <> tshow (i + 1) <> ":hover " <> rep "+ * " (len - i - 1) <> "+ .mj-carousel-main .mj-carousel-image-" <> tshow (i + 1))+                    <> " { display: block !important; }"+                ]+        radioChecked i = ".mj-carousel-" <> cid <> "-radio-" <> tshow (i + 1) <> ":checked " <> rep "+ * " (len - i - 1)+        fallbackCss =+            T.unlines+                [ ".mj-carousel noinput { display:block !important; }"+                , ".mj-carousel noinput .mj-carousel-image-1 { display: block !important;  }"+                , ".mj-carousel noinput .mj-carousel-arrows, .mj-carousel noinput .mj-carousel-thumbnails { display: none !important; }"+                , "[owa] .mj-carousel-thumbnail { display: none !important; }"+                , "@media screen yahoo {"+                , ".mj-carousel-" <> cid <> "-icons-cell, .mj-carousel-previous-icons, .mj-carousel-next-icons { display: none !important; }"+                , ".mj-carousel-" <> cid <> "-radio-1:checked " <> rep "+ *" (len - 1) <> "+ .mj-carousel-content .mj-carousel-" <> cid <> "-thumbnail-1 { border-color: transparent; }"+                , "}"+                ]+++mjCarouselImage :: Component+mjCarouselImage =+    (defComponent "mj-carousel-image" build')+        { endingTag = True+        , allowedAttributes =+            [ ("alt", "string")+            , ("href", "string")+            , ("rel", "string")+            , ("target", "string")+            , ("title", "string")+            , ("src", "string")+            , ("thumbnails-src", "string")+            , ("border-radius", "string")+            , ("tb-border", "string")+            , ("tb-border-radius", "string")+            ]+        , defaults = [("alt", ""), ("target", "_blank")]+        }+  where+    build' s = inst+      where+        p = props s+        i = index p+        imgIndex = tshow (i + 1)+        containerWidth = fromMaybe "" (ctx s "containerWidth")+        carouselId = attrOr s "carouselId" ""+        opt k = maybe ANone AV (attr s k)++        hasThumbnailsSupported =+            let thumbnails = case attr s "thumbnails" of+                    Just t | truthy (Just t) -> Just t+                    _ -> ctx s "thumbnails"+             in thumbnails == Just "supported"++        inst =+            (defInstance s render')+                { getStyles = \case+                    "images.img" ->+                        [ ("border-radius", attr s "border-radius")+                        , style "display" "block"+                        , style "width" containerWidth+                        , style "max-width" "100%"+                        , style "height" "auto"+                        ]+                    "images.firstImageDiv" -> []+                    "images.otherImageDiv" -> [style "display" "none", style "mso-hide" "all"]+                    "radio.input" -> [style "display" "none", style "mso-hide" "all"]+                    "thumbnails.a" ->+                        [ ("border", attr s "tb-border")+                        , ("border-radius", attr s "tb-border-radius")+                        , style "display" (if hasThumbnailsSupported then "none" else "inline-block")+                        , style "overflow" "hidden"+                        , ("width", attr s "tb-width")+                        ]+                    "thumbnails.img" -> [style "display" "block", style "width" "100%", style "height" "auto"]+                    _ -> []+                }++        render' = pure $ case lookup imageModeKey (extra p) of+            Just "radio" -> renderRadio+            Just "thumbnail" -> renderThumbnail+            _ -> renderImage++        renderThumbnail =+            mconcat+                [ "<a"+                , htmlAttributes+                    inst+                    [ ("style", AStyleOf "thumbnails.a")+                    , ("href", AV ("#" <> imgIndex))+                    , ("target", opt "target")+                    , ( "class"+                      , AV+                            ( "mj-carousel-thumbnail mj-carousel-"+                                <> carouselId+                                <> "-thumbnail mj-carousel-"+                                <> carouselId+                                <> "-thumbnail-"+                                <> imgIndex+                                <> " "+                                <> suffixCssClasses (attr s "css-class") "thumbnail"+                            )+                      )+                    ]+                , "><label"+                , htmlAttributes inst [("for", AV ("mj-carousel-" <> carouselId <> "-radio-" <> imgIndex))]+                , "><img"+                , htmlAttributes+                    inst+                    [ ("style", AStyleOf "thumbnails.img")+                    , ( "src"+                      , case attr s "thumbnails-src" of+                            Just t | truthy (Just t) -> AV t+                            _ -> opt "src"+                      )+                    , ("alt", opt "alt")+                    , ("width", AV (showNumber (parseIntJs (attrOr s "tb-width" ""))))+                    ]+                , " /></label></a>"+                ]++        renderRadio =+            "<input"+                <> htmlAttributes+                    inst+                    [ ("class", AV ("mj-carousel-radio mj-carousel-" <> carouselId <> "-radio mj-carousel-" <> carouselId <> "-radio-" <> imgIndex))+                    , ("checked", if i == 0 then AV "checked" else ANone)+                    , ("type", AV "radio")+                    , ("name", AV ("mj-carousel-radio-" <> carouselId))+                    , ("id", AV ("mj-carousel-" <> carouselId <> "-radio-" <> imgIndex))+                    , ("style", AStyleOf "radio.input")+                    ]+                <> " />"++        renderImage =+            let image =+                    "<img"+                        <> htmlAttributes+                            inst+                            [ ("title", opt "title")+                            , ("src", opt "src")+                            , ("alt", opt "alt")+                            , ("style", AStyleOf "images.img")+                            , ("width", AV (showNumber (parseIntJs containerWidth)))+                            , ("border", AV "0")+                            ]+                        <> " />"+                cssClass = attrOr s "css-class" ""+             in mconcat+                    [ "<div"+                    , htmlAttributes+                        inst+                        [ ("class", AV ("mj-carousel-image mj-carousel-image-" <> imgIndex <> " " <> cssClass))+                        , ("style", AStyleOf (if i == 0 then "images.firstImageDiv" else "images.otherImageDiv"))+                        ]+                    , ">"+                    , case attr s "href" of+                        Just href+                            | truthy (Just href) ->+                                "<a"+                                    <> htmlAttributes inst [("href", AV href), ("rel", opt "rel"), ("target", AV "_blank")]+                                    <> ">"+                                    <> image+                                    <> "</a>"+                        _ -> image+                    , "</div>"+                    ]
+ src/Text/Mjml/Component/Column.hs view
@@ -0,0 +1,358 @@+-- | @mj-column@.+module Text.Mjml.Component.Column (+    mjColumn,+) where++import Data.Maybe (fromMaybe, isJust)+import Data.Text (Text)+import Data.Text qualified as T++import Text.Mjml.Component.Section (setContext)+import Text.Mjml.Js (parseFloatJs, parseIntJs, roundJs, showNumber, toFixedNumber)+import Text.Mjml.Render+++mjColumn :: Component+mjColumn =+    (defComponent "mj-column" build')+        { allowedAttributes =+            [ ("background-color", "color")+            , ("border", "string")+            , ("border-bottom", "string")+            , ("border-left", "string")+            , ("border-radius", "string")+            , ("border-right", "string")+            , ("border-top", "string")+            , ("direction", "enum(ltr,rtl)")+            , ("inner-background-color", "color")+            , ("padding-bottom", "unit(px,%)")+            , ("padding-left", "unit(px,%)")+            , ("padding-right", "unit(px,%)")+            , ("padding-top", "unit(px,%)")+            , ("inner-border", "string")+            , ("inner-border-bottom", "string")+            , ("inner-border-left", "string")+            , ("inner-border-radius", "string")+            , ("inner-border-right", "string")+            , ("inner-border-top", "string")+            , ("padding", "unit(px,%){1,4}")+            , ("vertical-align", "enum(top,bottom,middle)")+            , ("width", "unit(px,%)")+            ]+        , defaults = [("direction", "ltr"), ("vertical-align", "top")]+        }+++normalizeUnitValue :: Double -> Double+normalizeUnitValue = toFixedNumber 6+++normalizePxValue :: Double -> Double+normalizePxValue = roundJs+++formatPadding :: Double -> Double -> Double -> Double -> Text -> Text+formatPadding t r b l unit+    | unit == "px" = T.unwords [showNumber (normalizePxValue x) <> "px" | x <- [t, r, b, l]]+    | otherwise = T.unwords [showNumber (normalizeUnitValue x) <> unit | x <- [t, r, b, l]]+++build' :: Self -> Instance+build' s = inst+  where+    p = props s+    inst =+        (defInstance s renderColumnOuter)+            { getStyles = stylesFor+            , childContext = setContext [("containerWidth", Just childWidth)] (context s)+            }++    containerWidth = fromMaybe "" (ctx s "containerWidth")+    isInGroup = truthy (ctx s "isInGroup")+    direction = ctx s "direction"++    -- getChildContext+    childWidth =+        let bw = boxWidths s+            innerBorders = borderValue s (Just "left") "inner-border" + borderValue s (Just "right") "inner-border"+            allPaddings = paddings bw + borders bw + innerBorders+            width = case attr s "width" of+                Just w | truthy (Just w) -> w+                _ -> showNumber (parseFloatJs containerWidth / fromIntegral (nonRawSiblings p)) <> "px"+            (parsed, unit) = widthParser False width+         in if unit == "%"+                then showNumber (parseFloatJs containerWidth * parsed / 100 - allPaddings) <> "px"+                else showNumber (parsed - allPaddings) <> "px"++    hasBorderRadius = nonEmpty (attr s "border-radius")+    hasInnerBorderRadius = nonEmpty (attr s "inner-border-radius")+    nonEmpty = \case+        Just v -> not (T.null v)+        Nothing -> False++    tableStyle =+        [ ("background-color", attr s "background-color")+        , ("border", attr s "border")+        , ("border-bottom", attr s "border-bottom")+        , ("border-left", attr s "border-left")+        , ("border-radius", attr s "border-radius")+        , ("border-right", attr s "border-right")+        , ("border-top", attr s "border-top")+        , ("vertical-align", attr s "vertical-align")+        ]+            `merge` [style "border-collapse" "separate" | hasBorderRadius]++    stylesFor = \case+        "div" ->+            [ style "font-size" "0px"+            , style "text-align" "left"+            , ("direction", attr s "direction")+            , style "display" "inline-block"+            , ("vertical-align", attr s "vertical-align")+            , style "width" mobileWidth+            ]+                `merge` mobileGutterStyles+        "table" ->+            ( if hasGutter+                then+                    [ ("background-color", attr s "inner-background-color")+                    , ("border", attr s "inner-border")+                    , ("border-bottom", attr s "inner-border-bottom")+                    , ("border-left", attr s "inner-border-left")+                    , ("border-radius", attr s "inner-border-radius")+                    , ("border-right", attr s "inner-border-right")+                    , ("border-top", attr s "inner-border-top")+                    ]+                else tableStyle+            )+                `merge` [style "border-collapse" "separate" | hasInnerBorderRadius]+        "tdOutlook" ->+            [("vertical-align", attr s "vertical-align"), style "width" widthAsPixel]+                `merge` outlookGutterStyles+        "gutter" ->+            tableStyle+                `merge` [ ("padding", attr s "padding")+                        , ("padding-top", attr s "padding-top")+                        , ("padding-right", attr s "padding-right")+                        , ("padding-bottom", attr s "padding-bottom")+                        , ("padding-left", attr s "padding-left")+                        ]+        _ -> []++    mobileWidth+        | attr s "mobileWidth" /= Just "mobileWidth" = "100%"+        | isInGroup && hasColumnGutter =+            let (parsed, unit) = desktopWidth+             in if unit == "%"+                    then showNumber parsed <> "%"+                    else showNumber (normalizeUnitValue (parsed / parseIntJs containerWidth * 100)) <> "%"+        | otherwise = case attr s "width" of+            Nothing -> showNumber (fromInteger (truncate (100 / fromIntegral (nonRawSiblings p) :: Double))) <> "%"+            Just width ->+                let (parsed, unit) = widthParser False width+                 in if unit == "%"+                        then width+                        else showNumber (normalizeUnitValue (parsed / parseIntJs containerWidth * 100)) <> "%"++    widthAsPixel =+        let (parsed, unit) = widthParser False (parsedWidthString)+         in if unit == "%"+                then showNumber (normalizePxValue (parseFloatJs containerWidth * parsed / 100)) <> "px"+                else showNumber (normalizePxValue parsed) <> "px"++    parsedWidth =+        let width = case attr s "width" of+                Just w | truthy (Just w) -> w+                _ -> showNumber (100 / fromIntegral (nonRawSiblings p)) <> "%"+         in widthParser False width++    parsedWidthString = let (v, u) = parsedWidth in showNumber v <> u++    hasColumnGutter = nonEmpty (ctx s "gutter")++    desktopWidth =+        let (parsed, unit) = parsedWidth+         in if not hasColumnGutter+                then (if unit == "px" then normalizePxValue parsed else parsed, unit)+                else+                    let gutter = normalizedGutterValue unit+                        siblings = fromIntegral (sibling p)+                        reduction = gutter * (siblings - 1) / siblings+                        reduced = max 0 (normalizeUnitValue (parsed - reduction))+                     in if unit == "px"+                            then+                                let floorWidth = fromInteger (floor reduced)+                                    fractional = reduced - floorWidth+                                    extraPixels = max 0 (min siblings (roundJs (siblings * fractional)))+                                 in (floorWidth + (if fromIntegral (index p) < extraPixels then 1 else 0), unit)+                            else (reduced, unit)++    normalizedGutterValue targetUnit = case ctx s "gutter" of+        Just g+            | truthy (Just g) ->+                let (parsed, unit) = widthParser False g+                 in if+                        | unit == targetUnit -> parsed+                        | targetUnit == "%" && unit == "px" -> parsed / parseFloatJs containerWidth * 100+                        | targetUnit == "px" && unit == "%" -> parseFloatJs containerWidth * parsed / 100+                        | otherwise -> parsed+        _ -> 0++    desktopUnit = snd parsedWidth++    desktopGutterClassName =+        let gutterUnit = desktopUnit+            gutter = normalizedGutterValue gutterUnit+            unitToken = if gutterUnit == "%" then "per" else gutterUnit+            directionToken = if direction == Just "rtl" then "-rtl" else ""+            normalized = if gutterUnit == "px" then normalizePxValue gutter else gutter+            gutterToken = T.replace "." "-" (showNumber (normalizeUnitValue normalized))+         in mconcat+                [ "mj-column-gutter-"+                , T.pack (show (sibling p))+                , "-"+                , T.pack (show (index p + 1))+                , "-"+                , unitToken+                , "-"+                , gutterToken+                , directionToken+                ]++    desktopPaddingValues unit =+        let gutter = normalizedGutterValue unit+            normalized = if unit == "px" then normalizePxValue gutter else gutter+            isPx = unit == "px"+            halfLeading = if isPx then fromInteger (ceiling (normalized / 2)) else normalized / 2+            halfTrailing = if isPx then fromInteger (floor (normalized / 2)) else normalized / 2+         in if+                | sibling p == 1 -> (0, 0, 0, 0)+                | direction == Just "rtl" ->+                    (0, if isFirst p then 0 else halfTrailing, 0, if isLast p then 0 else halfLeading)+                | otherwise ->+                    (0, if isLast p then 0 else halfLeading, 0, if isFirst p then 0 else halfTrailing)++    desktopPadding =+        let (t, r, b, l) = desktopPaddingValues desktopUnit in formatPadding t r b l desktopUnit++    mobilePadding =+        let half = normalizedGutterValue "%" / 2+         in formatPadding+                (if isFirst p then 0 else half)+                0+                (if isLast p then 0 else half)+                0+                "%"++    mobileGutterStyles+        | not hasColumnGutter = []+        | isInGroup = [style "padding" desktopPadding]+        | otherwise = [style "padding" mobilePadding]++    outlookGutterStyles+        | not hasColumnGutter = []+        | otherwise = let (t, r, b, l) = desktopPaddingValues "px" in [style "padding" (formatPadding t r b l "px")]++    hasGutter = any (isJust . attr s) ["padding", "padding-bottom", "padding-left", "padding-right", "padding-top"]++    columnClass = do+        let (parsed, unit) = if hasColumnGutter then desktopWidth else parsedWidth+            normalized = if unit == "px" then normalizePxValue parsed else parsed+            classNb = T.replace "." "-" (showNumber normalized)+            className = case unit of+                "%" -> "mj-column-per-" <> classNb+                _ -> "mj-column-px-" <> classNb+        addMediaQuery className (Just (showNumber normalized, unit)) Nothing+        if hasColumnGutter && not isInGroup+            then addMediaQuery desktopGutterClassName Nothing (Just desktopPadding)+            else pure ()+        pure className++    renderColumn = do+        kids <-+            renderChildren+                inst+                defChildOptions+                    { renderer = \c ->+                        if rawElement (component (self c))+                            then render c+                            else do+                                body <- render c+                                let cs = self c+                                pure $+                                    mconcat+                                        [ "<tr><td"+                                        , htmlAttributes+                                            c+                                            [ ("align", maybe ANone AV (attr cs "align"))+                                            , ("class", maybe ANone AV (attr cs "css-class"))+                                            , ( "style"+                                              , AStyles+                                                    [ ("background", attr cs "container-background-color")+                                                    , style "font-size" "0px"+                                                    , ("padding", attr cs "padding")+                                                    , ("padding-top", attr cs "padding-top")+                                                    , ("padding-right", attr cs "padding-right")+                                                    , ("padding-bottom", attr cs "padding-bottom")+                                                    , ("padding-left", attr cs "padding-left")+                                                    , style "word-break" "break-word"+                                                    ]+                                              )+                                            ]+                                        , ">"+                                        , body+                                        , "</td></tr>"+                                        ]+                    }+        pure $+            mconcat+                [ "<table"+                , htmlAttributes+                    inst+                    [ ("border", AV "0")+                    , ("cellpadding", AV "0")+                    , ("cellspacing", AV "0")+                    , ("role", AV "presentation")+                    , ("style", AStyleOf "table")+                    , ("width", AV "100%")+                    ]+                , "><tbody>"+                , kids+                , "</tbody></table>"+                ]++    renderGutter = do+        col <- renderColumn+        pure $+            mconcat+                [ "<table"+                , htmlAttributes inst $+                    [ ("border", AV "0")+                    , ("cellpadding", AV "0")+                    , ("cellspacing", AV "0")+                    , ("role", AV "presentation")+                    , ("width", AV "100%")+                    ]+                        <> [("style", AStyles [style "border-collapse" "separate"]) | hasBorderRadius]+                , "><tbody><tr><td"+                , htmlAttributes inst [("style", AStyleOf "gutter")]+                , ">"+                , col+                , "</td></tr></tbody></table>"+                ]++    renderColumnOuter = do+        defaultClass <- columnClass+        let classesName =+                T.unwords $+                    [defaultClass]+                        <> [desktopGutterClassName | hasColumnGutter]+                        <> ["mj-outlook-group-fix"]+                        <> [c | Just c <- [attr s "css-class"], truthy (Just c)]+        body <- if hasGutter then renderGutter else renderColumn+        pure $+            "<div"+                <> htmlAttributes inst [("class", AV classesName), ("style", AStyleOf "div")]+                <> ">"+                <> body+                <> "</div>"
+ src/Text/Mjml/Component/Divider.hs view
@@ -0,0 +1,96 @@+-- | @mj-divider@.+module Text.Mjml.Component.Divider (+    mjDivider,+) where++import Data.Maybe (fromMaybe)+import Data.Text (Text)+import Data.Text qualified as T++import Text.Mjml.Js (parseIntJs, showNumber)+import Text.Mjml.Render+++mjDivider :: Component+mjDivider =+    (defComponent "mj-divider" build')+        { allowedAttributes =+            [ ("border-color", "color")+            , ("border-style", "string")+            , ("border-width", "unit(px)")+            , ("container-background-color", "color")+            , ("padding", "unit(px,%){1,4}")+            , ("padding-bottom", "unit(px,%)")+            , ("padding-left", "unit(px,%)")+            , ("padding-right", "unit(px,%)")+            , ("padding-top", "unit(px,%)")+            , ("width", "unit(px,%)")+            , ("align", "enum(left,center,right)")+            ]+        , defaults =+            [ ("border-color", "#000000")+            , ("border-style", "solid")+            , ("border-width", "4px")+            , ("padding", "10px 25px")+            , ("width", "100%")+            , ("align", "center")+            ]+        }+++build' :: Self -> Instance+build' s = inst+  where+    inst = (defInstance s (pure rendered)) {getStyles = stylesFor}++    computeAlign = case attr s "align" of+        Just "left" -> "0px"+        Just "right" -> "0px 0px 0px auto"+        _ -> "0px auto"++    p =+        [ style "border-top" (T.intercalate " " [fromMaybe "" (attr s ("border-" <> a)) | a <- ["style", "width", "color"]])+        , style "font-size" "1px"+        , style "margin" computeAlign+        , ("width", attr s "width")+        ]++    stylesFor = \case+        "p" -> p+        "outlook" -> p `merge` [style "width" outlookWidth]+        _ -> []++    outlookWidth :: Text+    outlookWidth =+        let containerWidth = fromMaybe "" (ctx s "containerWidth")+            paddingSize = shorthandValue s "padding" "left" + shorthandValue s "padding" "right"+            width = fromMaybe "" (attr s "width")+            (parsed, unit) = widthParser True width+         in case unit of+                "%" ->+                    let effectiveWidth = parseIntJs containerWidth - paddingSize+                        percentMultiplier = parseIntJs (showNumber parsed) / 100+                     in showNumber (effectiveWidth * percentMultiplier) <> "px"+                "px" -> width+                _ -> showNumber (parseIntJs containerWidth - paddingSize) <> "px"++    rendered =+        mconcat+            [ "<p"+            , htmlAttributes inst [("style", AStyleOf "p")]+            , "></p>"+            , startConditionalTag+            , "<table"+            , htmlAttributes+                inst+                [ ("align", maybe ANone AV (attr s "align"))+                , ("border", AV "0")+                , ("cellpadding", AV "0")+                , ("cellspacing", AV "0")+                , ("style", AStyleOf "outlook")+                , ("role", AV "presentation")+                , ("width", AV outlookWidth)+                ]+            , "><tr><td style=\"height:0;line-height:0;\">&nbsp;</td></tr></table>"+            , endConditionalTag+            ]
+ src/Text/Mjml/Component/Group.hs view
@@ -0,0 +1,179 @@+-- | @mj-group@: columns that stay side by side on mobile.+module Text.Mjml.Component.Group (+    mjGroup,+) where++import Data.Maybe (fromMaybe)+import Data.Text qualified as T++import Text.Mjml.Component.Section (setContext)+import Text.Mjml.Js (parseFloatJs, parseIntJs, showNumber)+import Text.Mjml.Node (Node (..))+import Text.Mjml.Render+++mjGroup :: Component+mjGroup =+    (defComponent "mj-group" build')+        { allowedAttributes =+            [ ("background-color", "color")+            , ("direction", "enum(ltr,rtl)")+            , ("vertical-align", "enum(top,bottom,middle)")+            , ("width", "unit(px,%)")+            ]+        , defaults = [("direction", "ltr")]+        }+++build' :: Self -> Instance+build' s = inst+  where+    p = props s+    inst =+        (defInstance s renderGroup)+            { getStyles = stylesFor+            , childContext = childCtx+            }++    containerWidth = fromMaybe "" (ctx s "containerWidth")++    groupWidth =+        let paddingSize = shorthandValue s "padding" "left" + shorthandValue s "padding" "right"+            width = case attr s "width" of+                Just w | truthy (Just w) -> w+                _ -> showNumber (parseFloatJs containerWidth / fromIntegral (nonRawSiblings p)) <> "px"+            (parsed, unit) = widthParser False width+         in if unit == "%"+                then showNumber (parseFloatJs containerWidth * parsed / 100 - paddingSize) <> "px"+                else showNumber (parsed - paddingSize) <> "px"++    childCtx =+        setContext+            [ ("containerWidth", Just groupWidth)+            , ("nonRawSiblings", Just (T.pack (show (length (children (node s))))))+            , ("isInGroup", Just "true")+            , ("direction", attr s "direction")+            ]+            (context s)++    stylesFor = \case+        "div" ->+            [ style "font-size" "0"+            , style "line-height" "0"+            , style "text-align" "left"+            , style "display" "inline-block"+            , style "width" "100%"+            , ("direction", attr s "direction")+            , ("vertical-align", attr s "vertical-align")+            , ("background-color", attr s "background-color")+            ]+        "tdOutlook" ->+            [ ("vertical-align", attr s "vertical-align")+            , style "width" widthAsPixel+            ]+        _ -> []++    parsedWidth =+        let width = case attr s "width" of+                Just w | truthy (Just w) -> w+                _ -> showNumber (100 / fromIntegral (nonRawSiblings p)) <> "%"+         in widthParser False width++    widthAsPixel =+        let (v, u) = parsedWidth+            (parsed, unit) = widthParser False (showNumber v <> u)+         in if unit == "%"+                then showNumber (parseFloatJs containerWidth * parsed / 100) <> "px"+                else showNumber parsed <> "px"++    columnClass = do+        let (parsed, unit) = parsedWidth+            nb = showNumber (parseIntJs (showNumber parsed))+            className = case unit of+                "%" -> "mj-column-per-" <> nb+                _ -> "mj-column-px-" <> nb+        addMediaQuery className (Just (showNumber parsed, unit)) Nothing+        pure className++    -- The Outlook cell width for a child: a column's pixel width, or its+    -- width attribute.+    elementWidth = \case+        Nothing -> showNumber (parseIntJs containerWidth / parseIntJs (T.pack (show (nonRawSiblings p)))) <> "px"+        Just width ->+            let (parsed, unit) = widthParser False width+             in if unit == "%"+                    -- MJML divides by the group width string, which is not a number.+                    then showNumber (100 * parsed / (0 / 0)) <> "px"+                    else showNumber parsed <> unit++    childWidth c+        | name (component (self c)) == "mj-column" = lookup "width" (getStyles c "tdOutlook") >>= id+        | otherwise = attr (self c) "width"++    renderGroup = do+        cls <- columnClass+        let classesName =+                T.unwords $+                    [cls, "mj-outlook-group-fix"]+                        <> [c | Just c <- [attr s "css-class"], truthy (Just c)]+        kids <-+            renderChildren+                inst+                defChildOptions+                    { childAttributes = [("mobileWidth", "mobileWidth")]+                    , renderer = \c ->+                        if rawElement (component (self c))+                            then render c+                            else do+                                body <- render c+                                let width = case childWidth c of+                                        Just w | not (T.null w) -> Just w+                                        _ -> Nothing+                                pure $+                                    mconcat+                                        [ startConditionalTag+                                        , "<td"+                                        , htmlAttributes+                                            c+                                            [ ( "style"+                                              , AStyles+                                                    [ ("align", attr (self c) "align")+                                                    , ("vertical-align", attr (self c) "vertical-align")+                                                    , style "width" (elementWidth width)+                                                    ]+                                              )+                                            ]+                                        , ">"+                                        , endConditionalTag+                                        , body+                                        , startConditionalTag+                                        , "</td>"+                                        , endConditionalTag+                                        ]+                    }+        let bgcolor = case attr s "background-color" of+                Just "none" -> ANone+                v -> maybe ANone AV v+        pure $+            mconcat+                [ "<div"+                , htmlAttributes inst [("class", AV classesName), ("style", AStyleOf "div")]+                , ">"+                , startConditionalTag+                , "<table"+                , htmlAttributes+                    inst+                    [ ("bgcolor", bgcolor)+                    , ("border", AV "0")+                    , ("cellpadding", AV "0")+                    , ("cellspacing", AV "0")+                    , ("role", AV "presentation")+                    ]+                , "><tr>"+                , endConditionalTag+                , kids+                , startConditionalTag+                , "</tr></table>"+                , endConditionalTag+                , "</div>"+                ]
+ src/Text/Mjml/Component/Head.hs view
@@ -0,0 +1,64 @@+-- | The @mj-head@ elements. None of them render anything in place: each+-- records something in 'GlobalData' for the skeleton and the body to use.+module Text.Mjml.Component.Head (+    handleHead,+) where++import Control.Monad.Trans.State.Strict (modify')+import Data.Map.Strict qualified as Map+import Data.Maybe (fromMaybe)+import Data.Text qualified as T++import Text.Mjml.Node (Node (..))+import Text.Mjml.Render+++-- | @mj-head@'s handler: run each child's handler in order.+handleHead :: Node -> R ()+handleHead headNode = mapM_ one (children headNode)+  where+    one n = case tagName n of+        "mj-attributes" -> mapM_ attribute (children n)+        "mj-breakpoint" ->+            mapM_ (\w -> modify' (\g -> g {breakpoint = w})) (lookup "width" (attributes n))+        "mj-font" ->+            let fname = fromMaybe "" (lookup "name" (attributes n))+                href = fromMaybe "" (lookup "href" (attributes n))+             in modify' (\g -> g {fonts = merge (fonts g) [(fname, href)]})+        "mj-preview" -> modify' (\g -> g {preview = T.strip (content n)})+        "mj-title" -> modify' (\g -> g {title = T.strip (content n)})+        "mj-style"+            | lookup "inline" (attributes n) == Just "inline" ->+                modify' (\g -> g {inlineStyle = inlineStyle g <> [T.strip (content n)]})+            | otherwise -> modify' (\g -> g {styles = styles g <> [T.strip (content n)]})+        "mj-raw" -> modify' (\g -> g {headRaw = headRaw g <> [T.strip (content n)]})+        "mj-html-attributes" -> mapM_ selector (children n)+        _ -> pure ()++    attribute n = case tagName n of+        "mj-class" ->+            let cname = fromMaybe "" (lookup "name" (attributes n))+                values = filter ((/= "name") . fst) (attributes n)+                perTag = foldl' (\acc c -> merge acc [(tagName c, attributes c)]) [] (children n)+             in modify' $ \g ->+                    g+                        { classes = Map.insertWith (flip merge) cname values (classes g)+                        , classesDefault =+                            Map.insertWith Map.union cname (Map.fromList perTag) (classesDefault g)+                        }+        tag ->+            modify' $ \g ->+                g {defaultAttributes = Map.insertWith (flip merge) tag (attributes n) (defaultAttributes g)}++    selector n+        | tagName n == "mj-selector"+        , Just path <- lookup "path" (attributes n) =+            let custom =+                    [ (k, T.strip (content c))+                    | c <- children n+                    , tagName c == "mj-html-attribute"+                    , Just k <- [lookup "name" (attributes c)]+                    , not (T.null k)+                    ]+             in modify' (\g -> g {htmlAttributes' = merge (htmlAttributes' g) [(path, custom)]})+        | otherwise = pure ()
+ src/Text/Mjml/Component/Hero.hs view
@@ -0,0 +1,315 @@+-- | @mj-hero@.+module Text.Mjml.Component.Hero (+    mjHero,+) where++import Data.Maybe (fromMaybe)+import Data.Text qualified as T++import Text.Mjml.Component.Section (setContext)+import Text.Mjml.Js (parseFloatJs, parseIntJs, roundJs, showNumber)+import Text.Mjml.Render+++mjHero :: Component+mjHero =+    (defComponent "mj-hero" build')+        { allowedAttributes =+            [ ("mode", "string")+            , ("height", "unit(px,%)")+            , ("background-url", "string")+            , ("background-width", "unit(px,%)")+            , ("background-height", "unit(px,%)")+            , ("background-position", "string")+            , ("border-radius", "string")+            , ("inner-background-color", "color")+            , ("inner-padding", "unit(px,%){1,4}")+            , ("inner-padding-top", "unit(px,%)")+            , ("inner-padding-left", "unit(px,%)")+            , ("inner-padding-right", "unit(px,%)")+            , ("inner-padding-bottom", "unit(px,%)")+            , ("padding", "unit(px,%){1,4}")+            , ("padding-bottom", "unit(px,%)")+            , ("padding-left", "unit(px,%)")+            , ("padding-right", "unit(px,%)")+            , ("padding-top", "unit(px,%)")+            , ("background-color", "color")+            , ("vertical-align", "enum(top,bottom,middle)")+            ]+        , -- MJML also lists null defaults for background-url and the+          -- directional paddings, which is the same as leaving them out.+          defaults =+            [ ("mode", "fixed-height")+            , ("height", "0px")+            , ("background-position", "center center")+            , ("padding", "0px")+            , ("background-color", "#ffffff")+            , ("vertical-align", "top")+            ]+        }+++build' :: Self -> Instance+build' s = inst+  where+    inst =+        (defInstance s renderHero)+            { getStyles = stylesFor+            , childContext = setContext [("containerWidth", Just currentContainerWidth)] (context s)+            }++    containerWidth = fromMaybe "" (ctx s "containerWidth")++    currentContainerWidth =+        let paddingSize = shorthandValue s "padding" "left" + shorthandValue s "padding" "right"+         in showNumber (parseFloatJs containerWidth - paddingSize) <> "px"++    background =+        T.intercalate " " . filter (not . T.null) $+            [fromMaybe "" (attr s "background-color")]+                <> if truthy (attr s "background-url")+                    then+                        [ "url('" <> fromMaybe "" (attr s "background-url") <> "')"+                        , "no-repeat"+                        , fromMaybe "" (attr s "background-position") <> " / cover"+                        ]+                    else []++    stylesFor = \case+        "div" -> [style "margin" "0 auto", style "max-width" containerWidth]+        "table" -> [style "width" "100%"]+        "tr" -> [style "vertical-align" "top"]+        "td-fluid" ->+            let ratio =+                    roundJs+                        ( parseIntJs (fromMaybe "" (attr s "background-height"))+                            / parseIntJs (fromMaybe "" (attr s "background-width"))+                            * 100+                        )+             in [ style "width" "0.01%"+                , style "padding-bottom" (showNumber ratio <> "%")+                , style "mso-padding-bottom-alt" "0"+                ]+        "outlook-table" -> [style "width" containerWidth]+        "outlook-td" ->+            [ style "line-height" "0"+            , style "font-size" "0"+            , style "mso-line-height-rule" "exactly"+            ]+        "outlook-inner-table" -> [style "width" currentContainerWidth]+        "outlook-image" ->+            [ style "border" "0"+            , ("height", attr s "background-height")+            , style "mso-position-horizontal" "center"+            , style "position" "absolute"+            , style "top" "0"+            , style "width" (case attr s "background-width" of+                Just w | truthy (Just w) -> w+                _ -> containerWidth)+            , style "z-index" "-3"+            ]+        "outlook-inner-td" ->+            [ ("background-color", attr s "inner-background-color")+            , ("padding", attr s "inner-padding")+            , ("padding-top", attr s "inner-padding-top")+            , ("padding-left", attr s "inner-padding-left")+            , ("padding-right", attr s "inner-padding-right")+            , ("padding-bottom", attr s "inner-padding-bottom")+            ]+        "inner-div" ->+            [ ("background-color", attr s "inner-background-color")+            , ("float", attr s "align")+            , style "margin" "0px auto"+            , ("width", attr s "width")+            , ("padding", attr s "inner-padding")+            , ("padding-top", attr s "inner-padding-top")+            , ("padding-left", attr s "inner-padding-left")+            , ("padding-right", attr s "inner-padding-right")+            , ("padding-bottom", attr s "inner-padding-bottom")+            ]+        "inner-table" -> [style "width" "100%", style "margin" "0px"]+        _ -> []++    renderContent = do+        kids <-+            renderChildren+                inst+                defChildOptions+                    { renderer = \c ->+                        if rawElement (component (self c))+                            then render c+                            else do+                                body <- render c+                                let cs = self c+                                pure $+                                    mconcat+                                        [ "<tr><td"+                                        , htmlAttributes+                                            c+                                            [ ("align", maybe ANone AV (attr cs "align"))+                                            , ("background", maybe ANone AV (attr cs "container-background-color"))+                                            , ("class", maybe ANone AV (attr cs "css-class"))+                                            , ( "style"+                                              , AStyles+                                                    [ ("background", attr cs "container-background-color")+                                                    , style "font-size" "0px"+                                                    , ("padding", attr cs "padding")+                                                    , ("padding-top", attr cs "padding-top")+                                                    , ("padding-right", attr cs "padding-right")+                                                    , ("padding-bottom", attr cs "padding-bottom")+                                                    , ("padding-left", attr cs "padding-left")+                                                    , style "word-break" "break-word"+                                                    ]+                                              )+                                            ]+                                        , ">"+                                        , body+                                        , "</td></tr>"+                                        ]+                    }+        let innerTable =+                htmlAttributes+                    inst+                    [ ("border", AV "0")+                    , ("cellpadding", AV "0")+                    , ("cellspacing", AV "0")+                    , ("role", AV "presentation")+                    , ("style", AStyleOf "inner-table")+                    ]+        pure $+            mconcat+                [ startConditionalTag+                , "<table"+                , htmlAttributes+                    inst+                    [ ("align", maybe ANone AV (attr s "align"))+                    , ("border", AV "0")+                    , ("cellpadding", AV "0")+                    , ("cellspacing", AV "0")+                    , ("style", AStyleOf "outlook-inner-table")+                    , ("width", AV (showNumber (parseIntJs currentContainerWidth)))+                    ]+                , "><tr><td"+                , htmlAttributes inst [("style", AStyleOf "outlook-inner-td")]+                , ">"+                , endConditionalTag+                , "<div"+                , htmlAttributes+                    inst+                    [ ("align", maybe ANone AV (attr s "align"))+                    , ("class", AV "mj-hero-content")+                    , ("style", AStyleOf "inner-div")+                    ]+                , "><table"+                , innerTable+                , "><tbody><tr><td"+                , htmlAttributes inst [("style", AStyleOf "inner-td")]+                , "><table"+                , innerTable+                , "><tbody>"+                , kids+                , "</tbody></table></td></tr></tbody></table></div>"+                , startConditionalTag+                , "</td></tr></table>"+                , endConditionalTag+                ]++    commonStyle =+        [ style "background" background+        , ("background-position", attr s "background-position")+        , style "background-repeat" "no-repeat"+        , ("border-radius", attr s "border-radius")+        , ("padding", attr s "padding")+        , ("padding-top", attr s "padding-top")+        , ("padding-left", attr s "padding-left")+        , ("padding-right", attr s "padding-right")+        , ("padding-bottom", attr s "padding-bottom")+        , ("vertical-align", attr s "vertical-align")+        ]++    backgroundAttr = ("background", maybe ANone AV (attr s "background-url"))++    renderMode = do+        body <- renderContent+        pure $ case attr s "mode" of+            Just "fluid-height" ->+                let magicTd = "<td" <> htmlAttributes inst [("style", AStyleOf "td-fluid")] <> " />"+                 in mconcat+                        [ magicTd+                        , "<td"+                        , htmlAttributes inst [backgroundAttr, ("style", AStyles commonStyle)]+                        , ">"+                        , body+                        , "</td>"+                        , magicTd+                        ]+            _ ->+                let height =+                        parseIntJs (fromMaybe "" (attr s "height"))+                            - shorthandValue s "padding" "top"+                            - shorthandValue s "padding" "bottom"+                 in mconcat+                        [ "<td"+                        , htmlAttributes+                            inst+                            [ backgroundAttr+                            , ("style", AStyles (commonStyle `merge` [style "height" (showNumber height <> "px")]))+                            , ("height", AV (showNumber height))+                            ]+                        , ">"+                        , body+                        , "</td>"+                        ]++    renderHero = do+        mode <- renderMode+        pure $+            mconcat+                [ startConditionalTag+                , "<table"+                , htmlAttributes+                    inst+                    [ ("align", AV "center")+                    , ("border", AV "0")+                    , ("cellpadding", AV "0")+                    , ("cellspacing", AV "0")+                    , ("role", AV "presentation")+                    , ("style", AStyleOf "outlook-table")+                    , ("width", AV (showNumber (parseIntJs containerWidth)))+                    ]+                , "><tr><td"+                , htmlAttributes inst [("style", AStyleOf "outlook-td")]+                , "><v:image"+                , htmlAttributes+                    inst+                    [ ("style", AStyleOf "outlook-image")+                    , ("src", maybe ANone AV (attr s "background-url"))+                    , ("xmlns:v", AV "urn:schemas-microsoft-com:vml")+                    ]+                , " />"+                , endConditionalTag+                , "<div"+                , htmlAttributes+                    inst+                    [ ("align", maybe ANone AV (attr s "align"))+                    , ("class", maybe ANone AV (attr s "css-class"))+                    , ("style", AStyleOf "div")+                    ]+                , "><table"+                , htmlAttributes+                    inst+                    [ ("border", AV "0")+                    , ("cellpadding", AV "0")+                    , ("cellspacing", AV "0")+                    , ("role", AV "presentation")+                    , ("style", AStyleOf "table")+                    ]+                , "><tbody><tr"+                , htmlAttributes inst [("style", AStyleOf "tr")]+                , ">"+                , mode+                , "</tr></tbody></table></div>"+                , startConditionalTag+                , "</td></tr></table>"+                , endConditionalTag+                ]
+ src/Text/Mjml/Component/Image.hs view
@@ -0,0 +1,185 @@+-- | @mj-image@.+module Text.Mjml.Component.Image (+    mjImage,+) where++import Data.Char (isDigit)+import Data.Text (Text)+import Data.Text qualified as T++import Text.Mjml.Js (parseIntJs, showNumber)+import Text.Mjml.Render+++mjImage :: Component+mjImage =+    (defComponent "mj-image" build')+        { allowedAttributes =+            [ ("alt", "string")+            , ("href", "string")+            , ("name", "string")+            , ("src", "string")+            , ("srcset", "string")+            , ("sizes", "string")+            , ("title", "string")+            , ("rel", "string")+            , ("align", "enum(left,center,right)")+            , ("border", "string")+            , ("border-bottom", "string")+            , ("border-left", "string")+            , ("border-right", "string")+            , ("border-top", "string")+            , ("border-radius", "string")+            , ("container-background-color", "color")+            , ("fluid-on-mobile", "boolean")+            , ("padding", "unit(px,%){1,4}")+            , ("padding-bottom", "unit(px,%)")+            , ("padding-left", "unit(px,%)")+            , ("padding-right", "unit(px,%)")+            , ("padding-top", "unit(px,%)")+            , ("target", "string")+            , ("width", "unit(px)")+            , ("height", "unit(px,auto)")+            , ("max-height", "unit(px,%)")+            , ("font-size", "unit(px)")+            , ("usemap", "string")+            ]+        , defaults =+            [ ("alt", "")+            , ("align", "center")+            , ("border", "0")+            , ("height", "auto")+            , ("padding", "10px 25px")+            , ("target", "_blank")+            , ("font-size", "13px")+            ]+        , componentHeadStyle = Just headStyle'+        }+++headStyle' :: Text -> Text+headStyle' bp =+    mconcat+        [ "@media only screen and (max-width:"+        , makeLowerBreakpoint bp+        , ") {\ntable.mj-full-width-mobile { width: 100% !important; }\ntd.mj-full-width-mobile { width: auto !important; }\n}"+        ]+++-- | @makeLowerBreakpoint@: one pixel below the breakpoint.+makeLowerBreakpoint :: Text -> Text+makeLowerBreakpoint bp =+    let digits = T.takeWhile isDigit (T.dropWhile (not . isDigit) bp)+     in if T.null digits+            then bp+            else showNumber (parseIntJs digits - 1) <> "px"+++build' :: Self -> Instance+build' s = inst+  where+    inst =+        (defInstance s (pure rendered))+            { getStyles = stylesFor+            }++    fullWidth = attr s "full-width" == Just "full-width"+    fluid = truthy (attr s "fluid-on-mobile")++    -- getContentWidth+    contentWidth =+        let width = case attr s "width" of+                Just w | truthy (Just w) -> parseIntJs w+                _ -> 1 / 0+         in min (box (boxWidths s)) width++    stylesFor = \case+        "img" ->+            [ ("border", attr s "border")+            , ("border-left", attr s "border-left")+            , ("border-right", attr s "border-right")+            , ("border-top", attr s "border-top")+            , ("border-bottom", attr s "border-bottom")+            , ("border-radius", attr s "border-radius")+            , style "display" "block"+            , style "outline" "none"+            , style "text-decoration" "none"+            , ("height", attr s "height")+            , ("max-height", attr s "max-height")+            , ("min-width", if fullWidth then Just "100%" else Nothing)+            , style "width" "100%"+            , ("max-width", if fullWidth then Just "100%" else Nothing)+            , ("font-size", attr s "font-size")+            ]+        "td" -> [("width", if fullWidth then Nothing else Just parsedWidthUnit)]+        "table" ->+            [ ("min-width", if fullWidth then Just "100%" else Nothing)+            , ("max-width", if fullWidth then Just "100%" else Nothing)+            , ("width", if fullWidth then Just parsedWidthUnit else Nothing)+            , style "border-collapse" "collapse"+            , style "border-spacing" "0px"+            ]+        _ -> []++    parsedWidthUnit =+        let (parsed, unit) = widthParser True (showNumber contentWidth)+         in showNumber parsed <> unit++    renderImage =+        let img =+                "<img"+                    <> htmlAttributes inst+                        ( [ ("alt", maybe ANone AV (attr s "alt"))+                          , ("src", maybe ANone AV (attr s "src"))+                          , ("srcset", maybe ANone AV (attr s "srcset"))+                          , ("sizes", maybe ANone AV (attr s "sizes"))+                          , ("style", AStyleOf "img")+                          , ("title", maybe ANone AV (attr s "title"))+                          , ("width", AV (showNumber contentWidth))+                          , ("usemap", maybe ANone AV (attr s "usemap"))+                          ]+                            <> case attr s "height" of+                                Just h+                                    | truthy (Just h) ->+                                        [("height", AV (if h == "auto" then h else showNumber (parseIntJs h)))]+                                _ -> []+                        )+                    <> " />"+         in if truthy (attr s "href")+                then+                    mconcat+                        [ "<a"+                        , htmlAttributes+                            inst+                            [ ("href", maybe ANone AV (attr s "href"))+                            , ("target", maybe ANone AV (attr s "target"))+                            , ("rel", maybe ANone AV (attr s "rel"))+                            , ("name", maybe ANone AV (attr s "name"))+                            , ("title", maybe ANone AV (attr s "title"))+                            ]+                        , ">"+                        , img+                        , "</a>"+                        ]+                else img++    fluidClass = if fluid then AV "mj-full-width-mobile" else ANone++    rendered =+        mconcat+            [ "<table"+            , htmlAttributes+                inst+                [ ("border", AV "0")+                , ("cellpadding", AV "0")+                , ("cellspacing", AV "0")+                , ("role", AV "presentation")+                , ("style", AStyleOf "table")+                , ("class", fluidClass)+                ]+            , "><tbody><tr><td"+            , htmlAttributes inst [("style", AStyleOf "td"), ("class", fluidClass)]+            , ">"+            , renderImage+            , "</td></tr></tbody></table>"+            ]
+ src/Text/Mjml/Component/Navbar.hs view
@@ -0,0 +1,281 @@+-- | @mj-navbar@ and @mj-navbar-link@.+module Text.Mjml.Component.Navbar (+    mjNavbar,+    mjNavbarLink,+) where++import Data.Char (isDigit)+import Data.Maybe (fromMaybe)+import Data.Text (Text)+import Data.Text qualified as T++import Text.Mjml.Render+++mjNavbar :: Component+mjNavbar =+    (defComponent "mj-navbar" buildNavbar)+        { allowedAttributes =+            [ ("align", "enum(left,center,right)")+            , ("base-url", "string")+            , ("hamburger", "string")+            , ("ico-align", "enum(left,center,right)")+            , ("ico-open", "string")+            , ("ico-close", "string")+            , ("ico-color", "color")+            , ("ico-font-size", "unit(px,%)")+            , ("ico-font-family", "string")+            , ("ico-text-transform", "string")+            , ("ico-padding", "unit(px,%){1,4}")+            , ("ico-padding-left", "unit(px,%)")+            , ("ico-padding-top", "unit(px,%)")+            , ("ico-padding-right", "unit(px,%)")+            , ("ico-padding-bottom", "unit(px,%)")+            , ("padding", "unit(px,%){1,4}")+            , ("padding-left", "unit(px,%)")+            , ("padding-top", "unit(px,%)")+            , ("padding-right", "unit(px,%)")+            , ("padding-bottom", "unit(px,%)")+            , ("ico-text-decoration", "string")+            , ("ico-line-height", "unit(px,%,)")+            ]+        , -- MJML also lists null defaults for base-url and hamburger.+          defaults =+            [ ("align", "center")+            , ("ico-align", "center")+            , ("ico-open", "&#9776;")+            , ("ico-close", "&#8855;")+            , ("ico-color", "#000000")+            , ("ico-font-size", "30px")+            , ("ico-font-family", "Ubuntu, Helvetica, Arial, sans-serif")+            , ("ico-text-transform", "uppercase")+            , ("ico-padding", "10px")+            , ("ico-text-decoration", "none")+            , ("ico-line-height", "30px")+            ]+        , componentHeadStyle = Just navbarHeadStyle+        }+++navbarHeadStyle :: Text -> Text+navbarHeadStyle bp =+    mconcat+        [ "noinput.mj-menu-checkbox { display:block!important; max-height:none!important; visibility:visible!important; }\n"+        , "@media only screen and (max-width:"+        , makeLowerBreakpoint bp+        , ") {\n"+        , ".mj-menu-checkbox[type=\"checkbox\"] ~ .mj-inline-links { display:none!important; }\n"+        , ".mj-menu-checkbox[type=\"checkbox\"]:checked ~ .mj-inline-links,\n"+        , ".mj-menu-checkbox[type=\"checkbox\"] ~ .mj-menu-trigger { display:block!important; max-width:none!important; max-height:none!important; font-size:inherit!important; }\n"+        , ".mj-menu-checkbox[type=\"checkbox\"] ~ .mj-inline-links > a { display:block!important; }\n"+        , ".mj-menu-checkbox[type=\"checkbox\"]:checked ~ .mj-menu-trigger .mj-menu-icon-close { display:block!important; }\n"+        , ".mj-menu-checkbox[type=\"checkbox\"]:checked ~ .mj-menu-trigger .mj-menu-icon-open { display:none!important; }\n"+        , "}\n"+        ]+++-- | @makeLowerBreakpoint@: one pixel below the first number in the+-- breakpoint.+makeLowerBreakpoint :: Text -> Text+makeLowerBreakpoint bp =+    let digits = T.takeWhile isDigit (T.dropWhile (not . isDigit) bp)+     in if T.null digits+            then bp+            else T.pack (show (read (T.unpack digits) - 1 :: Integer)) <> "px"+++buildNavbar :: Self -> Instance+buildNavbar s = inst+  where+    inst = (defInstance s renderNavbar) {getStyles = stylesFor}++    stylesFor = \case+        "div" -> [("align", attr s "align"), style "width" "100%"]+        "label" ->+            [ style "display" "block"+            , style "cursor" "pointer"+            , style "mso-hide" "all"+            , style "-moz-user-select" "none"+            , style "user-select" "none"+            , ("color", attr s "ico-color")+            , ("font-size", attr s "ico-font-size")+            , ("font-family", attr s "ico-font-family")+            , ("text-transform", attr s "ico-text-transform")+            , ("text-decoration", attr s "ico-text-decoration")+            , ("line-height", attr s "ico-line-height")+            , ("padding", attr s "ico-padding")+            , ("padding-top", attr s "ico-padding-top")+            , ("padding-right", attr s "ico-padding-right")+            , ("padding-bottom", attr s "ico-padding-bottom")+            , ("padding-left", attr s "ico-padding-left")+            ]+        "trigger" ->+            [ style "display" "none"+            , style "max-height" "0px"+            , style "max-width" "0px"+            , style "font-size" "0px"+            , style "overflow" "hidden"+            ]+        "icoOpen" -> [style "mso-hide" "all"]+        "icoClose" -> [style "display" "none", style "mso-hide" "all"]+        _ -> []++    renderHamburger = do+        labelKey <- nextId+        pure $+            mconcat+                [ msoConditionalTag True $+                    "<input type=\"checkbox\" id=\""+                        <> fromText labelKey+                        <> "\" class=\"mj-menu-checkbox\" style=\"display:none !important; max-height:0; visibility:hidden;\" />"+                , "<div"+                , htmlAttributes inst [("class", AV "mj-menu-trigger"), ("style", AStyleOf "trigger")]+                , "><label"+                , htmlAttributes+                    inst+                    [ ("for", AV labelKey)+                    , ("class", AV "mj-menu-label")+                    , ("style", AStyleOf "label")+                    , ("align", maybe ANone AV (attr s "ico-align"))+                    ]+                , "><span"+                , htmlAttributes inst [("class", AV "mj-menu-icon-open"), ("style", AStyleOf "icoOpen")]+                , ">"+                , fromText (fromMaybe "" (attr s "ico-open"))+                , "</span><span"+                , htmlAttributes inst [("class", AV "mj-menu-icon-close"), ("style", AStyleOf "icoClose")]+                , ">"+                , fromText (fromMaybe "" (attr s "ico-close"))+                , "</span></label></div>"+                ]++    renderNavbar = do+        hamburger <- if attr s "hamburger" == Just "hamburger" then renderHamburger else pure ""+        kids <-+            renderChildren+                inst+                defChildOptions {childAttributes = [("navbarBaseUrl", v) | Just v <- [attr s "base-url"]]}+        pure $+            mconcat+                [ hamburger+                , -- MJML passes the result of htmlAttributes('div') as the style,+                  -- which resolves to no styles at all.+                  "<div"+                , htmlAttributes inst [("class", AV "mj-inline-links"), ("style", AV "")]+                , ">"+                , conditionalTag False $+                    "<table role=\"presentation\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" align=\""+                        <> fromText (fromMaybe "" (attr s "align"))+                        <> "\"><tr>"+                , kids+                , conditionalTag False "</tr></table>"+                , "</div>"+                ]+++mjNavbarLink :: Component+mjNavbarLink =+    (defComponent "mj-navbar-link" buildLink)+        { endingTag = True+        , allowedAttributes =+            [ ("color", "color")+            , ("font-family", "string")+            , ("font-size", "unit(px)")+            , ("font-style", "string")+            , ("font-weight", "string")+            , ("href", "string")+            , ("name", "string")+            , ("target", "string")+            , ("rel", "string")+            , ("letter-spacing", "unitWithNegative(px,em)")+            , ("line-height", "unit(px,%,)")+            , ("padding-bottom", "unit(px,%)")+            , ("padding-left", "unit(px,%)")+            , ("padding-right", "unit(px,%)")+            , ("padding-top", "unit(px,%)")+            , ("padding", "unit(px,%){1,4}")+            , ("text-decoration", "string")+            , ("text-transform", "string")+            ]+        , defaults =+            [ ("color", "#000000")+            , ("font-family", "Ubuntu, Helvetica, Arial, sans-serif")+            , ("font-size", "13px")+            , ("font-weight", "normal")+            , ("line-height", "22px")+            , ("padding", "15px 10px")+            , ("target", "_blank")+            , ("text-decoration", "none")+            , ("text-transform", "uppercase")+            ]+        }+++buildLink :: Self -> Instance+buildLink s = inst+  where+    inst = (defInstance s (pure rendered)) {getStyles = stylesFor}++    paddings =+        [ ("padding", attr s "padding")+        , ("padding-top", attr s "padding-top")+        , ("padding-left", attr s "padding-left")+        , ("padding-right", attr s "padding-right")+        , ("padding-bottom", attr s "padding-bottom")+        ]++    stylesFor = \case+        "a" ->+            [ style "display" "inline-block"+            , ("color", attr s "color")+            , ("font-family", attr s "font-family")+            , ("font-size", attr s "font-size")+            , ("font-style", attr s "font-style")+            , ("font-weight", attr s "font-weight")+            , ("letter-spacing", attr s "letter-spacing")+            , ("line-height", attr s "line-height")+            , ("text-decoration", attr s "text-decoration")+            , ("text-transform", attr s "text-transform")+            ]+                <> paddings+        "td" -> paddings+        _ -> []++    link = case attr s "navbarBaseUrl" of+        Just base | truthy (Just base) -> Just (base <> fromMaybe "undefined" (attr s "href"))+        _ -> attr s "href"++    cssClass = case attr s "css-class" of+        Just c | truthy (Just c) -> " " <> c+        _ -> ""++    renderContent =+        mconcat+            [ "<a"+            , htmlAttributes+                inst+                [ ("class", AV ("mj-link" <> cssClass))+                , ("href", maybe ANone AV link)+                , ("rel", maybe ANone AV (attr s "rel"))+                , ("target", maybe ANone AV (attr s "target"))+                , ("name", maybe ANone AV (attr s "name"))+                , ("style", AStyleOf "a")+                ]+            , ">"+            , fromText (getContent s)+            , "</a>"+            ]++    rendered =+        mconcat+            [ conditionalTag False $+                "<td"+                    <> htmlAttributes+                        inst+                        [ ("style", AStyleOf "td")+                        , ("class", AV (suffixCssClasses (attr s "css-class") "outlook"))+                        ]+                    <> ">"+            , renderContent+            , conditionalTag False "</td>"+            ]
+ src/Text/Mjml/Component/Raw.hs view
@@ -0,0 +1,15 @@+-- | @mj-raw@: content copied into the output untouched.+module Text.Mjml.Component.Raw (+    mjRaw,+) where++import Text.Mjml.Render+++mjRaw :: Component+mjRaw =+    (defComponent "mj-raw" (\s -> defInstance s (pure (fromText (getContent s)))))+        { endingTag = True+        , rawElement = True+        , allowedAttributes = [("position", "enum(file-start)")]+        }
+ src/Text/Mjml/Component/Section.hs view
@@ -0,0 +1,397 @@+-- | @mj-section@, and the rendering @mj-wrapper@ shares with it.+module Text.Mjml.Component.Section (+    mjSection,+    sectionAllowedAttributes,+    sectionDefaults,+    SectionParts (..),+    sectionParts,+    setContext,+) where++import Data.Maybe (fromMaybe, isJust)+import Data.Text (Text)+import Data.Text qualified as T++import Text.Mjml.Js (parseIntJs, showNumber)+import Text.Mjml.Render+++mjSection :: Component+mjSection =+    (defComponent "mj-section" build')+        { allowedAttributes = sectionAllowedAttributes+        , defaults = sectionDefaults+        }+  where+    build' s = let parts = sectionParts s (renderWrappedChildren parts) in instanceOf parts++    renderWrappedChildren parts = do+        kids <-+            renderChildren+                (instanceOf parts)+                defChildOptions+                    { renderer = \c ->+                        if rawElement (component (self c))+                            then render c+                            else do+                                body <- render c+                                pure $+                                    mconcat+                                        [ startConditionalTag+                                        , "<td"+                                        , htmlAttributes+                                            c+                                            [ ("align", maybe ANone AV (attr (self c) "align"))+                                            , ("class", AV (suffixCssClasses (attr (self c) "css-class") "outlook"))+                                            , ("style", AStyleOf "tdOutlook")+                                            ]+                                        , ">"+                                        , endConditionalTag+                                        , body+                                        , startConditionalTag+                                        , "</td>"+                                        , endConditionalTag+                                        ]+                    }+        pure (startConditionalTag <> "<tr>" <> endConditionalTag <> kids <> startConditionalTag <> "</tr>" <> endConditionalTag)+++sectionAllowedAttributes :: [(Text, Text)]+sectionAllowedAttributes =+    [ ("background-color", "color")+    , ("background-url", "string")+    , ("background-repeat", "enum(repeat,no-repeat)")+    , ("background-size", "string")+    , ("background-position", "string")+    , ("background-position-x", "string")+    , ("background-position-y", "string")+    , ("border", "string")+    , ("border-bottom", "string")+    , ("border-left", "string")+    , ("border-radius", "string")+    , ("border-right", "string")+    , ("border-top", "string")+    , ("direction", "enum(ltr,rtl)")+    , ("full-width", "enum(full-width,false,)")+    , ("gutter", "unit(px,%)")+    , ("padding", "unit(px,%){1,4}")+    , ("padding-top", "unit(px,%)")+    , ("padding-bottom", "unit(px,%)")+    , ("padding-left", "unit(px,%)")+    , ("padding-right", "unit(px,%)")+    , ("text-align", "enum(left,center,right)")+    , ("text-padding", "unit(px,%){1,4}")+    ]+++sectionDefaults :: Attrs+sectionDefaults =+    [ ("background-repeat", "repeat")+    , ("background-size", "auto")+    , ("background-position", "top center")+    , ("direction", "ltr")+    , ("padding", "20px 0")+    , ("text-align", "center")+    , ("text-padding", "4px 4px 4px 0")+    ]+++-- | Set context keys the way a JavaScript spread does: 'Nothing' is+-- @undefined@, which removes the parent's value.+setContext :: [(Text, Maybe Text)] -> Attrs -> Attrs+setContext kvs base = foldl step base kvs+  where+    step acc (k, Just v) = merge acc [(k, v)]+    step acc (k, Nothing) = filter ((/= k) . fst) acc+++-- | The methods of MJML's section class, so @mj-wrapper@ can reuse them with+-- its own children.+data SectionParts = SectionParts+    { instanceOf :: Instance+    , isFullWidth :: Bool+    , hasBackground :: Bool+    , renderBefore :: Builder+    , renderAfter :: Builder+    , renderSection :: R Builder+    , renderWithBackground :: Builder -> Builder+    }+++sectionParts :: Self -> R Builder -> SectionParts+sectionParts s wrappedChildren = parts+  where+    parts =+        SectionParts+            { instanceOf = inst+            , isFullWidth = fullWidth+            , hasBackground = hasBg+            , renderBefore = before+            , renderAfter = after+            , renderSection = section+            , renderWithBackground = withBackground+            }++    inst =+        (defInstance s (if fullWidth then renderFull else renderSimple))+            { getStyles = stylesFor+            , childContext =+                setContext+                    [ ("containerWidth", Just (showNumber (box (boxWidths s)) <> "px"))+                    , ("gap", attr s "gap")+                    , ("gutter", attr s "gutter")+                    , ("direction", attr s "direction")+                    ]+                    (context s)+            }++    containerWidth = fromMaybe "" (ctx s "containerWidth")+    fullWidth = attr s "full-width" == Just "full-width"+    hasBorderRadius = case attr s "border-radius" of+        Just v -> not (T.null v)+        Nothing -> False+    isFirstSection = index (props s) == 0+    hasBg = isJust (attr s "background-url")+    hasGap = case ctx s "gap" of+        Just g -> not (T.null g)+        Nothing -> False+    gap = ctx s "gap"++    background+        | truthy (attr s "background-url") =+            [ style "background" backgroundValue+            , style "background-position" backgroundString+            , ("background-repeat", attr s "background-repeat")+            , ("background-size", attr s "background-size")+            ]+        | otherwise =+            [ ("background", attr s "background-color")+            , ("background-color", attr s "background-color")+            ]++    stylesFor = \case+        "tableFullwidth" -> (if fullWidth then background else []) `merge` [style "width" "100%"]+        "table" ->+            (if fullWidth then [] else background)+                `merge` [style "width" "100%"]+                `merge` [style "border-collapse" "separate" | hasBorderRadius]+        "td" ->+            [ ("border", attr s "border")+            , ("border-bottom", attr s "border-bottom")+            , ("border-left", attr s "border-left")+            , ("border-right", attr s "border-right")+            , ("border-top", attr s "border-top")+            , ("border-radius", attr s "border-radius")+            , ("direction", attr s "direction")+            , style "font-size" "0px"+            , ("padding", attr s "padding")+            , ("padding-bottom", attr s "padding-bottom")+            , ("padding-left", attr s "padding-left")+            , ("padding-right", attr s "padding-right")+            , ("padding-top", attr s "padding-top")+            , ("text-align", attr s "text-align")+            ]+        "div" ->+            (if fullWidth then [] else background)+                `merge` [ style "margin" "0px auto"+                        , style "max-width" containerWidth+                        , ("border-radius", attr s "border-radius")+                        ]+                `merge` [style "overflow" "hidden" | hasBorderRadius]+                `merge` [("margin-top", if isFirstSection then Nothing else gap)]+        "innerDiv" -> [style "line-height" "0", style "font-size" "0"]+        _ -> []++    backgroundValue =+        T.intercalate " " . filter (not . T.null) $+            [fromMaybe "" (attr s "background-color")]+                <> if hasBg+                    then+                        [ "url('" <> fromMaybe "" (attr s "background-url") <> "')"+                        , backgroundString+                        , "/ " <> fromMaybe "" (attr s "background-size")+                        , fromMaybe "" (attr s "background-repeat")+                        ]+                    else []++    backgroundString = let (x, y) = backgroundPosition in x <> " " <> y++    backgroundPosition =+        let (x, y) = parseBackgroundPosition+         in (orElse (attr s "background-position-x") x, orElse (attr s "background-position-y") y)+      where+        orElse v d = case v of+            Just t | not (T.null t) -> t+            _ -> d++    parseBackgroundPosition = case T.splitOn " " (fromMaybe "" (attr s "background-position")) of+        [v]+            | v `elem` ["top", "bottom"] -> ("center", v)+            | otherwise -> (v, "center")+        [v1, v2]+            | v1 `elem` ["top", "bottom"] || (v1 == "center" && v2 `elem` ["left", "right"]) -> (v2, v1)+            | otherwise -> (v1, v2)+        _ -> ("center", "top")++    before =+        mconcat+            [ startConditionalTag+            , "<table"+            , htmlAttributes inst $+                [ ("align", AV "center")+                , ("border", AV "0")+                , ("cellpadding", AV "0")+                , ("cellspacing", AV "0")+                , ("class", AV (suffixCssClasses (attr s "css-class") "outlook"))+                , ("role", AV "presentation")+                , ("style", AStyles [style "width" containerWidth, ("padding-top", if isFirstSection then Nothing else gap)])+                , ("width", AV (showNumber (parseIntJs containerWidth)))+                ]+                    <> [ ("bgcolor", AV c)+                       | not hasGap+                       , Just c <- [attr s "background-color"]+                       , truthy (Just c)+                       ]+            , "><tr><td style=\"line-height:0px;font-size:0px;mso-line-height-rule:exactly;\">"+            , endConditionalTag+            ]++    after = startConditionalTag <> "</td></tr></table>" <> endConditionalTag++    section = do+        kids <- wrappedChildren+        pure $+            mconcat+                [ "<div"+                , htmlAttributes+                    inst+                    [ ("class", if fullWidth then ANone else maybe ANone AV (attr s "css-class"))+                    , ("style", AStyleOf "div")+                    ]+                , ">"+                , if hasBg then "<div" <> htmlAttributes inst [("style", AStyleOf "innerDiv")] <> ">" else ""+                , "<table"+                , htmlAttributes+                    inst+                    [ ("align", AV "center")+                    , ("background", if fullWidth then ANone else maybe ANone AV (attr s "background-url"))+                    , ("border", AV "0")+                    , ("cellpadding", AV "0")+                    , ("cellspacing", AV "0")+                    , ("role", AV "presentation")+                    , ("style", AStyleOf "table")+                    ]+                , "><tbody><tr><td"+                , htmlAttributes inst [("style", AStyleOf "td")]+                , ">"+                , startConditionalTag+                , "<table role=\"presentation\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">"+                , endConditionalTag+                , kids+                , startConditionalTag+                , "</table>"+                , endConditionalTag+                , "</td></tr></tbody></table>"+                , if hasBg then "</div>" else ""+                , "</div>"+                ]++    withBackground body =+        let isPercentage t = case T.breakOnEnd "%" t of+                (pre, "") | Just (num, '%') <- T.unsnoc pre -> isDecimal num+                _ -> False+            isDecimal t = case T.splitOn "." t of+                [a] -> not (T.null a) && T.all (`elem` ['0' .. '9']) a+                [a, b] -> not (T.null a) && not (T.null b) && T.all (`elem` ['0' .. '9']) (a <> b)+                _ -> False+            (rawX, rawY) = backgroundPosition+            bgPosX = case rawX of+                "left" -> "0%"+                "center" -> "50%"+                "right" -> "100%"+                v -> if isPercentage v then v else "50%"+            bgPosY = case rawY of+                "top" -> "0%"+                "center" -> "50%"+                "bottom" -> "100%"+                v -> if isPercentage v then v else "0%"+            repeat' = attr s "background-repeat" == Just "repeat"+            coordinate isX =+                let pos = if isX then bgPosX else bgPosY+                 in if isPercentage pos+                        then+                            let decimal = parseIntJs (T.dropEnd 1 pos) / 100+                                v = if repeat' then decimal else (-50 + decimal * 100) / 100+                             in (showNumber v, showNumber v)+                        else+                            if repeat'+                                then if isX then ("0.5", "0.5") else ("0", "0")+                                else if isX then ("0", "0") else ("-0.5", "-0.5")+            size = fromMaybe "" (attr s "background-size")+            vSize+                | size == "cover" || size == "contain" =+                    [("size", AV "1,1"), ("aspect", AV (if size == "cover" then "atleast" else "atmost"))]+                | size /= "auto" = case T.splitOn " " size of+                    [_] -> [("size", AV size), ("aspect", AV "atmost")]+                    ps -> [("size", AV (T.intercalate "," ps))]+                | otherwise = []+            ((vOriginX, vPosX), (vOriginY, vPosY))+                | size == "auto" = (("0.5", "0.5"), ("0", "0"))+                | otherwise = (coordinate True, coordinate False)+            vmlType+                | size == "auto" = "tile"+                | attr s "background-repeat" == Just "no-repeat" = "frame"+                | otherwise = "tile"+         in mconcat+                [ startConditionalTag+                , "<v:rect"+                , htmlAttributes+                    inst+                    [ ("style", AStyles (if fullWidth then [style "mso-width-percent" "1000"] else [style "width" containerWidth]))+                    , ("xmlns:v", AV "urn:schemas-microsoft-com:vml")+                    , ("fill", AV "true")+                    , ("stroke", AV "false")+                    ]+                , "><v:fill"+                , htmlAttributes inst $+                    [ ("origin", AV (vOriginX <> ", " <> vOriginY))+                    , ("position", AV (vPosX <> ", " <> vPosY))+                    , ("src", maybe ANone AV (attr s "background-url"))+                    , ("color", maybe ANone AV (attr s "background-color"))+                    , ("type", AV vmlType)+                    ]+                        <> vSize+                , " /><v:textbox style=\"mso-fit-shape-to-text:true\" inset=\"0,0,0,0\">"+                , endConditionalTag+                , body+                , startConditionalTag+                , "</v:textbox></v:rect>"+                , endConditionalTag+                ]++    renderFull = do+        sec <- section+        let inner = before <> sec <> after+            body = if hasBg then withBackground inner else inner+        pure $+            mconcat+                [ "<table"+                , htmlAttributes+                    inst+                    [ ("align", AV "center")+                    , ("class", maybe ANone AV (attr s "css-class"))+                    , ("background", maybe ANone AV (attr s "background-url"))+                    , ("border", AV "0")+                    , ("cellpadding", AV "0")+                    , ("cellspacing", AV "0")+                    , ("role", AV "presentation")+                    , ("style", AStyleOf "tableFullwidth")+                    ]+                , "><tbody><tr><td>"+                , body+                , "</td></tr></tbody></table>"+                ]++    renderSimple = do+        sec <- section+        pure (before <> (if hasBg then withBackground sec else sec) <> after)
+ src/Text/Mjml/Component/Social.hs view
@@ -0,0 +1,381 @@+-- | @mj-social@ and @mj-social-element@.+module Text.Mjml.Component.Social (+    mjSocial,+    mjSocialElement,+) where++import Data.Maybe (fromMaybe)+import Data.Text (Text)+import Data.Text qualified as T++import Text.Mjml.Js (parseIntJs, showNumber)+import Text.Mjml.Render+++mjSocial :: Component+mjSocial =+    (defComponent "mj-social" build')+        { allowedAttributes =+            [ ("align", "enum(left,right,center)")+            , ("border", "string")+            , ("border-radius", "string")+            , ("container-background-color", "color")+            , ("color", "color")+            , ("font-family", "string")+            , ("font-size", "unit(px)")+            , ("font-style", "string")+            , ("font-weight", "string")+            , ("icon-size", "unit(px,%)")+            , ("icon-height", "unit(px,%)")+            , ("icon-padding", "unit(px,%){1,4}")+            , ("inner-padding", "unit(px,%){1,4}")+            , ("line-height", "unit(px,%,)")+            , ("mode", "enum(horizontal,vertical)")+            , ("padding-bottom", "unit(px,%)")+            , ("padding-left", "unit(px,%)")+            , ("padding-right", "unit(px,%)")+            , ("padding-top", "unit(px,%)")+            , ("padding", "unit(px,%){1,4}")+            , ("table-layout", "enum(auto,fixed)")+            , ("text-padding", "unit(px,%){1,4}")+            , ("text-decoration", "string")+            , ("vertical-align", "enum(top,bottom,middle)")+            ]+        , defaults =+            [ ("align", "center")+            , ("border-radius", "3px")+            , ("color", "#333333")+            , ("font-family", "Ubuntu, Helvetica, Arial, sans-serif")+            , ("font-size", "13px")+            , ("icon-size", "20px")+            , ("line-height", "22px")+            , ("mode", "horizontal")+            , ("padding", "10px 25px")+            , ("text-decoration", "none")+            ]+        }+  where+    build' s = inst+      where+        inst =+            (defInstance s render')+                { getStyles = \case+                    "tableVertical" -> [style "margin" "0px"]+                    _ -> []+                }++        render' =+            if attr s "mode" == Just "horizontal" then renderHorizontal else renderVertical++        socialElementAttributes =+            [("padding", p) | Just p <- [attr s "inner-padding"], truthy (Just p)]+                `merge` [ (k, v)+                        | k <-+                            [ "border"+                            , "border-radius"+                            , "color"+                            , "font-family"+                            , "font-size"+                            , "font-weight"+                            , "font-style"+                            , "icon-size"+                            , "icon-height"+                            , "icon-padding"+                            , "text-padding"+                            , "line-height"+                            , "text-decoration"+                            ]+                        , Just v <- [attr s k]+                        ]++        renderHorizontal = do+            kids <-+                renderChildren+                    inst+                    defChildOptions+                        { childAttributes = socialElementAttributes+                        , renderer = \c ->+                            if rawElement (component (self c))+                                then render c+                                else do+                                    body <- render c+                                    pure $+                                        mconcat+                                            [ startConditionalTag+                                            , "<td>"+                                            , endConditionalTag+                                            , "<table"+                                            , htmlAttributes+                                                c+                                                [ ("align", maybe ANone AV (attr s "align"))+                                                , ("border", AV "0")+                                                , ("cellpadding", AV "0")+                                                , ("cellspacing", AV "0")+                                                , ("role", AV "presentation")+                                                , ("style", AStyles [style "float" "none", style "display" "inline-table"])+                                                ]+                                            , "><tbody>"+                                            , body+                                            , "</tbody></table>"+                                            , startConditionalTag+                                            , "</td>"+                                            , endConditionalTag+                                            ]+                        }+            pure $+                mconcat+                    [ startConditionalTag+                    , "<table"+                    , htmlAttributes+                        inst+                        [ ("align", maybe ANone AV (attr s "align"))+                        , ("border", AV "0")+                        , ("cellpadding", AV "0")+                        , ("cellspacing", AV "0")+                        , ("role", AV "presentation")+                        ]+                    , "><tr>"+                    , endConditionalTag+                    , kids+                    , startConditionalTag+                    , "</tr></table>"+                    , endConditionalTag+                    ]++        renderVertical = do+            kids <- renderChildren inst defChildOptions {childAttributes = socialElementAttributes}+            pure $+                mconcat+                    [ "<table"+                    , htmlAttributes+                        inst+                        [ ("border", AV "0")+                        , ("cellpadding", AV "0")+                        , ("cellspacing", AV "0")+                        , ("role", AV "presentation")+                        , ("style", AStyleOf "tableVertical")+                        ]+                    , "><tbody>"+                    , kids+                    , "</tbody></table>"+                    ]+++imgBaseUrl :: Text+imgBaseUrl = "https://www.mailjet.com/images/theme/v1/icons/ico-social/"+++-- | The networks MJML knows by name, each also available as @NAME-noshare@,+-- which links to the URL as given instead of through a share page.+socialNetworks :: [(Text, Attrs)]+socialNetworks = base <> [(k <> "-noshare", merge v [("share-url", "[[URL]]")]) | (k, v) <- base]+  where+    base =+        [ ("facebook", [("share-url", "https://www.facebook.com/sharer/sharer.php?u=[[URL]]"), ("background-color", "#3b5998"), ("src", imgBaseUrl <> "facebook.png")])+        , ("twitter", [("share-url", "https://twitter.com/intent/tweet?url=[[URL]]"), ("background-color", "#55acee"), ("src", imgBaseUrl <> "twitter.png")])+        , ("x", [("share-url", "https://twitter.com/intent/tweet?url=[[URL]]"), ("background-color", "#000000"), ("src", imgBaseUrl <> "twitter-x.png")])+        , ("google", [("share-url", "https://plus.google.com/share?url=[[URL]]"), ("background-color", "#dc4e41"), ("src", imgBaseUrl <> "google-plus.png")])+        , ("pinterest", [("share-url", "https://pinterest.com/pin/create/button/?url=[[URL]]&media=&description="), ("background-color", "#bd081c"), ("src", imgBaseUrl <> "pinterest.png")])+        , ("linkedin", [("share-url", "https://www.linkedin.com/shareArticle?mini=true&url=[[URL]]&title=&summary=&source="), ("background-color", "#0077b5"), ("src", imgBaseUrl <> "linkedin.png")])+        , ("instagram", [("background-color", "#3f729b"), ("src", imgBaseUrl <> "instagram.png")])+        , ("web", [("src", imgBaseUrl <> "web.png"), ("background-color", "#4BADE9")])+        , ("snapchat", [("src", imgBaseUrl <> "snapchat.png"), ("background-color", "#FFFA54")])+        , ("youtube", [("src", imgBaseUrl <> "youtube.png"), ("background-color", "#EB3323")])+        , ("tumblr", [("src", imgBaseUrl <> "tumblr.png"), ("share-url", "https://www.tumblr.com/widgets/share/tool?canonicalUrl=[[URL]]"), ("background-color", "#344356")])+        , ("github", [("src", imgBaseUrl <> "github.png"), ("background-color", "#000000")])+        , ("xing", [("src", imgBaseUrl <> "xing.png"), ("share-url", "https://www.xing.com/app/user?op=share&url=[[URL]]"), ("background-color", "#296366")])+        , ("vimeo", [("src", imgBaseUrl <> "vimeo.png"), ("background-color", "#53B4E7")])+        , ("medium", [("src", imgBaseUrl <> "medium.png"), ("background-color", "#000000")])+        , ("soundcloud", [("src", imgBaseUrl <> "soundcloud.png"), ("background-color", "#EF7F31")])+        , ("dribbble", [("src", imgBaseUrl <> "dribbble.png"), ("background-color", "#D95988")])+        ]+++mjSocialElement :: Component+mjSocialElement =+    (defComponent "mj-social-element" build')+        { endingTag = True+        , allowedAttributes =+            [ ("align", "enum(left,center,right)")+            , ("icon-position", "enum(left,right)")+            , ("background-color", "color")+            , ("color", "color")+            , ("border", "string")+            , ("border-radius", "string")+            , ("font-family", "string")+            , ("font-size", "unit(px)")+            , ("font-style", "string")+            , ("font-weight", "string")+            , ("href", "string")+            , ("icon-size", "unit(px,%)")+            , ("icon-height", "unit(px,%)")+            , ("icon-padding", "unit(px,%){1,4}")+            , ("line-height", "unit(px,%,)")+            , ("name", "string")+            , ("padding-bottom", "unit(px,%)")+            , ("padding-left", "unit(px,%)")+            , ("padding-right", "unit(px,%)")+            , ("padding-top", "unit(px,%)")+            , ("padding", "unit(px,%){1,4}")+            , ("text-padding", "unit(px,%){1,4}")+            , ("rel", "string")+            , ("src", "string")+            , ("srcset", "string")+            , ("sizes", "string")+            , ("alt", "string")+            , ("title", "string")+            , ("target", "string")+            , ("text-decoration", "string")+            , ("vertical-align", "enum(top,middle,bottom)")+            ]+        , defaults =+            [ ("alt", "")+            , ("align", "left")+            , ("icon-position", "left")+            , ("color", "#000")+            , ("border", "0")+            , ("border-radius", "3px")+            , ("font-family", "Ubuntu, Helvetica, Arial, sans-serif")+            , ("font-size", "13px")+            , ("line-height", "1")+            , ("padding", "4px")+            , ("text-padding", "4px 4px 4px 0")+            , ("target", "_blank")+            , ("text-decoration", "none")+            , ("vertical-align", "middle")+            ]+        }+  where+    build' s = inst+      where+        inst = (defInstance s (pure rendered)) {getStyles = stylesFor}++        network = fromMaybe [] (attr s "name" >>= \n -> lookup n socialNetworks)++        -- getSocialAttributes+        href = case attr s "href" of+            Just h+                | truthy (Just h)+                , Just shareUrl <- lookup "share-url" network+                , truthy (Just shareUrl) ->+                    let (before, after) = T.breakOn "[[URL]]" shareUrl+                     in Just (if T.null after then shareUrl else before <> h <> T.drop 7 after)+            other -> other+        social k = case attr s k of+            Just v | truthy (Just v) -> Just v+            _ -> lookup k network+        iconSize = social "icon-size"+        iconHeight = social "icon-height"+        backgroundColor = social "background-color"+        src = social "src"+        srcset = social "srcset"+        sizes = social "sizes"++        stylesFor = \case+            "td" ->+                [ ("padding", attr s "padding")+                , ("padding-top", attr s "padding-top")+                , ("padding-right", attr s "padding-right")+                , ("padding-bottom", attr s "padding-bottom")+                , ("padding-left", attr s "padding-left")+                , ("vertical-align", attr s "vertical-align")+                ]+            "table" ->+                [ ("background", backgroundColor)+                , ("border-radius", attr s "border-radius")+                , ("width", iconSize)+                ]+            "icon" ->+                [ ("padding", attr s "icon-padding")+                , style "font-size" "0"+                , ("height", if truthy iconHeight then iconHeight else iconSize)+                , style "vertical-align" "middle"+                , ("width", iconSize)+                ]+            "img" ->+                [ ("border", attr s "border")+                , ("border-radius", attr s "border-radius")+                , style "display" "block"+                ]+            "tdText" ->+                [ style "vertical-align" "middle"+                , ("padding", attr s "text-padding")+                , ("text-align", attr s "align")+                ]+            "text" ->+                [ ("color", attr s "color")+                , ("font-size", attr s "font-size")+                , ("font-weight", attr s "font-weight")+                , ("font-style", attr s "font-style")+                , ("font-family", attr s "font-family")+                , ("line-height", attr s "line-height")+                , ("text-decoration", attr s "text-decoration")+                ]+            _ -> []++        hasLink = truthy (attr s "href")+        opt = maybe ANone AV++        linkAttrs extra =+            [("href", opt href)]+                <> extra+                <> [("rel", opt (attr s "rel")), ("target", opt (attr s "target"))]++        makeIcon =+            mconcat+                [ "<td"+                , htmlAttributes inst [("style", AStyleOf "td")]+                , "><table"+                , htmlAttributes+                    inst+                    [ ("border", AV "0")+                    , ("cellpadding", AV "0")+                    , ("cellspacing", AV "0")+                    , ("role", AV "presentation")+                    , ("style", AStyleOf "table")+                    ]+                , "><tbody><tr><td"+                , htmlAttributes inst [("style", AStyleOf "icon")]+                , ">"+                , if hasLink then "<a" <> htmlAttributes inst (linkAttrs []) <> ">" else ""+                , "<img"+                , htmlAttributes+                    inst+                    [ ("alt", opt (attr s "alt"))+                    , ("title", opt (attr s "title"))+                    , ("src", opt src)+                    , ("style", AStyleOf "img")+                    , ("width", AV (showNumber (parseIntJs (fromMaybe "" iconSize))))+                    , ("sizes", opt sizes)+                    , ("srcset", opt srcset)+                    ]+                , " />"+                , if hasLink then "</a>" else ""+                , "</td></tr></tbody></table></td>"+                ]++        makeContent+            | T.null (getContent s) = ""+            | otherwise =+                mconcat+                    [ "<td"+                    , htmlAttributes inst [("style", AStyleOf "tdText")]+                    , ">"+                    , if hasLink+                        then "<a" <> htmlAttributes inst (linkAttrs [("style", AStyleOf "text")]) <> ">"+                        else "<span" <> htmlAttributes inst [("style", AStyleOf "text")] <> ">"+                    , fromText (getContent s)+                    , if hasLink then "</a>" else "</span>"+                    , "</td>"+                    ]++        rendered =+            mconcat+                [ "<tr"+                , htmlAttributes inst [("class", opt (attr s "css-class"))]+                , ">"+                , if attr s "icon-position" == Just "left"+                    then makeIcon <> " " <> makeContent+                    else makeContent <> " " <> makeIcon+                , "</tr>"+                ]
+ src/Text/Mjml/Component/Spacer.hs view
@@ -0,0 +1,36 @@+-- | @mj-spacer@.+module Text.Mjml.Component.Spacer (+    mjSpacer,+) where++import Text.Mjml.Render+++mjSpacer :: Component+mjSpacer =+    (defComponent "mj-spacer" build')+        { allowedAttributes =+            [ ("border", "string")+            , ("border-bottom", "string")+            , ("border-left", "string")+            , ("border-right", "string")+            , ("border-top", "string")+            , ("container-background-color", "color")+            , ("padding-bottom", "unit(px,%)")+            , ("padding-left", "unit(px,%)")+            , ("padding-right", "unit(px,%)")+            , ("padding-top", "unit(px,%)")+            , ("padding", "unit(px,%){1,4}")+            , ("height", "unit(px,%)")+            ]+        , defaults = [("height", "20px")]+        }+  where+    build' s =+        let inst =+                (defInstance s (pure ("<div" <> htmlAttributes inst [("style", AStyleOf "div")] <> ">&#8202;</div>")))+                    { getStyles = \case+                        "div" -> [("height", attr s "height"), ("line-height", attr s "height")]+                        _ -> []+                    }+         in inst
+ src/Text/Mjml/Component/Table.hs view
@@ -0,0 +1,100 @@+-- | @mj-table@.+module Text.Mjml.Component.Table (+    mjTable,+) where++import Data.Char (isDigit)+import Data.Maybe (fromMaybe)+import Data.Text qualified as T++import Text.Mjml.Js (parseFloatJs, showNumber)+import Text.Mjml.Render+++mjTable :: Component+mjTable =+    (defComponent "mj-table" build')+        { endingTag = True+        , allowedAttributes =+            [ ("align", "enum(left,right,center)")+            , ("border", "string")+            , ("cellpadding", "integer")+            , ("cellspacing", "integer")+            , ("container-background-color", "color")+            , ("color", "color")+            , ("font-family", "string")+            , ("font-size", "unit(px)")+            , ("font-weight", "string")+            , ("line-height", "unit(px,%,)")+            , ("padding-bottom", "unit(px,%)")+            , ("padding-left", "unit(px,%)")+            , ("padding-right", "unit(px,%)")+            , ("padding-top", "unit(px,%)")+            , ("padding", "unit(px,%){1,4}")+            , ("role", "enum(none,presentation)")+            , ("table-layout", "enum(auto,fixed,initial,inherit)")+            , ("vertical-align", "enum(top,bottom,middle)")+            , ("width", "unit(px,%,auto)")+            ]+        , defaults =+            [ ("align", "left")+            , ("border", "none")+            , ("cellpadding", "0")+            , ("cellspacing", "0")+            , ("color", "#000000")+            , ("font-family", "Ubuntu, Helvetica, Arial, sans-serif")+            , ("font-size", "13px")+            , ("line-height", "22px")+            , ("padding", "10px 25px")+            , ("table-layout", "auto")+            , ("width", "100%")+            ]+        }+++build' :: Self -> Instance+build' s = inst+  where+    inst = (defInstance s (pure rendered)) {getStyles = stylesFor}++    hasCellspacing =+        let raw = fromMaybe "undefined" (attr s "cellspacing")+            n = parseFloatJs (T.filter (\c -> isDigit c || c == '.') raw)+         in not (isNaN n) && n > 0++    stylesFor = \case+        "table" ->+            [ ("color", attr s "color")+            , ("font-family", attr s "font-family")+            , ("font-size", attr s "font-size")+            , ("line-height", attr s "line-height")+            , ("table-layout", attr s "table-layout")+            , ("width", attr s "width")+            , ("border", attr s "border")+            ]+                `merge` [style "border-collapse" "separate" | hasCellspacing]+        _ -> []++    width = case attr s "width" of+        Just "auto" -> "auto"+        w ->+            let raw = fromMaybe "" w+                (parsed, unit) = widthParser True raw+             in if unit == "%" then raw else showNumber parsed++    rendered =+        mconcat+            [ "<table"+            , htmlAttributes+                inst+                [ ("cellpadding", maybe ANone AV (attr s "cellpadding"))+                , ("cellspacing", maybe ANone AV (attr s "cellspacing"))+                , ("role", maybe ANone AV (attr s "role"))+                , ("width", AV width)+                , ("border", AV "0")+                , ("style", AStyleOf "table")+                ]+            , ">"+            , fromText (getContent s)+            , "</table>"+            ]
+ src/Text/Mjml/Component/Text.hs view
@@ -0,0 +1,79 @@+-- | @mj-text@.+module Text.Mjml.Component.Text (+    mjText,+) where+++import Text.Mjml.Render+++mjText :: Component+mjText =+    (defComponent "mj-text" build')+        { endingTag = True+        , allowedAttributes =+            [ ("align", "enum(left,right,center,justify)")+            , ("background-color", "color")+            , ("color", "color")+            , ("container-background-color", "color")+            , ("font-family", "string")+            , ("font-size", "unit(px)")+            , ("font-style", "string")+            , ("font-weight", "string")+            , ("height", "unit(px,%)")+            , ("letter-spacing", "unitWithNegative(px,em)")+            , ("line-height", "unit(px,%,)")+            , ("padding-bottom", "unit(px,%)")+            , ("padding-left", "unit(px,%)")+            , ("padding-right", "unit(px,%)")+            , ("padding-top", "unit(px,%)")+            , ("padding", "unit(px,%){1,4}")+            , ("text-decoration", "string")+            , ("text-transform", "string")+            , ("vertical-align", "enum(top,bottom,middle)")+            ]+        , defaults =+            [ ("align", "left")+            , ("color", "#000000")+            , ("font-family", "Ubuntu, Helvetica, Arial, sans-serif")+            , ("font-size", "13px")+            , ("line-height", "1")+            , ("padding", "10px 25px")+            ]+        }+  where+    build' s =+        let inst =+                (defInstance s (pure rendered))+                    { getStyles = \case+                        "text" ->+                            [ ("font-family", attr s "font-family")+                            , ("font-size", attr s "font-size")+                            , ("font-style", attr s "font-style")+                            , ("font-weight", attr s "font-weight")+                            , ("letter-spacing", attr s "letter-spacing")+                            , ("line-height", attr s "line-height")+                            , ("text-align", attr s "align")+                            , ("text-decoration", attr s "text-decoration")+                            , ("text-transform", attr s "text-transform")+                            , ("color", attr s "color")+                            , ("height", attr s "height")+                            ]+                        _ -> []+                    }+            renderContent = "<div" <> htmlAttributes inst [("style", AStyleOf "text")] <> ">" <> fromText (getContent s) <> "</div>"+            rendered = case attr s "height" of+                Just h+                    | truthy (Just h) ->+                        mconcat+                            [ conditionalTag False $+                                "<table role=\"presentation\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr><td height=\""+                                    <> fromText h+                                    <> "\" style=\"vertical-align:top;height:"+                                    <> fromText h+                                    <> ";\">"+                            , renderContent+                            , conditionalTag False "</td></tr></table>"+                            ]+                _ -> renderContent+         in inst
+ src/Text/Mjml/Component/Wrapper.hs view
@@ -0,0 +1,50 @@+-- | @mj-wrapper@: a section whose children are sections, each in its own+-- Outlook row.+module Text.Mjml.Component.Wrapper (+    mjWrapper,+) where++import Data.Maybe (fromMaybe)++import Text.Mjml.Component.Section (SectionParts (..), sectionAllowedAttributes, sectionDefaults, sectionParts)+import Text.Mjml.Render+++mjWrapper :: Component+mjWrapper =+    (defComponent "mj-wrapper" build')+        { allowedAttributes = sectionAllowedAttributes <> [("gap", "unit(px)")]+        , defaults = sectionDefaults+        }+  where+    build' s = let parts = sectionParts s (renderWrappedChildren parts) in instanceOf parts++    renderWrappedChildren parts =+        let s = self (instanceOf parts)+            containerWidth = fromMaybe "" (ctx s "containerWidth")+         in renderChildren+                (instanceOf parts)+                defChildOptions+                    { renderer = \c ->+                        if rawElement (component (self c))+                            then render c+                            else do+                                body <- render c+                                pure $+                                    mconcat+                                        [ startConditionalTag+                                        , "<tr><td"+                                        , htmlAttributes+                                            c+                                            [ ("align", maybe ANone AV (attr (self c) "align"))+                                            , ("class", AV (suffixCssClasses (attr (self c) "css-class") "outlook"))+                                            , ("width", AV containerWidth)+                                            ]+                                        , ">"+                                        , endConditionalTag+                                        , body+                                        , startConditionalTag+                                        , "</td></tr>"+                                        , endConditionalTag+                                        ]+                    }
+ src/Text/Mjml/Components.hs view
@@ -0,0 +1,69 @@+-- | The components MJML ships with.+module Text.Mjml.Components (+    defaultRegistry,+    endingTagNames,+) where++import Data.Map.Strict qualified as Map+import Data.Set (Set)+import Data.Set qualified as Set+import Data.Text (Text)++import Text.Mjml.Component.Accordion (mjAccordion, mjAccordionElement, mjAccordionText, mjAccordionTitle)+import Text.Mjml.Component.Body (mjBody)+import Text.Mjml.Component.Button (mjButton)+import Text.Mjml.Component.Carousel (mjCarousel, mjCarouselImage)+import Text.Mjml.Component.Column (mjColumn)+import Text.Mjml.Component.Divider (mjDivider)+import Text.Mjml.Component.Group (mjGroup)+import Text.Mjml.Component.Hero (mjHero)+import Text.Mjml.Component.Image (mjImage)+import Text.Mjml.Component.Navbar (mjNavbar, mjNavbarLink)+import Text.Mjml.Component.Raw (mjRaw)+import Text.Mjml.Component.Section (mjSection)+import Text.Mjml.Component.Social (mjSocial, mjSocialElement)+import Text.Mjml.Component.Spacer (mjSpacer)+import Text.Mjml.Component.Table (mjTable)+import Text.Mjml.Component.Text (mjText)+import Text.Mjml.Component.Wrapper (mjWrapper)+import Text.Mjml.Render (Component (..), Registry)+++defaultRegistry :: Registry+defaultRegistry =+    Map.fromList+        [ (name c, c)+        | c <-+            [ mjBody+            , mjColumn+            , mjGroup+            , mjRaw+            , mjSection+            , mjText+            , mjWrapper+            , mjSocial+            , mjSocialElement+            , mjImage+            , mjButton+            , mjDivider+            , mjSpacer+            , mjTable+            , mjHero+            , mjNavbar+            , mjNavbarLink+            , mjAccordion+            , mjAccordionElement+            , mjAccordionText+            , mjAccordionTitle+            , mjCarousel+            , mjCarouselImage+            ]+        ]+++-- | Tags whose content is raw HTML. The head's ending tags are listed here+-- because the head is not rendered through the registry.+endingTagNames :: Registry -> Set Text+endingTagNames reg =+    Set.fromList (map name (filter endingTag (Map.elems reg)))+        <> Set.fromList ["mj-title", "mj-preview", "mj-style", "mj-breakpoint", "mj-html-attribute"]
+ src/Text/Mjml/Js.hs view
@@ -0,0 +1,128 @@+-- | The handful of JavaScript number semantics MJML's output depends on.+--+-- MJML computes widths with JavaScript numbers and prints them through+-- template strings, so class names such as @mj-column-per-33-333333333333336@+-- and widths such as @300px@ are whatever @Number.prototype.toString@,+-- @parseInt@ and @parseFloat@ make of the arithmetic. Reproducing those+-- functions exactly is what lets this implementation emit the same HTML.+module Text.Mjml.Js (+    showNumber,+    parseIntJs,+    parseFloatJs,+    toFixedNumber,+    roundJs,+    isNaNJs,+) where++import Data.Char (isDigit, isSpace)+import Data.Ratio ((%))+import Data.Text (Text)+import Data.Text qualified as T+import Numeric (floatToDigits)+++-- | @String(x)@ for a JavaScript number.+showNumber :: Double -> Text+showNumber x+    | isNaN x = "NaN"+    | isInfinite x = if x > 0 then "Infinity" else "-Infinity"+    | x == 0 = "0"+    | x < 0 = "-" <> showNumber (negate x)+    | x < 1e21 && x == fromInteger (truncate x) = T.pack (show (truncate x :: Integer))+    | otherwise =+        let (ds, n) = floatToDigits 10 x+            k = length ds+            digits = T.pack (map toDigitChar ds)+         in if+                | k <= n && n <= 21 -> digits <> T.replicate (n - k) "0"+                | 0 < n && n <= 21 -> T.take n digits <> "." <> T.drop n digits+                | -6 < n && n <= 0 -> "0." <> T.replicate (negate n) "0" <> digits+                | otherwise ->+                    let e = n - 1+                        sign = if e < 0 then "-" else "+"+                        mantissa =+                            if k == 1+                                then digits+                                else T.take 1 digits <> "." <> T.drop 1 digits+                     in mantissa <> "e" <> sign <> T.pack (show (abs e))+  where+    toDigitChar d = toEnum (fromEnum '0' + d)+++-- | @parseInt(s, 10)@. 'NaN' when no digits lead the string.+parseIntJs :: Text -> Double+parseIntJs input =+    let s = T.dropWhile isSpace input+        (sign, rest) = splitSign s+        ds = T.takeWhile isDigit rest+     in if T.null ds+            then 0 / 0+            else sign * fromInteger (decimalValue ds)+++-- | @parseFloat(s)@. 'NaN' when no number leads the string.+parseFloatJs :: Text -> Double+parseFloatJs input =+    let s = T.dropWhile isSpace input+        (sign, rest) = splitSign s+        intPart = T.takeWhile isDigit rest+        afterInt = T.drop (T.length intPart) rest+        (fracPart, afterFrac) = case T.uncons afterInt of+            Just ('.', r) -> let f = T.takeWhile isDigit r in (f, T.drop (T.length f) r)+            _ -> ("", afterInt)+        expPart = case T.uncons afterFrac of+            Just (e, r)+                | e == 'e' || e == 'E' ->+                    let (esign, r') = splitSign r+                        eds = T.takeWhile isDigit r'+                     in if T.null eds then Nothing else Just (round esign * decimalValue eds)+            _ -> Nothing+     in if T.null intPart && T.null fracPart+            then 0 / 0+            else+                let mantissa =+                        decimalValue intPart * 10 ^ T.length fracPart + decimalValue fracPart+                    scale = toInteger (T.length fracPart) - maybe 0 id expPart+                    value =+                        if scale >= 0+                            then mantissa % (10 ^ scale)+                            else (mantissa * 10 ^ negate scale) % 1+                 in sign * fromRational value+++-- | The value of a run of decimal digits.+decimalValue :: Text -> Integer+decimalValue = T.foldl' (\acc c -> acc * 10 + toInteger (fromEnum c - fromEnum '0')) 0+++splitSign :: Text -> (Double, Text)+splitSign s = case T.uncons s of+    Just ('-', r) -> (-1, r)+    Just ('+', r) -> (1, r)+    _ -> (1, s)+++-- | @Number(x.toFixed(digits))@: round to a fixed number of decimals the way+-- JavaScript does (ties go to the larger value), then read the result back as+-- a number.+toFixedNumber :: Int -> Double -> Double+toFixedNumber digits x+    | isNaN x || isInfinite x = x+    | otherwise =+        let scale = 10 ^ digits :: Integer+            exact = toRational x * fromInteger scale+            n = floor (exact + 1 / 2) :: Integer+         in fromRational (n % scale)+++-- | @Math.round(x)@: halves round towards positive infinity.+roundJs :: Double -> Double+roundJs x+    | isNaN x || isInfinite x = x+    | otherwise =+        let r = fromInteger (floor x)+         in if x - r >= 0.5 then r + 1 else r+++isNaNJs :: Double -> Bool+isNaNJs = isNaN
+ src/Text/Mjml/Node.hs view
@@ -0,0 +1,39 @@+-- | An MJML document as a tree, in the shape MJML's own parser produces.+module Text.Mjml.Node (+    Node (..),+    element,+    comment,+    lookupAttr,+) where++import Data.Text (Text)+++-- | One element of an MJML document.+--+-- Attribute values and 'content' are kept as source text, exactly as MJML+-- keeps them: they are copied into the output unescaped. Anything built from+-- untrusted data must be escaped before it is put here.+data Node = Node+    { tagName :: Text+    , attributes :: [(Text, Text)]+    -- ^ In source order.+    , children :: [Node]+    , content :: Text+    -- ^ The raw inner HTML of an ending tag (@mj-text@, @mj-button@, …), or+    -- the trimmed text of any other element.+    }+    deriving stock (Show, Eq)+++element :: Text -> [(Text, Text)] -> [Node] -> Node+element name attrs kids = Node name attrs kids ""+++-- | A comment, which MJML carries through the body as an @mj-raw@.+comment :: Text -> Node+comment body = Node "mj-raw" [] [] ("<!--" <> body <> "-->")+++lookupAttr :: Text -> Node -> Maybe Text+lookupAttr name = lookup name . attributes
+ src/Text/Mjml/Parser.hs view
@@ -0,0 +1,184 @@+-- | MJML's XML syntax, read the way @mjml-parser-xml@ reads it.+--+-- That parser is htmlparser2 in HTML mode with entity decoding off, so this is+-- not an XML parser: tag names are lower-cased, attribute values are kept+-- verbatim, and the body of an /ending tag/ (@mj-text@, @mj-button@, …) is not+-- parsed at all but kept as the raw source between its tags.+module Text.Mjml.Parser (+    parseMjml,+    ParseError (..),+) where++import Data.Char (isAlpha, isSpace, toLower)+import Data.Set (Set)+import Data.Set qualified as Set+import Data.Text (Text)+import Data.Text qualified as T+import Data.Text.Unsafe (lengthWord8, takeWord8)++import Text.Mjml.Node (Node (..), comment)+++newtype ParseError = ParseError Text+    deriving stock (Show, Eq)+++data Token+    = TOpen Text [(Text, Text)] Bool+    -- ^ Name, attributes, self-closing.+    | TClose Text+    | TText Text+    | TComment Text+    | TOther+    deriving stock (Show, Eq)+++-- | Parse a document. The set names the ending tags, whose content is kept as+-- raw HTML instead of being parsed into children.+parseMjml :: Set Text -> Text -> Either ParseError Node+parseMjml endingTags source =+    case go source [] Nothing of+        Just root -> Right root+        Nothing -> Left (ParseError "Parsing failed. Check your mjml.")+  where+    -- The stack holds open elements with their children reversed.+    go :: Text -> [Node] -> Maybe Node -> Maybe Node+    go input stack root+        | T.null input = finish stack root+        | otherwise =+            let (tok, rest) = nextToken input+             in case tok of+                    TOpen name attrs selfClosing+                        | name == "mj-include" -> go rest stack root+                        | name `Set.member` endingTags ->+                            let (raw, rest') =+                                    if selfClosing then ("", rest) else scanRaw endingTags name rest+                                node = Node name attrs [] (T.strip raw)+                             in attach node rest' stack root+                        | selfClosing -> attach (Node name attrs [] "") rest stack root+                        | otherwise -> go rest (Node name attrs [] "" : stack) root+                    TClose name+                        | any ((== name) . tagName) stack ->+                            let (popped, stack') = closeTo name stack+                             in case stack' of+                                    [] -> go rest [] (root `orElse` Just popped)+                                    _ -> attachClosed popped rest stack' root+                        | otherwise -> go rest stack root+                    TText t -> case stack of+                        cur : more+                            | not (T.null (T.strip t)) ->+                                go rest (cur {content = T.strip (content cur <> T.strip t)} : more) root+                        _ -> go rest stack root+                    TComment body -> case stack of+                        cur : more -> go rest (cur {children = comment body : children cur} : more) root+                        [] -> go rest stack root+                    TOther -> go rest stack root++    attach node rest stack root = case stack of+        cur : more -> go rest (cur {children = node : children cur} : more) root+        [] -> go rest [] (root `orElse` Just node)++    attachClosed node rest stack root = case stack of+        cur : more -> go rest (cur {children = node : children cur} : more) root+        [] -> go rest [] (root `orElse` Just node)++    -- Pop up to and including the named element, folding each popped+    -- element into its parent.+    closeTo name = \case+        top : more+            | tagName top == name -> (finalize top, more)+            | otherwise -> case more of+                parent : more' -> closeTo name (parent {children = finalize top : children parent} : more')+                [] -> (finalize top, [])+        [] -> (Node name [] [] "", [])++    finish stack root = case stack of+        [] -> root+        [top] -> root `orElse` Just (finalize top)+        top : parent : more -> finish (parent {children = finalize top : children parent} : more) root++    finalize node = node {children = reverse (children node)}++    orElse (Just a) _ = Just a+    orElse Nothing b = b+++-- | Read the raw content of an ending tag up to its matching close tag,+-- returning the content and the input after the close tag.+scanRaw :: Set Text -> Text -> Text -> (Text, Text)+scanRaw endingTags _name input = loop (1 :: Int) input+  where+    -- The content is the input up to where the closing tag starts; measuring+    -- in UTF-8 bytes keeps that constant time per token.+    upTo rest = takeWord8 (lengthWord8 input - lengthWord8 rest) input+    loop depth rest+        | T.null rest = (input, "")+        | otherwise =+            let (tok, rest') = nextToken rest+             in case tok of+                    TOpen n _ False+                        | n `Set.member` endingTags -> loop (depth + 1) rest'+                    TClose n+                        | n `Set.member` endingTags ->+                            if depth == 1+                                then (upTo rest, rest')+                                else loop (depth - 1) rest'+                    _ -> loop depth rest'+++nextToken :: Text -> (Token, Text)+nextToken input = case T.uncons input of+    Just ('<', after)+        | "!--" `T.isPrefixOf` after ->+            let (body, rest) = T.breakOn "-->" (T.drop 3 after)+             in (TComment body, T.drop 3 rest)+        | "![CDATA[" `T.isPrefixOf` after ->+            let (body, rest) = T.breakOn "]]>" (T.drop 8 after)+             in (TText body, T.drop 3 rest)+        | Just (c, _) <- T.uncons after, c == '!' || c == '?' ->+            let (_, rest) = T.breakOn ">" after in (TOther, T.drop 1 rest)+        | Just ('/', afterSlash) <- T.uncons after+        , Just (c, _) <- T.uncons afterSlash+        , isAlpha c ->+            let (name, rest) = T.break (\x -> x == '>' || isSpace x) afterSlash+                (_, rest') = T.breakOn ">" rest+             in (TClose (T.toLower name), T.drop 1 rest')+        | Just (c, _) <- T.uncons after, isAlpha c -> openTag after+    _ ->+        let (t, rest) = T.break (== '<') input+         in if T.null t+                then (TText (T.take 1 input), T.drop 1 input)+                else (TText t, rest)+++openTag :: Text -> (Token, Text)+openTag after =+    let (name, rest) = T.break (\x -> x == '>' || x == '/' || isSpace x) after+     in attrs (T.map toLower name) [] rest+  where+    attrs name acc s =+        let s' = T.dropWhile isSpace s+         in case T.uncons s' of+                Nothing -> (TOpen name (reverse acc) False, "")+                Just ('>', r) -> (TOpen name (reverse acc) False, r)+                Just ('/', r)+                    | Just ('>', r') <- T.uncons (T.dropWhile isSpace r) -> (TOpen name (reverse acc) True, r')+                    | otherwise -> attrs name acc r+                _ ->+                    let (key, r) = T.break (\x -> x == '=' || x == '>' || x == '/' || isSpace x) s'+                        r1 = T.dropWhile isSpace r+                     in case T.uncons r1 of+                            Just ('=', r2) ->+                                let r3 = T.dropWhile isSpace r2+                                 in case T.uncons r3 of+                                        Just (q, r4)+                                            | q == '"' || q == '\'' ->+                                                let (v, r5) = T.break (== q) r4+                                                 in attrs name ((key, v) : acc) (T.drop 1 r5)+                                        _ ->+                                            let (v, r5) = T.break (\x -> x == '>' || isSpace x) r3+                                             in attrs name ((key, v) : acc) r5+                            _+                                | T.null key -> attrs name acc (T.drop 1 r1)+                                | otherwise -> attrs name ((key, "") : acc) r1+
+ src/Text/Mjml/Render.hs view
@@ -0,0 +1,577 @@+-- | The machinery every component renders through: MJML's @BodyComponent@,+-- its attribute resolution, and the document-wide data the head collects.+--+-- The structure follows @mjml-core@ closely on purpose. Each MJML component+-- is a JavaScript class whose methods read attributes, compute styles and+-- render template strings; here a component is a function from 'Self' (its+-- attributes, position and inherited context) to an 'Instance' holding the+-- same methods as closures. Keeping that shape is what makes a component easy+-- to check line by line against the original.+module Text.Mjml.Render (+    -- * Attributes+    Attrs,+    merge,+    -- * Styles+    Style,+    Styles,+    style,+    mergeStyles,+    -- * Document data+    GlobalData (..),+    initialGlobalData,+    R,+    runR,+    addMediaQuery,+    addHeadStyle,+    addComponentHeadStyle,+    nextId,+    -- * Components+    Component (..),+    defComponent,+    Registry,+    Props (..),+    Self (..),+    Instance (..),+    defInstance,+    attr,+    attrOr,+    truthy,+    hasAttr,+    getContent,+    ctx,+    -- * Rendering helpers+    Builder,+    fromText,+    fromChar,+    AttrValue (..),+    htmlAttributes,+    renderStyles,+    ChildOptions (..),+    defChildOptions,+    renderChildren,+    instantiate,+    -- * Box model+    shorthandValue,+    borderValue,+    BoxWidths (..),+    boxWidths,+    suffixCssClasses,+    conditionalTag,+    msoConditionalTag,+    startConditionalTag,+    endConditionalTag,+    startNegationConditionalTag,+    endNegationConditionalTag,+    startMsoConditionalTag,+    startMsoNegationConditionalTag,+    widthParser,+) where++import Control.Monad.Trans.State.Strict (State, get, gets, modify', runState)+import Data.Char (isDigit)+import Data.Map.Strict (Map)+import Data.Map.Strict qualified as Map+import Data.Set qualified as Set+import Data.Maybe (fromMaybe, isJust)+import Data.Text (Text)+import Data.Text qualified as T+import Data.Text.Builder.Linear (Builder, fromChar, fromText)++import Text.Mjml.Js (parseFloatJs, parseIntJs)+import Text.Mjml.Node (Node (..))+++-- | Attributes in JavaScript object order: a key keeps its first position+-- when a later merge overrides its value.+type Attrs = [(Text, Text)]+++-- | @{...a, ...b}@: later keys override earlier ones in place, new keys+-- are appended. Within @b@ a repeated key keeps its first position and its+-- last value, as in an object literal.+merge :: [(Text, v)] -> [(Text, v)] -> [(Text, v)]+merge a [] = a+merge a b =+    [(k, Map.findWithDefault v k later) | (k, v) <- a]+        <> appended Set.empty b+  where+    later = Map.fromList b+    earlier = Set.fromList (map fst a)+    appended _ [] = []+    appended seen ((k, _) : rest)+        | k `Set.member` earlier || k `Set.member` seen = appended seen rest+        | otherwise = (k, later Map.! k) : appended (Set.insert k seen) rest+++-- | One CSS declaration; 'Nothing' values are left out, as MJML drops+-- @undefined@ and @null@.+type Style = (Text, Maybe Text)+++type Styles = [Style]+++style :: Text -> Text -> Style+style k v = (k, Just v)+++mergeStyles :: Styles -> Styles -> Styles+mergeStyles = merge+++-- | What the head collects and the body adds to while rendering: MJML's+-- @globalData@.+data GlobalData = GlobalData+    { breakpoint :: Text+    , classes :: Map Text Attrs+    , classesDefault :: Map Text (Map Text Attrs)+    , defaultAttributes :: Map Text Attrs+    , fonts :: [(Text, Text)]+    , inlineStyle :: [Text]+    , headStyle :: [(Text, Text -> Text)]+    , componentsHeadStyle :: [Text -> Text]+    , headRaw :: [Text]+    , mediaQueries :: [(Text, Text)]+    , preview :: Text+    , styles :: [Text]+    , title :: Text+    , forceOWADesktop :: Bool+    , lang :: Text+    , dir :: Text+    , htmlAttributes' :: [(Text, Attrs)]+    , idCounter :: Int+    }+++initialGlobalData :: [(Text, Text)] -> GlobalData+initialGlobalData defaultFonts =+    GlobalData+        { breakpoint = "480px"+        , classes = Map.empty+        , classesDefault = Map.empty+        , defaultAttributes = Map.empty+        , fonts = defaultFonts+        , inlineStyle = []+        , headStyle = []+        , componentsHeadStyle = []+        , headRaw = []+        , mediaQueries = []+        , preview = ""+        , styles = []+        , title = ""+        , forceOWADesktop = False+        , lang = "und"+        , dir = "auto"+        , htmlAttributes' = []+        , idCounter = 0+        }+++type R = State GlobalData+++runR :: R a -> GlobalData -> (a, GlobalData)+runR = runState+++addMediaQuery :: Text -> Maybe (Text, Text) -> Maybe Text -> R ()+addMediaQuery className widthUnit padding =+    let rule =+            "{"+                <> maybe "" (\(w, u) -> " width:" <> w <> u <> " !important; max-width: " <> w <> u <> ";") widthUnit+                <> maybe "" (\p -> " padding: " <> p <> " !important;") padding+                <> " }"+     in modify' $ \g -> g {mediaQueries = merge (mediaQueries g) [(className, rule)]}+++addHeadStyle :: Text -> (Text -> Text) -> R ()+addHeadStyle name f = modify' $ \g -> g {headStyle = merge (headStyle g) [(name, f)]}+++addComponentHeadStyle :: (Text -> Text) -> R ()+addComponentHeadStyle f = modify' $ \g -> g {componentsHeadStyle = componentsHeadStyle g <> [f]}+++-- | A fresh identifier where MJML would use a random hex string.+nextId :: R Text+nextId = do+    n <- gets idCounter+    modify' $ \g -> g {idCounter = n + 1}+    let s = T.pack (show n)+    pure (T.replicate (16 - T.length s) "0" <> s)+++-- | A component definition: MJML's component class.+data Component = Component+    { name :: Text+    , endingTag :: Bool+    , rawElement :: Bool+    , allowedAttributes :: [(Text, Text)]+    -- ^ Attribute names and their MJML type, e.g. @unit(px,%){1,4}@.+    , defaults :: Attrs+    , componentHeadStyle :: Maybe (Text -> Text)+    -- ^ A style block added once per document, given the breakpoint.+    , prepare :: Self -> R Self+    -- ^ Work MJML does in a component's constructor, such as drawing a+    -- random identifier. Runs once per instantiation, before 'build'.+    , build :: Self -> Instance+    }+++defComponent :: Text -> (Self -> Instance) -> Component+defComponent n b =+    Component+        { name = n+        , endingTag = False+        , rawElement = False+        , allowedAttributes = []+        , defaults = []+        , componentHeadStyle = Nothing+        , prepare = pure+        , build = b+        }+++type Registry = Map Text Component+++-- | Where a component sits among its siblings.+data Props = Props+    { index :: Int+    , isFirst :: Bool+    , isLast :: Bool+    , sibling :: Int+    , nonRawSiblings :: Int+    , extra :: Attrs+    -- ^ Anything else a parent passes down through @props@.+    }+++-- | Everything a component's methods can see: @this@.+data Self = Self+    { attrs :: Attrs+    , attrIndex :: Map Text Text+    -- ^ 'attrs' again, for lookups.+    , props :: Props+    , context :: Attrs+    -- ^ The child context: @containerWidth@, @gutter@ and so on.+    , node :: Node+    , registry :: Registry+    , component :: Component+    , mjClassScope :: Text+    -- ^ The nearest @mj-class@ above this element, whose per-tag defaults+    -- apply to its children.+    }+++data Instance = Instance+    { self :: Self+    , getStyles :: Text -> Styles+    , render :: R Builder+    , childContext :: Attrs+    , instanceHeadStyle :: Maybe (Text -> Text)+    -- ^ A style block this instance adds to the head, given the breakpoint:+    -- MJML's @componentHeadStyle@.+    }+++defInstance :: Self -> R Builder -> Instance+defInstance s r =+    Instance+        { self = s+        , getStyles = const []+        , render = r+        , childContext = context s+        , instanceHeadStyle = Nothing+        }+++attr :: Self -> Text -> Maybe Text+attr s k = Map.lookup k (attrIndex s)+++attrOr :: Self -> Text -> Text -> Text+attrOr s k d = fromMaybe d (attr s k)+++-- | JavaScript truthiness of an attribute: present, not empty, and not the+-- string @false@ (which MJML's parser turns into the boolean).+truthy :: Maybe Text -> Bool+truthy = \case+    Just v -> not (T.null v) && v /= "false"+    Nothing -> False+++hasAttr :: Self -> Text -> Bool+hasAttr s = isJust . attr s+++getContent :: Self -> Text+getContent s = T.strip (content (node s))+++ctx :: Self -> Text -> Maybe Text+ctx s k = lookup k (context s)+++data AttrValue+    = AV Text+    | AStyleOf Text+    -- ^ A named group from the component's 'getStyles'.+    | AStyles Styles+    | ANone+++-- | @htmlAttributes@: render attributes, leaving out absent ones.+htmlAttributes :: Instance -> [(Text, AttrValue)] -> Builder+htmlAttributes inst = foldMap one+  where+    one (k, v) = case v of+        ANone -> mempty+        AV t -> attribute k (fromText t)+        AStyleOf groupName -> attribute k (styleBuilder (getStyles inst groupName))+        AStyles ss -> attribute k (styleBuilder ss)+    attribute k value = fromChar ' ' <> fromText k <> "=\"" <> value <> fromChar '"'+++styleBuilder :: Styles -> Builder+styleBuilder = foldMap (\(k, v) -> maybe mempty (\x -> fromText k <> fromChar ':' <> fromText x <> fromChar ';') v)+++renderStyles :: Styles -> Text+renderStyles = T.concat . map (\(k, v) -> maybe "" (\x -> k <> ":" <> x <> ";") v)+++data ChildOptions = ChildOptions+    { childNodes :: Maybe [Node]+    , childAttributes :: Attrs+    , childProps :: Attrs+    , renderer :: Instance -> R Builder+    }+++defChildOptions :: ChildOptions+defChildOptions =+    ChildOptions+        { childNodes = Nothing+        , childAttributes = []+        , childProps = []+        , renderer = render+        }+++-- | @renderChildren@.+renderChildren :: Instance -> ChildOptions -> R Builder+renderChildren parent opts = do+    let s = self parent+        kids = fromMaybe (children (node s)) (childNodes opts)+        n = length kids+        isRaw k = maybe False rawElement (Map.lookup (tagName k) (registry s))+        nonRaw = length (filter (not . isRaw) kids)+    outs <- traverse+        ( \(i, k) -> do+            let p =+                    Props+                        { index = i+                        , isFirst = i == 0+                        , isLast = i + 1 == n+                        , sibling = n+                        , nonRawSiblings = nonRaw+                        , extra = childProps opts+                        }+            mi <- instantiate (registry s) (childScope s) (childContext parent) p (childAttributes opts) k+            maybe (pure "") (renderer opts) mi+        )+        (zip [0 ..] kids)+    pure (mconcat outs)+++childScope :: Self -> Text+childScope s = fromMaybe (mjClassScope s) (lookup "mj-class" (attributes (node s)))+++-- | @initComponent@: build a component for a node, registering its head+-- style. 'Nothing' for a tag no component handles.+--+-- The node's own attributes stay as written; @mj-attributes@ defaults and+-- @mj-class@ values are folded in here, as MJML's @applyAttributes@ does+-- before rendering, so that a component can still tell what was written on+-- the element itself.+instantiate :: Registry -> Text -> Attrs -> Props -> Attrs -> Node -> R (Maybe Instance)+instantiate reg scope context' p inherited n = case Map.lookup (tagName n) reg of+    Nothing -> pure Nothing+    Just c -> do+        g <- get+        let resolved = resolveAttributes c g scope inherited n+        s <- prepare c (Self (Map.toList resolved) resolved p context' n reg c scope)+        let inst = build c s+        traverse_' (addHeadStyle (name c)) (componentHeadStyle c)+        traverse_' addComponentHeadStyle (instanceHeadStyle inst)+        pure (Just inst)+  where+    traverse_' f = maybe (pure ()) f+++-- | An element's attributes, from the lowest precedence to the highest: the+-- component's defaults, @mj-all@, what the parent passes down, the tag's+-- @mj-attributes@ defaults, its @mj-class@ values, the per-tag defaults of+-- the enclosing @mj-class@, and what is written on the element. The last four+-- are MJML's @applyAttributes@.+resolveAttributes :: Component -> GlobalData -> Text -> Attrs -> Node -> Map Text Text+resolveAttributes c g parentMjClass inherited n =+    formatAttributes c $+        Map.unions+            [ Map.delete "mj-class" (Map.fromList own)+            , fromParentClasses+            , fromClasses+            , Map.fromList (Map.findWithDefault [] (tagName n) (defaultAttributes g))+            , Map.fromList inherited+            , Map.fromList (Map.findWithDefault [] "mj-all" (defaultAttributes g))+            , Map.fromList (defaults c)+            ]+  where+    own = attributes n+    -- Later classes win; css-class values accumulate instead.+    fromClasses =+        foldl'+            ( \acc cls ->+                let values = Map.fromList (Map.findWithDefault [] cls (classes g))+                    joined = case (Map.lookup "css-class" acc, Map.lookup "css-class" values) of+                        (Just x, Just y) -> Map.singleton "css-class" (x <> " " <> y)+                        _ -> Map.empty+                 in Map.unions [joined, values, acc]+            )+            Map.empty+            (maybe [] (T.splitOn " ") (lookup "mj-class" own))+    fromParentClasses =+        foldl'+            ( \acc cls ->+                Map.union+                    (maybe Map.empty (Map.fromList . Map.findWithDefault [] (tagName n)) (Map.lookup cls (classesDefault g)))+                    acc+            )+            Map.empty+            (T.splitOn " " parentMjClass)+++-- | MJML's type coercion on declared attributes. Only colours change: a+-- three-digit hex colour is expanded.+formatAttributes :: Component -> Map Text Text -> Map Text Text+formatAttributes c attrMap =+    foldl'+        (\m (k, ty) -> if "color" `T.isPrefixOf` ty then Map.adjust expandColor k m else m)+        attrMap+        (allowedAttributes c)+  where+    expandColor v = case T.unpack v of+        ['#', a, b, cc] | all isWord [a, b, cc] -> T.pack ['#', a, a, b, b, cc, cc]+        _ -> v+    isWord ch = ch == '_' || isDigit ch || ('a' <= ch && ch <= 'z') || ('A' <= ch && ch <= 'Z')+++-- | @getShorthandAttrValue@: one side of a CSS shorthand such as @padding@.+shorthandValue :: Self -> Text -> Text -> Double+shorthandValue s attribute direction =+    case attr s (attribute <> "-" <> direction) of+        Just v | not (T.null v) -> parseIntJs v+        _ -> case attr s attribute of+            Just v | not (T.null v) -> shorthandParser v direction+            _ -> 0+++shorthandParser :: Text -> Text -> Double+shorthandParser cssValue direction =+    let parts = take 4 (T.words cssValue)+        pick i = maybe 0 parseIntJs (lookupIndex i parts)+     in case length parts of+            2 -> pick (if direction `elem` ["top", "bottom"] then 0 else 1)+            3 -> pick (case direction of "top" -> 0; "bottom" -> 2; _ -> 1)+            4 -> pick (case direction of "top" -> 0; "right" -> 1; "bottom" -> 2; _ -> 3)+            _ -> parseIntJs cssValue+  where+    lookupIndex i xs = if i < length xs then Just (xs !! i) else Nothing+++-- | @getShorthandBorderValue@: the width of a border shorthand.+borderValue :: Self -> Maybe Text -> Text -> Double+borderValue s direction attribute =+    let directional = direction >>= \d -> attr s (attribute <> "-" <> d)+        value = case directional of+            Just v | truthy (Just v) -> v+            _ -> case attr s attribute of+                Just v | truthy (Just v) -> v+                _ -> "0"+     in borderParser value+++-- | The first run of digits that starts the string or follows a space.+borderParser :: Text -> Double+borderParser border = go (T.unpack border) True+  where+    go [] _ = 0+    go str@(c : rest) atBoundary+        | atBoundary && isDigit c =+            let ds = takeWhile isDigit str+                n = parseIntJs (T.pack ds)+             in if isNaN n || n == 0 then 0 else n+        | otherwise = go rest (c == ' ')+++data BoxWidths = BoxWidths+    { totalWidth :: Double+    , borders :: Double+    , paddings :: Double+    , box :: Double+    }+++-- | @getBoxWidths@.+boxWidths :: Self -> BoxWidths+boxWidths s =+    let parsed = parseIntJs (fromMaybe "" (ctx s "containerWidth"))+        pads = shorthandValue s "padding" "right" + shorthandValue s "padding" "left"+        bords = borderValue s (Just "right") "border" + borderValue s (Just "left") "border"+     in BoxWidths parsed bords pads (parsed - pads - bords)+++suffixCssClasses :: Maybe Text -> Text -> Text+suffixCssClasses classes suffix = case classes of+    Just c | not (T.null c) -> T.intercalate " " [x <> "-" <> suffix | x <- T.splitOn " " c]+    _ -> ""+++startConditionalTag, endConditionalTag, startNegationConditionalTag, endNegationConditionalTag :: Builder+startConditionalTag = "<!--[if mso | IE]>"+endConditionalTag = "<![endif]-->"+startNegationConditionalTag = "<!--[if !mso | IE]><!-->"+endNegationConditionalTag = "<!--<![endif]-->"+++startMsoConditionalTag, startMsoNegationConditionalTag :: Builder+startMsoConditionalTag = "<!--[if mso]>"+startMsoNegationConditionalTag = "<!--[if !mso]><!-->"+++conditionalTag :: Bool -> Builder -> Builder+conditionalTag negation body =+    (if negation then startNegationConditionalTag else startConditionalTag)+        <> body+        <> (if negation then endNegationConditionalTag else endConditionalTag)+++msoConditionalTag :: Bool -> Builder -> Builder+msoConditionalTag negation body =+    (if negation then startMsoNegationConditionalTag else startMsoConditionalTag)+        <> body+        <> (if negation then endNegationConditionalTag else endConditionalTag)+++-- | @widthParser@: the number and unit of a width. With the flag set,+-- percentages are truncated to integers, as MJML does by default.+widthParser :: Bool -> Text -> (Double, Text)+widthParser parseFloatToInt width =+    let unit = T.takeWhileEnd (not . isDigit) width+        parser = case unit of+            "%" | not parseFloatToInt -> parseFloatJs+            _ -> parseIntJs+     in (parser width, if T.null unit then "px" else unit)
+ src/Text/Mjml/Schema.hs view
@@ -0,0 +1,201 @@+-- | What MJML's validator knows about a document: which elements may contain+-- which, which attributes each element takes, and what values those accept.+--+-- The renderer itself never rejects a document, as MJML does not; this module+-- is for tools that want to, such as a compile-time template checker.+module Text.Mjml.Schema (+    allowedChildren,+    allowedAttributesOf,+    globalAttributes,+    checkAttribute,+    checkChild,+    knownTag,+) where++import Data.Char (isDigit, toLower)+import Data.Map.Strict (Map)+import Data.Map.Strict qualified as Map+import Data.Text (Text)+import Data.Text qualified as T++import Text.Mjml.Render (Component (..), Registry)+++-- | MJML's @dependencies@: the elements each element may contain. 'Nothing'+-- for an element that accepts anything (@mj-attributes@, whose children are+-- tag names).+allowedChildren :: Map Text (Maybe [Text])+allowedChildren =+    Map.fromList+        [ ("mjml", Just ["mj-body", "mj-head", "mj-raw"])+        , ("mj-accordion", Just ["mj-accordion-element", "mj-raw"])+        , ("mj-accordion-element", Just ["mj-accordion-title", "mj-accordion-text", "mj-raw"])+        , ("mj-accordion-title", Just [])+        , ("mj-accordion-text", Just [])+        , ("mj-attributes", Nothing)+        , ("mj-body", Just ["mj-raw", "mj-section", "mj-wrapper", "mj-hero"])+        , ("mj-button", Just [])+        , ("mj-carousel", Just ["mj-carousel-image"])+        , ("mj-carousel-image", Just [])+        , ("mj-column", Just ["mj-accordion", "mj-button", "mj-carousel", "mj-divider", "mj-image", "mj-raw", "mj-social", "mj-spacer", "mj-table", "mj-text", "mj-navbar"])+        , ("mj-html-attribute", Just [])+        , ("mj-html-attributes", Just ["mj-selector"])+        , ("mj-divider", Just [])+        , ("mj-group", Just ["mj-column", "mj-raw"])+        , ("mj-head", Just ["mj-attributes", "mj-breakpoint", "mj-html-attributes", "mj-font", "mj-preview", "mj-style", "mj-title", "mj-raw"])+        , ("mj-hero", Just ["mj-accordion", "mj-button", "mj-carousel", "mj-divider", "mj-image", "mj-social", "mj-spacer", "mj-table", "mj-text", "mj-navbar", "mj-raw"])+        , ("mj-image", Just [])+        , ("mj-navbar", Just ["mj-navbar-link", "mj-raw"])+        , ("mj-raw", Just [])+        , ("mj-section", Just ["mj-column", "mj-group", "mj-raw"])+        , ("mj-selector", Just ["mj-html-attribute"])+        , ("mj-social", Just ["mj-social-element", "mj-raw"])+        , ("mj-social-element", Just [])+        , ("mj-spacer", Just [])+        , ("mj-table", Just [])+        , ("mj-text", Just [])+        , ("mj-wrapper", Just ["mj-hero", "mj-raw", "mj-section"])+        ]+++-- | Attributes every element takes.+globalAttributes :: [Text]+globalAttributes = ["mj-class", "css-class"]+++-- | The head elements are handled outside the component registry.+headAttributes :: Map Text [(Text, Text)]+headAttributes =+    Map.fromList+        [ ("mjml", [("lang", "string"), ("dir", "string"), ("owa", "string")])+        , ("mj-head", [])+        , ("mj-attributes", [])+        , ("mj-breakpoint", [("width", "unit(px)")])+        , ("mj-font", [("name", "string"), ("href", "string")])+        , ("mj-preview", [])+        , ("mj-style", [("inline", "string")])+        , ("mj-title", [])+        , ("mj-html-attributes", [])+        , ("mj-selector", [("path", "string")])+        , ("mj-html-attribute", [("name", "string")])+        ]+++knownTag :: Registry -> Text -> Bool+knownTag reg t = Map.member t reg || Map.member t headAttributes+++-- | The declared attributes of an element and their types, or 'Nothing' for+-- an unknown element.+allowedAttributesOf :: Registry -> Text -> Maybe [(Text, Text)]+allowedAttributesOf reg t = case Map.lookup t reg of+    Just c -> Just (allowedAttributes c)+    Nothing -> Map.lookup t headAttributes+++-- | Check one attribute of an element: 'Nothing' when it is fine, otherwise+-- the reason, worded as MJML's validator words it.+checkAttribute :: Registry -> Text -> Text -> Maybe Text -> Maybe Text+checkAttribute reg tag attrName value = case allowedAttributesOf reg tag of+    Nothing -> Nothing+    Just allowed+        | attrName `elem` globalAttributes -> Nothing+        | otherwise -> case lookup attrName allowed of+            Nothing ->+                Just $+                    "Attribute "+                        <> attrName+                        <> " is illegal on <"+                        <> tag+                        <> ">; it takes "+                        <> T.intercalate ", " (map fst allowed <> globalAttributes)+            Just ty -> value >>= \v -> fmap (\m -> "Attribute " <> attrName <> " " <> m) (checkType ty v)+++-- | Check that a child may appear inside a parent.+checkChild :: Registry -> Text -> Text -> Maybe Text+checkChild reg parent child+    | not (knownTag reg child) = Nothing+    | otherwise = case Map.lookup parent allowedChildren of+        Just (Just kids)+            | child `notElem` kids ->+                Just $+                    child+                        <> " cannot be used inside "+                        <> parent+                        <> ", only inside: "+                        <> T.intercalate ", " [p | (p, Just ks) <- Map.toList allowedChildren, child `elem` ks]+        _ -> Nothing+++-- | MJML's attribute types: @color@, @unit(...)@, @enum(...)@, @boolean@,+-- @integer@ and @string@.+checkType :: Text -> Text -> Maybe Text+checkType ty value+    | "color" `T.isPrefixOf` ty =+        if validColor then Nothing else Just ("has invalid value: " <> value <> " for type Color")+    | "unit" `T.isPrefixOf` ty =+        if validUnit then Nothing else Just ("has invalid value: " <> value <> " for type Unit, only accepts (" <> T.intercalate ", " units <> ") units and " <> T.intercalate " to " counts <> " value(s)")+    | "enum" `T.isPrefixOf` ty =+        if value `elem` params then Nothing else Just ("has invalid value: " <> value <> " for type Enum, only accepts " <> T.intercalate ", " params)+    | "boolean" `T.isPrefixOf` ty =+        if value `elem` ["true", "false"] then Nothing else Just ("has invalid value: " <> value <> " for type Boolean")+    | "integer" `T.isPrefixOf` ty =+        if T.any isDigit value then Nothing else Just ("has invalid value: " <> value <> " for type Integer")+    | otherwise = Nothing+  where+    params = T.splitOn "," (T.takeWhile (/= ')') (T.drop 1 (T.dropWhile (/= '(') ty)))+    units = params+    counts = case T.breakOn "{" ty of+        (_, rest) | not (T.null rest) -> T.splitOn "," (T.takeWhile (/= '}') (T.drop 1 rest))+        _ -> ["1"]+    allowNegative = "unitWithNegative" `T.isPrefixOf` ty+    allowAuto = "auto" `elem` units+    realUnits = filter (/= "auto") units++    validUnit =+        let items = T.splitOn " " (T.dropWhileEnd (== ' ') value)+            n = length items+            (lo, hi) = case map (read . T.unpack) counts :: [Int] of+                [a] -> (a, a)+                [a, b] -> (a, b)+                _ -> (1, 1)+         in n >= lo && n <= hi && all validItem items+    validItem item+        | item == "0" = True+        | allowAuto && item == "auto" = True+        | otherwise =+            let numeric c = isDigit c || c == ',' || c == '.' || (allowNegative && c == '-')+                number = T.takeWhile numeric item+                suffix = T.drop (T.length number) item+             in not (T.null number) && suffix `elem` realUnits++    lowered = T.map toLower value+    validColor =+        ("rgba(" `T.isInfixOf` lowered)+            || ("rgb(" `T.isInfixOf` lowered)+            || hexColor+            || lowered `elem` namedColors+    hexColor = case T.uncons lowered of+        Just ('#', h) -> (T.length h == 3 || T.length h == 6) && T.all (`elem` ("0123456789abcdef" :: String)) h+        _ -> False+++namedColors :: [Text]+namedColors =+    T.words+        "aliceblue antiquewhite aqua aquamarine azure beige bisque black blanchedalmond blue blueviolet brown \+        \burlywood cadetblue chartreuse chocolate coral cornflowerblue cornsilk crimson cyan darkblue darkcyan \+        \darkgoldenrod darkgray darkgreen darkgrey darkkhaki darkmagenta darkolivegreen darkorange darkorchid \+        \darkred darksalmon darkseagreen darkslateblue darkslategray darkslategrey darkturquoise darkviolet \+        \deeppink deepskyblue dimgray dimgrey dodgerblue firebrick floralwhite forestgreen fuchsia gainsboro \+        \ghostwhite gold goldenrod gray green greenyellow grey honeydew hotpink indianred indigo inherit ivory \+        \khaki lavender lavenderblush lawngreen lemonchiffon lightblue lightcoral lightcyan lightgoldenrodyellow \+        \lightgray lightgreen lightgrey lightpink lightsalmon lightseagreen lightskyblue lightslategray \+        \lightslategrey lightsteelblue lightyellow lime limegreen linen magenta maroon mediumaquamarine \+        \mediumblue mediumorchid mediumpurple mediumseagreen mediumslateblue mediumspringgreen mediumturquoise \+        \mediumvioletred midnightblue mintcream mistyrose moccasin navajowhite navy oldlace olive olivedrab \+        \orange orangered orchid palegoldenrod palegreen paleturquoise palevioletred papayawhip peachpuff peru \+        \pink plum powderblue purple rebeccapurple red rosybrown royalblue saddlebrown salmon sandybrown \+        \seagreen seashell sienna silver skyblue slateblue slategray slategrey snow springgreen steelblue tan \+        \teal thistle tomato transparent turquoise violet wheat white whitesmoke yellow yellowgreen"
+ src/Text/Mjml/Skeleton.hs view
@@ -0,0 +1,159 @@+-- | The document around the rendered body: MJML's @skeleton@ helper and the+-- head blocks it assembles.+module Text.Mjml.Skeleton (+    skeleton,+) where++import Data.Text (Text)+import Data.Text qualified as T+import Data.Text.Builder.Linear (Builder, fromText)+import Data.Text.Unsafe (lengthWord8)++import Text.Mjml.Render (GlobalData (..))+++-- | The whole document around a rendered body, with Outlook conditionals+-- merged, written into one builder. The text before the doctype comes from+-- @mj-raw position="file-start"@.+skeleton :: GlobalData -> Text -> Text -> Builder+skeleton g beforeDoctype body =+    foldMap fromText (outlookChunks (beforeDoctype <> headPart))+        <> foldMap fromText (outlookChunks body)+        <> "\n</html>\n"+  where+    headPart =+      T.concat+        [ "<!doctype html>\n<html lang=\""+        , lang g+        , "\" dir=\""+        , dir g+        , "\" xmlns=\"http://www.w3.org/1999/xhtml\" xmlns:v=\"urn:schemas-microsoft-com:vml\" xmlns:o=\"urn:schemas-microsoft-com:office:office\">\n<head>\n<title>"+        , title g+        , "</title>\n<!--[if !mso]><!-->\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n<!--<![endif]-->\n"+        , "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">\n"+        , "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n"+        , "<style type=\"text/css\">\n"+        , "#outlook a { padding:0; }\n"+        , "body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }\n"+        , "table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }\n"+        , "img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }\n"+        , "p { display:block;margin:13px 0; }\n"+        , "</style>\n"+        , "<!--[if mso]>\n<noscript>\n<xml>\n<o:OfficeDocumentSettings>\n<o:AllowPNG/>\n<o:PixelsPerInch>96</o:PixelsPerInch>\n</o:OfficeDocumentSettings>\n</xml>\n</noscript>\n<![endif]-->\n"+        , "<!--[if lte mso 11]>\n<style type=\"text/css\">\n.mj-outlook-group-fix { width:100% !important; }\n</style>\n<![endif]-->\n"+        , fontsTags g body+        , mediaQueriesTags g+        , styleFromComponents g+        , styleFromTags g+        , T.intercalate "\n" (headRaw g)+        , "\n</head>\n"+        ]+++-- | @buildFontsTags@: import a known font when the rendered body, or an+-- inlined style, names it in a @font-family@.+fontsTags :: GlobalData -> Text -> Text+fontsTags g body =+    let used = [url | (fname, url) <- fonts g, usesFont fname]+     in if null used+            then ""+            else+                T.concat+                    [ "<!--[if !mso]><!-->\n"+                    , T.intercalate "\n" ["<link href=\"" <> u <> "\" rel=\"stylesheet\" type=\"text/css\">" | u <- used]+                    , "\n<style type=\"text/css\">\n"+                    , T.intercalate "\n" ["@import url(" <> u <> ");" | u <- used]+                    , "\n</style>\n<!--<![endif]-->\n"+                    ]+  where+    -- MJML matches "[^"]*font-family:[^"]*NAME[^"]*" against the body,+    -- ignoring case: some stretch between two quotes names the font after a+    -- font-family. That is every "font-family:" with a quote somewhere before+    -- it, up to the next quote, which must exist. Inlined styles are matched+    -- with font-family:[^;}]*NAME.+    families = fromBody <> concatMap fromInline (inlineStyle g)+    -- Every "font-family:", in any case, ends in "y:" or "Y:". Searching for+    -- those directly finds them all without copying the document.+    firstQuote = lengthWord8 (fst (T.breakOn "\"" body))+    fromBody =+        [ asciiLower stretch+        | needle <- ["y:", "Y:"]+        , (before, match) <- T.breakOnAll needle body+        , asciiLower (T.takeEnd 10 before) == "font-famil"+        , lengthWord8 before > firstQuote+        , let (stretch, after) = T.break (== '"') (T.drop 2 match)+        , not (T.null after)+        ]+    fromInline style =+        [ asciiLower (T.takeWhile (`notElem` (";}" :: String)) (T.drop 2 match))+        | needle <- ["y:", "Y:"]+        , (before, match) <- T.breakOnAll needle style+        , asciiLower (T.takeEnd 10 before) == "font-famil"+        ]+    usesFont fname = any (asciiLower fname `T.isInfixOf`) families+++-- | Lower-case ASCII letters only. Font names and @font-family@ are ASCII, and+-- unlike 'T.toLower' this never changes the length of the text.+asciiLower :: Text -> Text+asciiLower = T.map (\c -> if c >= 'A' && c <= 'Z' then toEnum (fromEnum c + 32) else c)+++mediaQueriesTags :: GlobalData -> Text+mediaQueriesTags g+    | null (mediaQueries g) = ""+    | otherwise =+        let grouped prefix =+                [ T.intercalate ", " [prefix <> "." <> c | (c, q') <- mediaQueries g, q' == q] <> " " <> q+                | q <- unique (map snd (mediaQueries g))+                ]+            bp = breakpoint g+         in T.concat+                [ "<style type=\"text/css\">\n@media only screen and (min-width:"+                , bp+                , ") {\n"+                , T.intercalate "\n" (grouped "")+                , "\n}\n</style>\n<style media=\"screen and (min-width:"+                , bp+                , ")\">\n"+                , T.intercalate "\n" (grouped ".moz-text-html ")+                , "\n</style>\n"+                , if forceOWADesktop g+                    then "<style type=\"text/css\">\n" <> T.intercalate "\n" (map ("[owa] " <>) (grouped "")) <> "\n</style>\n"+                    else ""+                ]+  where+    unique = foldr (\x acc -> x : filter (/= x) acc) []+++styleFromComponents :: GlobalData -> Text+styleFromComponents g =+    let fs = componentsHeadStyle g <> map snd (headStyle g)+     in if null fs+            then ""+            else "<style type=\"text/css\">" <> T.concat ["\n" <> f (breakpoint g) | f <- fs] <> "\n</style>\n"+++styleFromTags :: GlobalData -> Text+styleFromTags g+    | null (styles g) = ""+    | otherwise = "<style type=\"text/css\">" <> T.concat ["\n" <> s | s <- styles g] <> "\n</style>\n"+++-- | MJML's @mergeOutlookConditionnals@: join an Outlook conditional that+-- closes and immediately reopens. The result is the text in pieces, to be+-- written out without concatenating it first.+outlookChunks :: Text -> [Text]+outlookChunks = go+  where+    endTag = "<![endif]-->"+    startTag = "<!--[if mso | IE]>"+    go t = case T.breakOn endTag t of+        (before, rest)+            | T.null rest -> [before]+            | otherwise ->+                let after = T.drop (T.length endTag) rest+                    trimmed = T.stripStart after+                 in if startTag `T.isPrefixOf` trimmed+                        then before : go (T.drop (T.length startTag) trimmed)+                        else before : endTag : go after
+ test/HtmlCompare.hs view
@@ -0,0 +1,234 @@+-- | Compare two HTML documents for the differences that matter to a mail+-- client, ignoring the ones that do not.+--+-- The reference output is MJML's, whose whitespace comes from JavaScript+-- template strings. The rules follow mrml's comparison helper:+--+--   * whitespace inside text and comments is ignored;+--   * attributes are compared as a set, @class@ as a set of classes and+--     @style@ as a set of declarations; an empty @class@, @style@ or @alt@+--     counts as absent;+--   * Outlook conditional comments must match exactly, but a conditional that+--     closes and immediately reopens the same condition equals one that+--     stays open;+--   * the content of @\<style\>@ is compared as CSS rules, not as text;+--   * an empty @\<style\>@ counts as absent.+module HtmlCompare (+    compareHtml,+) where++import Data.Char (isSpace, toLower)+import Data.List (sort)+import Data.Map.Strict qualified as Map+import Data.Set qualified as Set+import Data.Text (Text)+import Data.Text qualified as T+++data Token+    = Doctype+    | CondStart Text+    | CondEnd Text+    | Comment Text+    | Open Text (Map.Map Text Text)+    | Close Text+    | TextT Text+    | Css [Text]+    deriving stock (Show, Eq)+++-- | 'Nothing' when the documents match, otherwise a description of the+-- first difference.+compareHtml :: Text -> Text -> Maybe Text+compareHtml expected generated = go (0 :: Int) (normalize expected) (normalize generated)+  where+    go _ [] [] = Nothing+    go i (e : es) (g : gs)+        | e == g = go (i + 1) es gs+        | otherwise = Just (describe i e g (e : es))+    go i (e : _) [] = Just ("token " <> tshow i <> ": expected " <> render e <> " but output ended")+    go i [] (g : _) = Just ("token " <> tshow i <> ": unexpected " <> render g <> " after the expected end")++    describe i e g _ =+        T.unlines+            [ "token " <> tshow i <> " differs"+            , "  expected:  " <> render e+            , "  generated: " <> render g+            , "  expected context: " <> T.intercalate " " (map render (take 6 (drop (max 0 (i - 5)) (normalize expected))))+            ]++    render = \case+        Doctype -> "<!doctype>"+        CondStart t -> t+        CondEnd t -> t+        Comment t -> "<!--" <> t <> "-->"+        Open n as -> "<" <> n <> T.concat [" " <> k <> "=" <> tshow v | (k, v) <- Map.toList as] <> ">"+        Close n -> "</" <> n <> ">"+        TextT t -> "text " <> tshow t+        Css rs -> "css " <> tshow rs+++tshow :: (Show a) => a -> Text+tshow = T.pack . show+++normalize :: Text -> [Token]+normalize = dropEmptyStyles . mergeConditions . filter nonEmpty . tokenize+  where+    nonEmpty = \case+        TextT t -> not (T.null t)+        Comment t -> not (T.null t)+        _ -> True+++-- | Drop @\<![endif]-->@ immediately followed by a reopening of the+-- condition it closed.+mergeConditions :: [Token] -> [Token]+mergeConditions = go Nothing+  where+    go _ [] = []+    go prev (t : rest) = case t of+        CondStart c -> t : go (Just c) rest+        CondEnd _ -> case rest of+            CondStart c : rest' | Just c == prev -> go prev rest'+            _ -> t : go Nothing rest+        _ -> t : go prev rest+++dropEmptyStyles :: [Token] -> [Token]+dropEmptyStyles = \case+    Open "style" _ : Close "style" : rest -> dropEmptyStyles rest+    Open "style" _ : Css [] : Close "style" : rest -> dropEmptyStyles rest+    t : rest -> t : dropEmptyStyles rest+    [] -> []+++tokenize :: Text -> [Token]+tokenize input+    | T.null input = []+    | "<!--[if" `T.isPrefixOf` input =+        let (cond, rest) = T.breakOn "]>" input+            afterCond = T.drop 2 rest+         in if "<!-->" `T.isPrefixOf` afterCond+                then CondStart (cond <> "]><!-->") : tokenize (T.drop 5 afterCond)+                else CondStart (cond <> "]>") : tokenize afterCond+    | "<!--<![endif]-->" `T.isPrefixOf` input = CondEnd "<!--<![endif]-->" : tokenize (T.drop 16 input)+    | "<![endif]-->" `T.isPrefixOf` input = CondEnd "<![endif]-->" : tokenize (T.drop 12 input)+    | "<!--" `T.isPrefixOf` input =+        let (body, rest) = T.breakOn "-->" (T.drop 4 input)+         in Comment (squash body) : tokenize (T.drop 3 rest)+    | "<!" `T.isPrefixOf` input =+        let (_, rest) = T.breakOn ">" input in Doctype : tokenize (T.drop 1 rest)+    | "</" `T.isPrefixOf` input =+        let (tagName, rest) = T.breakOn ">" (T.drop 2 input)+         in Close (T.toLower (T.strip tagName)) : tokenize (T.drop 1 rest)+    | Just ('<', after) <- T.uncons input+    , Just (c, _) <- T.uncons after+    , c /= ' ' =+        let (tag, as, rest) = openTag after+         in if tag == "style"+                then+                    let (css, rest') = T.breakOn "</style" rest+                     in Open tag as : Css (cssRules css) : tokenize rest'+                else Open tag as : tokenize rest+    | otherwise =+        let (t, rest) = T.break (== '<') input+            (t', rest') = if T.null t then (T.take 1 input, T.drop 1 input) else (t, rest)+         in TextT (squash t') : tokenize rest'+++squash :: Text -> Text+squash = T.filter (not . isSpace)+++openTag :: Text -> (Text, Map.Map Text Text, Text)+openTag after =+    let (tagName, rest) = T.break (\x -> x == '>' || x == '/' || isSpace x) after+     in attrs (T.map toLower tagName) [] rest+  where+    attrs n acc s =+        let s' = T.dropWhile (\x -> isSpace x || x == '/') s+         in case T.uncons s' of+                Nothing -> (n, finish acc, "")+                Just ('>', r) -> (n, finish acc, r)+                _ ->+                    let (k, r) = T.break (\x -> x == '=' || x == '>' || isSpace x) s'+                        r1 = T.dropWhile isSpace r+                     in case T.uncons r1 of+                            Just ('=', r2) ->+                                let r3 = T.dropWhile isSpace r2+                                 in case T.uncons r3 of+                                        Just (q, r4)+                                            | q == '"' || q == '\'' ->+                                                let (v, r5) = T.break (== q) r4 in attrs n ((k, v) : acc) (T.drop 1 r5)+                                        _ ->+                                            let (v, r5) = T.break (\x -> x == '>' || isSpace x) r3+                                             in attrs n ((k, v) : acc) r5+                            _ -> attrs n ((k, "") : acc) r1++    finish = Map.fromList . map normal . filter keep . reverse+    keep (k, v) = not (k `elem` ["class", "style", "alt"] && T.null (T.strip v))+    normal (k, v)+        | k == "class" = (k, T.unwords (Set.toList (Set.fromList (T.words v))))+        | k == "style" = (k, T.intercalate ";" (sort (declarations v)))+        | otherwise = (k, v)+++declarations :: Text -> [Text]+declarations v =+    [ T.strip prop <> ":" <> T.unwords (T.words val)+    | d <- T.splitOn ";" v+    , let (prop, rest) = T.breakOn ":" d+    , not (T.null rest)+    , let val = T.drop 1 rest+    ]+++-- | A stylesheet as a sorted list of normalised rules. A media rule's body is+-- normalised recursively.+cssRules :: Text -> [Text]+cssRules = sort . go . stripComments+  where+    go t =+        let t' = T.strip t+         in if T.null t'+                then []+                else case T.breakOn "{" t' of+                    (prelude, rest)+                        | T.null rest ->+                            -- A statement such as @import, up to its semicolon.+                            [T.unwords (T.words s) | s <- T.splitOn ";" prelude, not (T.null (T.strip s))]+                        | otherwise ->+                            let (statements, selector) = splitStatements prelude+                                (body, after) = matching (T.drop 1 rest)+                                sel = T.unwords (T.words selector)+                                rule+                                    | "@media" `T.isPrefixOf` sel || "@supports" `T.isPrefixOf` sel =+                                        sel <> "{" <> T.intercalate "" (sort (go body)) <> "}"+                                    | otherwise =+                                        normSelector sel <> "{" <> T.intercalate ";" (sort (declarations body)) <> "}"+                             in statements <> [rule] <> go after++    -- Statements ending in ';' before a rule's selector (e.g. @import).+    splitStatements prelude =+        let parts = T.splitOn ";" prelude+         in ( [T.unwords (T.words s) | s <- init parts, not (T.null (T.strip s))]+            , Prelude.last parts+            )++    normSelector = T.intercalate ", " . map (T.unwords . T.words) . T.splitOn ","++    matching = loop (1 :: Int) ""+      where+        loop depth acc t = case T.uncons t of+            Nothing -> (acc, "")+            Just ('{', r) -> loop (depth + 1) (T.snoc acc '{') r+            Just ('}', r)+                | depth == 1 -> (acc, r)+                | otherwise -> loop (depth - 1) (T.snoc acc '}') r+            Just (c, r) -> loop depth (T.snoc acc c) r++    stripComments t = case T.breakOn "/*" t of+        (a, b)+            | T.null b -> a+            | otherwise -> a <> stripComments (T.drop 2 (snd (T.breakOn "*/" b)))
+ test/Main.hs view
@@ -0,0 +1,98 @@+-- | Render every fixture and compare it with the HTML MJML itself produced.+--+-- @fixtures/NAME.mjml@ is the input and @fixtures/NAME.html@ MJML 5's output,+-- regenerated by @scripts/update-fixtures.mjs@. Arguments restrict the run to+-- fixtures whose name contains one of them; @--verbose@ prints each result.+module Main (main) where++import Control.Monad (forM, unless, when)+import Data.Char (isAlphaNum, isAscii)+import Data.List (isInfixOf, isSuffixOf, sort)+import Data.Text (Text)+import Data.Text qualified as T+import Data.Text.IO qualified as T+import System.Directory (doesFileExist, listDirectory)+import System.Environment (getArgs)+import System.Exit (exitFailure)+import System.FilePath (dropExtension, (</>))++import HtmlCompare (compareHtml)+import Text.Mjml (MjmlError (..), defaultOptions, renderText)+++fixtureDir :: FilePath+fixtureDir = "test/fixtures"+++main :: IO ()+main = do+    args <- getArgs+    let verbose = "--verbose" `elem` args+        filters = filter (/= "--verbose") args+    names <-+        sort . map dropExtension . filter (".mjml" `isSuffixOf`) <$> listDirectory fixtureDir+    let selected = [n | n <- names, null filters || any (`isInfixOf` n) filters]+    results <- forM selected $ \n -> do+        let html = fixtureDir </> n <> ".html"+        present <- doesFileExist html+        if not present+            then pure Nothing+            else do+                source <- T.readFile (fixtureDir </> n <> ".mjml")+                expected <- T.readFile html+                let outcome = case renderText defaultOptions source of+                        Left (MjmlError e) -> Just ("render error: " <> e)+                        Right out -> compareHtml (normalizeIds expected) (normalizeIds out)+                case outcome of+                    Nothing -> when verbose (putStrLn ("ok   " <> n))+                    Just why -> do+                        putStrLn ("FAIL " <> n)+                        when (verbose || length selected <= 3) (T.putStrLn why)+                pure (Just (n, outcome))+    let ran = [r | Just r <- results]+        failed = [n | (n, Just _) <- ran]+    putStrLn (show (length ran - length failed) <> "/" <> show (length ran) <> " fixtures match MJML")+    unless (null failed) exitFailure+++-- | Generated identifiers are random in MJML; both sides use zeros.+--+-- As in mrml's fixture script: an identifier a @for@ attribute points at+-- (accordion, navbar) becomes @00000000@ in both its @for@ and its @id@, and a+-- carousel's identifier becomes @00000000@ wherever it names a class or radio.+normalizeIds :: Text -> Text+normalizeIds = normalizeCarouselIds . normalizeForIds+++normalizeForIds :: Text -> Text+normalizeForIds t = foldr replaceId t ids+  where+    ids =+        [ v+        | chunk <- drop 1 (T.splitOn "for=\"" t)+        , let v = T.takeWhile (/= '"') chunk+        , not (T.null v)+        , T.all isAsciiAlphaNum v+        ]+    replaceId v =+        T.replace ("for=\"" <> v <> "\"") "for=\"00000000\""+            . T.replace ("id=\"" <> v <> "\"") "id=\"00000000\""+++normalizeCarouselIds :: Text -> Text+normalizeCarouselIds t = foldr replaceId t ids+  where+    ids =+        [ v+        | chunk <- drop 1 (T.splitOn "mj-carousel-" t)+        , let v = T.takeWhile isAsciiAlphaNum chunk+        , T.length v >= 12 && T.length v <= 16+        , T.take 1 (T.drop (T.length v) chunk) == "-"+        ]+    replaceId v =+        T.replace ("mj-carousel-" <> v <> "-") "mj-carousel-00000000-"+            . T.replace ("mj-carousel-radio-" <> v) "mj-carousel-radio-00000000"+++isAsciiAlphaNum :: Char -> Bool+isAsciiAlphaNum c = isAscii c && isAlphaNum c
+ test/fixtures/comment.html view
@@ -0,0 +1,78 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><![endif]-->+      <!-- A comment -->++      <!--[if mso | IE]></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/comment.mjml view
@@ -0,0 +1,7 @@+<mjml>+  <mj-body>+    <mj-section>+      <!-- A comment -->+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-accordion-attributes-font.html view
@@ -0,0 +1,266 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,500,700" rel="stylesheet" type="text/css">+<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Lato:300,400,500,700);+@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    <style type="text/css">++      noinput.mj-accordion-checkbox { display:block!important; }++      @media yahoo, only screen and (min-width:0) {+        .mj-accordion-element { display:block; }+        .mj-accordion-checkbox[type="checkbox"], .mj-accordion-less { display:none!important; }+        .mj-accordion-checkbox[type="checkbox"] + * .mj-accordion-title { cursor:pointer; touch-action:manipulation; -webkit-user-select:none; -moz-user-select:none; user-select:none; }+        .mj-accordion-checkbox[type="checkbox"] + * .mj-accordion-content { overflow:hidden; display:none; }+        .mj-accordion-checkbox[type="checkbox"] + * .mj-accordion-more { display:block!important; }+        .mj-accordion-checkbox:checked + * .mj-accordion-content { display:block; }+        .mj-accordion-checkbox:checked + * .mj-accordion-more { display:none!important; }+        .mj-accordion-checkbox:checked + * .mj-accordion-less { display:block!important; }+      }++      .moz-text-html input.mj-accordion-checkbox + * .mj-accordion-title { cursor: auto; touch-action: auto; -webkit-user-select: auto; -moz-user-select: auto; user-select: auto; }+      .moz-text-html input.mj-accordion-checkbox + * .mj-accordion-content { overflow: hidden; display: block; }+      .moz-text-html input.mj-accordion-checkbox + * .mj-accordion-ico { display: none; }++      @goodbye { @gmail }+    +    </style>+    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         cellspacing="0" cellpadding="0" class="mj-accordion" style="width:100%;border-collapse:collapse;border:2px solid black;border-bottom:none;font-family:Roboto, sans-serif;"+      >+        <tbody>+          +      <tr+        +      >+        <td  style="padding:0px;">+          <label+             class="mj-accordion-element" style="font-size:13px;"+          >+            +    <!--[if !mso | IE]><!--><input class="mj-accordion-checkbox" type="checkbox" style="display:none;" /><!--<![endif]-->+  +            <div>+              +      <div  class="mj-accordion-title">+        <table+           cellspacing="0" cellpadding="0" style="width:100%;border-bottom:2px solid black;"+        >+          <tbody>+            <tr>+              +      <td+         style="width:100%;font-size:13px;font-family:Roboto, sans-serif;padding:16px;"+      >+        Inherits the accordion font+      </td>+    ++    <!--[if !mso | IE]><!--><td class="mj-accordion-ico" style="padding:16px;vertical-align:middle;" ><img src="https://i.imgur.com/bIXv1bk.png" alt="+" class="mj-accordion-more" style="display:none;width:32px;height:32px;" /><img src="https://i.imgur.com/w4uTygT.png" alt="-" class="mj-accordion-less" style="display:none;width:32px;height:32px;" /></td><!--<![endif]-->+  +            </tr>+          </tbody>+        </table>+      </div>+    +      <div+         class="mj-accordion-content"+      >+        <table+           cellspacing="0" cellpadding="0" style="width:100%;border-bottom:2px solid black;"+        >+          <tbody>+            <tr>+              +      <td+         style="font-size:13px;font-family:Roboto, sans-serif;line-height:1;padding:16px;"+      >+        Text+      </td>+    +            </tr>+          </tbody>+        </table>+      </div>+    +            </div>+          </label>+        </td>+      </tr>+    +      <tr+        +      >+        <td  style="padding:0px;">+          <label+             class="mj-accordion-element" style="font-size:13px;"+          >+            +    <!--[if !mso | IE]><!--><input class="mj-accordion-checkbox" type="checkbox" style="display:none;" /><!--<![endif]-->+  +            <div>+              +      <div  class="mj-accordion-title">+        <table+           cellspacing="0" cellpadding="0" style="width:100%;border-bottom:2px solid black;"+        >+          <tbody>+            <tr>+              +      <td+         style="width:100%;font-size:13px;font-family:Lato, sans-serif;padding:16px;"+      >+        Its own font+      </td>+    ++    <!--[if !mso | IE]><!--><td class="mj-accordion-ico" style="padding:16px;vertical-align:middle;" ><img src="https://i.imgur.com/bIXv1bk.png" alt="+" class="mj-accordion-more" style="display:none;width:32px;height:32px;" /><img src="https://i.imgur.com/w4uTygT.png" alt="-" class="mj-accordion-less" style="display:none;width:32px;height:32px;" /></td><!--<![endif]-->+  +            </tr>+          </tbody>+        </table>+      </div>+    +      <div+         class="mj-accordion-content"+      >+        <table+           cellspacing="0" cellpadding="0" style="width:100%;border-bottom:2px solid black;"+        >+          <tbody>+            <tr>+              +      <td+         style="font-size:13px;font-family:Roboto, sans-serif;line-height:1;padding:16px;"+      >+        Text+      </td>+    +            </tr>+          </tbody>+        </table>+      </div>+    +            </div>+          </label>+        </td>+      </tr>+    +        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-accordion-attributes-font.mjml view
@@ -0,0 +1,23 @@+<mjml>+  <mj-head>+    <mj-attributes>+      <mj-accordion-title font-family="Georgia, serif" />+    </mj-attributes>+  </mj-head>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-accordion font-family="Roboto, sans-serif">+          <mj-accordion-element>+            <mj-accordion-title>Inherits the accordion font</mj-accordion-title>+            <mj-accordion-text>Text</mj-accordion-text>+          </mj-accordion-element>+          <mj-accordion-element>+            <mj-accordion-title font-family="Lato, sans-serif">Its own font</mj-accordion-title>+            <mj-accordion-text>Text</mj-accordion-text>+          </mj-accordion-element>+        </mj-accordion>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-accordion-font-padding.html view
@@ -0,0 +1,268 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    <style type="text/css">++      noinput.mj-accordion-checkbox { display:block!important; }++      @media yahoo, only screen and (min-width:0) {+        .mj-accordion-element { display:block; }+        .mj-accordion-checkbox[type="checkbox"], .mj-accordion-less { display:none!important; }+        .mj-accordion-checkbox[type="checkbox"] + * .mj-accordion-title { cursor:pointer; touch-action:manipulation; -webkit-user-select:none; -moz-user-select:none; user-select:none; }+        .mj-accordion-checkbox[type="checkbox"] + * .mj-accordion-content { overflow:hidden; display:none; }+        .mj-accordion-checkbox[type="checkbox"] + * .mj-accordion-more { display:block!important; }+        .mj-accordion-checkbox:checked + * .mj-accordion-content { display:block; }+        .mj-accordion-checkbox:checked + * .mj-accordion-more { display:none!important; }+        .mj-accordion-checkbox:checked + * .mj-accordion-less { display:block!important; }+      }++      .moz-text-html input.mj-accordion-checkbox + * .mj-accordion-title { cursor: auto; touch-action: auto; -webkit-user-select: auto; -moz-user-select: auto; user-select: auto; }+      .moz-text-html input.mj-accordion-checkbox + * .mj-accordion-content { overflow: hidden; display: block; }+      .moz-text-html input.mj-accordion-checkbox + * .mj-accordion-ico { display: none; }++      @goodbye { @gmail }+    +    </style>+    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         cellspacing="0" cellpadding="0" class="mj-accordion" style="width:100%;border-collapse:collapse;border:2px solid black;border-bottom:none;font-family:Ubuntu, Helvetica, Arial, sans-serif;"+      >+        <tbody>+          +      <tr+        +      >+        <td  style="padding:0px;">+          <label+             class="mj-accordion-element" style="font-size:13px;"+          >+            +    <!--[if !mso | IE]><!--><input class="mj-accordion-checkbox" type="checkbox" style="display:none;" /><!--<![endif]-->+  +            <div>+              +      <div  class="mj-accordion-title">+        <table+           cellspacing="0" cellpadding="0" style="width:100%;border-bottom:2px solid black;"+        >+          <tbody>+            <tr>+              +      <td+         style="width:100%;font-size:18px;font-family:Comic;padding:16px;"+      >+        Why use an accordion?+      </td>+    ++    <!--[if !mso | IE]><!--><td class="mj-accordion-ico" style="padding:16px;vertical-align:middle;" ><img src="https://i.imgur.com/bIXv1bk.png" alt="+" class="mj-accordion-more" style="display:none;width:32px;height:32px;" /><img src="https://i.imgur.com/w4uTygT.png" alt="-" class="mj-accordion-less" style="display:none;width:32px;height:32px;" /></td><!--<![endif]-->+  +            </tr>+          </tbody>+        </table>+      </div>+    +      <div+         class="mj-accordion-content"+      >+        <table+           cellspacing="0" cellpadding="0" style="width:100%;border-bottom:2px solid black;"+        >+          <tbody>+            <tr>+              +      <td+         style="font-size:17px;font-family:Arial;line-height:1;padding:16px;"+      >+        <span>+                Because emails with a lot of content are most of the time a very bad experience on mobile, mj-accordion comes handy when you want to deliver a lot of information in a concise way.+              </span>+      </td>+    +            </tr>+          </tbody>+        </table>+      </div>+    +            </div>+          </label>+        </td>+      </tr>+    +      <tr+        +      >+        <td  style="padding:0px;">+          <label+             class="mj-accordion-element" style="font-size:13px;"+          >+            +    <!--[if !mso | IE]><!--><input class="mj-accordion-checkbox" type="checkbox" style="display:none;" /><!--<![endif]-->+  +            <div>+              +      <div  class="mj-accordion-title">+        <table+           cellspacing="0" cellpadding="0" style="width:100%;border-bottom:2px solid black;"+        >+          <tbody>+            <tr>+              +      <td+         style="width:100%;font-size:13px;font-family:Ubuntu, Helvetica, Arial, sans-serif;padding:2px;padding-top:4px;"+      >+        How it works+      </td>+    ++    <!--[if !mso | IE]><!--><td class="mj-accordion-ico" style="padding:16px;vertical-align:middle;" ><img src="https://i.imgur.com/bIXv1bk.png" alt="+" class="mj-accordion-more" style="display:none;width:32px;height:32px;" /><img src="https://i.imgur.com/w4uTygT.png" alt="-" class="mj-accordion-less" style="display:none;width:32px;height:32px;" /></td><!--<![endif]-->+  +            </tr>+          </tbody>+        </table>+      </div>+    +      <div+         class="mj-accordion-content"+      >+        <table+           cellspacing="0" cellpadding="0" style="width:100%;border-bottom:2px solid black;"+        >+          <tbody>+            <tr>+              +      <td+         style="font-size:13px;font-family:Ubuntu, Helvetica, Arial, sans-serif;line-height:1;padding:3px;padding-bottom:5px;"+      >+        <span>+                Content is stacked into tabs and users can expand them at will. If responsive styles are not supported (mostly on desktop clients), tabs are then expanded and your content is readable at once.+              </span>+      </td>+    +            </tr>+          </tbody>+        </table>+      </div>+    +            </div>+          </label>+        </td>+      </tr>+    +        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-accordion-font-padding.mjml view
@@ -0,0 +1,30 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-accordion>+          <mj-accordion-element>+            <mj-accordion-title font-family="Comic" font-size="18px">+              Why use an accordion?+            </mj-accordion-title>+            <mj-accordion-text font-family="Arial" font-size="17px">+              <span>+                Because emails with a lot of content are most of the time a very bad experience on mobile, mj-accordion comes handy when you want to deliver a lot of information in a concise way.+              </span>+            </mj-accordion-text>+          </mj-accordion-element>+          <mj-accordion-element>+            <mj-accordion-title padding="2px" padding-top="4px">+              How it works+            </mj-accordion-title>+            <mj-accordion-text padding="3px" padding-bottom="5px">+              <span>+                Content is stacked into tabs and users can expand them at will. If responsive styles are not supported (mostly on desktop clients), tabs are then expanded and your content is readable at once.+              </span>+            </mj-accordion-text>+          </mj-accordion-element>+        </mj-accordion>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-accordion-icon.html view
@@ -0,0 +1,268 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    <style type="text/css">++      noinput.mj-accordion-checkbox { display:block!important; }++      @media yahoo, only screen and (min-width:0) {+        .mj-accordion-element { display:block; }+        .mj-accordion-checkbox[type="checkbox"], .mj-accordion-less { display:none!important; }+        .mj-accordion-checkbox[type="checkbox"] + * .mj-accordion-title { cursor:pointer; touch-action:manipulation; -webkit-user-select:none; -moz-user-select:none; user-select:none; }+        .mj-accordion-checkbox[type="checkbox"] + * .mj-accordion-content { overflow:hidden; display:none; }+        .mj-accordion-checkbox[type="checkbox"] + * .mj-accordion-more { display:block!important; }+        .mj-accordion-checkbox:checked + * .mj-accordion-content { display:block; }+        .mj-accordion-checkbox:checked + * .mj-accordion-more { display:none!important; }+        .mj-accordion-checkbox:checked + * .mj-accordion-less { display:block!important; }+      }++      .moz-text-html input.mj-accordion-checkbox + * .mj-accordion-title { cursor: auto; touch-action: auto; -webkit-user-select: auto; -moz-user-select: auto; user-select: auto; }+      .moz-text-html input.mj-accordion-checkbox + * .mj-accordion-content { overflow: hidden; display: block; }+      .moz-text-html input.mj-accordion-checkbox + * .mj-accordion-ico { display: none; }++      @goodbye { @gmail }+    +    </style>+    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         cellspacing="0" cellpadding="0" class="mj-accordion" style="width:100%;border-collapse:collapse;border:2px solid black;border-bottom:none;font-family:Ubuntu, Helvetica, Arial, sans-serif;"+      >+        <tbody>+          +      <tr+        +      >+        <td  style="padding:0px;">+          <label+             class="mj-accordion-element" style="font-size:13px;"+          >+            +    <!--[if !mso | IE]><!--><input class="mj-accordion-checkbox" type="checkbox" style="display:none;" /><!--<![endif]-->+  +            <div>+              +      <div  class="mj-accordion-title">+        <table+           cellspacing="0" cellpadding="0" style="width:100%;border-bottom:2px solid black;"+        >+          <tbody>+            <tr>+              +      <td+         style="width:100%;font-size:13px;font-family:Ubuntu, Helvetica, Arial, sans-serif;padding:16px;"+      >+        Why use an accordion?+      </td>+    ++    <!--[if !mso | IE]><!--><td class="mj-accordion-ico" style="padding:16px;vertical-align:bottom;" ><img src="https://wrapped-url" alt="a" class="mj-accordion-more" style="display:none;width:28px;height:28px;" /><img src="https://unwrapped-url" alt="b" class="mj-accordion-less" style="display:none;width:28px;height:28px;" /></td><!--<![endif]-->+  +            </tr>+          </tbody>+        </table>+      </div>+    +      <div+         class="mj-accordion-content"+      >+        <table+           cellspacing="0" cellpadding="0" style="width:100%;border-bottom:2px solid black;"+        >+          <tbody>+            <tr>+              +      <td+         style="font-size:13px;font-family:Ubuntu, Helvetica, Arial, sans-serif;line-height:1;padding:16px;"+      >+        <span>+                Because emails with a lot of content are most of the time a very bad experience on mobile, mj-accordion comes handy when you want to deliver a lot of information in a concise way.+              </span>+      </td>+    +            </tr>+          </tbody>+        </table>+      </div>+    +            </div>+          </label>+        </td>+      </tr>+    +      <tr+        +      >+        <td  style="padding:0px;">+          <label+             class="mj-accordion-element" style="font-size:13px;"+          >+            +    <!--[if !mso | IE]><!--><input class="mj-accordion-checkbox" type="checkbox" style="display:none;" /><!--<![endif]-->+  +            <div>+              +      <div  class="mj-accordion-title">+        <table+           cellspacing="0" cellpadding="0" style="width:100%;border-bottom:2px solid black;"+        >+          <tbody>+            <tr>+              +    <!--[if !mso | IE]><!--><td class="mj-accordion-ico" style="padding:16px;vertical-align:top;" ><img src="http://wrapped-url" alt="w" class="mj-accordion-more" style="display:none;width:30px;height:30px;" /><img src="http://unwrapped-url" alt="u" class="mj-accordion-less" style="display:none;width:30px;height:30px;" /></td><!--<![endif]-->+  ++      <td+         style="width:100%;font-size:13px;font-family:Ubuntu, Helvetica, Arial, sans-serif;padding:16px;"+      >+        How it works+      </td>+    +            </tr>+          </tbody>+        </table>+      </div>+    +      <div+         class="mj-accordion-content"+      >+        <table+           cellspacing="0" cellpadding="0" style="width:100%;border-bottom:2px solid black;"+        >+          <tbody>+            <tr>+              +      <td+         style="font-size:13px;font-family:Ubuntu, Helvetica, Arial, sans-serif;line-height:1;padding:16px;"+      >+        <span>+                Content is stacked into tabs and users can expand them at will. If responsive styles are not supported (mostly on desktop clients), tabs are then expanded and your content is readable at once.+              </span>+      </td>+    +            </tr>+          </tbody>+        </table>+      </div>+    +            </div>+          </label>+        </td>+      </tr>+    +        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-accordion-icon.mjml view
@@ -0,0 +1,28 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-accordion icon-align="top" icon-height="30px" icon-width="30px" icon-position="left" icon-wrapped-url="http://wrapped-url" icon-wrapped-alt="w" icon-unwrapped-url="http://unwrapped-url" icon-unwrapped-alt="u">+          <mj-accordion-element icon-align="bottom" icon-height="28px" icon-width="28px" icon-position="right" icon-wrapped-url="https://wrapped-url" icon-wrapped-alt="a" icon-unwrapped-url="https://unwrapped-url" icon-unwrapped-alt="b">+            <mj-accordion-title>Why use an accordion?</mj-accordion-title>+            <mj-accordion-text>+              <span>+                Because emails with a lot of content are most of the time a very bad experience on mobile, mj-accordion comes handy when you want to deliver a lot of information in a concise way.+              </span>+            </mj-accordion-text>+          </mj-accordion-element>+          <mj-accordion-element>+            <mj-accordion-title>+              How it works+            </mj-accordion-title>+            <mj-accordion-text>+              <span>+                Content is stacked into tabs and users can expand them at will. If responsive styles are not supported (mostly on desktop clients), tabs are then expanded and your content is readable at once.+              </span>+            </mj-accordion-text>+          </mj-accordion-element>+        </mj-accordion>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-accordion-other.html view
@@ -0,0 +1,260 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    <style type="text/css">++      noinput.mj-accordion-checkbox { display:block!important; }++      @media yahoo, only screen and (min-width:0) {+        .mj-accordion-element { display:block; }+        .mj-accordion-checkbox[type="checkbox"], .mj-accordion-less { display:none!important; }+        .mj-accordion-checkbox[type="checkbox"] + * .mj-accordion-title { cursor:pointer; touch-action:manipulation; -webkit-user-select:none; -moz-user-select:none; user-select:none; }+        .mj-accordion-checkbox[type="checkbox"] + * .mj-accordion-content { overflow:hidden; display:none; }+        .mj-accordion-checkbox[type="checkbox"] + * .mj-accordion-more { display:block!important; }+        .mj-accordion-checkbox:checked + * .mj-accordion-content { display:block; }+        .mj-accordion-checkbox:checked + * .mj-accordion-more { display:none!important; }+        .mj-accordion-checkbox:checked + * .mj-accordion-less { display:block!important; }+      }++      .moz-text-html input.mj-accordion-checkbox + * .mj-accordion-title { cursor: auto; touch-action: auto; -webkit-user-select: auto; -moz-user-select: auto; user-select: auto; }+      .moz-text-html input.mj-accordion-checkbox + * .mj-accordion-content { overflow: hidden; display: block; }+      .moz-text-html input.mj-accordion-checkbox + * .mj-accordion-ico { display: none; }++      @goodbye { @gmail }+    +    </style>+    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   class="testing-accordion" style="background:green;font-size:0px;padding:2px;padding-right:3px;word-break:break-word;"+                >+                  +      <table+         cellspacing="0" cellpadding="0" class="mj-accordion" style="width:100%;border-collapse:collapse;border:1px solid red;border-bottom:none;font-family:Comic;"+      >+        <tbody>+          +      <tr+         class="testing-first"+      >+        <td  style="padding:0px;background-color:red;">+          <label+             class="mj-accordion-element" style="font-size:13px;font-family:Arial;"+          >+            +    <!--[if !mso | IE]><!--><input class="mj-accordion-checkbox" type="checkbox" style="display:none;" /><!--<![endif]-->+  +            <div>+              +      <div  class="mj-accordion-title">+        <table+           cellspacing="0" cellpadding="0" style="width:100%;border-bottom:1px solid red;"+        >+          <tbody>+            <tr>+              +      <td+         style="width:100%;font-size:13px;font-family:Arial;padding:16px;"+      >+        Why use an accordion?+      </td>+    ++    <!--[if !mso | IE]><!--><td class="mj-accordion-ico" style="padding:16px;vertical-align:middle;" ><img src="https://i.imgur.com/bIXv1bk.png" alt="+" class="mj-accordion-more" style="display:none;width:32px;height:32px;" /><img src="https://i.imgur.com/w4uTygT.png" alt="-" class="mj-accordion-less" style="display:none;width:32px;height:32px;" /></td><!--<![endif]-->+  +            </tr>+          </tbody>+        </table>+      </div>+    +      <div+         class="mj-accordion-content"+      >+        <table+           cellspacing="0" cellpadding="0" style="width:100%;border-bottom:1px solid red;"+        >+          <tbody>+            <tr>+              +      <td+         style="font-size:13px;font-family:Arial;line-height:1;padding:16px;"+      >+        <span>+                Because emails with a lot of content are most of the time a very bad experience on mobile, mj-accordion comes handy when you want to deliver a lot of information in a concise way.+              </span>+      </td>+    +            </tr>+          </tbody>+        </table>+      </div>+    +            </div>+          </label>+        </td>+      </tr>+    +      <tr+        +      >+        <td  style="padding:0px;">+          <label+             class="mj-accordion-element" style="font-size:13px;"+          >+            +    <!--[if !mso | IE]><!--><input class="mj-accordion-checkbox" type="checkbox" style="display:none;" /><!--<![endif]-->+  +            <div>+              +      <div  class="mj-accordion-title">+        <table+           cellspacing="0" cellpadding="0" style="width:100%;border-bottom:1px solid red;"+        >+          <tbody>+            <tr>+              +      <td+         class="testing-title" style="width:100%;background-color:orange;color:purple;font-size:13px;font-family:Comic;padding:16px;"+      >+        How it works+      </td>+    ++    <!--[if !mso | IE]><!--><td class="mj-accordion-ico" style="padding:16px;background:orange;vertical-align:middle;" ><img src="https://i.imgur.com/bIXv1bk.png" alt="+" class="mj-accordion-more" style="display:none;width:32px;height:32px;" /><img src="https://i.imgur.com/w4uTygT.png" alt="-" class="mj-accordion-less" style="display:none;width:32px;height:32px;" /></td><!--<![endif]-->+  +            </tr>+          </tbody>+        </table>+      </div>+    +      <div+         class="mj-accordion-content"+      >+        <table+           cellspacing="0" cellpadding="0" style="width:100%;border-bottom:1px solid red;"+        >+          <tbody>+            <tr>+              +      <td+         class="testing-text" style="background:brown;font-size:13px;font-family:Comic;line-height:1;color:red;padding:16px;"+      >+        <span>+                Content is stacked into tabs and users can expand them at will. If responsive styles are not supported (mostly on desktop clients), tabs are then expanded and your content is readable at once.+              </span>+      </td>+    +            </tr>+          </tbody>+        </table>+      </div>+    +            </div>+          </label>+        </td>+      </tr>+    +        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-accordion-other.mjml view
@@ -0,0 +1,28 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-accordion border="1px solid red" container-background-color="green" css-class="testing-accordion" font-family="Comic" padding="2px" padding-right="3px">+          <mj-accordion-element background-color="red" css-class="testing-first" font-family="Arial">+            <mj-accordion-title>Why use an accordion?</mj-accordion-title>+            <mj-accordion-text>+              <span>+                Because emails with a lot of content are most of the time a very bad experience on mobile, mj-accordion comes handy when you want to deliver a lot of information in a concise way.+              </span>+            </mj-accordion-text>+          </mj-accordion-element>+          <mj-accordion-element>+            <mj-accordion-title  background-color="orange" color="purple" css-class="testing-title">+              How it works+            </mj-accordion-title>+            <mj-accordion-text  background-color="brown" color="red" css-class="testing-text">+              <span>+                Content is stacked into tabs and users can expand them at will. If responsive styles are not supported (mostly on desktop clients), tabs are then expanded and your content is readable at once.+              </span>+            </mj-accordion-text>+          </mj-accordion-element>+        </mj-accordion>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-accordion.html view
@@ -0,0 +1,268 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    <style type="text/css">++      noinput.mj-accordion-checkbox { display:block!important; }++      @media yahoo, only screen and (min-width:0) {+        .mj-accordion-element { display:block; }+        .mj-accordion-checkbox[type="checkbox"], .mj-accordion-less { display:none!important; }+        .mj-accordion-checkbox[type="checkbox"] + * .mj-accordion-title { cursor:pointer; touch-action:manipulation; -webkit-user-select:none; -moz-user-select:none; user-select:none; }+        .mj-accordion-checkbox[type="checkbox"] + * .mj-accordion-content { overflow:hidden; display:none; }+        .mj-accordion-checkbox[type="checkbox"] + * .mj-accordion-more { display:block!important; }+        .mj-accordion-checkbox:checked + * .mj-accordion-content { display:block; }+        .mj-accordion-checkbox:checked + * .mj-accordion-more { display:none!important; }+        .mj-accordion-checkbox:checked + * .mj-accordion-less { display:block!important; }+      }++      .moz-text-html input.mj-accordion-checkbox + * .mj-accordion-title { cursor: auto; touch-action: auto; -webkit-user-select: auto; -moz-user-select: auto; user-select: auto; }+      .moz-text-html input.mj-accordion-checkbox + * .mj-accordion-content { overflow: hidden; display: block; }+      .moz-text-html input.mj-accordion-checkbox + * .mj-accordion-ico { display: none; }++      @goodbye { @gmail }+    +    </style>+    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         cellspacing="0" cellpadding="0" class="mj-accordion" style="width:100%;border-collapse:collapse;border:2px solid black;border-bottom:none;font-family:Ubuntu, Helvetica, Arial, sans-serif;"+      >+        <tbody>+          +      <tr+        +      >+        <td  style="padding:0px;">+          <label+             class="mj-accordion-element" style="font-size:13px;"+          >+            +    <!--[if !mso | IE]><!--><input class="mj-accordion-checkbox" type="checkbox" style="display:none;" /><!--<![endif]-->+  +            <div>+              +      <div  class="mj-accordion-title">+        <table+           cellspacing="0" cellpadding="0" style="width:100%;border-bottom:2px solid black;"+        >+          <tbody>+            <tr>+              +      <td+         style="width:100%;font-size:13px;font-family:Ubuntu, Helvetica, Arial, sans-serif;padding:16px;"+      >+        Why use an accordion?+      </td>+    ++    <!--[if !mso | IE]><!--><td class="mj-accordion-ico" style="padding:16px;vertical-align:middle;" ><img src="https://i.imgur.com/bIXv1bk.png" alt="+" class="mj-accordion-more" style="display:none;width:32px;height:32px;" /><img src="https://i.imgur.com/w4uTygT.png" alt="-" class="mj-accordion-less" style="display:none;width:32px;height:32px;" /></td><!--<![endif]-->+  +            </tr>+          </tbody>+        </table>+      </div>+    +      <div+         class="mj-accordion-content"+      >+        <table+           cellspacing="0" cellpadding="0" style="width:100%;border-bottom:2px solid black;"+        >+          <tbody>+            <tr>+              +      <td+         style="font-size:13px;font-family:Ubuntu, Helvetica, Arial, sans-serif;line-height:1;padding:16px;"+      >+        <span>+                Because emails with a lot of content are most of the time a very bad experience on mobile, mj-accordion comes handy when you want to deliver a lot of information in a concise way.+              </span>+      </td>+    +            </tr>+          </tbody>+        </table>+      </div>+    +            </div>+          </label>+        </td>+      </tr>+    +      <tr+        +      >+        <td  style="padding:0px;">+          <label+             class="mj-accordion-element" style="font-size:13px;"+          >+            +    <!--[if !mso | IE]><!--><input class="mj-accordion-checkbox" type="checkbox" style="display:none;" /><!--<![endif]-->+  +            <div>+              +      <div  class="mj-accordion-title">+        <table+           cellspacing="0" cellpadding="0" style="width:100%;border-bottom:2px solid black;"+        >+          <tbody>+            <tr>+              +      <td+         style="width:100%;font-size:13px;font-family:Ubuntu, Helvetica, Arial, sans-serif;padding:16px;"+      >+        How it works+      </td>+    ++    <!--[if !mso | IE]><!--><td class="mj-accordion-ico" style="padding:16px;vertical-align:middle;" ><img src="https://i.imgur.com/bIXv1bk.png" alt="+" class="mj-accordion-more" style="display:none;width:32px;height:32px;" /><img src="https://i.imgur.com/w4uTygT.png" alt="-" class="mj-accordion-less" style="display:none;width:32px;height:32px;" /></td><!--<![endif]-->+  +            </tr>+          </tbody>+        </table>+      </div>+    +      <div+         class="mj-accordion-content"+      >+        <table+           cellspacing="0" cellpadding="0" style="width:100%;border-bottom:2px solid black;"+        >+          <tbody>+            <tr>+              +      <td+         style="font-size:13px;font-family:Ubuntu, Helvetica, Arial, sans-serif;line-height:1;padding:16px;"+      >+        <span>+                Content is stacked into tabs and users can expand them at will. If responsive styles are not supported (mostly on desktop clients), tabs are then expanded and your content is readable at once.+              </span>+      </td>+    +            </tr>+          </tbody>+        </table>+      </div>+    +            </div>+          </label>+        </td>+      </tr>+    +        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-accordion.mjml view
@@ -0,0 +1,26 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-accordion>+          <mj-accordion-element>+            <mj-accordion-title>Why use an accordion?</mj-accordion-title>+            <mj-accordion-text>+              <span>+                Because emails with a lot of content are most of the time a very bad experience on mobile, mj-accordion comes handy when you want to deliver a lot of information in a concise way.+              </span>+            </mj-accordion-text>+          </mj-accordion-element>+          <mj-accordion-element>+            <mj-accordion-title>How it works</mj-accordion-title>+            <mj-accordion-text>+              <span>+                Content is stacked into tabs and users can expand them at will. If responsive styles are not supported (mostly on desktop clients), tabs are then expanded and your content is readable at once.+              </span>+            </mj-accordion-text>+          </mj-accordion-element>+        </mj-accordion>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-attributes.html view
@@ -0,0 +1,114 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:0;word-break:break-word;"+                >+                  +      <div+         style="font-family:Arial;font-size:20px;line-height:1;text-align:left;color:blue;"+      >Hello World!</div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-attributes.mjml view
@@ -0,0 +1,19 @@+<mjml>+  <mj-head>+    <mj-attributes>+      <mj-text padding="0" />+      <mj-class name="blue" color="blue" />+      <mj-class name="big" font-size="20px" />+      <mj-all font-family="Arial" />+    </mj-attributes>+  </mj-head>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-text mj-class="blue big">+          Hello World!+        </mj-text>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-body-background-color.html view
@@ -0,0 +1,49 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    +    +    +  </head>+  +      <body  style="word-spacing:normal;background-color:green;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;background-color:green;"+        >+        +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-body-background-color.mjml view
@@ -0,0 +1,4 @@+<mjml>+  <mj-body background-color="green">+  </mj-body>+</mjml>
+ test/fixtures/mj-body-class.html view
@@ -0,0 +1,49 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    +    +    +  </head>+  +      <body  class="testing" style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-body-class.mjml view
@@ -0,0 +1,4 @@+<mjml>+  <mj-body css-class="testing">+  </mj-body>+</mjml>
+ test/fixtures/mj-body-width.html view
@@ -0,0 +1,49 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-body-width.mjml view
@@ -0,0 +1,4 @@+<mjml>+  <mj-body width="420">+  </mj-body>+</mjml>
+ test/fixtures/mj-body.html view
@@ -0,0 +1,49 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        <!-- nothing -->+      </div>+      </body>+    +</html>+
+ test/fixtures/mj-body.mjml view
@@ -0,0 +1,5 @@+<mjml>+  <mj-body>+    <!-- nothing -->+  </mj-body>+</mjml>
+ test/fixtures/mj-breakpoint-default.html view
@@ -0,0 +1,122 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      >Hello World!</div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-breakpoint-default.mjml view
@@ -0,0 +1,10 @@+<mjml>+  <mj-head />+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-text> Hello World! </mj-text>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-breakpoint-options.html view
@@ -0,0 +1,122 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      >Hello World!</div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-breakpoint-options.mjml view
@@ -0,0 +1,10 @@+<mjml>+  <mj-head />+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-text> Hello World! </mj-text>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-breakpoint.html view
@@ -0,0 +1,122 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:320px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:320px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      >Hello World!</div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-breakpoint.mjml view
@@ -0,0 +1,14 @@+<mjml>+  <mj-head>+    <mj-breakpoint width="320px" />+  </mj-head>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-text>+          Hello World!+        </mj-text>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-button-align.html view
@@ -0,0 +1,188 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"+      >+        <tbody>+          <tr>+            <td+               align="center" bgcolor="#414141" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#414141;" valign="middle"+            >+              <p+                 style="display:inline-block;background:#414141;color:#ffffff;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;"+              >+                Don't click me!+              </p>+            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"+      >+        <tbody>+          <tr>+            <td+               align="center" bgcolor="#414141" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#414141;" valign="middle"+            >+              <p+                 style="display:inline-block;background:#414141;color:#ffffff;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;"+              >+                Don't click me!+              </p>+            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +              <tr>+                <td+                   align="right" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"+      >+        <tbody>+          <tr>+            <td+               align="center" bgcolor="#414141" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#414141;" valign="middle"+            >+              <p+                 style="display:inline-block;background:#414141;color:#ffffff;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;"+              >+                Don't click me!+              </p>+            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-button-align.mjml view
@@ -0,0 +1,17 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-button align="left">+          Don't click me!+         </mj-button>+        <mj-button align="center">+          Don't click me!+         </mj-button>+        <mj-button align="right">+          Don't click me!+         </mj-button>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-button-background.html view
@@ -0,0 +1,136 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"+      >+        <tbody>+          <tr>+            <td+               align="center" bgcolor="#cacaca" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#cacaca;" valign="middle"+            >+              <p+                 style="display:inline-block;background:#cacaca;color:#ffffff;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;"+              >+                Don't click me!+              </p>+            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-button-background.mjml view
@@ -0,0 +1,11 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-button background-color="#cacaca">+          Don't click me!+         </mj-button>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-button-border-radius.html view
@@ -0,0 +1,136 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"+      >+        <tbody>+          <tr>+            <td+               align="center" bgcolor="#414141" role="presentation" style="border:none;border-radius:10px;cursor:auto;mso-padding-alt:10px 25px;background:#414141;" valign="middle"+            >+              <p+                 style="display:inline-block;background:#414141;color:#ffffff;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:10px;"+              >+                Don't click me!+              </p>+            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-button-border-radius.mjml view
@@ -0,0 +1,11 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-button border-radius="10px">+          Don't click me!+         </mj-button>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-button-border.html view
@@ -0,0 +1,162 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"+      >+        <tbody>+          <tr>+            <td+               align="center" bgcolor="#414141" role="presentation" style="border:1px solid red;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#414141;" valign="middle"+            >+              <p+                 style="display:inline-block;background:#414141;color:#ffffff;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;"+              >+                Don't click me!+              </p>+            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"+      >+        <tbody>+          <tr>+            <td+               align="center" bgcolor="#414141" role="presentation" style="border:none;border-bottom:3px solid blue;border-left:4px solid orange;border-radius:3px;border-right:2px solid green;border-top:1px solid red;cursor:auto;mso-padding-alt:10px 25px;background:#414141;" valign="middle"+            >+              <p+                 style="display:inline-block;background:#414141;color:#ffffff;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;"+              >+                Don't click me!+              </p>+            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-button-border.mjml view
@@ -0,0 +1,14 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-button border="1px solid red">+          Don't click me!+         </mj-button>+        <mj-button border-top="1px solid red" border-right="2px solid green" border-bottom="3px solid blue" border-left="4px solid orange">+          Don't click me!+         </mj-button>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-button-class.html view
@@ -0,0 +1,136 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" class="testing" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"+      >+        <tbody>+          <tr>+            <td+               align="center" bgcolor="#414141" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#414141;" valign="middle"+            >+              <p+                 style="display:inline-block;background:#414141;color:#ffffff;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;"+              >+                Don't click me!+              </p>+            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-button-class.mjml view
@@ -0,0 +1,11 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-button css-class="testing">+          Don't click me!+         </mj-button>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-button-color.html view
@@ -0,0 +1,136 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"+      >+        <tbody>+          <tr>+            <td+               align="center" bgcolor="#414141" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#414141;" valign="middle"+            >+              <p+                 style="display:inline-block;background:#414141;color:red;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;"+              >+                Don't click me!+              </p>+            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-button-color.mjml view
@@ -0,0 +1,11 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-button color="red">+          Don't click me!+         </mj-button>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-button-container-background-color.html view
@@ -0,0 +1,136 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="background:red;font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"+      >+        <tbody>+          <tr>+            <td+               align="center" bgcolor="#414141" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#414141;" valign="middle"+            >+              <p+                 style="display:inline-block;background:#414141;color:#ffffff;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;"+              >+                Don't click me!+              </p>+            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-button-container-background-color.mjml view
@@ -0,0 +1,11 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-button container-background-color="red">+          Don't click me!+         </mj-button>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-button-example.html view
@@ -0,0 +1,128 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"+      >+        <tbody>+          <tr>+            <td+               align="center" bgcolor="#f45e43" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#f45e43;" valign="middle"+            >+              <p+                 style="display:inline-block;background:#f45e43;color:white;font-family:Helvetica;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;"+              >+                Don't click me!+              </p>+            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-button-example.mjml view
@@ -0,0 +1,11 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-button font-family="Helvetica" background-color="#f45e43" color="white">+          Don't click me!+         </mj-button>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-button-font-family.html view
@@ -0,0 +1,128 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"+      >+        <tbody>+          <tr>+            <td+               align="center" bgcolor="#414141" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#414141;" valign="middle"+            >+              <p+                 style="display:inline-block;background:#414141;color:#ffffff;font-family:Helvetica;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;"+              >+                Don't click me!+              </p>+            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-button-font-family.mjml view
@@ -0,0 +1,11 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-button font-family="Helvetica">+          Don't click me!+         </mj-button>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-button-font-size.html view
@@ -0,0 +1,136 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"+      >+        <tbody>+          <tr>+            <td+               align="center" bgcolor="#414141" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#414141;" valign="middle"+            >+              <p+                 style="display:inline-block;background:#414141;color:#ffffff;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:20px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;"+              >+                Don't click me!+              </p>+            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-button-font-size.mjml view
@@ -0,0 +1,11 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-button font-size="20px">+          Don't click me!+         </mj-button>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-button-font-style.html view
@@ -0,0 +1,136 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"+      >+        <tbody>+          <tr>+            <td+               align="center" bgcolor="#414141" role="presentation" style="border:none;border-radius:3px;cursor:auto;font-style:oblique;mso-padding-alt:10px 25px;background:#414141;" valign="middle"+            >+              <p+                 style="display:inline-block;background:#414141;color:#ffffff;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;font-style:oblique;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;"+              >+                Don't click me!+              </p>+            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-button-font-style.mjml view
@@ -0,0 +1,11 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-button font-style="oblique">+          Don't click me!+         </mj-button>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-button-font-weight.html view
@@ -0,0 +1,136 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"+      >+        <tbody>+          <tr>+            <td+               align="center" bgcolor="#414141" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#414141;" valign="middle"+            >+              <p+                 style="display:inline-block;background:#414141;color:#ffffff;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;font-weight:bolder;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;"+              >+                Don't click me!+              </p>+            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-button-font-weight.mjml view
@@ -0,0 +1,11 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-button font-weight="bolder">+          Don't click me!+         </mj-button>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-button-height.html view
@@ -0,0 +1,136 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"+      >+        <tbody>+          <tr>+            <td+               align="center" bgcolor="#414141" role="presentation" style="border:none;border-radius:3px;cursor:auto;height:80px;mso-padding-alt:10px 25px;background:#414141;" valign="middle"+            >+              <p+                 style="display:inline-block;background:#414141;color:#ffffff;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;"+              >+                Don't click me!+              </p>+            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-button-height.mjml view
@@ -0,0 +1,11 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-button height="80px">+          Don't click me!+         </mj-button>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-button-href.html view
@@ -0,0 +1,162 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"+      >+        <tbody>+          <tr>+            <td+               align="center" bgcolor="#414141" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#414141;" valign="middle"+            >+              <a+                 href="https://crates.io/crates/mrml" style="display:inline-block;background:#414141;color:#ffffff;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;" target="_blank"+              >+                Don't click me!+              </a>+            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"+      >+        <tbody>+          <tr>+            <td+               align="center" bgcolor="#414141" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#414141;" valign="middle"+            >+              <a+                 href="https://crates.io/crates/mrml" rel="testing" style="display:inline-block;background:#414141;color:#ffffff;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;" target="_self"+              >+                Don't click me!+              </a>+            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-button-href.mjml view
@@ -0,0 +1,14 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-button href="https://crates.io/crates/mrml">+          Don't click me!+         </mj-button>+        <mj-button href="https://crates.io/crates/mrml" rel="testing" target="_self">+          Don't click me!+         </mj-button>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-button-inner-padding.html view
@@ -0,0 +1,136 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"+      >+        <tbody>+          <tr>+            <td+               align="center" bgcolor="#414141" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:1px 2px 3px 4px;background:#414141;" valign="middle"+            >+              <p+                 style="display:inline-block;background:#414141;color:#ffffff;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:1px 2px 3px 4px;mso-padding-alt:0px;border-radius:3px;"+              >+                Don't click me!+              </p>+            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-button-inner-padding.mjml view
@@ -0,0 +1,11 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-button inner-padding="1px 2px 3px 4px">+          Don't click me!+         </mj-button>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-button-line-height.html view
@@ -0,0 +1,136 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"+      >+        <tbody>+          <tr>+            <td+               align="center" bgcolor="#414141" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#414141;" valign="middle"+            >+              <p+                 style="display:inline-block;background:#414141;color:#ffffff;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:30;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;"+              >+                Don't click me!+              </p>+            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-button-line-height.mjml view
@@ -0,0 +1,11 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-button line-height="30">+          Don't click me!+         </mj-button>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-button-padding.html view
@@ -0,0 +1,162 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:2px 3px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"+      >+        <tbody>+          <tr>+            <td+               align="center" bgcolor="#414141" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#414141;" valign="middle"+            >+              <p+                 style="display:inline-block;background:#414141;color:#ffffff;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;"+              >+                Don't click me!+              </p>+            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;padding-top:1px;padding-right:2px;padding-bottom:3px;padding-left:4px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"+      >+        <tbody>+          <tr>+            <td+               align="center" bgcolor="#414141" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#414141;" valign="middle"+            >+              <p+                 style="display:inline-block;background:#414141;color:#ffffff;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;"+              >+                Don't click me!+              </p>+            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-button-padding.mjml view
@@ -0,0 +1,14 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-button padding="2px 3px">+          Don't click me!+         </mj-button>+        <mj-button padding-top="1px" padding-right="2px" padding-bottom="3px" padding-left="4px">+          Don't click me!+         </mj-button>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-button-text-decoration.html view
@@ -0,0 +1,136 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"+      >+        <tbody>+          <tr>+            <td+               align="center" bgcolor="#414141" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#414141;" valign="middle"+            >+              <p+                 style="display:inline-block;background:#414141;color:#ffffff;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:underline;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;"+              >+                Don't click me!+              </p>+            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-button-text-decoration.mjml view
@@ -0,0 +1,11 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-button text-decoration="underline">+          Don't click me!+         </mj-button>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-button-text-transform.html view
@@ -0,0 +1,136 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"+      >+        <tbody>+          <tr>+            <td+               align="center" bgcolor="#414141" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#414141;" valign="middle"+            >+              <p+                 style="display:inline-block;background:#414141;color:#ffffff;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:lowercase;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;"+              >+                Don't click me!+              </p>+            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-button-text-transform.mjml view
@@ -0,0 +1,11 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-button text-transform="lowercase">+          Don't click me!+         </mj-button>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-button-vertical-align.html view
@@ -0,0 +1,162 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"+      >+        <tbody>+          <tr>+            <td+               align="center" bgcolor="#414141" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#414141;" valign="top"+            >+              <p+                 style="display:inline-block;background:#414141;color:#ffffff;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;"+              >+                Don't click me!+              </p>+            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"+      >+        <tbody>+          <tr>+            <td+               align="center" bgcolor="#414141" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#414141;" valign="bottom"+            >+              <p+                 style="display:inline-block;background:#414141;color:#ffffff;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;"+              >+                Don't click me!+              </p>+            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-button-vertical-align.mjml view
@@ -0,0 +1,14 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-button vertical-align="top">+          Don't click me!+         </mj-button>+        <mj-button vertical-align="bottom">+          Don't click me!+         </mj-button>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-button-width.html view
@@ -0,0 +1,136 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;width:300px;line-height:100%;"+      >+        <tbody>+          <tr>+            <td+               align="center" bgcolor="#414141" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#414141;" valign="middle"+            >+              <p+                 style="display:inline-block;width:250px;background:#414141;color:#ffffff;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;"+              >+                Don't click me!+              </p>+            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-button-width.mjml view
@@ -0,0 +1,11 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-button width="300px">+          Don't click me!+         </mj-button>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-button.html view
@@ -0,0 +1,136 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"+      >+        <tbody>+          <tr>+            <td+               align="center" bgcolor="#414141" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#414141;" valign="middle"+            >+              <p+                 style="display:inline-block;background:#414141;color:#ffffff;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;"+              >+                Don't click me!+              </p>+            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-button.mjml view
@@ -0,0 +1,11 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-button>+          Don't click me!+         </mj-button>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
@@ -0,0 +1,206 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    <style type="text/css">++    .mj-carousel {+      -webkit-user-select: none;+      -moz-user-select: none;+      user-select: none;+    }++    .mj-carousel-00000000-icons-cell {+      display: table-cell !important;+      width: 44px !important;+    }++    .mj-carousel-radio,+    .mj-carousel-next,+    .mj-carousel-previous {+      display: none !important;+    }++    .mj-carousel-thumbnail,+    .mj-carousel-next,+    .mj-carousel-previous {+      touch-action: manipulation;+    }++    .mj-carousel-00000000-radio:checked + .mj-carousel-content .mj-carousel-image,.mj-carousel-00000000-radio:checked + * + .mj-carousel-content .mj-carousel-image,.mj-carousel-00000000-radio:checked + * + * + .mj-carousel-content .mj-carousel-image {+      display: none !important;+    }++    .mj-carousel-00000000-radio-1:checked + * + * + .mj-carousel-content .mj-carousel-image-1,.mj-carousel-00000000-radio-2:checked + * + .mj-carousel-content .mj-carousel-image-2,.mj-carousel-00000000-radio-3:checked + .mj-carousel-content .mj-carousel-image-3 {+      display: block !important;+    }++    .mj-carousel-previous-icons,+    .mj-carousel-next-icons,+    .mj-carousel-00000000-radio-1:checked + * + * + .mj-carousel-content .mj-carousel-next-2,.mj-carousel-00000000-radio-2:checked + * + .mj-carousel-content .mj-carousel-next-3,.mj-carousel-00000000-radio-3:checked + .mj-carousel-content .mj-carousel-next-1,+    .mj-carousel-00000000-radio-1:checked + * + * + .mj-carousel-content .mj-carousel-previous-3,.mj-carousel-00000000-radio-2:checked + * + .mj-carousel-content .mj-carousel-previous-1,.mj-carousel-00000000-radio-3:checked + .mj-carousel-content .mj-carousel-previous-2 {+      display: block !important;+    }++    .mj-carousel-00000000-radio-1:checked + * + * + .mj-carousel-content .mj-carousel-00000000-thumbnail-1,.mj-carousel-00000000-radio-2:checked + * + .mj-carousel-content .mj-carousel-00000000-thumbnail-2,.mj-carousel-00000000-radio-3:checked + .mj-carousel-content .mj-carousel-00000000-thumbnail-3 {+      border-color: #cccccc !important;+    }++    .mj-carousel-00000000-radio-1:checked + * + * + .mj-carousel-content .mj-carousel-00000000-thumbnail+          ,.mj-carousel-00000000-radio-2:checked + * + .mj-carousel-content .mj-carousel-00000000-thumbnail+          ,.mj-carousel-00000000-radio-3:checked + .mj-carousel-content .mj-carousel-00000000-thumbnail+           {+      display: inline-block !important;+    }++    .mj-carousel-image img + div,+    .mj-carousel-thumbnail img + div {+      display: none !important;+    }++    .mj-carousel-00000000-thumbnail:hover + * + * + .mj-carousel-main .mj-carousel-image,.mj-carousel-00000000-thumbnail:hover + * + .mj-carousel-main .mj-carousel-image,.mj-carousel-00000000-thumbnail:hover + .mj-carousel-main .mj-carousel-image {+      display: none !important;+    }++    .mj-carousel-thumbnail:hover {+      border-color: #fead0d !important;+    }++    .mj-carousel-00000000-thumbnail-1:hover + * + * + .mj-carousel-main .mj-carousel-image-1,.mj-carousel-00000000-thumbnail-2:hover + * + .mj-carousel-main .mj-carousel-image-2,.mj-carousel-00000000-thumbnail-3:hover + .mj-carousel-main .mj-carousel-image-3 {+      display: block !important;+    }+    ++      .mj-carousel noinput { display:block !important; }+      .mj-carousel noinput .mj-carousel-image-1 { display: block !important;  }+      .mj-carousel noinput .mj-carousel-arrows,+      .mj-carousel noinput .mj-carousel-thumbnails { display: none !important; }++      [owa] .mj-carousel-thumbnail { display: none !important; }+      +      @media screen yahoo {+          .mj-carousel-00000000-icons-cell,+          .mj-carousel-previous-icons,+          .mj-carousel-next-icons {+              display: none !important;+          }++          .mj-carousel-00000000-radio-1:checked + *+ *+ .mj-carousel-content .mj-carousel-00000000-thumbnail-1 {+              border-color: transparent;+          }+      }+    +    </style>+    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="right" class="container" style="font-size:0px;word-break:break-word;"+                >+                  +      +    <!--[if !mso]><!--><div class="mj-carousel" ><input class="mj-carousel-radio mj-carousel-00000000-radio mj-carousel-00000000-radio-1" checked="checked" type="radio" name="mj-carousel-radio-00000000" id="mj-carousel-00000000-radio-1" style="display:none;mso-hide:all;" /><input class="mj-carousel-radio mj-carousel-00000000-radio mj-carousel-00000000-radio-2" type="radio" name="mj-carousel-radio-00000000" id="mj-carousel-00000000-radio-2" style="display:none;mso-hide:all;" /><input class="mj-carousel-radio mj-carousel-00000000-radio mj-carousel-00000000-radio-3" type="radio" name="mj-carousel-radio-00000000" id="mj-carousel-00000000-radio-3" style="display:none;mso-hide:all;" /><div class="mj-carousel-content mj-carousel-00000000-content" style="display:table;width:100%;table-layout:fixed;text-align:center;font-size:0px;" ><a style="border:2px solid transparent;border-radius:6px;display:inline-block;overflow:hidden;width:110px;" href="#1" target="_blank" class="mj-carousel-thumbnail mj-carousel-00000000-thumbnail mj-carousel-00000000-thumbnail-1 " ><label for="mj-carousel-00000000-radio-1"><img style="display:block;width:100%;height:auto;" src="https://www.mailjet.com/wp-content/uploads/2016/11/ecommerce-guide.jpg" alt="first" width="110" /></label></a><a style="border:2px solid transparent;border-radius:6px;display:inline-block;overflow:hidden;width:110px;" href="#2" target="_blank" class="mj-carousel-thumbnail mj-carousel-00000000-thumbnail mj-carousel-00000000-thumbnail-2 middle-thumbnail" ><label for="mj-carousel-00000000-radio-2"><img style="display:block;width:100%;height:auto;" src="https://www.mailjet.com/wp-content/uploads/2016/09/3@1x.png" alt="" width="110" /></label></a><a style="border:2px solid transparent;border-radius:6px;display:inline-block;overflow:hidden;width:110px;" href="#3" target="_blank" class="mj-carousel-thumbnail mj-carousel-00000000-thumbnail mj-carousel-00000000-thumbnail-3 " ><label for="mj-carousel-00000000-radio-3"><img style="display:block;width:100%;height:auto;" src="https://www.mailjet.com/wp-content/uploads/2016/09/1@1x.png" alt="" width="110" /></label></a><table style="caption-side:top;display:table-caption;table-layout:fixed;width:100%;" border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" class="mj-carousel-main" ><tbody><tr><td class="mj-carousel-00000000-icons-cell" style="font-size:0px;display:none;mso-hide:all;padding:0px;" ><div class="mj-carousel-previous-icons" style="display:none;mso-hide:all;" ><label for="mj-carousel-00000000-radio-1" class="mj-carousel-previous mj-carousel-previous-1" ><img src="https://i.imgur.com/xTh3hln.png" alt="previous" style="display:block;width:44px;height:auto;" width="44" /></label><label for="mj-carousel-00000000-radio-2" class="mj-carousel-previous mj-carousel-previous-2" ><img src="https://i.imgur.com/xTh3hln.png" alt="previous" style="display:block;width:44px;height:auto;" width="44" /></label><label for="mj-carousel-00000000-radio-3" class="mj-carousel-previous mj-carousel-previous-3" ><img src="https://i.imgur.com/xTh3hln.png" alt="previous" style="display:block;width:44px;height:auto;" width="44" /></label></div></td><td style="padding:0px;" ><div class="mj-carousel-images" ><div class="mj-carousel-image mj-carousel-image-1 " style="" ><img src="https://www.mailjet.com/wp-content/uploads/2016/11/ecommerce-guide.jpg" alt="first" style="border-radius:2px;display:block;width:600px;max-width:100%;height:auto;" width="600" border="0" /></div><div class="mj-carousel-image mj-carousel-image-2 middle" style="display:none;mso-hide:all;" ><img src="https://www.mailjet.com/wp-content/uploads/2016/09/3@1x.png" alt="" style="border-radius:2px;display:block;width:600px;max-width:100%;height:auto;" width="600" border="0" /></div><div class="mj-carousel-image mj-carousel-image-3 " style="display:none;mso-hide:all;" ><a href="https://jolimail.io" target="_blank"><img src="https://www.mailjet.com/wp-content/uploads/2016/09/1@1x.png" alt="" style="border-radius:2px;display:block;width:600px;max-width:100%;height:auto;" width="600" border="0" /></a></div></div></td><td class="mj-carousel-00000000-icons-cell" style="font-size:0px;display:none;mso-hide:all;padding:0px;" ><div class="mj-carousel-next-icons" style="display:none;mso-hide:all;" ><label for="mj-carousel-00000000-radio-1" class="mj-carousel-next mj-carousel-next-1" ><img src="https://i.imgur.com/os7o9kz.png" alt="next" style="display:block;width:44px;height:auto;" width="44" /></label><label for="mj-carousel-00000000-radio-2" class="mj-carousel-next mj-carousel-next-2" ><img src="https://i.imgur.com/os7o9kz.png" alt="next" style="display:block;width:44px;height:auto;" width="44" /></label><label for="mj-carousel-00000000-radio-3" class="mj-carousel-next mj-carousel-next-3" ><img src="https://i.imgur.com/os7o9kz.png" alt="next" style="display:block;width:44px;height:auto;" width="44" /></label></div></td></tr></tbody></table></div></div><!--<![endif]-->+  +      +    <!--[if mso]><div class="mj-carousel-image mj-carousel-image-1 " style="" ><img src="https://www.mailjet.com/wp-content/uploads/2016/11/ecommerce-guide.jpg" alt="first" style="border-radius:2px;display:block;width:600px;max-width:100%;height:auto;" width="600" border="0" /></div><![endif]-->+  +    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+  
@@ -0,0 +1,13 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-carousel align="right" border-radius="2px" css-class="container">+          <mj-carousel-image alt="first" src="https://www.mailjet.com/wp-content/uploads/2016/11/ecommerce-guide.jpg" />+          <mj-carousel-image css-class="middle" src="https://www.mailjet.com/wp-content/uploads/2016/09/3@1x.png" />+          <mj-carousel-image href="https://jolimail.io" src="https://www.mailjet.com/wp-content/uploads/2016/09/1@1x.png" />+        </mj-carousel>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
@@ -0,0 +1,206 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    <style type="text/css">++    .mj-carousel {+      -webkit-user-select: none;+      -moz-user-select: none;+      user-select: none;+    }++    .mj-carousel-00000000-icons-cell {+      display: table-cell !important;+      width: 22px !important;+    }++    .mj-carousel-radio,+    .mj-carousel-next,+    .mj-carousel-previous {+      display: none !important;+    }++    .mj-carousel-thumbnail,+    .mj-carousel-next,+    .mj-carousel-previous {+      touch-action: manipulation;+    }++    .mj-carousel-00000000-radio:checked + .mj-carousel-content .mj-carousel-image,.mj-carousel-00000000-radio:checked + * + .mj-carousel-content .mj-carousel-image,.mj-carousel-00000000-radio:checked + * + * + .mj-carousel-content .mj-carousel-image {+      display: none !important;+    }++    .mj-carousel-00000000-radio-1:checked + * + * + .mj-carousel-content .mj-carousel-image-1,.mj-carousel-00000000-radio-2:checked + * + .mj-carousel-content .mj-carousel-image-2,.mj-carousel-00000000-radio-3:checked + .mj-carousel-content .mj-carousel-image-3 {+      display: block !important;+    }++    .mj-carousel-previous-icons,+    .mj-carousel-next-icons,+    .mj-carousel-00000000-radio-1:checked + * + * + .mj-carousel-content .mj-carousel-next-2,.mj-carousel-00000000-radio-2:checked + * + .mj-carousel-content .mj-carousel-next-3,.mj-carousel-00000000-radio-3:checked + .mj-carousel-content .mj-carousel-next-1,+    .mj-carousel-00000000-radio-1:checked + * + * + .mj-carousel-content .mj-carousel-previous-3,.mj-carousel-00000000-radio-2:checked + * + .mj-carousel-content .mj-carousel-previous-1,.mj-carousel-00000000-radio-3:checked + .mj-carousel-content .mj-carousel-previous-2 {+      display: block !important;+    }++    .mj-carousel-00000000-radio-1:checked + * + * + .mj-carousel-content .mj-carousel-00000000-thumbnail-1,.mj-carousel-00000000-radio-2:checked + * + .mj-carousel-content .mj-carousel-00000000-thumbnail-2,.mj-carousel-00000000-radio-3:checked + .mj-carousel-content .mj-carousel-00000000-thumbnail-3 {+      border-color: #cccccc !important;+    }++    .mj-carousel-00000000-radio-1:checked + * + * + .mj-carousel-content .mj-carousel-00000000-thumbnail+          ,.mj-carousel-00000000-radio-2:checked + * + .mj-carousel-content .mj-carousel-00000000-thumbnail+          ,.mj-carousel-00000000-radio-3:checked + .mj-carousel-content .mj-carousel-00000000-thumbnail+           {+      display: inline-block !important;+    }++    .mj-carousel-image img + div,+    .mj-carousel-thumbnail img + div {+      display: none !important;+    }++    .mj-carousel-00000000-thumbnail:hover + * + * + .mj-carousel-main .mj-carousel-image,.mj-carousel-00000000-thumbnail:hover + * + .mj-carousel-main .mj-carousel-image,.mj-carousel-00000000-thumbnail:hover + .mj-carousel-main .mj-carousel-image {+      display: none !important;+    }++    .mj-carousel-thumbnail:hover {+      border-color: #fead0d !important;+    }++    .mj-carousel-00000000-thumbnail-1:hover + * + * + .mj-carousel-main .mj-carousel-image-1,.mj-carousel-00000000-thumbnail-2:hover + * + .mj-carousel-main .mj-carousel-image-2,.mj-carousel-00000000-thumbnail-3:hover + .mj-carousel-main .mj-carousel-image-3 {+      display: block !important;+    }+    ++      .mj-carousel noinput { display:block !important; }+      .mj-carousel noinput .mj-carousel-image-1 { display: block !important;  }+      .mj-carousel noinput .mj-carousel-arrows,+      .mj-carousel noinput .mj-carousel-thumbnails { display: none !important; }++      [owa] .mj-carousel-thumbnail { display: none !important; }+      +      @media screen yahoo {+          .mj-carousel-00000000-icons-cell,+          .mj-carousel-previous-icons,+          .mj-carousel-next-icons {+              display: none !important;+          }++          .mj-carousel-00000000-radio-1:checked + *+ *+ .mj-carousel-content .mj-carousel-00000000-thumbnail-1 {+              border-color: transparent;+          }+      }+    +    </style>+    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;word-break:break-word;"+                >+                  +      +    <!--[if !mso]><!--><div class="mj-carousel" ><input class="mj-carousel-radio mj-carousel-00000000-radio mj-carousel-00000000-radio-1" checked="checked" type="radio" name="mj-carousel-radio-00000000" id="mj-carousel-00000000-radio-1" style="display:none;mso-hide:all;" /><input class="mj-carousel-radio mj-carousel-00000000-radio mj-carousel-00000000-radio-2" type="radio" name="mj-carousel-radio-00000000" id="mj-carousel-00000000-radio-2" style="display:none;mso-hide:all;" /><input class="mj-carousel-radio mj-carousel-00000000-radio mj-carousel-00000000-radio-3" type="radio" name="mj-carousel-radio-00000000" id="mj-carousel-00000000-radio-3" style="display:none;mso-hide:all;" /><div class="mj-carousel-content mj-carousel-00000000-content" style="display:table;width:100%;table-layout:fixed;text-align:center;font-size:0px;" ><a style="border:2px solid transparent;border-radius:6px;display:inline-block;overflow:hidden;width:110px;" href="#1" target="_blank" class="mj-carousel-thumbnail mj-carousel-00000000-thumbnail mj-carousel-00000000-thumbnail-1 " ><label for="mj-carousel-00000000-radio-1"><img style="display:block;width:100%;height:auto;" src="https://www.mailjet.com/wp-content/uploads/2016/11/ecommerce-guide.jpg" alt="" width="110" /></label></a><a style="border:2px solid transparent;border-radius:6px;display:inline-block;overflow:hidden;width:110px;" href="#2" target="_blank" class="mj-carousel-thumbnail mj-carousel-00000000-thumbnail mj-carousel-00000000-thumbnail-2 " ><label for="mj-carousel-00000000-radio-2"><img style="display:block;width:100%;height:auto;" src="https://www.mailjet.com/wp-content/uploads/2016/09/1@1x.png" alt="" width="110" /></label></a><a style="border:2px solid transparent;border-radius:6px;display:inline-block;overflow:hidden;width:110px;" href="#3" target="_top" class="mj-carousel-thumbnail mj-carousel-00000000-thumbnail mj-carousel-00000000-thumbnail-3 " ><label for="mj-carousel-00000000-radio-3"><img style="display:block;width:100%;height:auto;" src="https://www.mailjet.com/wp-content/uploads/2016/09/1@1x.png" alt="" width="110" /></label></a><table style="caption-side:top;display:table-caption;table-layout:fixed;width:100%;" border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" class="mj-carousel-main" ><tbody><tr><td class="mj-carousel-00000000-icons-cell" style="font-size:0px;display:none;mso-hide:all;padding:0px;" ><div class="mj-carousel-previous-icons" style="display:none;mso-hide:all;" ><label for="mj-carousel-00000000-radio-1" class="mj-carousel-previous mj-carousel-previous-1" ><img src="https://mjml.io/assets/img/right-arrow.png" alt="previous" style="display:block;width:22px;height:auto;" width="22" /></label><label for="mj-carousel-00000000-radio-2" class="mj-carousel-previous mj-carousel-previous-2" ><img src="https://mjml.io/assets/img/right-arrow.png" alt="previous" style="display:block;width:22px;height:auto;" width="22" /></label><label for="mj-carousel-00000000-radio-3" class="mj-carousel-previous mj-carousel-previous-3" ><img src="https://mjml.io/assets/img/right-arrow.png" alt="previous" style="display:block;width:22px;height:auto;" width="22" /></label></div></td><td style="padding:0px;" ><div class="mj-carousel-images" ><div class="mj-carousel-image mj-carousel-image-1 " style="" ><img src="https://www.mailjet.com/wp-content/uploads/2016/11/ecommerce-guide.jpg" alt="" style="border-radius:6px;display:block;width:600px;max-width:100%;height:auto;" width="600" border="0" /></div><div class="mj-carousel-image mj-carousel-image-2 " style="display:none;mso-hide:all;" ><img title="some title" src="https://www.mailjet.com/wp-content/uploads/2016/09/3@1x.png" alt="" style="border-radius:6px;display:block;width:600px;max-width:100%;height:auto;" width="600" border="0" /></div><div class="mj-carousel-image mj-carousel-image-3 " style="display:none;mso-hide:all;" ><a href="https://jolimail.io" target="_blank"><img src="https://www.mailjet.com/wp-content/uploads/2016/09/1@1x.png" alt="" style="border-radius:6px;display:block;width:600px;max-width:100%;height:auto;" width="600" border="0" /></a></div></div></td><td class="mj-carousel-00000000-icons-cell" style="font-size:0px;display:none;mso-hide:all;padding:0px;" ><div class="mj-carousel-next-icons" style="display:none;mso-hide:all;" ><label for="mj-carousel-00000000-radio-1" class="mj-carousel-next mj-carousel-next-1" ><img src="https://mjml.io/assets/img/left-arrow.png" alt="next" style="display:block;width:22px;height:auto;" width="22" /></label><label for="mj-carousel-00000000-radio-2" class="mj-carousel-next mj-carousel-next-2" ><img src="https://mjml.io/assets/img/left-arrow.png" alt="next" style="display:block;width:22px;height:auto;" width="22" /></label><label for="mj-carousel-00000000-radio-3" class="mj-carousel-next mj-carousel-next-3" ><img src="https://mjml.io/assets/img/left-arrow.png" alt="next" style="display:block;width:22px;height:auto;" width="22" /></label></div></td></tr></tbody></table></div></div><!--<![endif]-->+  +      +    <!--[if mso]><div class="mj-carousel-image mj-carousel-image-1 " style="" ><img src="https://www.mailjet.com/wp-content/uploads/2016/11/ecommerce-guide.jpg" alt="" style="border-radius:6px;display:block;width:600px;max-width:100%;height:auto;" width="600" border="0" /></div><![endif]-->+  +    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+  
@@ -0,0 +1,13 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-carousel icon-width="22px" left-icon="https://mjml.io/assets/img/right-arrow.png" right-icon="https://mjml.io/assets/img/left-arrow.png">+          <mj-carousel-image rel="rel-value" src="https://www.mailjet.com/wp-content/uploads/2016/11/ecommerce-guide.jpg" />+          <mj-carousel-image src="https://www.mailjet.com/wp-content/uploads/2016/09/3@1x.png" thumbnails-src="https://www.mailjet.com/wp-content/uploads/2016/09/1@1x.png" title="some title" />+          <mj-carousel-image href="https://jolimail.io" target="_top" src="https://www.mailjet.com/wp-content/uploads/2016/09/1@1x.png" />+        </mj-carousel>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
@@ -0,0 +1,206 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    <style type="text/css">++    .mj-carousel {+      -webkit-user-select: none;+      -moz-user-select: none;+      user-select: none;+    }++    .mj-carousel-00000000-icons-cell {+      display: table-cell !important;+      width: 44px !important;+    }++    .mj-carousel-radio,+    .mj-carousel-next,+    .mj-carousel-previous {+      display: none !important;+    }++    .mj-carousel-thumbnail,+    .mj-carousel-next,+    .mj-carousel-previous {+      touch-action: manipulation;+    }++    .mj-carousel-00000000-radio:checked + .mj-carousel-content .mj-carousel-image,.mj-carousel-00000000-radio:checked + * + .mj-carousel-content .mj-carousel-image,.mj-carousel-00000000-radio:checked + * + * + .mj-carousel-content .mj-carousel-image {+      display: none !important;+    }++    .mj-carousel-00000000-radio-1:checked + * + * + .mj-carousel-content .mj-carousel-image-1,.mj-carousel-00000000-radio-2:checked + * + .mj-carousel-content .mj-carousel-image-2,.mj-carousel-00000000-radio-3:checked + .mj-carousel-content .mj-carousel-image-3 {+      display: block !important;+    }++    .mj-carousel-previous-icons,+    .mj-carousel-next-icons,+    .mj-carousel-00000000-radio-1:checked + * + * + .mj-carousel-content .mj-carousel-next-2,.mj-carousel-00000000-radio-2:checked + * + .mj-carousel-content .mj-carousel-next-3,.mj-carousel-00000000-radio-3:checked + .mj-carousel-content .mj-carousel-next-1,+    .mj-carousel-00000000-radio-1:checked + * + * + .mj-carousel-content .mj-carousel-previous-3,.mj-carousel-00000000-radio-2:checked + * + .mj-carousel-content .mj-carousel-previous-1,.mj-carousel-00000000-radio-3:checked + .mj-carousel-content .mj-carousel-previous-2 {+      display: block !important;+    }++    .mj-carousel-00000000-radio-1:checked + * + * + .mj-carousel-content .mj-carousel-00000000-thumbnail-1,.mj-carousel-00000000-radio-2:checked + * + .mj-carousel-content .mj-carousel-00000000-thumbnail-2,.mj-carousel-00000000-radio-3:checked + .mj-carousel-content .mj-carousel-00000000-thumbnail-3 {+      border-color: orange !important;+    }++    .mj-carousel-00000000-radio-1:checked + * + * + .mj-carousel-content .mj-carousel-00000000-thumbnail+          ,.mj-carousel-00000000-radio-2:checked + * + .mj-carousel-content .mj-carousel-00000000-thumbnail+          ,.mj-carousel-00000000-radio-3:checked + .mj-carousel-content .mj-carousel-00000000-thumbnail+           {+      display: inline-block !important;+    }++    .mj-carousel-image img + div,+    .mj-carousel-thumbnail img + div {+      display: none !important;+    }++    .mj-carousel-00000000-thumbnail:hover + * + * + .mj-carousel-main .mj-carousel-image,.mj-carousel-00000000-thumbnail:hover + * + .mj-carousel-main .mj-carousel-image,.mj-carousel-00000000-thumbnail:hover + .mj-carousel-main .mj-carousel-image {+      display: none !important;+    }++    .mj-carousel-thumbnail:hover {+      border-color: green !important;+    }++    .mj-carousel-00000000-thumbnail-1:hover + * + * + .mj-carousel-main .mj-carousel-image-1,.mj-carousel-00000000-thumbnail-2:hover + * + .mj-carousel-main .mj-carousel-image-2,.mj-carousel-00000000-thumbnail-3:hover + .mj-carousel-main .mj-carousel-image-3 {+      display: block !important;+    }+    ++      .mj-carousel noinput { display:block !important; }+      .mj-carousel noinput .mj-carousel-image-1 { display: block !important;  }+      .mj-carousel noinput .mj-carousel-arrows,+      .mj-carousel noinput .mj-carousel-thumbnails { display: none !important; }++      [owa] .mj-carousel-thumbnail { display: none !important; }+      +      @media screen yahoo {+          .mj-carousel-00000000-icons-cell,+          .mj-carousel-previous-icons,+          .mj-carousel-next-icons {+              display: none !important;+          }++          .mj-carousel-00000000-radio-1:checked + *+ *+ .mj-carousel-content .mj-carousel-00000000-thumbnail-1 {+              border-color: transparent;+          }+      }+    +    </style>+    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;word-break:break-word;"+                >+                  +      +    <!--[if !mso]><!--><div class="mj-carousel" ><input class="mj-carousel-radio mj-carousel-00000000-radio mj-carousel-00000000-radio-1" checked="checked" type="radio" name="mj-carousel-radio-00000000" id="mj-carousel-00000000-radio-1" style="display:none;mso-hide:all;" /><input class="mj-carousel-radio mj-carousel-00000000-radio mj-carousel-00000000-radio-2" type="radio" name="mj-carousel-radio-00000000" id="mj-carousel-00000000-radio-2" style="display:none;mso-hide:all;" /><input class="mj-carousel-radio mj-carousel-00000000-radio mj-carousel-00000000-radio-3" type="radio" name="mj-carousel-radio-00000000" id="mj-carousel-00000000-radio-3" style="display:none;mso-hide:all;" /><div class="mj-carousel-content mj-carousel-00000000-content" style="display:table;width:100%;table-layout:fixed;text-align:center;font-size:0px;" ><a style="border:1px solid blue;border-radius:2px;display:inline-block;overflow:hidden;width:40px;" href="#1" target="_blank" class="mj-carousel-thumbnail mj-carousel-00000000-thumbnail mj-carousel-00000000-thumbnail-1 " ><label for="mj-carousel-00000000-radio-1"><img style="display:block;width:100%;height:auto;" src="https://www.mailjet.com/wp-content/uploads/2016/11/ecommerce-guide.jpg" alt="" width="40" /></label></a><a style="border:1px solid blue;border-radius:2px;display:inline-block;overflow:hidden;width:40px;" href="#2" target="_blank" class="mj-carousel-thumbnail mj-carousel-00000000-thumbnail mj-carousel-00000000-thumbnail-2 " ><label for="mj-carousel-00000000-radio-2"><img style="display:block;width:100%;height:auto;" src="https://www.mailjet.com/wp-content/uploads/2016/09/3@1x.png" alt="" width="40" /></label></a><a style="border:1px solid blue;border-radius:2px;display:inline-block;overflow:hidden;width:40px;" href="#3" target="_blank" class="mj-carousel-thumbnail mj-carousel-00000000-thumbnail mj-carousel-00000000-thumbnail-3 " ><label for="mj-carousel-00000000-radio-3"><img style="display:block;width:100%;height:auto;" src="https://www.mailjet.com/wp-content/uploads/2016/09/1@1x.png" alt="" width="40" /></label></a><table style="caption-side:top;display:table-caption;table-layout:fixed;width:100%;" border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" class="mj-carousel-main" ><tbody><tr><td class="mj-carousel-00000000-icons-cell" style="font-size:0px;display:none;mso-hide:all;padding:0px;" ><div class="mj-carousel-previous-icons" style="display:none;mso-hide:all;" ><label for="mj-carousel-00000000-radio-1" class="mj-carousel-previous mj-carousel-previous-1" ><img src="https://i.imgur.com/xTh3hln.png" alt="previous" style="display:block;width:44px;height:auto;" width="44" /></label><label for="mj-carousel-00000000-radio-2" class="mj-carousel-previous mj-carousel-previous-2" ><img src="https://i.imgur.com/xTh3hln.png" alt="previous" style="display:block;width:44px;height:auto;" width="44" /></label><label for="mj-carousel-00000000-radio-3" class="mj-carousel-previous mj-carousel-previous-3" ><img src="https://i.imgur.com/xTh3hln.png" alt="previous" style="display:block;width:44px;height:auto;" width="44" /></label></div></td><td style="padding:0px;" ><div class="mj-carousel-images" ><div class="mj-carousel-image mj-carousel-image-1 " style="" ><img src="https://www.mailjet.com/wp-content/uploads/2016/11/ecommerce-guide.jpg" alt="" style="border-radius:6px;display:block;width:600px;max-width:100%;height:auto;" width="600" border="0" /></div><div class="mj-carousel-image mj-carousel-image-2 " style="display:none;mso-hide:all;" ><img src="https://www.mailjet.com/wp-content/uploads/2016/09/3@1x.png" alt="" style="border-radius:6px;display:block;width:600px;max-width:100%;height:auto;" width="600" border="0" /></div><div class="mj-carousel-image mj-carousel-image-3 " style="display:none;mso-hide:all;" ><img src="https://www.mailjet.com/wp-content/uploads/2016/09/1@1x.png" alt="" style="border-radius:6px;display:block;width:600px;max-width:100%;height:auto;" width="600" border="0" /></div></div></td><td class="mj-carousel-00000000-icons-cell" style="font-size:0px;display:none;mso-hide:all;padding:0px;" ><div class="mj-carousel-next-icons" style="display:none;mso-hide:all;" ><label for="mj-carousel-00000000-radio-1" class="mj-carousel-next mj-carousel-next-1" ><img src="https://i.imgur.com/os7o9kz.png" alt="next" style="display:block;width:44px;height:auto;" width="44" /></label><label for="mj-carousel-00000000-radio-2" class="mj-carousel-next mj-carousel-next-2" ><img src="https://i.imgur.com/os7o9kz.png" alt="next" style="display:block;width:44px;height:auto;" width="44" /></label><label for="mj-carousel-00000000-radio-3" class="mj-carousel-next mj-carousel-next-3" ><img src="https://i.imgur.com/os7o9kz.png" alt="next" style="display:block;width:44px;height:auto;" width="44" /></label></div></td></tr></tbody></table></div></div><!--<![endif]-->+  +      +    <!--[if mso]><div class="mj-carousel-image mj-carousel-image-1 " style="" ><img src="https://www.mailjet.com/wp-content/uploads/2016/11/ecommerce-guide.jpg" alt="" style="border-radius:6px;display:block;width:600px;max-width:100%;height:auto;" width="600" border="0" /></div><![endif]-->+  +    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+  
@@ -0,0 +1,13 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-carousel tb-border="1px solid blue" tb-border-radius="2px" tb-selected-border-color="orange" tb-hover-border-color="green" tb-width="40px">+          <mj-carousel-image src="https://www.mailjet.com/wp-content/uploads/2016/11/ecommerce-guide.jpg" />+          <mj-carousel-image src="https://www.mailjet.com/wp-content/uploads/2016/09/3@1x.png" />+          <mj-carousel-image src="https://www.mailjet.com/wp-content/uploads/2016/09/1@1x.png" />+        </mj-carousel>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
@@ -0,0 +1,205 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    <style type="text/css">++    .mj-carousel {+      -webkit-user-select: none;+      -moz-user-select: none;+      user-select: none;+    }++    .mj-carousel-00000000-icons-cell {+      display: table-cell !important;+      width: 44px !important;+    }++    .mj-carousel-radio,+    .mj-carousel-next,+    .mj-carousel-previous {+      display: none !important;+    }++    .mj-carousel-thumbnail,+    .mj-carousel-next,+    .mj-carousel-previous {+      touch-action: manipulation;+    }++    .mj-carousel-00000000-radio:checked + .mj-carousel-content .mj-carousel-image,.mj-carousel-00000000-radio:checked + * + .mj-carousel-content .mj-carousel-image {+      display: none !important;+    }++    .mj-carousel-00000000-radio-1:checked + * + .mj-carousel-content .mj-carousel-image-1,.mj-carousel-00000000-radio-2:checked + .mj-carousel-content .mj-carousel-image-2 {+      display: block !important;+    }++    .mj-carousel-previous-icons,+    .mj-carousel-next-icons,+    .mj-carousel-00000000-radio-1:checked + * + .mj-carousel-content .mj-carousel-next-2,.mj-carousel-00000000-radio-2:checked + .mj-carousel-content .mj-carousel-next-1,+    .mj-carousel-00000000-radio-1:checked + * + .mj-carousel-content .mj-carousel-previous-2,.mj-carousel-00000000-radio-2:checked + .mj-carousel-content .mj-carousel-previous-1 {+      display: block !important;+    }++    .mj-carousel-00000000-radio-1:checked + * + .mj-carousel-content .mj-carousel-00000000-thumbnail-1,.mj-carousel-00000000-radio-2:checked + .mj-carousel-content .mj-carousel-00000000-thumbnail-2 {+      border-color: #cccccc !important;+    }++    .mj-carousel-00000000-radio-1:checked + * + .mj-carousel-content .mj-carousel-00000000-thumbnail+          ,.mj-carousel-00000000-radio-2:checked + .mj-carousel-content .mj-carousel-00000000-thumbnail+           {+      display: inline-block !important;+    }++    .mj-carousel-image img + div,+    .mj-carousel-thumbnail img + div {+      display: none !important;+    }++    .mj-carousel-00000000-thumbnail:hover + * + .mj-carousel-main .mj-carousel-image,.mj-carousel-00000000-thumbnail:hover + .mj-carousel-main .mj-carousel-image {+      display: none !important;+    }++    .mj-carousel-thumbnail:hover {+      border-color: #fead0d !important;+    }++    .mj-carousel-00000000-thumbnail-1:hover + * + .mj-carousel-main .mj-carousel-image-1,.mj-carousel-00000000-thumbnail-2:hover + .mj-carousel-main .mj-carousel-image-2 {+      display: block !important;+    }+    ++      .mj-carousel noinput { display:block !important; }+      .mj-carousel noinput .mj-carousel-image-1 { display: block !important;  }+      .mj-carousel noinput .mj-carousel-arrows,+      .mj-carousel noinput .mj-carousel-thumbnails { display: none !important; }++      [owa] .mj-carousel-thumbnail { display: none !important; }+      +      @media screen yahoo {+          .mj-carousel-00000000-icons-cell,+          .mj-carousel-previous-icons,+          .mj-carousel-next-icons {+              display: none !important;+          }++          .mj-carousel-00000000-radio-1:checked + *+ .mj-carousel-content .mj-carousel-00000000-thumbnail-1 {+              border-color: transparent;+          }+      }+    +    </style>+    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;word-break:break-word;"+                >+                  +      +    <!--[if !mso]><!--><div class="mj-carousel" ><input class="mj-carousel-radio mj-carousel-00000000-radio mj-carousel-00000000-radio-1" checked="checked" type="radio" name="mj-carousel-radio-00000000" id="mj-carousel-00000000-radio-1" style="display:none;mso-hide:all;" /><input class="mj-carousel-radio mj-carousel-00000000-radio mj-carousel-00000000-radio-2" type="radio" name="mj-carousel-radio-00000000" id="mj-carousel-00000000-radio-2" style="display:none;mso-hide:all;" /><div class="mj-carousel-content mj-carousel-00000000-content" style="display:table;width:100%;table-layout:fixed;text-align:center;font-size:0px;" ><table style="caption-side:top;display:table-caption;table-layout:fixed;width:100%;" border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" class="mj-carousel-main" ><tbody><tr><td class="mj-carousel-00000000-icons-cell" style="font-size:0px;display:none;mso-hide:all;padding:0px;" ><div class="mj-carousel-previous-icons" style="display:none;mso-hide:all;" ><label for="mj-carousel-00000000-radio-1" class="mj-carousel-previous mj-carousel-previous-1" ><img src="https://i.imgur.com/xTh3hln.png" alt="previous" style="display:block;width:44px;height:auto;" width="44" /></label><label for="mj-carousel-00000000-radio-2" class="mj-carousel-previous mj-carousel-previous-2" ><img src="https://i.imgur.com/xTh3hln.png" alt="previous" style="display:block;width:44px;height:auto;" width="44" /></label></div></td><td style="padding:0px;" ><div class="mj-carousel-images" ><div class="mj-carousel-image mj-carousel-image-1 " style="" ><img src="https://www.mailjet.com/wp-content/uploads/2016/11/ecommerce-guide.jpg" alt="" style="border-radius:6px;display:block;width:600px;max-width:100%;height:auto;" width="600" border="0" /></div><div class="mj-carousel-image mj-carousel-image-2 " style="display:none;mso-hide:all;" ><img src="https://www.mailjet.com/wp-content/uploads/2016/09/3@1x.png" alt="" style="border-radius:6px;display:block;width:600px;max-width:100%;height:auto;" width="600" border="0" /></div></div></td><td class="mj-carousel-00000000-icons-cell" style="font-size:0px;display:none;mso-hide:all;padding:0px;" ><div class="mj-carousel-next-icons" style="display:none;mso-hide:all;" ><label for="mj-carousel-00000000-radio-1" class="mj-carousel-next mj-carousel-next-1" ><img src="https://i.imgur.com/os7o9kz.png" alt="next" style="display:block;width:44px;height:auto;" width="44" /></label><label for="mj-carousel-00000000-radio-2" class="mj-carousel-next mj-carousel-next-2" ><img src="https://i.imgur.com/os7o9kz.png" alt="next" style="display:block;width:44px;height:auto;" width="44" /></label></div></td></tr></tbody></table></div></div><!--<![endif]-->+  +      +    <!--[if mso]><div class="mj-carousel-image mj-carousel-image-1 " style="" ><img src="https://www.mailjet.com/wp-content/uploads/2016/11/ecommerce-guide.jpg" alt="" style="border-radius:6px;display:block;width:600px;max-width:100%;height:auto;" width="600" border="0" /></div><![endif]-->+  +    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+  
@@ -0,0 +1,12 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-carousel thumbnails="hidden">+          <mj-carousel-image src="https://www.mailjet.com/wp-content/uploads/2016/11/ecommerce-guide.jpg" />+          <mj-carousel-image src="https://www.mailjet.com/wp-content/uploads/2016/09/3@1x.png" />+        </mj-carousel>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-carousel.html view
@@ -0,0 +1,206 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    <style type="text/css">++    .mj-carousel {+      -webkit-user-select: none;+      -moz-user-select: none;+      user-select: none;+    }++    .mj-carousel-00000000-icons-cell {+      display: table-cell !important;+      width: 44px !important;+    }++    .mj-carousel-radio,+    .mj-carousel-next,+    .mj-carousel-previous {+      display: none !important;+    }++    .mj-carousel-thumbnail,+    .mj-carousel-next,+    .mj-carousel-previous {+      touch-action: manipulation;+    }++    .mj-carousel-00000000-radio:checked + .mj-carousel-content .mj-carousel-image,.mj-carousel-00000000-radio:checked + * + .mj-carousel-content .mj-carousel-image,.mj-carousel-00000000-radio:checked + * + * + .mj-carousel-content .mj-carousel-image {+      display: none !important;+    }++    .mj-carousel-00000000-radio-1:checked + * + * + .mj-carousel-content .mj-carousel-image-1,.mj-carousel-00000000-radio-2:checked + * + .mj-carousel-content .mj-carousel-image-2,.mj-carousel-00000000-radio-3:checked + .mj-carousel-content .mj-carousel-image-3 {+      display: block !important;+    }++    .mj-carousel-previous-icons,+    .mj-carousel-next-icons,+    .mj-carousel-00000000-radio-1:checked + * + * + .mj-carousel-content .mj-carousel-next-2,.mj-carousel-00000000-radio-2:checked + * + .mj-carousel-content .mj-carousel-next-3,.mj-carousel-00000000-radio-3:checked + .mj-carousel-content .mj-carousel-next-1,+    .mj-carousel-00000000-radio-1:checked + * + * + .mj-carousel-content .mj-carousel-previous-3,.mj-carousel-00000000-radio-2:checked + * + .mj-carousel-content .mj-carousel-previous-1,.mj-carousel-00000000-radio-3:checked + .mj-carousel-content .mj-carousel-previous-2 {+      display: block !important;+    }++    .mj-carousel-00000000-radio-1:checked + * + * + .mj-carousel-content .mj-carousel-00000000-thumbnail-1,.mj-carousel-00000000-radio-2:checked + * + .mj-carousel-content .mj-carousel-00000000-thumbnail-2,.mj-carousel-00000000-radio-3:checked + .mj-carousel-content .mj-carousel-00000000-thumbnail-3 {+      border-color: #cccccc !important;+    }++    .mj-carousel-00000000-radio-1:checked + * + * + .mj-carousel-content .mj-carousel-00000000-thumbnail+          ,.mj-carousel-00000000-radio-2:checked + * + .mj-carousel-content .mj-carousel-00000000-thumbnail+          ,.mj-carousel-00000000-radio-3:checked + .mj-carousel-content .mj-carousel-00000000-thumbnail+           {+      display: inline-block !important;+    }++    .mj-carousel-image img + div,+    .mj-carousel-thumbnail img + div {+      display: none !important;+    }++    .mj-carousel-00000000-thumbnail:hover + * + * + .mj-carousel-main .mj-carousel-image,.mj-carousel-00000000-thumbnail:hover + * + .mj-carousel-main .mj-carousel-image,.mj-carousel-00000000-thumbnail:hover + .mj-carousel-main .mj-carousel-image {+      display: none !important;+    }++    .mj-carousel-thumbnail:hover {+      border-color: #fead0d !important;+    }++    .mj-carousel-00000000-thumbnail-1:hover + * + * + .mj-carousel-main .mj-carousel-image-1,.mj-carousel-00000000-thumbnail-2:hover + * + .mj-carousel-main .mj-carousel-image-2,.mj-carousel-00000000-thumbnail-3:hover + .mj-carousel-main .mj-carousel-image-3 {+      display: block !important;+    }+    ++      .mj-carousel noinput { display:block !important; }+      .mj-carousel noinput .mj-carousel-image-1 { display: block !important;  }+      .mj-carousel noinput .mj-carousel-arrows,+      .mj-carousel noinput .mj-carousel-thumbnails { display: none !important; }++      [owa] .mj-carousel-thumbnail { display: none !important; }+      +      @media screen yahoo {+          .mj-carousel-00000000-icons-cell,+          .mj-carousel-previous-icons,+          .mj-carousel-next-icons {+              display: none !important;+          }++          .mj-carousel-00000000-radio-1:checked + *+ *+ .mj-carousel-content .mj-carousel-00000000-thumbnail-1 {+              border-color: transparent;+          }+      }+    +    </style>+    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;word-break:break-word;"+                >+                  +      +    <!--[if !mso]><!--><div class="mj-carousel" ><input class="mj-carousel-radio mj-carousel-00000000-radio mj-carousel-00000000-radio-1" checked="checked" type="radio" name="mj-carousel-radio-00000000" id="mj-carousel-00000000-radio-1" style="display:none;mso-hide:all;" /><input class="mj-carousel-radio mj-carousel-00000000-radio mj-carousel-00000000-radio-2" type="radio" name="mj-carousel-radio-00000000" id="mj-carousel-00000000-radio-2" style="display:none;mso-hide:all;" /><input class="mj-carousel-radio mj-carousel-00000000-radio mj-carousel-00000000-radio-3" type="radio" name="mj-carousel-radio-00000000" id="mj-carousel-00000000-radio-3" style="display:none;mso-hide:all;" /><div class="mj-carousel-content mj-carousel-00000000-content" style="display:table;width:100%;table-layout:fixed;text-align:center;font-size:0px;" ><a style="border:2px solid transparent;border-radius:6px;display:inline-block;overflow:hidden;width:110px;" href="#1" target="_blank" class="mj-carousel-thumbnail mj-carousel-00000000-thumbnail mj-carousel-00000000-thumbnail-1 " ><label for="mj-carousel-00000000-radio-1"><img style="display:block;width:100%;height:auto;" src="https://www.mailjet.com/wp-content/uploads/2016/11/ecommerce-guide.jpg" alt="" width="110" /></label></a><a style="border:2px solid transparent;border-radius:6px;display:inline-block;overflow:hidden;width:110px;" href="#2" target="_blank" class="mj-carousel-thumbnail mj-carousel-00000000-thumbnail mj-carousel-00000000-thumbnail-2 " ><label for="mj-carousel-00000000-radio-2"><img style="display:block;width:100%;height:auto;" src="https://www.mailjet.com/wp-content/uploads/2016/09/3@1x.png" alt="" width="110" /></label></a><a style="border:2px solid transparent;border-radius:6px;display:inline-block;overflow:hidden;width:110px;" href="#3" target="_blank" class="mj-carousel-thumbnail mj-carousel-00000000-thumbnail mj-carousel-00000000-thumbnail-3 " ><label for="mj-carousel-00000000-radio-3"><img style="display:block;width:100%;height:auto;" src="https://www.mailjet.com/wp-content/uploads/2016/09/1@1x.png" alt="" width="110" /></label></a><table style="caption-side:top;display:table-caption;table-layout:fixed;width:100%;" border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" class="mj-carousel-main" ><tbody><tr><td class="mj-carousel-00000000-icons-cell" style="font-size:0px;display:none;mso-hide:all;padding:0px;" ><div class="mj-carousel-previous-icons" style="display:none;mso-hide:all;" ><label for="mj-carousel-00000000-radio-1" class="mj-carousel-previous mj-carousel-previous-1" ><img src="https://i.imgur.com/xTh3hln.png" alt="previous" style="display:block;width:44px;height:auto;" width="44" /></label><label for="mj-carousel-00000000-radio-2" class="mj-carousel-previous mj-carousel-previous-2" ><img src="https://i.imgur.com/xTh3hln.png" alt="previous" style="display:block;width:44px;height:auto;" width="44" /></label><label for="mj-carousel-00000000-radio-3" class="mj-carousel-previous mj-carousel-previous-3" ><img src="https://i.imgur.com/xTh3hln.png" alt="previous" style="display:block;width:44px;height:auto;" width="44" /></label></div></td><td style="padding:0px;" ><div class="mj-carousel-images" ><div class="mj-carousel-image mj-carousel-image-1 " style="" ><img src="https://www.mailjet.com/wp-content/uploads/2016/11/ecommerce-guide.jpg" alt="" style="border-radius:6px;display:block;width:600px;max-width:100%;height:auto;" width="600" border="0" /></div><div class="mj-carousel-image mj-carousel-image-2 " style="display:none;mso-hide:all;" ><img src="https://www.mailjet.com/wp-content/uploads/2016/09/3@1x.png" alt="" style="border-radius:6px;display:block;width:600px;max-width:100%;height:auto;" width="600" border="0" /></div><div class="mj-carousel-image mj-carousel-image-3 " style="display:none;mso-hide:all;" ><img src="https://www.mailjet.com/wp-content/uploads/2016/09/1@1x.png" alt="" style="border-radius:6px;display:block;width:600px;max-width:100%;height:auto;" width="600" border="0" /></div></div></td><td class="mj-carousel-00000000-icons-cell" style="font-size:0px;display:none;mso-hide:all;padding:0px;" ><div class="mj-carousel-next-icons" style="display:none;mso-hide:all;" ><label for="mj-carousel-00000000-radio-1" class="mj-carousel-next mj-carousel-next-1" ><img src="https://i.imgur.com/os7o9kz.png" alt="next" style="display:block;width:44px;height:auto;" width="44" /></label><label for="mj-carousel-00000000-radio-2" class="mj-carousel-next mj-carousel-next-2" ><img src="https://i.imgur.com/os7o9kz.png" alt="next" style="display:block;width:44px;height:auto;" width="44" /></label><label for="mj-carousel-00000000-radio-3" class="mj-carousel-next mj-carousel-next-3" ><img src="https://i.imgur.com/os7o9kz.png" alt="next" style="display:block;width:44px;height:auto;" width="44" /></label></div></td></tr></tbody></table></div></div><!--<![endif]-->+  +      +    <!--[if mso]><div class="mj-carousel-image mj-carousel-image-1 " style="" ><img src="https://www.mailjet.com/wp-content/uploads/2016/11/ecommerce-guide.jpg" alt="" style="border-radius:6px;display:block;width:600px;max-width:100%;height:auto;" width="600" border="0" /></div><![endif]-->+  +    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-carousel.mjml view
@@ -0,0 +1,13 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-carousel>+          <mj-carousel-image src="https://www.mailjet.com/wp-content/uploads/2016/11/ecommerce-guide.jpg" />+          <mj-carousel-image src="https://www.mailjet.com/wp-content/uploads/2016/09/3@1x.png" />+          <mj-carousel-image src="https://www.mailjet.com/wp-content/uploads/2016/09/1@1x.png" />+        </mj-carousel>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-column-background-color.html view
@@ -0,0 +1,190 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-50 { width:50% !important; max-width: 50%; }+.mj-column-per-33-333333333333336 { width:33.333333333333336% !important; max-width: 33.333333333333336%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-50 { width:50% !important; max-width: 50%; }+.moz-text-html .mj-column-per-33-333333333333336 { width:33.333333333333336% !important; max-width: 33.333333333333336%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;background-color:red;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;background-color:red;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="orange" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="background:orange;background-color:orange;margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:orange;background-color:orange;width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:300px;" ><![endif]-->+            +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color:red;vertical-align:top;" width="100%"+      >+        <tbody>+          <!-- Your first column -->+        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:300px;" ><![endif]-->+            +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color:blue;vertical-align:top;" width="100%"+      >+        <tbody>+          <!-- Your second column -->+        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="green" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="background:green;background-color:green;margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:green;background-color:green;width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:200px;" ><![endif]-->+            +      <div+         class="mj-column-per-33-333333333333336 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          <!-- Your first column -->+        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:200px;" ><![endif]-->+            +      <div+         class="mj-column-per-33-333333333333336 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          <!-- Your second column -->+        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:200px;" ><![endif]-->+            +      <div+         class="mj-column-per-33-333333333333336 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          <!-- Your third column -->+        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-column-background-color.mjml view
@@ -0,0 +1,23 @@+<mjml>+  <mj-body background-color="red">+    <mj-section background-color="orange">+      <mj-column background-color="red">+        <!-- Your first column -->+      </mj-column>+      <mj-column background-color="blue">+        <!-- Your second column -->+      </mj-column>+    </mj-section>+    <mj-section background-color="green">+      <mj-column>+        <!-- Your first column -->+      </mj-column>+      <mj-column>+        <!-- Your second column -->+      </mj-column>+      <mj-column>+        <!-- Your third column -->+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-column-border-issue-466.html view
@@ -0,0 +1,134 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"+      >+        <tbody>+          <tr>+            <td  style="border:3px solid black;vertical-align:top;padding-left:10px;">+              +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      >Hello World</div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +            </td>+          </tr>+        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-column-border-issue-466.mjml view
@@ -0,0 +1,9 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column padding-left="10px" border="3px solid black">+        <mj-text>Hello World</mj-text>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-column-border-radius.html view
@@ -0,0 +1,118 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-50 { width:50% !important; max-width: 50%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-50 { width:50% !important; max-width: 50%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:300px;" ><![endif]-->+            +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-radius:5px;vertical-align:top;border-collapse:separate;" width="100%"+      >+        <tbody>+          <!-- Your first column -->+        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:300px;" ><![endif]-->+            +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-radius:2px;vertical-align:top;border-collapse:separate;" width="100%"+      >+        <tbody>+          <!-- Your second column -->+        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-column-border-radius.mjml view
@@ -0,0 +1,12 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column border-radius="5px">+        <!-- Your first column -->+      </mj-column>+      <mj-column border-radius="2px">+        <!-- Your second column -->+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-column-border.html view
@@ -0,0 +1,190 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-50 { width:50% !important; max-width: 50%; }+.mj-column-per-33-333333333333336 { width:33.333333333333336% !important; max-width: 33.333333333333336%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-50 { width:50% !important; max-width: 50%; }+.moz-text-html .mj-column-per-33-333333333333336 { width:33.333333333333336% !important; max-width: 33.333333333333336%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:300px;" ><![endif]-->+            +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-top:1px solid green;vertical-align:top;" width="100%"+      >+        <tbody>+          <!-- Your first column -->+        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:300px;" ><![endif]-->+            +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-left:1px solid blue;vertical-align:top;" width="100%"+      >+        <tbody>+          <!-- Your second column -->+        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:200px;" ><![endif]-->+            +      <div+         class="mj-column-per-33-333333333333336 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border:1px solid green;vertical-align:top;" width="100%"+      >+        <tbody>+          <!-- Your first column -->+        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:200px;" ><![endif]-->+            +      <div+         class="mj-column-per-33-333333333333336 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-right:1px solid green;vertical-align:top;" width="100%"+      >+        <tbody>+          <!-- Your second column -->+        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:200px;" ><![endif]-->+            +      <div+         class="mj-column-per-33-333333333333336 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-bottom:1px solid green;vertical-align:top;" width="100%"+      >+        <tbody>+          <!-- Your third column -->+        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-column-border.mjml view
@@ -0,0 +1,23 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column border-top="1px solid green">+        <!-- Your first column -->+      </mj-column>+      <mj-column border-left="1px solid blue">+        <!-- Your second column -->+      </mj-column>+    </mj-section>+    <mj-section>+      <mj-column border="1px solid green">+        <!-- Your first column -->+      </mj-column>+      <mj-column border-right="1px solid green">+        <!-- Your second column -->+      </mj-column>+      <mj-column border-bottom="1px solid green">+        <!-- Your third column -->+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-column-class.html view
@@ -0,0 +1,118 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-50 { width:50% !important; max-width: 50%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-50 { width:50% !important; max-width: 50%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="first-col-outlook" style="vertical-align:top;width:300px;" ><![endif]-->+            +      <div+         class="mj-column-per-50 mj-outlook-group-fix first-col" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          <!-- Your first column -->+        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td><td class="second-col-outlook" style="vertical-align:top;width:300px;" ><![endif]-->+            +      <div+         class="mj-column-per-50 mj-outlook-group-fix second-col" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          <!-- Your second column -->+        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-column-class.mjml view
@@ -0,0 +1,12 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column css-class="first-col">+        <!-- Your first column -->+      </mj-column>+      <mj-column css-class="second-col">+        <!-- Your second column -->+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-column-inner-background-color.html view
@@ -0,0 +1,134 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="border-collapse:separate;"+      >+        <tbody>+          <tr>+            <td  style="background-color:#E7E7E7;border-radius:6px;vertical-align:top;border-collapse:separate;padding:1px;">+              +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color:#ffffff;border-radius:6px;border-collapse:separate;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      >Hello World!</div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +            </td>+          </tr>+        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-column-inner-background-color.mjml view
@@ -0,0 +1,11 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column padding="1px" background-color="#E7E7E7" inner-background-color="#ffffff" border-radius="6px" inner-border-radius="6px">+        <mj-text>+          Hello World!+        </mj-text>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-column-mobile-width-pixel.html view
@@ -0,0 +1,122 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-px-300 { width:300px !important; max-width: 300px; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-px-300 { width:300px !important; max-width: 300px; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:300px;" ><![endif]-->+            +      <div+         class="mj-column-px-300 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      >Column with pixel width and mobile-width</div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-column-mobile-width-pixel.mjml view
@@ -0,0 +1,9 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column mobile-width="mobile-width" width="300px">+        <mj-text>Column with pixel width and mobile-width</mj-text>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-column-padding.html view
@@ -0,0 +1,250 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-50 { width:50% !important; max-width: 50%; }+.mj-column-per-33-333333333333336 { width:33.333333333333336% !important; max-width: 33.333333333333336%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-50 { width:50% !important; max-width: 50%; }+.moz-text-html .mj-column-per-33-333333333333336 { width:33.333333333333336% !important; max-width: 33.333333333333336%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:300px;" ><![endif]-->+            +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"+      >+        <tbody>+          <tr>+            <td  style="vertical-align:top;padding-top:5px;">+              +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"+      >+        <tbody>+          <!-- Your first column -->+        </tbody>+      </table>+    +            </td>+          </tr>+        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:300px;" ><![endif]-->+            +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"+      >+        <tbody>+          <tr>+            <td  style="vertical-align:top;padding-left:4px;">+              +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"+      >+        <tbody>+          <!-- Your second column -->+        </tbody>+      </table>+    +            </td>+          </tr>+        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:200px;" ><![endif]-->+            +      <div+         class="mj-column-per-33-333333333333336 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"+      >+        <tbody>+          <tr>+            <td  style="vertical-align:top;padding:3px;">+              +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"+      >+        <tbody>+          <!-- Your first column -->+        </tbody>+      </table>+    +            </td>+          </tr>+        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:200px;" ><![endif]-->+            +      <div+         class="mj-column-per-33-333333333333336 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"+      >+        <tbody>+          <tr>+            <td  style="vertical-align:top;padding-right:2px;">+              +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"+      >+        <tbody>+          <!-- Your second column -->+        </tbody>+      </table>+    +            </td>+          </tr>+        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:200px;" ><![endif]-->+            +      <div+         class="mj-column-per-33-333333333333336 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%"+      >+        <tbody>+          <tr>+            <td  style="vertical-align:top;padding-bottom:1px;">+              +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"+      >+        <tbody>+          <!-- Your third column -->+        </tbody>+      </table>+    +            </td>+          </tr>+        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-column-padding.mjml view
@@ -0,0 +1,23 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column padding-top="5px">+        <!-- Your first column -->+      </mj-column>+      <mj-column padding-left="4px">+        <!-- Your second column -->+      </mj-column>+    </mj-section>+    <mj-section>+      <mj-column padding="3px">+        <!-- Your first column -->+      </mj-column>+      <mj-column padding-right="2px">+        <!-- Your second column -->+      </mj-column>+      <mj-column padding-bottom="1px">+        <!-- Your third column -->+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-column-vertical-align.html view
@@ -0,0 +1,134 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-33-333333333333336 { width:33.333333333333336% !important; max-width: 33.333333333333336%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-33-333333333333336 { width:33.333333333333336% !important; max-width: 33.333333333333336%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:200px;" ><![endif]-->+            +      <div+         class="mj-column-per-33-333333333333336 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          <!-- Your first column -->+        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td><td class="" style="vertical-align:middle;width:200px;" ><![endif]-->+            +      <div+         class="mj-column-per-33-333333333333336 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:middle;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:middle;" width="100%"+      >+        <tbody>+          <!-- Your second column -->+        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td><td class="" style="vertical-align:bottom;width:200px;" ><![endif]-->+            +      <div+         class="mj-column-per-33-333333333333336 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:bottom;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:bottom;" width="100%"+      >+        <tbody>+          <!-- Your third column -->+        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-column-vertical-align.mjml view
@@ -0,0 +1,15 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column vertical-align="top">+        <!-- Your first column -->+      </mj-column>+      <mj-column vertical-align="middle">+        <!-- Your second column -->+      </mj-column>+      <mj-column vertical-align="bottom">+        <!-- Your third column -->+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-column-width.html view
@@ -0,0 +1,136 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-25 { width:25% !important; max-width: 25%; }+.mj-column-per-50 { width:50% !important; max-width: 50%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-25 { width:25% !important; max-width: 25%; }+.moz-text-html .mj-column-per-50 { width:50% !important; max-width: 50%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:150px;" ><![endif]-->+            +      <div+         class="mj-column-per-25 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          <!-- Your first column -->+        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:300px;" ><![endif]-->+            +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          <!-- Your second column -->+        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:150px;" ><![endif]-->+            +      <div+         class="mj-column-per-25 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          <!-- Your third column -->+        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-column-width.mjml view
@@ -0,0 +1,15 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column width="25%">+        <!-- Your first column -->+      </mj-column>+      <mj-column width="50%">+        <!-- Your second column -->+      </mj-column>+      <mj-column width="25%">+        <!-- Your third column -->+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-column.html view
@@ -0,0 +1,118 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-50 { width:50% !important; max-width: 50%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-50 { width:50% !important; max-width: 50%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:300px;" ><![endif]-->+            +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          <!-- Your first column -->+        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:300px;" ><![endif]-->+            +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          <!-- Your second column -->+        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-column.mjml view
@@ -0,0 +1,12 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <!-- Your first column -->+      </mj-column>+      <mj-column>+        <!-- Your second column -->+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-divider-alignment.html view
@@ -0,0 +1,136 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <p+         style="border-top:solid 4px #F45E43;font-size:1px;margin:0px;width:50%;"+      >+      </p>+      +      <!--[if mso | IE]><table align="left" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 4px #F45E43;font-size:1px;margin:0px;width:275px;" role="presentation" width="275px" ><tr><td style="height:0;line-height:0;"> &nbsp;+</td></tr></table><![endif]-->+    +    +                </td>+              </tr>+            +              <tr>+                <td+                   align="right" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <p+         style="border-top:solid 4px #F45E43;font-size:1px;margin:0px 0px 0px auto;width:50%;"+      >+      </p>+      +      <!--[if mso | IE]><table align="right" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 4px #F45E43;font-size:1px;margin:0px 0px 0px auto;width:275px;" role="presentation" width="275px" ><tr><td style="height:0;line-height:0;"> &nbsp;+</td></tr></table><![endif]-->+    +    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-divider-alignment.mjml view
@@ -0,0 +1,10 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-divider border-color="#F45E43" width="50%" align="left"></mj-divider>+        <mj-divider border-color="#F45E43" width="50%" align="right"></mj-divider>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-divider-border.html view
@@ -0,0 +1,119 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <p+         style="border-top:dashed 1px lightgrey;font-size:1px;margin:0px auto;width:100%;"+      >+      </p>+      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:dashed 1px lightgrey;font-size:1px;margin:0px auto;width:550px;" role="presentation" width="550px" ><tr><td style="height:0;line-height:0;"> &nbsp;+</td></tr></table><![endif]-->+    +    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-divider-border.mjml view
@@ -0,0 +1,9 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-divider border-width="1px" border-style="dashed" border-color="lightgrey" />+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-divider-class.html view
@@ -0,0 +1,119 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" class="testing" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <p+         style="border-top:solid 4px #000000;font-size:1px;margin:0px auto;width:100%;"+      >+      </p>+      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 4px #000000;font-size:1px;margin:0px auto;width:550px;" role="presentation" width="550px" ><tr><td style="height:0;line-height:0;"> &nbsp;+</td></tr></table><![endif]-->+    +    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-divider-class.mjml view
@@ -0,0 +1,9 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-divider css-class="testing" />+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-divider-container-background-color.html view
@@ -0,0 +1,119 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="background:red;font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <p+         style="border-top:solid 4px #000000;font-size:1px;margin:0px auto;width:100%;"+      >+      </p>+      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 4px #000000;font-size:1px;margin:0px auto;width:550px;" role="presentation" width="550px" ><tr><td style="height:0;line-height:0;"> &nbsp;+</td></tr></table><![endif]-->+    +    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-divider-container-background-color.mjml view
@@ -0,0 +1,9 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-divider container-background-color="red" />+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-divider-in-mj-text.html view
@@ -0,0 +1,122 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      ><mj-divider></mj-divider></div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-divider-in-mj-text.mjml view
@@ -0,0 +1,11 @@+<mjml>+    <mj-body>+        <mj-section>+            <mj-column>+                <mj-text>+                    <mj-divider></mj-divider>+                </mj-text>+            </mj-column>+        </mj-section>+    </mj-body>+</mjml>
+ test/fixtures/mj-divider-padding.html view
@@ -0,0 +1,152 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-50 { width:50% !important; max-width: 50%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-50 { width:50% !important; max-width: 50%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:300px;" ><![endif]-->+            +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:5px;word-break:break-word;"+                >+                  +      <p+         style="border-top:solid 4px #000000;font-size:1px;margin:0px auto;width:100%;"+      >+      </p>+      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 4px #000000;font-size:1px;margin:0px auto;width:290px;" role="presentation" width="290px" ><tr><td style="height:0;line-height:0;"> &nbsp;+</td></tr></table><![endif]-->+    +    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:300px;" ><![endif]-->+            +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;padding-top:1px;padding-right:2px;padding-bottom:3px;padding-left:4px;word-break:break-word;"+                >+                  +      <p+         style="border-top:solid 4px #000000;font-size:1px;margin:0px auto;width:100%;"+      >+      </p>+      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 4px #000000;font-size:1px;margin:0px auto;width:294px;" role="presentation" width="294px" ><tr><td style="height:0;line-height:0;"> &nbsp;+</td></tr></table><![endif]-->+    +    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-divider-padding.mjml view
@@ -0,0 +1,12 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-divider padding="5px" />+      </mj-column>+      <mj-column>+        <mj-divider padding-top="1px" padding-right="2px" padding-bottom="3px" padding-left="4px" />+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-divider-width.html view
@@ -0,0 +1,119 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <p+         style="border-top:solid 4px #000000;font-size:1px;margin:0px auto;width:50%;"+      >+      </p>+      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 4px #000000;font-size:1px;margin:0px auto;width:275px;" role="presentation" width="275px" ><tr><td style="height:0;line-height:0;"> &nbsp;+</td></tr></table><![endif]-->+    +    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-divider-width.mjml view
@@ -0,0 +1,9 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-divider width="50%" />+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-divider.html view
@@ -0,0 +1,119 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <p+         style="border-top:solid 4px #000000;font-size:1px;margin:0px auto;width:100%;"+      >+      </p>+      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 4px #000000;font-size:1px;margin:0px auto;width:550px;" role="presentation" width="550px" ><tr><td style="height:0;line-height:0;"> &nbsp;+</td></tr></table><![endif]-->+    +    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-divider.mjml view
@@ -0,0 +1,9 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-divider />+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-font.html view
@@ -0,0 +1,122 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Raleway);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Raleway, Arial;font-size:13px;line-height:1;text-align:left;color:#000000;"+      >Hello World!</div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-font.mjml view
@@ -0,0 +1,14 @@+<mjml>+  <mj-head>+    <mj-font name="Raleway" href="https://fonts.googleapis.com/css?family=Raleway" />+  </mj-head>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-text font-family="Raleway, Arial">+          Hello World!+        </mj-text>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-group-background-color.html view
@@ -0,0 +1,160 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+.mj-column-per-50 { width:50% !important; max-width: 50%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+.moz-text-html .mj-column-per-50 { width:50% !important; max-width: 50%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0;line-height:0;text-align:left;display:inline-block;width:100%;direction:ltr;background-color:red;"+      >+        <!--[if mso | IE]><table bgcolor="red" border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td style="vertical-align:top;width:300px;" ><![endif]-->+                +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:50%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      ><h2>Easy and quick</h2></div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +              <!--[if mso | IE]></td><td style="vertical-align:top;width:300px;" ><![endif]-->+                +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:50%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      ><h2>Responsive</h2></div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +              <!--[if mso | IE]></td></tr></table><![endif]-->+      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-group-background-color.mjml view
@@ -0,0 +1,18 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-group background-color="red">+        <mj-column>+          <mj-text>+            <h2>Easy and quick</h2>+          </mj-text>+        </mj-column>+        <mj-column>+          <mj-text>+            <h2>Responsive</h2>+          </mj-text>+        </mj-column>+      </mj-group>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-group-class.html view
@@ -0,0 +1,160 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+.mj-column-per-50 { width:50% !important; max-width: 50%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+.moz-text-html .mj-column-per-50 { width:50% !important; max-width: 50%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="testing-outlook" style="width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix testing" style="font-size:0;line-height:0;text-align:left;display:inline-block;width:100%;direction:ltr;"+      >+        <!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td style="vertical-align:top;width:300px;" ><![endif]-->+                +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:50%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      ><h2>Easy and quick</h2></div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +              <!--[if mso | IE]></td><td style="vertical-align:top;width:300px;" ><![endif]-->+                +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:50%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      ><h2>Responsive</h2></div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +              <!--[if mso | IE]></td></tr></table><![endif]-->+      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-group-class.mjml view
@@ -0,0 +1,18 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-group css-class="testing">+        <mj-column>+          <mj-text>+            <h2>Easy and quick</h2>+          </mj-text>+        </mj-column>+        <mj-column>+          <mj-text>+            <h2>Responsive</h2>+          </mj-text>+        </mj-column>+      </mj-group>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-group-direction.html view
@@ -0,0 +1,160 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+.mj-column-per-50 { width:50% !important; max-width: 50%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+.moz-text-html .mj-column-per-50 { width:50% !important; max-width: 50%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0;line-height:0;text-align:left;display:inline-block;width:100%;direction:rtl;"+      >+        <!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td style="vertical-align:top;width:300px;" ><![endif]-->+                +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:50%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      ><h2>Easy and quick</h2></div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +              <!--[if mso | IE]></td><td style="vertical-align:top;width:300px;" ><![endif]-->+                +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:50%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      ><h2>Responsive</h2></div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +              <!--[if mso | IE]></td></tr></table><![endif]-->+      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-group-direction.mjml view
@@ -0,0 +1,18 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-group direction="rtl">+        <mj-column>+          <mj-text>+            <h2>Easy and quick</h2>+          </mj-text>+        </mj-column>+        <mj-column>+          <mj-text>+            <h2>Responsive</h2>+          </mj-text>+        </mj-column>+      </mj-group>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-group-vertical-align.html view
@@ -0,0 +1,160 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+.mj-column-per-50 { width:50% !important; max-width: 50%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+.moz-text-html .mj-column-per-50 { width:50% !important; max-width: 50%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:bottom;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0;line-height:0;text-align:left;display:inline-block;width:100%;direction:ltr;vertical-align:bottom;"+      >+        <!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td style="vertical-align:top;width:300px;" ><![endif]-->+                +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:50%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      ><h2>Easy and quick</h2></div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +              <!--[if mso | IE]></td><td style="vertical-align:top;width:300px;" ><![endif]-->+                +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:50%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      ><h2>Responsive</h2></div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +              <!--[if mso | IE]></td></tr></table><![endif]-->+      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-group-vertical-align.mjml view
@@ -0,0 +1,18 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-group vertical-align="bottom">+        <mj-column>+          <mj-text>+            <h2>Easy and quick</h2>+          </mj-text>+        </mj-column>+        <mj-column>+          <mj-text>+            <h2>Responsive</h2>+          </mj-text>+        </mj-column>+      </mj-group>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-group-width.html view
@@ -0,0 +1,160 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-px-100 { width:100px !important; max-width: 100px; }+.mj-column-per-50 { width:50% !important; max-width: 50%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-px-100 { width:100px !important; max-width: 100px; }+.moz-text-html .mj-column-per-50 { width:50% !important; max-width: 50%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="width:100px;" ><![endif]-->+            +      <div+         class="mj-column-px-100 mj-outlook-group-fix" style="font-size:0;line-height:0;text-align:left;display:inline-block;width:100%;direction:ltr;"+      >+        <!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td style="vertical-align:top;width:50px;" ><![endif]-->+                +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:50%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      ><h2>Easy and quick</h2></div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +              <!--[if mso | IE]></td><td style="vertical-align:top;width:50px;" ><![endif]-->+                +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:50%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      ><h2>Responsive</h2></div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +              <!--[if mso | IE]></td></tr></table><![endif]-->+      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-group-width.mjml view
@@ -0,0 +1,18 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-group width="100px">+        <mj-column>+          <mj-text>+            <h2>Easy and quick</h2>+          </mj-text>+        </mj-column>+        <mj-column>+          <mj-text>+            <h2>Responsive</h2>+          </mj-text>+        </mj-column>+      </mj-group>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-group.html view
@@ -0,0 +1,218 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+.mj-column-per-50 { width:50% !important; max-width: 50%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+.moz-text-html .mj-column-per-50 { width:50% !important; max-width: 50%; }+    </style>+    +    +  +    +    <style type="text/css">++    @media only screen and (max-width:479px) {+      table.mj-full-width-mobile { width: 100% !important; }+      td.mj-full-width-mobile { width: auto !important; }+    }+  +    </style>+    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0;line-height:0;text-align:left;display:inline-block;width:100%;direction:ltr;"+      >+        <!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td style="vertical-align:top;width:300px;" ><![endif]-->+                +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:50%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:0;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"+      >+        <tbody>+          <tr>+            <td  style="width:137px;">+              +      <img+         alt="" src="https://mjml.io/assets/img/easy-and-quick.png" style="border:0;display:block;outline:none;text-decoration:none;height:185px;width:100%;font-size:13px;" width="137" height="185"+      />+    +            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;"+      ><h2>Easy and quick</h2>+            <p>Write less code, save time and code more efficiently with MJML’s semantic syntax.</p></div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +              <!--[if mso | IE]></td><td style="vertical-align:top;width:300px;" ><![endif]-->+                +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:50%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:0;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"+      >+        <tbody>+          <tr>+            <td  style="width:166px;">+              +      <img+         alt="" src="https://mjml.io/assets/img/responsive.png" style="border:0;display:block;outline:none;text-decoration:none;height:185px;width:100%;font-size:13px;" width="166" height="185"+      />+    +            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;"+      ><h2>Responsive</h2>+            <p>MJML is responsive by design on most-popular email clients, even Outlook.</p></div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +              <!--[if mso | IE]></td></tr></table><![endif]-->+      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-group.mjml view
@@ -0,0 +1,22 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-group>+        <mj-column>+          <mj-image width="137px" height="185px" padding="0" src="https://mjml.io/assets/img/easy-and-quick.png" />+          <mj-text align="center">+            <h2>Easy and quick</h2>+            <p>Write less code, save time and code more efficiently with MJML’s semantic syntax.</p>+          </mj-text>+        </mj-column>+        <mj-column>+          <mj-image width="166px" height="185px" padding="0" src="https://mjml.io/assets/img/responsive.png" />+          <mj-text align="center">+            <h2>Responsive</h2>+            <p>MJML is responsive by design on most-popular email clients, even Outlook.</p>+          </mj-text>+        </mj-column>+      </mj-group>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-hero-background-color.html view
@@ -0,0 +1,117 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0;font-size:0;mso-line-height-rule:exactly;"><v:image style="border:0;mso-position-horizontal:center;position:absolute;top:0;width:600px;z-index:-3;" xmlns:v="urn:schemas-microsoft-com:vml" /><![endif]-->+      <div+         style="margin:0 auto;max-width:600px;"+      >+        <table+           border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr+               style="vertical-align:top;"+            >+              +          <td+             style="background:blue;background-position:center center;background-repeat:no-repeat;padding:0px;vertical-align:top;height:0px;" height="0"+          >+            +      <!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600" ><tr><td style=""><![endif]-->+      <div+         class="mj-hero-content" style="margin:0px auto;"+      >+        <table+           border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;"+        >+          <tbody>+            <tr>+              <td  style="" >+                <table+                   border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;"+                >+                  <tbody>+                    +                        <tr>+                          <td+                             align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                          >+                            +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      >GO TO SPACE</div>+    +                          </td>+                        </tr>+                      +                  </tbody>+                </table>+              </td>+            </tr>+          </tbody>+        </table>+      </div>+      <!--[if mso | IE]></td></tr></table><![endif]-->+    +          </td>+        +            </tr>+          </tbody>+      </table>+    </div>+    <!--[if mso | IE]></td></tr></table><![endif]-->+    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-hero-background-color.mjml view
@@ -0,0 +1,9 @@+<mjml>+  <mj-body>+    <mj-hero background-color="blue">+      <mj-text>+        GO TO SPACE+      </mj-text>+    </mj-hero>+  </mj-body>+</mjml>
+ test/fixtures/mj-hero-background-height.html view
@@ -0,0 +1,117 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0;font-size:0;mso-line-height-rule:exactly;"><v:image style="border:0;height:300px;mso-position-horizontal:center;position:absolute;top:0;width:600px;z-index:-3;" xmlns:v="urn:schemas-microsoft-com:vml" /><![endif]-->+      <div+         style="margin:0 auto;max-width:600px;"+      >+        <table+           border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr+               style="vertical-align:top;"+            >+              +          <td+             style="background:#ffffff;background-position:center center;background-repeat:no-repeat;padding:0px;vertical-align:top;height:0px;" height="0"+          >+            +      <!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600" ><tr><td style=""><![endif]-->+      <div+         class="mj-hero-content" style="margin:0px auto;"+      >+        <table+           border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;"+        >+          <tbody>+            <tr>+              <td  style="" >+                <table+                   border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;"+                >+                  <tbody>+                    +                        <tr>+                          <td+                             align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                          >+                            +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      >GO TO SPACE</div>+    +                          </td>+                        </tr>+                      +                  </tbody>+                </table>+              </td>+            </tr>+          </tbody>+        </table>+      </div>+      <!--[if mso | IE]></td></tr></table><![endif]-->+    +          </td>+        +            </tr>+          </tbody>+      </table>+    </div>+    <!--[if mso | IE]></td></tr></table><![endif]-->+    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-hero-background-height.mjml view
@@ -0,0 +1,9 @@+<mjml>+  <mj-body>+    <mj-hero background-height="300px">+      <mj-text>+        GO TO SPACE+      </mj-text>+    </mj-hero>+  </mj-body>+</mjml>
+ test/fixtures/mj-hero-background-position.html view
@@ -0,0 +1,117 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0;font-size:0;mso-line-height-rule:exactly;"><v:image style="border:0;mso-position-horizontal:center;position:absolute;top:0;width:600px;z-index:-3;" xmlns:v="urn:schemas-microsoft-com:vml" /><![endif]-->+      <div+         style="margin:0 auto;max-width:600px;"+      >+        <table+           border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr+               style="vertical-align:top;"+            >+              +          <td+             style="background:#ffffff;background-position:top left;background-repeat:no-repeat;padding:0px;vertical-align:top;height:0px;" height="0"+          >+            +      <!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600" ><tr><td style=""><![endif]-->+      <div+         class="mj-hero-content" style="margin:0px auto;"+      >+        <table+           border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;"+        >+          <tbody>+            <tr>+              <td  style="" >+                <table+                   border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;"+                >+                  <tbody>+                    +                        <tr>+                          <td+                             align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                          >+                            +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      >GO TO SPACE</div>+    +                          </td>+                        </tr>+                      +                  </tbody>+                </table>+              </td>+            </tr>+          </tbody>+        </table>+      </div>+      <!--[if mso | IE]></td></tr></table><![endif]-->+    +          </td>+        +            </tr>+          </tbody>+      </table>+    </div>+    <!--[if mso | IE]></td></tr></table><![endif]-->+    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-hero-background-position.mjml view
@@ -0,0 +1,9 @@+<mjml>+  <mj-body>+    <mj-hero background-position="top left">+      <mj-text>+        GO TO SPACE+      </mj-text>+    </mj-hero>+  </mj-body>+</mjml>
+ test/fixtures/mj-hero-background-url.html view
@@ -0,0 +1,117 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0;font-size:0;mso-line-height-rule:exactly;"><v:image style="border:0;mso-position-horizontal:center;position:absolute;top:0;width:600px;z-index:-3;" src="https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg" xmlns:v="urn:schemas-microsoft-com:vml" /><![endif]-->+      <div+         style="margin:0 auto;max-width:600px;"+      >+        <table+           border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr+               style="vertical-align:top;"+            >+              +          <td+             background="https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg" style="background:#ffffff url('https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg') no-repeat center center / cover;background-position:center center;background-repeat:no-repeat;padding:0px;vertical-align:top;height:0px;" height="0"+          >+            +      <!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600" ><tr><td style=""><![endif]-->+      <div+         class="mj-hero-content" style="margin:0px auto;"+      >+        <table+           border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;"+        >+          <tbody>+            <tr>+              <td  style="" >+                <table+                   border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;"+                >+                  <tbody>+                    +                        <tr>+                          <td+                             align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                          >+                            +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      >GO TO SPACE</div>+    +                          </td>+                        </tr>+                      +                  </tbody>+                </table>+              </td>+            </tr>+          </tbody>+        </table>+      </div>+      <!--[if mso | IE]></td></tr></table><![endif]-->+    +          </td>+        +            </tr>+          </tbody>+      </table>+    </div>+    <!--[if mso | IE]></td></tr></table><![endif]-->+    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-hero-background-url.mjml view
@@ -0,0 +1,9 @@+<mjml>+  <mj-body>+    <mj-hero background-url="https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg">+      <mj-text>+        GO TO SPACE+      </mj-text>+    </mj-hero>+  </mj-body>+</mjml>
+ test/fixtures/mj-hero-background-width.html view
@@ -0,0 +1,117 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0;font-size:0;mso-line-height-rule:exactly;"><v:image style="border:0;mso-position-horizontal:center;position:absolute;top:0;width:300px;z-index:-3;" src="https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg" xmlns:v="urn:schemas-microsoft-com:vml" /><![endif]-->+      <div+         style="margin:0 auto;max-width:600px;"+      >+        <table+           border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr+               style="vertical-align:top;"+            >+              +          <td+             background="https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg" style="background:#ffffff url('https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg') no-repeat center center / cover;background-position:center center;background-repeat:no-repeat;padding:0px;vertical-align:top;height:0px;" height="0"+          >+            +      <!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600" ><tr><td style=""><![endif]-->+      <div+         class="mj-hero-content" style="margin:0px auto;"+      >+        <table+           border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;"+        >+          <tbody>+            <tr>+              <td  style="" >+                <table+                   border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;"+                >+                  <tbody>+                    +                        <tr>+                          <td+                             align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                          >+                            +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      >GO TO SPACE</div>+    +                          </td>+                        </tr>+                      +                  </tbody>+                </table>+              </td>+            </tr>+          </tbody>+        </table>+      </div>+      <!--[if mso | IE]></td></tr></table><![endif]-->+    +          </td>+        +            </tr>+          </tbody>+      </table>+    </div>+    <!--[if mso | IE]></td></tr></table><![endif]-->+    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-hero-background-width.mjml view
@@ -0,0 +1,9 @@+<mjml>+  <mj-body>+    <mj-hero background-url="https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg" background-width="300px">+      <mj-text>+        GO TO SPACE+      </mj-text>+    </mj-hero>+  </mj-body>+</mjml>
+ test/fixtures/mj-hero-class.html view
@@ -0,0 +1,117 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0;font-size:0;mso-line-height-rule:exactly;"><v:image style="border:0;mso-position-horizontal:center;position:absolute;top:0;width:600px;z-index:-3;" xmlns:v="urn:schemas-microsoft-com:vml" /><![endif]-->+      <div+         class="testing" style="margin:0 auto;max-width:600px;"+      >+        <table+           border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr+               style="vertical-align:top;"+            >+              +          <td+             style="background:#ffffff;background-position:center center;background-repeat:no-repeat;padding:0px;vertical-align:top;height:0px;" height="0"+          >+            +      <!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600" ><tr><td style=""><![endif]-->+      <div+         class="mj-hero-content" style="margin:0px auto;"+      >+        <table+           border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;"+        >+          <tbody>+            <tr>+              <td  style="" >+                <table+                   border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;"+                >+                  <tbody>+                    +                        <tr>+                          <td+                             align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                          >+                            +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      >GO TO SPACE</div>+    +                          </td>+                        </tr>+                      +                  </tbody>+                </table>+              </td>+            </tr>+          </tbody>+        </table>+      </div>+      <!--[if mso | IE]></td></tr></table><![endif]-->+    +          </td>+        +            </tr>+          </tbody>+      </table>+    </div>+    <!--[if mso | IE]></td></tr></table><![endif]-->+    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-hero-class.mjml view
@@ -0,0 +1,9 @@+<mjml>+  <mj-body>+    <mj-hero css-class="testing">+      <mj-text>+        GO TO SPACE+      </mj-text>+    </mj-hero>+  </mj-body>+</mjml>
+ test/fixtures/mj-hero-divider.html view
@@ -0,0 +1,114 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0;font-size:0;mso-line-height-rule:exactly;"><v:image style="border:0;mso-position-horizontal:center;position:absolute;top:0;width:600px;z-index:-3;" xmlns:v="urn:schemas-microsoft-com:vml" /><![endif]-->+      <div+         style="margin:0 auto;max-width:600px;"+      >+        <table+           border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr+               style="vertical-align:top;"+            >+              +          <td+             style="background:#ffffff;background-position:center center;background-repeat:no-repeat;padding:0px;vertical-align:top;height:0px;" height="0"+          >+            +      <!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600" ><tr><td style=""><![endif]-->+      <div+         class="mj-hero-content" style="margin:0px auto;"+      >+        <table+           border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;"+        >+          <tbody>+            <tr>+              <td  style="" >+                <table+                   border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;"+                >+                  <tbody>+                    +                        <tr>+                          <td+                             align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                          >+                            +      <p+         style="border-top:solid 4px #000000;font-size:1px;margin:0px auto;width:100%;"+      >+      </p>+      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 4px #000000;font-size:1px;margin:0px auto;width:550px;" role="presentation" width="550px" ><tr><td style="height:0;line-height:0;"> &nbsp;+</td></tr></table><![endif]-->+    +    +                          </td>+                        </tr>+                      +                  </tbody>+                </table>+              </td>+            </tr>+          </tbody>+        </table>+      </div>+      <!--[if mso | IE]></td></tr></table><![endif]-->+    +          </td>+        +            </tr>+          </tbody>+      </table>+    </div>+    <!--[if mso | IE]></td></tr></table><![endif]-->+    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-hero-divider.mjml view
@@ -0,0 +1,7 @@+<mjml>+  <mj-body>+    <mj-hero>+      <mj-divider />+    </mj-hero>+  </mj-body>+</mjml>
+ test/fixtures/mj-hero-height.html view
@@ -0,0 +1,117 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0;font-size:0;mso-line-height-rule:exactly;"><v:image style="border:0;mso-position-horizontal:center;position:absolute;top:0;width:600px;z-index:-3;" xmlns:v="urn:schemas-microsoft-com:vml" /><![endif]-->+      <div+         style="margin:0 auto;max-width:600px;"+      >+        <table+           border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr+               style="vertical-align:top;"+            >+              +          <td+             style="background:#ffffff;background-position:center center;background-repeat:no-repeat;padding:0px;vertical-align:top;height:350px;" height="350"+          >+            +      <!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600" ><tr><td style=""><![endif]-->+      <div+         class="mj-hero-content" style="margin:0px auto;"+      >+        <table+           border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;"+        >+          <tbody>+            <tr>+              <td  style="" >+                <table+                   border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;"+                >+                  <tbody>+                    +                        <tr>+                          <td+                             align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                          >+                            +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      >GO TO SPACE</div>+    +                          </td>+                        </tr>+                      +                  </tbody>+                </table>+              </td>+            </tr>+          </tbody>+        </table>+      </div>+      <!--[if mso | IE]></td></tr></table><![endif]-->+    +          </td>+        +            </tr>+          </tbody>+      </table>+    </div>+    <!--[if mso | IE]></td></tr></table><![endif]-->+    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-hero-height.mjml view
@@ -0,0 +1,9 @@+<mjml>+  <mj-body>+    <mj-hero height="350px">+      <mj-text>+        GO TO SPACE+      </mj-text>+    </mj-hero>+  </mj-body>+</mjml>
+ test/fixtures/mj-hero-mode.html view
@@ -0,0 +1,117 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0;font-size:0;mso-line-height-rule:exactly;"><v:image style="border:0;height:469px;mso-position-horizontal:center;position:absolute;top:0;width:600px;z-index:-3;" src="https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg" xmlns:v="urn:schemas-microsoft-com:vml" /><![endif]-->+      <div+         style="margin:0 auto;max-width:600px;"+      >+        <table+           border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr+               style="vertical-align:top;"+            >+              +          <td+             background="https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg" style="background:#2a3448 url('https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg') no-repeat center center / cover;background-position:center center;background-repeat:no-repeat;padding:5px;padding-bottom:2px;vertical-align:top;height:462px;" height="462"+          >+            +      <!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" style="width:590px;" width="590" ><tr><td style=""><![endif]-->+      <div+         class="mj-hero-content" style="margin:0px auto;"+      >+        <table+           border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;"+        >+          <tbody>+            <tr>+              <td  style="" >+                <table+                   border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;"+                >+                  <tbody>+                    +                        <tr>+                          <td+                             align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                          >+                            +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      >GO TO SPACE</div>+    +                          </td>+                        </tr>+                      +                  </tbody>+                </table>+              </td>+            </tr>+          </tbody>+        </table>+      </div>+      <!--[if mso | IE]></td></tr></table><![endif]-->+    +          </td>+        +            </tr>+          </tbody>+      </table>+    </div>+    <!--[if mso | IE]></td></tr></table><![endif]-->+    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-hero-mode.mjml view
@@ -0,0 +1,18 @@+<mjml>+  <mj-body>+    <mj-hero+      mode="fixed-height"+      height="469px"+      background-width="600px"+      background-height="469px"+      background-url="https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg"+      background-color="#2a3448"+      padding="5px"+      padding-bottom="2px"+    >+      <mj-text>+        GO TO SPACE+      </mj-text>+    </mj-hero>+  </mj-body>+</mjml>
+ test/fixtures/mj-hero-vertical-align.html view
@@ -0,0 +1,117 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0;font-size:0;mso-line-height-rule:exactly;"><v:image style="border:0;mso-position-horizontal:center;position:absolute;top:0;width:600px;z-index:-3;" xmlns:v="urn:schemas-microsoft-com:vml" /><![endif]-->+      <div+         style="margin:0 auto;max-width:600px;"+      >+        <table+           border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr+               style="vertical-align:top;"+            >+              +          <td+             style="background:#ffffff;background-position:center center;background-repeat:no-repeat;padding:0px;vertical-align:bottom;height:0px;" height="0"+          >+            +      <!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600" ><tr><td style=""><![endif]-->+      <div+         class="mj-hero-content" style="margin:0px auto;"+      >+        <table+           border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;"+        >+          <tbody>+            <tr>+              <td  style="" >+                <table+                   border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;"+                >+                  <tbody>+                    +                        <tr>+                          <td+                             align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                          >+                            +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      >GO TO SPACE</div>+    +                          </td>+                        </tr>+                      +                  </tbody>+                </table>+              </td>+            </tr>+          </tbody>+        </table>+      </div>+      <!--[if mso | IE]></td></tr></table><![endif]-->+    +          </td>+        +            </tr>+          </tbody>+      </table>+    </div>+    <!--[if mso | IE]></td></tr></table><![endif]-->+    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-hero-vertical-align.mjml view
@@ -0,0 +1,9 @@+<mjml>+  <mj-body>+    <mj-hero vertical-align="bottom">+      <mj-text>+        GO TO SPACE+      </mj-text>+    </mj-hero>+  </mj-body>+</mjml>
+ test/fixtures/mj-hero-width.html view
@@ -0,0 +1,117 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0;font-size:0;mso-line-height-rule:exactly;"><v:image style="border:0;mso-position-horizontal:center;position:absolute;top:0;width:600px;z-index:-3;" xmlns:v="urn:schemas-microsoft-com:vml" /><![endif]-->+      <div+         style="margin:0 auto;max-width:600px;"+      >+        <table+           border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr+               style="vertical-align:top;"+            >+              +          <td+             style="background:#ffffff;background-position:center center;background-repeat:no-repeat;padding:0px;vertical-align:top;height:0px;" height="0"+          >+            +      <!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600" ><tr><td style=""><![endif]-->+      <div+         class="mj-hero-content" style="margin:0px auto;width:280px;"+      >+        <table+           border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;"+        >+          <tbody>+            <tr>+              <td  style="" >+                <table+                   border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;"+                >+                  <tbody>+                    +                        <tr>+                          <td+                             align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                          >+                            +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      >GO TO SPACE</div>+    +                          </td>+                        </tr>+                      +                  </tbody>+                </table>+              </td>+            </tr>+          </tbody>+        </table>+      </div>+      <!--[if mso | IE]></td></tr></table><![endif]-->+    +          </td>+        +            </tr>+          </tbody>+      </table>+    </div>+    <!--[if mso | IE]></td></tr></table><![endif]-->+    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-hero-width.mjml view
@@ -0,0 +1,9 @@+<mjml>+  <mj-body>+    <mj-hero width="280px">+      <mj-text>+        GO TO SPACE+      </mj-text>+    </mj-hero>+  </mj-body>+</mjml>
+ test/fixtures/mj-hero.html view
@@ -0,0 +1,143 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0;font-size:0;mso-line-height-rule:exactly;"><v:image style="border:0;mso-position-horizontal:center;position:absolute;top:0;width:600px;z-index:-3;" xmlns:v="urn:schemas-microsoft-com:vml" /><![endif]-->+      <div+         style="margin:0 auto;max-width:600px;"+      >+        <table+           border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr+               style="vertical-align:top;"+            >+              +          <td+             style="background:#ffffff;background-position:center center;background-repeat:no-repeat;padding:0px;vertical-align:top;height:0px;" height="0"+          >+            +      <!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600" ><tr><td style=""><![endif]-->+      <div+         class="mj-hero-content" style="margin:0px auto;"+      >+        <table+           border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;"+        >+          <tbody>+            <tr>+              <td  style="" >+                <table+                   border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;"+                >+                  <tbody>+                    +                        <tr>+                          <td+                             align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                          >+                            +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      >GO TO SPACE</div>+    +                          </td>+                        </tr>+                      +                        <tr>+                          <td+                             align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                          >+                            +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;"+      >+        <tbody>+          <tr>+            <td+               align="center" bgcolor="#414141" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#414141;" valign="middle"+            >+              <a+                 href="https://jolimail.io/" style="display:inline-block;background:#414141;color:#ffffff;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;" target="_blank"+              >+                ORDER YOUR TICKET NOW+              </a>+            </td>+          </tr>+        </tbody>+      </table>+    +                          </td>+                        </tr>+                      +                  </tbody>+                </table>+              </td>+            </tr>+          </tbody>+        </table>+      </div>+      <!--[if mso | IE]></td></tr></table><![endif]-->+    +          </td>+        +            </tr>+          </tbody>+      </table>+    </div>+    <!--[if mso | IE]></td></tr></table><![endif]-->+    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-hero.mjml view
@@ -0,0 +1,12 @@+<mjml>+  <mj-body>+    <mj-hero>+      <mj-text>+        GO TO SPACE+      </mj-text>+      <mj-button href="https://jolimail.io/">+        ORDER YOUR TICKET NOW+      </mj-button>+    </mj-hero>+  </mj-body>+</mjml>
+ test/fixtures/mj-image-align.html view
@@ -0,0 +1,276 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-50 { width:50% !important; max-width: 50%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-50 { width:50% !important; max-width: 50%; }+    </style>+    +    +  +    +    <style type="text/css">++    @media only screen and (max-width:479px) {+      table.mj-full-width-mobile { width: 100% !important; }+      td.mj-full-width-mobile { width: auto !important; }+    }+  +    </style>+    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:300px;" ><![endif]-->+            +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"+      >+        <tbody>+          <tr>+            <td  style="width:100px;">+              +      <img+         alt="" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="100" height="auto"+      />+    +            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:300px;" ><![endif]-->+            +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"+      >+        <tbody>+          <tr>+            <td  style="width:100px;">+              +      <img+         alt="" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="100" height="auto"+      />+    +            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:300px;" ><![endif]-->+            +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"+      >+        <tbody>+          <tr>+            <td  style="width:100px;">+              +      <img+         alt="" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="100" height="auto"+      />+    +            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:300px;" ><![endif]-->+            +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="right" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"+      >+        <tbody>+          <tr>+            <td  style="width:100px;">+              +      <img+         alt="" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="100" height="auto"+      />+    +            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-image-align.mjml view
@@ -0,0 +1,20 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-image width="100px" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />+      </mj-column>+      <mj-column>+        <mj-image align="center" width="100px" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />+      </mj-column>+    </mj-section>+    <mj-section>+      <mj-column>+        <mj-image align="left" width="100px" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />+      </mj-column>+      <mj-column>+        <mj-image align="right" width="100px" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-image-border-radius.html view
@@ -0,0 +1,134 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    <style type="text/css">++    @media only screen and (max-width:479px) {+      table.mj-full-width-mobile { width: 100% !important; }+      td.mj-full-width-mobile { width: auto !important; }+    }+  +    </style>+    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"+      >+        <tbody>+          <tr>+            <td  style="width:550px;">+              +      <img+         alt="" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" style="border:0;border-radius:5px;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="550" height="auto"+      />+    +            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-image-border-radius.mjml view
@@ -0,0 +1,9 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-image border-radius="5px" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-image-border.html view
@@ -0,0 +1,134 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    <style type="text/css">++    @media only screen and (max-width:479px) {+      table.mj-full-width-mobile { width: 100% !important; }+      td.mj-full-width-mobile { width: auto !important; }+    }+  +    </style>+    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"+      >+        <tbody>+          <tr>+            <td  style="width:548px;">+              +      <img+         alt="" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" style="border:1px solid red;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="548" height="auto"+      />+    +            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-image-border.mjml view
@@ -0,0 +1,9 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-image border="1px solid red" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-image-class.html view
@@ -0,0 +1,134 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    <style type="text/css">++    @media only screen and (max-width:479px) {+      table.mj-full-width-mobile { width: 100% !important; }+      td.mj-full-width-mobile { width: auto !important; }+    }+  +    </style>+    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" class="testing" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"+      >+        <tbody>+          <tr>+            <td  style="width:550px;">+              +      <img+         alt="" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="550" height="auto"+      />+    +            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-image-class.mjml view
@@ -0,0 +1,9 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-image css-class="testing" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-image-container-background-color.html view
@@ -0,0 +1,134 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    <style type="text/css">++    @media only screen and (max-width:479px) {+      table.mj-full-width-mobile { width: 100% !important; }+      td.mj-full-width-mobile { width: auto !important; }+    }+  +    </style>+    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="background:orange;font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"+      >+        <tbody>+          <tr>+            <td  style="width:550px;">+              +      <img+         alt="" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="550" height="auto"+      />+    +            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-image-container-background-color.mjml view
@@ -0,0 +1,9 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-image container-background-color="orange" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-image-fluid-on-mobile.html view
@@ -0,0 +1,174 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-50 { width:50% !important; max-width: 50%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-50 { width:50% !important; max-width: 50%; }+    </style>+    +    +  +    +    <style type="text/css">++    @media only screen and (max-width:479px) {+      table.mj-full-width-mobile { width: 100% !important; }+      td.mj-full-width-mobile { width: auto !important; }+    }+  +    </style>+    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:300px;" ><![endif]-->+            +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;" class="mj-full-width-mobile"+      >+        <tbody>+          <tr>+            <td  style="width:250px;" class="mj-full-width-mobile">+              +      <img+         alt="" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="250" height="auto"+      />+    +            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:300px;" ><![endif]-->+            +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"+      >+        <tbody>+          <tr>+            <td  style="width:250px;">+              +      <img+         alt="" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="250" height="auto"+      />+    +            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-image-fluid-on-mobile.mjml view
@@ -0,0 +1,12 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-image fluid-on-mobile="true" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />+      </mj-column>+      <mj-column>+        <mj-image fluid-on-mobile="false" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-image-height.html view
@@ -0,0 +1,174 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-50 { width:50% !important; max-width: 50%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-50 { width:50% !important; max-width: 50%; }+    </style>+    +    +  +    +    <style type="text/css">++    @media only screen and (max-width:479px) {+      table.mj-full-width-mobile { width: 100% !important; }+      td.mj-full-width-mobile { width: auto !important; }+    }+  +    </style>+    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:300px;" ><![endif]-->+            +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"+      >+        <tbody>+          <tr>+            <td  style="width:250px;">+              +      <img+         alt="" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" style="border:0;display:block;outline:none;text-decoration:none;height:42px;width:100%;font-size:13px;" width="250" height="42"+      />+    +            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:300px;" ><![endif]-->+            +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"+      >+        <tbody>+          <tr>+            <td  style="width:250px;">+              +      <img+         alt="" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" style="border:0;display:block;outline:none;text-decoration:none;height:100px;width:100%;font-size:13px;" width="250" height="100"+      />+    +            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-image-height.mjml view
@@ -0,0 +1,12 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-image height="42px" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />+      </mj-column>+      <mj-column>+        <mj-image height="100px" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-image-href.html view
@@ -0,0 +1,186 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-50 { width:50% !important; max-width: 50%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-50 { width:50% !important; max-width: 50%; }+    </style>+    +    +  +    +    <style type="text/css">++    @media only screen and (max-width:479px) {+      table.mj-full-width-mobile { width: 100% !important; }+      td.mj-full-width-mobile { width: auto !important; }+    }+  +    </style>+    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:300px;" ><![endif]-->+            +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"+      >+        <tbody>+          <tr>+            <td  style="width:250px;">+              +        <a+           href="https://crates.io/crates/mrml" target="_blank"+        >+          +      <img+         alt="" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="250" height="auto"+      />+    +        </a>+      +            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:300px;" ><![endif]-->+            +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"+      >+        <tbody>+          <tr>+            <td  style="width:250px;">+              +        <a+           href="https://crates.io/crates/mrml" target="_self"+        >+          +      <img+         alt="" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="250" height="auto"+      />+    +        </a>+      +            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-image-href.mjml view
@@ -0,0 +1,12 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-image href="https://crates.io/crates/mrml" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />+      </mj-column>+      <mj-column>+        <mj-image href="https://crates.io/crates/mrml" target="_self" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-image-padding.html view
@@ -0,0 +1,378 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-50 { width:50% !important; max-width: 50%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-50 { width:50% !important; max-width: 50%; }+    </style>+    +    +  +    +    <style type="text/css">++    @media only screen and (max-width:479px) {+      table.mj-full-width-mobile { width: 100% !important; }+      td.mj-full-width-mobile { width: auto !important; }+    }+  +    </style>+    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:300px;" ><![endif]-->+            +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"+      >+        <tbody>+          <tr>+            <td  style="width:280px;">+              +      <img+         alt="" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="280" height="auto"+      />+    +            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:300px;" ><![endif]-->+            +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 15px 12px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"+      >+        <tbody>+          <tr>+            <td  style="width:270px;">+              +      <img+         alt="" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="270" height="auto"+      />+    +            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:300px;" ><![endif]-->+            +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;padding-top:1px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"+      >+        <tbody>+          <tr>+            <td  style="width:250px;">+              +      <img+         alt="" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="250" height="auto"+      />+    +            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:300px;" ><![endif]-->+            +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;padding-right:2px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"+      >+        <tbody>+          <tr>+            <td  style="width:273px;">+              +      <img+         alt="" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="273" height="auto"+      />+    +            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:300px;" ><![endif]-->+            +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;padding-bottom:3px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"+      >+        <tbody>+          <tr>+            <td  style="width:250px;">+              +      <img+         alt="" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="250" height="auto"+      />+    +            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:300px;" ><![endif]-->+            +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;padding-left:4px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"+      >+        <tbody>+          <tr>+            <td  style="width:271px;">+              +      <img+         alt="" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="271" height="auto"+      />+    +            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-image-padding.mjml view
@@ -0,0 +1,28 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-image padding="10px" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />+      </mj-column>+      <mj-column>+        <mj-image padding="10px 15px 12px" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />+      </mj-column>+    </mj-section>+    <mj-section>+      <mj-column>+        <mj-image padding-top="1px" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />+      </mj-column>+      <mj-column>+        <mj-image padding-right="2px" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />+      </mj-column>+    </mj-section>+    <mj-section>+      <mj-column>+        <mj-image padding-bottom="3px" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />+      </mj-column>+      <mj-column>+        <mj-image padding-left="4px" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-image-rel.html view
@@ -0,0 +1,134 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    <style type="text/css">++    @media only screen and (max-width:479px) {+      table.mj-full-width-mobile { width: 100% !important; }+      td.mj-full-width-mobile { width: auto !important; }+    }+  +    </style>+    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"+      >+        <tbody>+          <tr>+            <td  style="width:550px;">+              +      <img+         alt="" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="550" height="auto"+      />+    +            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-image-rel.mjml view
@@ -0,0 +1,9 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-image rel="testing" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-image-title.html view
@@ -0,0 +1,134 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    <style type="text/css">++    @media only screen and (max-width:479px) {+      table.mj-full-width-mobile { width: 100% !important; }+      td.mj-full-width-mobile { width: auto !important; }+    }+  +    </style>+    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"+      >+        <tbody>+          <tr>+            <td  style="width:550px;">+              +      <img+         alt="" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" title="some title" width="550" height="auto"+      />+    +            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-image-title.mjml view
@@ -0,0 +1,9 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-image src="http://www.online-image-editor.com//styles/2014/images/example_image.png" title="some title" />+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-image.html view
@@ -0,0 +1,134 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    <style type="text/css">++    @media only screen and (max-width:479px) {+      table.mj-full-width-mobile { width: 100% !important; }+      td.mj-full-width-mobile { width: auto !important; }+    }+  +    </style>+    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"+      >+        <tbody>+          <tr>+            <td  style="width:300px;">+              +      <img+         alt="" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="300" height="auto"+      />+    +            </td>+          </tr>+        </tbody>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-image.mjml view
@@ -0,0 +1,9 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-image width="300px" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-navbar-align-class.html view
@@ -0,0 +1,161 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    <style type="text/css">++      noinput.mj-menu-checkbox { display:block!important; max-height:none!important; visibility:visible!important; }++      @media only screen and (max-width:479px) {+        .mj-menu-checkbox[type="checkbox"] ~ .mj-inline-links { display:none!important; }+        .mj-menu-checkbox[type="checkbox"]:checked ~ .mj-inline-links,+        .mj-menu-checkbox[type="checkbox"] ~ .mj-menu-trigger { display:block!important; max-width:none!important; max-height:none!important; font-size:inherit!important; }+        .mj-menu-checkbox[type="checkbox"] ~ .mj-inline-links > a { display:block!important; }+        .mj-menu-checkbox[type="checkbox"]:checked ~ .mj-menu-trigger .mj-menu-icon-close { display:block!important; }+        .mj-menu-checkbox[type="checkbox"]:checked ~ .mj-menu-trigger .mj-menu-icon-open { display:none!important; }+      }+    +    </style>+    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="right" class="testing" style="font-size:0px;word-break:break-word;"+                >+                  +        +        <div+           class="mj-inline-links" style=""+        >+        +    <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0" align="right"><tr><td style="padding:15px 10px;" class="testing-link-outlook" ><![endif]-->+  +        +      <a+         class="mj-link testing-link" href="/hello" rel="hello" target="_blank" style="display:inline-block;color:#000000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:22px;text-decoration:none;text-transform:uppercase;padding:15px 10px;"+      >+        Hello+      </a>+    +        +    <!--[if mso | IE]></td><td style="padding:15px 10px;" class="" ><![endif]-->+  +        +      <a+         class="mj-link" href="/about" target="_blank" style="display:inline-block;color:blue;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:22px;text-decoration:none;text-transform:uppercase;padding:15px 10px;"+      >+        About+      </a>+    +        +    <!--[if mso | IE]></td></tr></table><![endif]-->+  +        </div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-navbar-align-class.mjml view
@@ -0,0 +1,12 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-navbar align="right" css-class="testing">+            <mj-navbar-link href="/hello" css-class="testing-link" rel="hello">Hello</mj-navbar-link>+            <mj-navbar-link href="/about" color="blue">About</mj-navbar-link>+        </mj-navbar>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-navbar-ico.html view
@@ -0,0 +1,183 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    <style type="text/css">++      noinput.mj-menu-checkbox { display:block!important; max-height:none!important; visibility:visible!important; }++      @media only screen and (max-width:479px) {+        .mj-menu-checkbox[type="checkbox"] ~ .mj-inline-links { display:none!important; }+        .mj-menu-checkbox[type="checkbox"]:checked ~ .mj-inline-links,+        .mj-menu-checkbox[type="checkbox"] ~ .mj-menu-trigger { display:block!important; max-width:none!important; max-height:none!important; font-size:inherit!important; }+        .mj-menu-checkbox[type="checkbox"] ~ .mj-inline-links > a { display:block!important; }+        .mj-menu-checkbox[type="checkbox"]:checked ~ .mj-menu-trigger .mj-menu-icon-close { display:block!important; }+        .mj-menu-checkbox[type="checkbox"]:checked ~ .mj-menu-trigger .mj-menu-icon-open { display:none!important; }+      }+    +    </style>+    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;word-break:break-word;"+                >+                  +        +      +    <!--[if !mso]><!--><input type="checkbox" id="00000000" class="mj-menu-checkbox" style="display:none !important; max-height:0; visibility:hidden;" /><!--<![endif]-->+  +      <div+         class="mj-menu-trigger" style="display:none;max-height:0px;max-width:0px;font-size:0px;overflow:hidden;"+      >+        <label+           for="00000000" class="mj-menu-label" style="display:block;cursor:pointer;mso-hide:all;-moz-user-select:none;user-select:none;color:red;font-size:12px;font-family:Comic;text-transform:uppercase;text-decoration:underline;line-height:20px;padding:1px;padding-right:2px;" align="right"+        >+          <span+             class="mj-menu-icon-open" style="mso-hide:all;"+          >+            &#8867;+          </span>+          <span+             class="mj-menu-icon-close" style="display:none;mso-hide:all;"+          >+            &#8856;+          </span>+        </label>+      </div>+    +        <div+           class="mj-inline-links" style=""+        >+        +    <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center"><tr><td style="padding:15px 10px;" class="" ><![endif]-->+  +        +      <a+         class="mj-link" href="/hello" target="_blank" style="display:inline-block;color:#000000;font-family:Helvetica;font-size:14px;font-style:oblique;font-weight:bolder;line-height:22px;text-decoration:none;text-transform:uppercase;padding:15px 10px;"+      >+        Hello+      </a>+    +        +    <!--[if mso | IE]></td><td style="padding:8px;padding-bottom:12px;" class="" ><![endif]-->+  +        +      <a+         class="mj-link" href="/about" target="_blank" style="display:inline-block;color:#000000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:22px;text-decoration:underline;text-transform:uppercase;padding:8px;padding-bottom:12px;"+      >+        About+      </a>+    +        +    <!--[if mso | IE]></td></tr></table><![endif]-->+  +        </div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-navbar-ico.mjml view
@@ -0,0 +1,12 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-navbar hamburger="hamburger" ico-align="right" ico-close="&#8856;" ico-color="red" ico-font-family="Comic" ico-font-size="12px" ico-line-height="20px" ico-open="&#8867;" ico-padding="1px" ico-padding-right="2px" ico-text-decoration="underline" ico-text-transform="uppercase">+          <mj-navbar-link href="/hello" font-family="Helvetica" font-size="14px" font-style="oblique" font-weight="bolder">Hello</mj-navbar-link>+          <mj-navbar-link href="/about" line-height="22px" padding="8px" padding-bottom="12px" text-decoration="underline" text-transform="uppercase">About</mj-navbar-link>+        </mj-navbar>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-navbar.html view
@@ -0,0 +1,183 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    <style type="text/css">++      noinput.mj-menu-checkbox { display:block!important; max-height:none!important; visibility:visible!important; }++      @media only screen and (max-width:479px) {+        .mj-menu-checkbox[type="checkbox"] ~ .mj-inline-links { display:none!important; }+        .mj-menu-checkbox[type="checkbox"]:checked ~ .mj-inline-links,+        .mj-menu-checkbox[type="checkbox"] ~ .mj-menu-trigger { display:block!important; max-width:none!important; max-height:none!important; font-size:inherit!important; }+        .mj-menu-checkbox[type="checkbox"] ~ .mj-inline-links > a { display:block!important; }+        .mj-menu-checkbox[type="checkbox"]:checked ~ .mj-menu-trigger .mj-menu-icon-close { display:block!important; }+        .mj-menu-checkbox[type="checkbox"]:checked ~ .mj-menu-trigger .mj-menu-icon-open { display:none!important; }+      }+    +    </style>+    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;word-break:break-word;"+                >+                  +        +      +    <!--[if !mso]><!--><input type="checkbox" id="00000000" class="mj-menu-checkbox" style="display:none !important; max-height:0; visibility:hidden;" /><!--<![endif]-->+  +      <div+         class="mj-menu-trigger" style="display:none;max-height:0px;max-width:0px;font-size:0px;overflow:hidden;"+      >+        <label+           for="00000000" class="mj-menu-label" style="display:block;cursor:pointer;mso-hide:all;-moz-user-select:none;user-select:none;color:#000000;font-size:30px;font-family:Ubuntu, Helvetica, Arial, sans-serif;text-transform:uppercase;text-decoration:none;line-height:30px;padding:10px;" align="center"+        >+          <span+             class="mj-menu-icon-open" style="mso-hide:all;"+          >+            &#9776;+          </span>+          <span+             class="mj-menu-icon-close" style="display:none;mso-hide:all;"+          >+            &#8855;+          </span>+        </label>+      </div>+    +        <div+           class="mj-inline-links" style=""+        >+        +    <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center"><tr><td style="padding:15px 10px;" class="" ><![endif]-->+  +        +      <a+         class="mj-link" href="https://jolimail.io/hello" target="_blank" style="display:inline-block;color:#000000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:22px;text-decoration:none;text-transform:uppercase;padding:15px 10px;"+      >+        Hello+      </a>+    +        +    <!--[if mso | IE]></td><td style="padding:15px 10px;" class="" ><![endif]-->+  +        +      <a+         class="mj-link" href="https://jolimail.io/about" target="_self" style="display:inline-block;color:#000000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:22px;text-decoration:none;text-transform:uppercase;padding:15px 10px;"+      >+        About+      </a>+    +        +    <!--[if mso | IE]></td></tr></table><![endif]-->+  +        </div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-navbar.mjml view
@@ -0,0 +1,12 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-navbar base-url="https://jolimail.io" hamburger="hamburger">+            <mj-navbar-link href="/hello">Hello</mj-navbar-link>+            <mj-navbar-link href="/about" target="_self">About</mj-navbar-link>+        </mj-navbar>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-preview.html view
@@ -0,0 +1,124 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +    <div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">Hello MJML</div>+  +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      >Hello World!</div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-preview.mjml view
@@ -0,0 +1,14 @@+<mjml>+  <mj-head>+    <mj-preview>Hello MJML</mj-preview>+  </mj-head>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-text>+          Hello World!+        </mj-text>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-raw-conditional-comment.html view
@@ -0,0 +1,151 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><![endif]-->+      <!--[if mso]>--><div>mso</div><!--<![endif]-->+                <span>general</span>+                <!--[if mso]><div><![endif]-->+                <span>general two</span>+                <!--[if mso]></div><![endif]--><img src="bananas" alt=""/>++      <!--[if mso | IE]></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      >After</div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-raw-conditional-comment.mjml view
@@ -0,0 +1,23 @@+<mjml>+    <mj-head>+    </mj-head>+    <mj-body>+        <mj-section>+            <mj-raw>+                <!--[if mso]>--><div>mso</div><!--<![endif]-->+                <span>general</span>+                <!--[if mso]><div><![endif]-->+                <span>general two</span>+                <!--[if mso]></div><![endif]-->+            </mj-raw>+            <mj-raw>+                <img src="bananas" alt=""/>+            </mj-raw>+        </mj-section>+        <mj-section>+            <mj-column>+                <mj-text>After</mj-text>+            </mj-column>+        </mj-section>+    </mj-body>+</mjml>
+ test/fixtures/mj-raw-vml-namespace.html view
@@ -0,0 +1,49 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        <!--[if mso]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:128px;"><v:fill type="frame" src="https://example.com/image.jpg" /></v:rect><![endif]-->+      </div>+      </body>+    +</html>+
+ test/fixtures/mj-raw-vml-namespace.mjml view
@@ -0,0 +1,11 @@+<mjml>+  <mj-body>+    <mj-raw>+      <!--[if mso]>+      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:128px;">+        <v:fill type="frame" src="https://example.com/image.jpg" />+      </v:rect>+      <![endif]-->+    </mj-raw>+  </mj-body>+</mjml>
+ test/fixtures/mj-raw.html view
@@ -0,0 +1,55 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        <div id="whatever">+        <span>Hello</span>+      </div>+      Something+      <canvas />+      <!-- some comment -->+      <img src="some_url" />+      </div>+      </body>+    +</html>+
+ test/fixtures/mj-raw.mjml view
@@ -0,0 +1,13 @@+<mjml>+  <mj-body>+    <mj-raw>+      <div id="whatever">+        <span>Hello</span>+      </div>+      Something+      <canvas />+      <!-- some comment -->+      <img src="some_url" />+    </mj-raw>+  </mj-body>+</mjml>
+ test/fixtures/mj-section-background-color.html view
@@ -0,0 +1,75 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="red" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="background:red;background-color:red;margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:red;background-color:red;width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-section-background-color.mjml view
@@ -0,0 +1,6 @@+<mjml>+  <mj-body>+    <mj-section background-color="red">+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-section-background-url-full.html view
@@ -0,0 +1,73 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><v:rect style="width:600px;" xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"><v:fill origin="0, -0.5" position="0, -0.5" src="https://www.rust-lang.org/static/images/rust-logo-blk.svg" type="frame" size="1,1" aspect="atmost" /><v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"><![endif]-->+          +      <div  style="background:url('https://www.rust-lang.org/static/images/rust-logo-blk.svg') center top / contain no-repeat;background-position:center top;background-repeat:no-repeat;background-size:contain;margin:0px auto;max-width:600px;">+        <div  style="line-height:0;font-size:0;">+        <table+           align="center" background="https://www.rust-lang.org/static/images/rust-logo-blk.svg" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:url('https://www.rust-lang.org/static/images/rust-logo-blk.svg') center top / contain no-repeat;background-position:center top;background-repeat:no-repeat;background-size:contain;width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        </div>+      </div>+    +        <!--[if mso | IE]></v:textbox></v:rect></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-section-background-url-full.mjml view
@@ -0,0 +1,10 @@+<mjml>+  <mj-body>+    <mj-section+      background-url="https://www.rust-lang.org/static/images/rust-logo-blk.svg"+      background-size="contain"+      background-repeat="no-repeat"+    >+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-section-background-url.html view
@@ -0,0 +1,73 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><v:rect style="width:600px;" xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"><v:fill origin="0.5, 0" position="0.5, 0" src="https://www.rust-lang.org/static/images/rust-logo-blk.svg" type="tile" /><v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"><![endif]-->+          +      <div  style="background:url('https://www.rust-lang.org/static/images/rust-logo-blk.svg') center top / auto repeat;background-position:center top;background-repeat:repeat;background-size:auto;margin:0px auto;max-width:600px;">+        <div  style="line-height:0;font-size:0;">+        <table+           align="center" background="https://www.rust-lang.org/static/images/rust-logo-blk.svg" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:url('https://www.rust-lang.org/static/images/rust-logo-blk.svg') center top / auto repeat;background-position:center top;background-repeat:repeat;background-size:auto;width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        </div>+      </div>+    +        <!--[if mso | IE]></v:textbox></v:rect></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-section-background-url.mjml view
@@ -0,0 +1,6 @@+<mjml>+  <mj-body>+    <mj-section background-url="https://www.rust-lang.org/static/images/rust-logo-blk.svg">+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-section-body-width.html view
@@ -0,0 +1,75 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:420px;" width="420" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:420px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-section-body-width.mjml view
@@ -0,0 +1,5 @@+<mjml>+  <mj-body width="420px">+    <mj-section></mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-section-border-radius.html view
@@ -0,0 +1,75 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;border-radius:42px;overflow:hidden;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;border-collapse:separate;"+        >+          <tbody>+            <tr>+              <td+                 style="border-radius:42px;direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-section-border-radius.mjml view
@@ -0,0 +1,6 @@+<mjml>+  <mj-body>+    <mj-section border-radius="42px">+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-section-border.html view
@@ -0,0 +1,75 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="border:1px solid blue;border-bottom:4px solid orange;border-left:5px solid grey;border-right:3px solid green;border-top:2px solid red;direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-section-border.mjml view
@@ -0,0 +1,12 @@+<mjml>+  <mj-body>+    <mj-section+      border="1px solid blue"+      border-top="2px solid red"+      border-right="3px solid green"+      border-bottom="4px solid orange"+      border-left="5px solid grey"+    >+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-section-class.html view
@@ -0,0 +1,75 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="testing-outlook" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  class="testing" style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-section-class.mjml view
@@ -0,0 +1,6 @@+<mjml>+  <mj-body>+    <mj-section css-class="testing">+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-section-direction.html view
@@ -0,0 +1,75 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:rtl;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-section-direction.mjml view
@@ -0,0 +1,6 @@+<mjml>+  <mj-body>+    <mj-section direction="rtl">+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-section-full-width-background-url.html view
@@ -0,0 +1,85 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      <table+         align="center" background="https://www.rust-lang.org/static/images/rust-logo-blk.svg" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:url('https://www.rust-lang.org/static/images/rust-logo-blk.svg') center top / contain no-repeat;background-position:center top;background-repeat:no-repeat;background-size:contain;width:100%;"+      >+        <tbody>+          <tr>+            <td>+              +      <!--[if mso | IE]><v:rect style="mso-width-percent:1000;" xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"><v:fill origin="0, -0.5" position="0, -0.5" src="https://www.rust-lang.org/static/images/rust-logo-blk.svg" type="frame" size="1,1" aspect="atmost" /><v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +        +      <div  style="margin:0px auto;max-width:600px;">+        <div  style="line-height:0;font-size:0;">+        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        </div>+      </div>+    +        +      <!--[if mso | IE]></td></tr></table></v:textbox></v:rect><![endif]-->+    +            </td>+          </tr>+        </tbody>+      </table>+    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-section-full-width-background-url.mjml view
@@ -0,0 +1,11 @@+<mjml>+  <mj-body>+    <mj-section+      full-width="full-width"+      background-url="https://www.rust-lang.org/static/images/rust-logo-blk.svg"+      background-size="contain"+      background-repeat="no-repeat"+    >+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-section-full-width.html view
@@ -0,0 +1,87 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      <table+         align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+      >+        <tbody>+          <tr>+            <td>+              +        +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +        +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +        +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +      +            </td>+          </tr>+        </tbody>+      </table>+    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-section-full-width.mjml view
@@ -0,0 +1,6 @@+<mjml>+  <mj-body>+    <mj-section full-width="full-width">+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-section-padding.html view
@@ -0,0 +1,75 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:1px;padding-bottom:4px;padding-left:5px;padding-right:3px;padding-top:2px;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-section-padding.mjml view
@@ -0,0 +1,12 @@+<mjml>+  <mj-body>+    <mj-section+      padding="1px"+      padding-top="2px"+      padding-right="3px"+      padding-bottom="4px"+      padding-left="5px"+    >+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-section-text-align.html view
@@ -0,0 +1,75 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:right;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-section-text-align.mjml view
@@ -0,0 +1,6 @@+<mjml>+  <mj-body>+    <mj-section text-align="right">+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-section.html view
@@ -0,0 +1,75 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-section.mjml view
@@ -0,0 +1,5 @@+<mjml>+  <mj-body>+    <mj-section></mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-social-align.html view
@@ -0,0 +1,245 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="right" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      +     <!--[if mso | IE]><table align="right" border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td><![endif]-->+              <table+                 align="right" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"+              >+                <tbody>+                  +      <tr+        +      >+        +        <td  style="padding:4px;vertical-align:middle;">+          <table+             border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:orange;border-radius:3px;width:20px;"+          >+            <tbody>+              <tr>+                <td  style="font-size:0;height:20px;vertical-align:middle;width:20px;">+                  +                    <img+                       alt="" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/dribbble.png" style="border:0;border-radius:3px;display:block;" width="20"+                    />+                  +                </td>+              </tr>+            </tbody>+          </table>+        </td>+       +        +          <td  style="vertical-align:middle;padding:4px 4px 4px 0;text-align:left;">+            <span+                     style="color:#333333;font-size:13px;font-family:Ubuntu, Helvetica, Arial, sans-serif;line-height:22px;text-decoration:none;">+              Dribble+            </span>+          </td>+          +      +      </tr>+    +                </tbody>+              </table>+            <!--[if mso | IE]></td><td><![endif]-->+              <table+                 align="right" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"+              >+                <tbody>+                  +      <tr+        +      >+        +        <td  style="padding:4px;vertical-align:middle;">+          <table+             border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#000000;border-radius:8px;width:20px;"+          >+            <tbody>+              <tr>+                <td  style="font-size:0;height:20px;vertical-align:middle;width:20px;">+                  +                    <img+                       alt="" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/github.png" style="border:0;border-radius:8px;display:block;" width="20"+                    />+                  +                </td>+              </tr>+            </tbody>+          </table>+        </td>+       +        +          <td  style="vertical-align:middle;padding:4px 4px 4px 0;text-align:left;">+            <span+                     style="color:#333333;font-size:13px;font-family:Ubuntu, Helvetica, Arial, sans-serif;line-height:22px;text-decoration:none;">+              Github+            </span>+          </td>+          +      +      </tr>+    +                </tbody>+              </table>+            <!--[if mso | IE]></td><td><![endif]-->+              <table+                 align="right" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"+              >+                <tbody>+                  +      <tr+        +      >+        +        <td  style="padding:4px;vertical-align:middle;">+          <table+             border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#dc4e41;border-radius:3px;width:20px;"+          >+            <tbody>+              <tr>+                <td  style="font-size:0;height:20px;vertical-align:middle;width:20px;">+                  +                    <img+                       alt="" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/google-plus.png" style="border:0;border-radius:3px;display:block;" width="20"+                    />+                  +                </td>+              </tr>+            </tbody>+          </table>+        </td>+       +        +          <td  style="vertical-align:middle;padding:4px 4px 4px 0;text-align:left;">+            <span+                     style="color:purple;font-size:13px;font-family:Ubuntu, Helvetica, Arial, sans-serif;line-height:22px;text-decoration:none;">+              Google+            </span>+          </td>+          +      +      </tr>+    +                </tbody>+              </table>+            <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-social-align.mjml view
@@ -0,0 +1,19 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-social align="right">+          <mj-social-element name="dribbble" background-color="orange">+            Dribble+          </mj-social-element>+          <mj-social-element name="github" border-radius="8px">+            Github+          </mj-social-element>+          <mj-social-element  name="google" color="purple">+            Google+          </mj-social-element>+        </mj-social>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-social-border-radius.html view
@@ -0,0 +1,245 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      +     <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td><![endif]-->+              <table+                 align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"+              >+                <tbody>+                  +      <tr+         class="testing"+      >+        +        <td  style="padding:4px;vertical-align:middle;">+          <table+             border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#3f729b;border-radius:3px;width:20px;"+          >+            <tbody>+              <tr>+                <td  style="font-size:0;height:20px;vertical-align:middle;width:20px;">+                  +                    <img+                       alt="" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/instagram.png" style="border:0;border-radius:3px;display:block;" width="20"+                    />+                  +                </td>+              </tr>+            </tbody>+          </table>+        </td>+       +        +          <td  style="vertical-align:middle;padding:4px 4px 4px 0;text-align:left;">+            <span+                     style="color:#333333;font-size:13px;font-family:Ubuntu, Helvetica, Arial, sans-serif;line-height:22px;text-decoration:none;">+              Instagram+            </span>+          </td>+          +      +      </tr>+    +                </tbody>+              </table>+            <!--[if mso | IE]></td><td><![endif]-->+              <table+                 align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"+              >+                <tbody>+                  +      <tr+        +      >+        +        <td  style="padding:4px;vertical-align:middle;">+          <table+             border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#0077b5;border-radius:1px;width:20px;"+          >+            <tbody>+              <tr>+                <td  style="font-size:0;height:20px;vertical-align:middle;width:20px;">+                  +                    <img+                       alt="" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/linkedin.png" style="border:0;border-radius:1px;display:block;" width="20"+                    />+                  +                </td>+              </tr>+            </tbody>+          </table>+        </td>+       +        +          <td  style="vertical-align:middle;padding:4px 4px 4px 0;text-align:left;">+            <span+                     style="color:#333333;font-size:13px;font-family:Comic;line-height:22px;text-decoration:none;">+              LinkedIn+            </span>+          </td>+          +      +      </tr>+    +                </tbody>+              </table>+            <!--[if mso | IE]></td><td><![endif]-->+              <table+                 align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"+              >+                <tbody>+                  +      <tr+        +      >+        +        <td  style="padding:4px;vertical-align:middle;">+          <table+             border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#000000;border-radius:1px;width:20px;"+          >+            <tbody>+              <tr>+                <td  style="font-size:0;height:20px;vertical-align:middle;width:20px;">+                  +                    <img+                       alt="" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/medium.png" style="border:0;border-radius:1px;display:block;" width="20"+                    />+                  +                </td>+              </tr>+            </tbody>+          </table>+        </td>+       +        +          <td  style="vertical-align:middle;padding:4px 4px 4px 0;text-align:left;">+            <span+                     style="color:#333333;font-size:15px;font-family:Ubuntu, Helvetica, Arial, sans-serif;line-height:22px;text-decoration:none;">+              Medium+            </span>+          </td>+          +      +      </tr>+    +                </tbody>+              </table>+            <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-social-border-radius.mjml view
@@ -0,0 +1,19 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-social border-radius="1px">+          <mj-social-element name="instagram" border-radius="3px" css-class="testing">+						Instagram+          </mj-social-element>+          <mj-social-element name="linkedin" font-family="Comic">+            LinkedIn+          </mj-social-element>+          <mj-social-element  name="medium" font-size="15px">+            Medium+          </mj-social-element>+        </mj-social>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-social-class.html view
@@ -0,0 +1,245 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" class="testing" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      +     <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td><![endif]-->+              <table+                 align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"+              >+                <tbody>+                  +      <tr+        +      >+        +        <td  style="padding:4px;vertical-align:middle;">+          <table+             border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#344356;border-radius:3px;width:20px;"+          >+            <tbody>+              <tr>+                <td  style="font-size:0;height:30px;vertical-align:middle;width:20px;">+                  +                    <img+                       alt="" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/tumblr.png" style="border:0;border-radius:3px;display:block;" width="20"+                    />+                  +                </td>+              </tr>+            </tbody>+          </table>+        </td>+       +        +          <td  style="vertical-align:middle;padding:4px 4px 4px 0;text-align:left;">+            <span+                     style="color:#333333;font-size:13px;font-family:Ubuntu, Helvetica, Arial, sans-serif;line-height:22px;text-decoration:none;">+              Tumblr+            </span>+          </td>+          +      +      </tr>+    +                </tbody>+              </table>+            <!--[if mso | IE]></td><td><![endif]-->+              <table+                 align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"+              >+                <tbody>+                  +      <tr+        +      >+        +        <td  style="padding:4px;vertical-align:middle;">+          <table+             border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#53B4E7;border-radius:3px;width:25px;"+          >+            <tbody>+              <tr>+                <td  style="font-size:0;height:25px;vertical-align:middle;width:25px;">+                  +                    <img+                       alt="" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/vimeo.png" style="border:0;border-radius:3px;display:block;" width="25"+                    />+                  +                </td>+              </tr>+            </tbody>+          </table>+        </td>+       +        +          <td  style="vertical-align:middle;padding:4px 4px 4px 0;text-align:left;">+            <span+                     style="color:#333333;font-size:13px;font-family:Ubuntu, Helvetica, Arial, sans-serif;line-height:22px;text-decoration:none;">+              Vimeo+            </span>+          </td>+          +      +      </tr>+    +                </tbody>+              </table>+            <!--[if mso | IE]></td><td><![endif]-->+              <table+                 align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"+              >+                <tbody>+                  +      <tr+        +      >+        +        <td  style="padding:4px;vertical-align:middle;">+          <table+             border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#4BADE9;border-radius:3px;width:20px;"+          >+            <tbody>+              <tr>+                <td  style="font-size:0;height:20px;vertical-align:middle;width:20px;">+                  +                    <img+                       alt="" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/web.png" style="border:0;border-radius:3px;display:block;" width="20"+                    />+                  +                </td>+              </tr>+            </tbody>+          </table>+        </td>+       +        +          <td  style="vertical-align:middle;padding:4px 4px 4px 0;text-align:left;">+            <span+                     style="color:#333333;font-size:13px;font-family:Ubuntu, Helvetica, Arial, sans-serif;line-height:30px;text-decoration:none;">+              Web+            </span>+          </td>+          +      +      </tr>+    +                </tbody>+              </table>+            <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-social-class.mjml view
@@ -0,0 +1,19 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-social css-class="testing">+          <mj-social-element name="tumblr" icon-height="30px">+						Tumblr+          </mj-social-element>+          <mj-social-element name="vimeo" icon-size="25px">+            Vimeo+          </mj-social-element>+          <mj-social-element  name="web" line-height="30px">+						Web+          </mj-social-element>+        </mj-social>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-social-color.html view
@@ -0,0 +1,245 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      +     <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td><![endif]-->+              <table+                 align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"+              >+                <tbody>+                  +      <tr+        +      >+        +        <td  style="padding:4px;vertical-align:middle;">+          <table+             border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#bd081c;border-radius:3px;width:20px;"+          >+            <tbody>+              <tr>+                <td  style="font-size:0;height:20px;vertical-align:middle;width:20px;">+                  +                    <img+                       alt="" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/pinterest.png" style="border:0;border-radius:3px;display:block;" width="20"+                    />+                  +                </td>+              </tr>+            </tbody>+          </table>+        </td>+       +        +          <td  style="vertical-align:middle;padding:4px 4px 4px 0;text-align:left;">+            <span+                     style="color:purple;font-size:13px;font-style:oblique;font-family:Ubuntu, Helvetica, Arial, sans-serif;line-height:22px;text-decoration:none;">+              Pinterest+            </span>+          </td>+          +      +      </tr>+    +                </tbody>+              </table>+            <!--[if mso | IE]></td><td><![endif]-->+              <table+                 align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"+              >+                <tbody>+                  +      <tr+        +      >+        +        <td  style="padding:4px;vertical-align:middle;">+          <table+             border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFA54;border-radius:3px;width:20px;"+          >+            <tbody>+              <tr>+                <td  style="font-size:0;height:20px;vertical-align:middle;width:20px;">+                  +                    <img+                       alt="" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/snapchat.png" style="border:0;border-radius:3px;display:block;" width="20"+                    />+                  +                </td>+              </tr>+            </tbody>+          </table>+        </td>+       +        +          <td  style="vertical-align:middle;padding:4px 4px 4px 0;text-align:left;">+            <span+                     style="color:purple;font-size:13px;font-weight:bolder;font-family:Ubuntu, Helvetica, Arial, sans-serif;line-height:22px;text-decoration:none;">+              Snapchat+            </span>+          </td>+          +      +      </tr>+    +                </tbody>+              </table>+            <!--[if mso | IE]></td><td><![endif]-->+              <table+                 align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"+              >+                <tbody>+                  +      <tr+        +      >+        +        <td  style="padding:4px;vertical-align:middle;">+          <table+             border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#EF7F31;border-radius:3px;width:20px;"+          >+            <tbody>+              <tr>+                <td  style="font-size:0;height:20px;vertical-align:middle;width:20px;">+                  <a  href="https://jolimail.io" target="_blank">+                    <img+                       alt="" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/soundcloud.png" style="border:0;border-radius:3px;display:block;" width="20"+                    />+                  </a>+                </td>+              </tr>+            </tbody>+          </table>+        </td>+       +        +          <td  style="vertical-align:middle;padding:4px 4px 4px 0;text-align:left;">+            <a+                 href="https://jolimail.io" style="color:purple;font-size:13px;font-family:Ubuntu, Helvetica, Arial, sans-serif;line-height:22px;text-decoration:none;" target="_blank">+              Soundcloud+            </a>+          </td>+          +      +      </tr>+    +                </tbody>+              </table>+            <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-social-color.mjml view
@@ -0,0 +1,19 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-social color="purple">+          <mj-social-element name="pinterest" font-style="oblique">+            Pinterest+          </mj-social-element>+          <mj-social-element name="snapchat" font-weight="bolder">+            Snapchat+          </mj-social-element>+          <mj-social-element  name="soundcloud" href="https://jolimail.io">+            Soundcloud+          </mj-social-element>+        </mj-social>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-social-container-background-color.html view
@@ -0,0 +1,245 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="background:purple;font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      +     <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td><![endif]-->+              <table+                 align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"+              >+                <tbody>+                  +      <tr+        +      >+        +        <td  style="padding:2px;padding-bottom:5px;vertical-align:middle;">+          <table+             border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#296366;border-radius:3px;width:20px;"+          >+            <tbody>+              <tr>+                <td  style="font-size:0;height:20px;vertical-align:middle;width:20px;">+                  +                    <img+                       alt="" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/xing.png" style="border:0;border-radius:3px;display:block;" width="20"+                    />+                  +                </td>+              </tr>+            </tbody>+          </table>+        </td>+       +        +          <td  style="vertical-align:middle;padding:4px 4px 4px 0;text-align:left;">+            <span+                     style="color:#333333;font-size:13px;font-family:Ubuntu, Helvetica, Arial, sans-serif;line-height:22px;text-decoration:none;">+              Tumblr+            </span>+          </td>+          +      +      </tr>+    +                </tbody>+              </table>+            <!--[if mso | IE]></td><td><![endif]-->+              <table+                 align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"+              >+                <tbody>+                  +      <tr+        +      >+        +        <td  style="padding:4px;vertical-align:middle;">+          <table+             border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#EB3323;border-radius:3px;width:20px;"+          >+            <tbody>+              <tr>+                <td  style="padding:8px;font-size:0;height:20px;vertical-align:middle;width:20px;">+                  +                    <img+                       alt="" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/youtube.png" style="border:0;border-radius:3px;display:block;" width="20"+                    />+                  +                </td>+              </tr>+            </tbody>+          </table>+        </td>+       +        +          <td  style="vertical-align:middle;padding:4px 4px 4px 0;text-align:left;">+            <span+                     style="color:#333333;font-size:13px;font-family:Ubuntu, Helvetica, Arial, sans-serif;line-height:22px;text-decoration:none;">+              Vimeo+            </span>+          </td>+          +      +      </tr>+    +                </tbody>+              </table>+            <!--[if mso | IE]></td><td><![endif]-->+              <table+                 align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"+              >+                <tbody>+                  +      <tr+        +      >+        +        <td  style="padding:4px;vertical-align:middle;">+          <table+             border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#4BADE9;border-radius:3px;width:20px;"+          >+            <tbody>+              <tr>+                <td  style="font-size:0;height:20px;vertical-align:middle;width:20px;">+                  +                    <img+                       alt="" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/web.png" style="border:0;border-radius:3px;display:block;" width="20"+                    />+                  +                </td>+              </tr>+            </tbody>+          </table>+        </td>+       +        +          <td  style="vertical-align:middle;padding:9px;text-align:left;">+            <span+                     style="color:#333333;font-size:13px;font-family:Ubuntu, Helvetica, Arial, sans-serif;line-height:22px;text-decoration:none;">+              Web+            </span>+          </td>+          +      +      </tr>+    +                </tbody>+              </table>+            <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-social-container-background-color.mjml view
@@ -0,0 +1,19 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-social container-background-color="purple">+          <mj-social-element name="xing" padding="2px" padding-bottom="5px">+						Tumblr+          </mj-social-element>+          <mj-social-element name="youtube" icon-padding="8px">+            Vimeo+          </mj-social-element>+          <mj-social-element  name="web" text-padding="9px">+						Web+          </mj-social-element>+        </mj-social>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-social-element-ending.html view
@@ -0,0 +1,163 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#e7e7e7" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="background:#e7e7e7;background-color:#e7e7e7;margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#e7e7e7;background-color:#e7e7e7;width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      +     <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td><![endif]-->+              <table+                 align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"+              >+                <tbody>+                  +      <tr+        +      >+        +        <td  style="padding:4px;vertical-align:middle;">+          <table+             border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#3b5998;border-radius:3px;width:20px;"+          >+            <tbody>+              <tr>+                <td  style="font-size:0;height:20px;vertical-align:middle;width:20px;">+                  +                    <img+                       alt="" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/facebook.png" style="border:0;border-radius:3px;display:block;" width="20"+                    />+                  +                </td>+              </tr>+            </tbody>+          </table>+        </td>+       +        +          <td  style="vertical-align:middle;padding:4px 4px 4px 0;text-align:left;">+            <span+                     style="color:#333333;font-size:13px;font-family:Ubuntu, Helvetica, Arial, sans-serif;line-height:22px;text-decoration:none;">+              Share <b>test</b> hi+            </span>+          </td>+          +      +      </tr>+    +                </tbody>+              </table>+            <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-social-element-ending.mjml view
@@ -0,0 +1,13 @@+<mjml>+  <mj-body>+    <mj-section background-color="#e7e7e7">+      <mj-column>+        <mj-social>+          <mj-social-element name="facebook">+            Share <b>test</b> hi+          </mj-social-element>+        </mj-social>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-social-font-family.html view
@@ -0,0 +1,204 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      +     <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td><![endif]-->+              <table+                 align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"+              >+                <tbody>+                  +      <tr+        +      >+        +        <td  style="padding:4px;vertical-align:middle;">+          <table+             border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#EB3323;border-radius:3px;width:20px;"+          >+            <tbody>+              <tr>+                <td  style="font-size:0;height:20px;vertical-align:middle;width:20px;">+                  <a  href="https://jolimail.io" target="_self">+                    <img+                       alt="" title="youtube element" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/youtube.png" style="border:0;border-radius:3px;display:block;" width="20"+                    />+                  </a>+                </td>+              </tr>+            </tbody>+          </table>+        </td>+       +        +          <td  style="vertical-align:middle;padding:4px 4px 4px 0;text-align:left;">+            <a+                 href="https://jolimail.io" style="color:#333333;font-size:13px;font-family:Roboto;line-height:22px;text-decoration:none;" target="_self">+              Youtube+            </a>+          </td>+          +      +      </tr>+    +                </tbody>+              </table>+            <!--[if mso | IE]></td><td><![endif]-->+              <table+                 align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"+              >+                <tbody>+                  +      <tr+        +      >+        +        <td  style="padding:4px;vertical-align:middle;">+          <table+             border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:red;border-radius:3px;width:20px;"+          >+            <tbody>+              <tr>+                <td  style="font-size:0;height:20px;vertical-align:middle;width:20px;">+                  +                    <img+                       alt="" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/github.png" style="border:0;border-radius:3px;display:block;" width="20"+                    />+                  +                </td>+              </tr>+            </tbody>+          </table>+        </td>+       +        +          <td  style="vertical-align:middle;padding:4px 4px 4px 0;text-align:left;">+            <span+                     style="color:#333333;font-size:13px;font-family:Roboto;line-height:22px;text-decoration:underline;">+              Other+            </span>+          </td>+          +      +      </tr>+    +                </tbody>+              </table>+            <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-social-font-family.mjml view
@@ -0,0 +1,16 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-social font-family="Roboto">+          <mj-social-element name="youtube" href="https://jolimail.io" title="youtube element" target="_self">+            Youtube+          </mj-social-element>+          <mj-social-element background-color="red" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/github.png" text-decoration="underline">+						Other+          </mj-social-element>+        </mj-social>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-social-font.html view
@@ -0,0 +1,163 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      +     <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td><![endif]-->+              <table+                 align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"+              >+                <tbody>+                  +      <tr+        +      >+        +        <td  style="padding:4px;vertical-align:middle;">+          <table+             border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#EB3323;border-radius:3px;width:20px;"+          >+            <tbody>+              <tr>+                <td  style="font-size:0;height:20px;vertical-align:middle;width:20px;">+                  +                    <img+                       alt="" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/youtube.png" style="border:0;border-radius:3px;display:block;" width="20"+                    />+                  +                </td>+              </tr>+            </tbody>+          </table>+        </td>+       +        +          <td  style="vertical-align:middle;padding:4px 4px 4px 0;text-align:left;">+            <span+                     style="color:#333333;font-size:23px;font-weight:bold;font-style:oblique;font-family:Ubuntu, Helvetica, Arial, sans-serif;line-height:22px;text-decoration:none;">+              Youtube+            </span>+          </td>+          +      +      </tr>+    +                </tbody>+              </table>+            <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-social-font.mjml view
@@ -0,0 +1,13 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-social font-size="23px" font-style="oblique" font-weight="bold">+          <mj-social-element name="youtube">+						Youtube+          </mj-social-element>+        </mj-social>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-social-icon.html view
@@ -0,0 +1,163 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      +     <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td><![endif]-->+              <table+                 align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"+              >+                <tbody>+                  +      <tr+        +      >+        +        <td  style="padding:4px;vertical-align:middle;">+          <table+             border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#EB3323;border-radius:3px;width:25px;"+          >+            <tbody>+              <tr>+                <td  style="padding:2px;font-size:0;height:30px;vertical-align:middle;width:25px;">+                  +                    <img+                       alt="" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/youtube.png" style="border:0;border-radius:3px;display:block;" width="25"+                    />+                  +                </td>+              </tr>+            </tbody>+          </table>+        </td>+       +        +          <td  style="vertical-align:middle;padding:4px 4px 4px 0;text-align:left;">+            <span+                     style="color:#333333;font-size:13px;font-family:Ubuntu, Helvetica, Arial, sans-serif;line-height:22px;text-decoration:none;">+              Youtube+            </span>+          </td>+          +      +      </tr>+    +                </tbody>+              </table>+            <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-social-icon.mjml view
@@ -0,0 +1,13 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-social icon-height="30px" icon-size="25px" icon-padding="2px">+          <mj-social-element name="youtube">+						Youtube+          </mj-social-element>+        </mj-social>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-social-link.html view
@@ -0,0 +1,204 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      +     <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td><![endif]-->+              <table+                 align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"+              >+                <tbody>+                  +      <tr+        +      >+        +        <td  style="padding:4px;vertical-align:middle;">+          <table+             border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#3b5998;border-radius:3px;width:20px;"+          >+            <tbody>+              <tr>+                <td  style="font-size:0;height:20px;vertical-align:middle;width:20px;">+                  <a  href="https://www.facebook.com/sharer/sharer.php?u=mjml" target="_blank">+                    <img+                       alt="" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/facebook.png" style="border:0;border-radius:3px;display:block;" width="20"+                    />+                  </a>+                </td>+              </tr>+            </tbody>+          </table>+        </td>+       +        +          <td  style="vertical-align:middle;padding:4px 4px 4px 0;text-align:left;">+            <a+                 href="https://www.facebook.com/sharer/sharer.php?u=mjml" style="color:#333333;font-size:13px;font-family:Ubuntu, Helvetica, Arial, sans-serif;line-height:22px;text-decoration:none;" target="_blank">+              Facebook+            </a>+          </td>+          +      +      </tr>+    +                </tbody>+              </table>+            <!--[if mso | IE]></td><td><![endif]-->+              <table+                 align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"+              >+                <tbody>+                  +      <tr+        +      >+        +        <td  style="padding:4px;vertical-align:middle;">+          <table+             border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#3b5998;border-radius:3px;width:20px;"+          >+            <tbody>+              <tr>+                <td  style="font-size:0;height:20px;vertical-align:middle;width:20px;">+                  <a  href="https://mjml.io/" target="_blank">+                    <img+                       alt="" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/facebook.png" style="border:0;border-radius:3px;display:block;" width="20"+                    />+                  </a>+                </td>+              </tr>+            </tbody>+          </table>+        </td>+       +        +          <td  style="vertical-align:middle;padding:4px 4px 4px 0;text-align:left;">+            <a+                 href="https://mjml.io/" style="color:#333333;font-size:13px;font-family:Ubuntu, Helvetica, Arial, sans-serif;line-height:22px;text-decoration:none;" target="_blank">+              Facebook+            </a>+          </td>+          +      +      </tr>+    +                </tbody>+              </table>+            <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-social-link.mjml view
@@ -0,0 +1,16 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-social>+          <mj-social-element name="facebook" href="mjml">+            Facebook+          </mj-social-element>+          <mj-social-element name="facebook-noshare" href="https://mjml.io/">+            Facebook+          </mj-social-element>+        </mj-social>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-social-mode.html view
@@ -0,0 +1,194 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin:0px;"+      >+        <tbody>+          +      <tr+        +      >+        +        <td  style="padding:4px;vertical-align:middle;">+          <table+             border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#000000;border-radius:3px;width:20px;"+          >+            <tbody>+              <tr>+                <td  style="font-size:0;height:20px;vertical-align:middle;width:20px;">+                  +                    <img+                       alt="" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/github.png" style="border:0;border-radius:3px;display:block;" width="20"+                    />+                  +                </td>+              </tr>+            </tbody>+          </table>+        </td>+       +        +          <td  style="vertical-align:middle;padding:4px 4px 4px 0;text-align:left;">+            <span+                     style="color:#333333;font-size:13px;font-family:Ubuntu, Helvetica, Arial, sans-serif;line-height:22px;text-decoration:none;">+              Github+            </span>+          </td>+          +      +      </tr>+    +      <tr+        +      >+        +        <td  style="padding:4px;vertical-align:middle;">+          <table+             border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#EB3323;border-radius:3px;width:20px;"+          >+            <tbody>+              <tr>+                <td  style="font-size:0;height:20px;vertical-align:middle;width:20px;">+                  +                    <img+                       alt="" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/youtube.png" style="border:0;border-radius:3px;display:block;" width="20"+                    />+                  +                </td>+              </tr>+            </tbody>+          </table>+        </td>+       +        +          <td  style="vertical-align:middle;padding:4px 4px 4px 0;text-align:left;">+            <span+                     style="color:#333333;font-size:13px;font-family:Ubuntu, Helvetica, Arial, sans-serif;line-height:22px;text-decoration:none;">+              Youtube+            </span>+          </td>+          +      +      </tr>+    +        </tbody>+      </table>+    +    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-social-mode.mjml view
@@ -0,0 +1,16 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-social mode="vertical">+          <mj-social-element name="github">+						Github+          </mj-social-element>+          <mj-social-element name="youtube">+						Youtube+          </mj-social-element>+        </mj-social>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-social-padding.html view
@@ -0,0 +1,163 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:2px;padding-left:3px;word-break:break-word;"+                >+                  +      +     <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td><![endif]-->+              <table+                 align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"+              >+                <tbody>+                  +      <tr+        +      >+        +        <td  style="padding:1px;vertical-align:middle;">+          <table+             border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#EB3323;border-radius:3px;width:20px;"+          >+            <tbody>+              <tr>+                <td  style="font-size:0;height:20px;vertical-align:middle;width:20px;">+                  +                    <img+                       alt="" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/youtube.png" style="border:0;border-radius:3px;display:block;" width="20"+                    />+                  +                </td>+              </tr>+            </tbody>+          </table>+        </td>+       +        +          <td  style="vertical-align:middle;padding:4px;text-align:left;">+            <span+                     style="color:#333333;font-size:13px;font-family:Ubuntu, Helvetica, Arial, sans-serif;line-height:22px;text-decoration:none;">+              Youtube+            </span>+          </td>+          +      +      </tr>+    +                </tbody>+              </table>+            <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-social-padding.mjml view
@@ -0,0 +1,13 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-social inner-padding="1px" padding="2px" padding-left="3px" text-padding="4px">+          <mj-social-element name="youtube">+						Youtube+          </mj-social-element>+        </mj-social>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-social-share-url.html view
@@ -0,0 +1,204 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      +     <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td><![endif]-->+              <table+                 align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"+              >+                <tbody>+                  +      <tr+        +      >+        +        <td  style="padding:4px;vertical-align:middle;">+          <table+             border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#55acee;border-radius:3px;width:20px;"+          >+            <tbody>+              <tr>+                <td  style="font-size:0;height:20px;vertical-align:middle;width:20px;">+                  <a  href="https://twitter.com/intent/tweet?url=https://example.com" target="_blank">+                    <img+                       alt="" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/twitter.png" style="border:0;border-radius:3px;display:block;" width="20"+                    />+                  </a>+                </td>+              </tr>+            </tbody>+          </table>+        </td>+       +        +          <td  style="vertical-align:middle;padding:4px 4px 4px 0;text-align:left;">+            <a+                 href="https://twitter.com/intent/tweet?url=https://example.com" style="color:#333333;font-size:13px;font-family:Ubuntu, Helvetica, Arial, sans-serif;line-height:22px;text-decoration:none;" target="_blank">+              Twitter+            </a>+          </td>+          +      +      </tr>+    +                </tbody>+              </table>+            <!--[if mso | IE]></td><td><![endif]-->+              <table+                 align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"+              >+                <tbody>+                  +      <tr+        +      >+        +        <td  style="padding:4px;vertical-align:middle;">+          <table+             border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#000000;border-radius:3px;width:20px;"+          >+            <tbody>+              <tr>+                <td  style="font-size:0;height:20px;vertical-align:middle;width:20px;">+                  <a  href="https://twitter.com/intent/tweet?url=https://example.com" target="_blank">+                    <img+                       alt="" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/twitter-x.png" style="border:0;border-radius:3px;display:block;" width="20"+                    />+                  </a>+                </td>+              </tr>+            </tbody>+          </table>+        </td>+       +        +          <td  style="vertical-align:middle;padding:4px 4px 4px 0;text-align:left;">+            <a+                 href="https://twitter.com/intent/tweet?url=https://example.com" style="color:#333333;font-size:13px;font-family:Ubuntu, Helvetica, Arial, sans-serif;line-height:22px;text-decoration:none;" target="_blank">+              X+            </a>+          </td>+          +      +      </tr>+    +                </tbody>+              </table>+            <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-social-share-url.mjml view
@@ -0,0 +1,16 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-social>+          <mj-social-element name="twitter" href="https://example.com">+            Twitter+          </mj-social-element>+          <mj-social-element name="x" href="https://example.com">+            X+          </mj-social-element>+        </mj-social>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-social-text.html view
@@ -0,0 +1,163 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      +     <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td><![endif]-->+              <table+                 align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"+              >+                <tbody>+                  +      <tr+        +      >+        +        <td  style="padding:4px;vertical-align:middle;">+          <table+             border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#EB3323;border-radius:3px;width:20px;"+          >+            <tbody>+              <tr>+                <td  style="font-size:0;height:20px;vertical-align:middle;width:20px;">+                  +                    <img+                       alt="" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/youtube.png" style="border:0;border-radius:3px;display:block;" width="20"+                    />+                  +                </td>+              </tr>+            </tbody>+          </table>+        </td>+       +        +          <td  style="vertical-align:middle;padding:4px 4px 4px 0;text-align:left;">+            <span+                     style="color:#333333;font-size:13px;font-family:Ubuntu, Helvetica, Arial, sans-serif;line-height:25px;text-decoration:underline;">+              Youtube+            </span>+          </td>+          +      +      </tr>+    +                </tbody>+              </table>+            <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-social-text.mjml view
@@ -0,0 +1,13 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-social line-height="25px" text-decoration="underline">+          <mj-social-element name="youtube">+						Youtube+          </mj-social-element>+        </mj-social>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-social.html view
@@ -0,0 +1,245 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      +     <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td><![endif]-->+              <table+                 align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"+              >+                <tbody>+                  +      <tr+        +      >+        +        <td  style="padding:4px;vertical-align:middle;">+          <table+             border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#3b5998;border-radius:3px;width:20px;"+          >+            <tbody>+              <tr>+                <td  style="font-size:0;height:20px;vertical-align:middle;width:20px;">+                  +                    <img+                       alt="" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/facebook.png" style="border:0;border-radius:3px;display:block;" width="20"+                    />+                  +                </td>+              </tr>+            </tbody>+          </table>+        </td>+       +        +          <td  style="vertical-align:middle;padding:4px 4px 4px 0;text-align:right;">+            <span+                     style="color:#333333;font-size:13px;font-family:Ubuntu, Helvetica, Arial, sans-serif;line-height:22px;text-decoration:none;">+              Facebook+            </span>+          </td>+          +      +      </tr>+    +                </tbody>+              </table>+            <!--[if mso | IE]></td><td><![endif]-->+              <table+                 align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"+              >+                <tbody>+                  +      <tr+        +      >+        +        <td  style="padding:4px;vertical-align:middle;">+          <table+             border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#dc4e41;border-radius:3px;width:20px;"+          >+            <tbody>+              <tr>+                <td  style="font-size:0;height:20px;vertical-align:middle;width:20px;">+                  +                    <img+                       alt="google" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/google-plus.png" style="border:0;border-radius:3px;display:block;" width="20"+                    />+                  +                </td>+              </tr>+            </tbody>+          </table>+        </td>+       +        +          <td  style="vertical-align:middle;padding:4px 4px 4px 0;text-align:left;">+            <span+                     style="color:#333333;font-size:13px;font-family:Ubuntu, Helvetica, Arial, sans-serif;line-height:22px;text-decoration:none;">+              Google+            </span>+          </td>+          +      +      </tr>+    +                </tbody>+              </table>+            <!--[if mso | IE]></td><td><![endif]-->+              <table+                 align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;"+              >+                <tbody>+                  +      <tr+        +      >+        +        <td  style="padding:4px;vertical-align:middle;">+          <table+             border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#55acee;border-radius:3px;width:20px;"+          >+            <tbody>+              <tr>+                <td  style="font-size:0;height:20px;vertical-align:middle;width:20px;">+                  +                    <img+                       alt="" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/twitter.png" style="border:0;border-radius:3px;display:block;" width="20"+                    />+                  +                </td>+              </tr>+            </tbody>+          </table>+        </td>+       +        +          <td  style="vertical-align:middle;padding:4px 4px 4px 0;text-align:left;">+            <span+                     style="color:#333333;font-size:13px;font-family:Ubuntu, Helvetica, Arial, sans-serif;line-height:22px;text-decoration:none;">+              Twitter+            </span>+          </td>+          +      +      </tr>+    +                </tbody>+              </table>+            <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-social.mjml view
@@ -0,0 +1,19 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-social>+          <mj-social-element name="facebook" align="right">+            Facebook+          </mj-social-element>+          <mj-social-element name="google" alt="google">+            Google+          </mj-social-element>+          <mj-social-element  name="twitter">+            Twitter+          </mj-social-element>+        </mj-social>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-spacer.html view
@@ -0,0 +1,290 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      >Text</div>+    +                </td>+              </tr>+            +              <tr>+                <td+                   style="font-size:0px;word-break:break-word;"+                >+                  +      <div+         style="height:20px;line-height:20px;"+      >&#8202;</div>+    +                </td>+              </tr>+            +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      >Text</div>+    +                </td>+              </tr>+            +              <tr>+                <td+                   style="background:red;font-size:0px;word-break:break-word;"+                >+                  +      <div+         style="height:20px;line-height:20px;"+      >&#8202;</div>+    +                </td>+              </tr>+            +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      >Text</div>+    +                </td>+              </tr>+            +              <tr>+                <td+                   class="testing" style="font-size:0px;word-break:break-word;"+                >+                  +      <div+         style="height:20px;line-height:20px;"+      >&#8202;</div>+    +                </td>+              </tr>+            +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      >Text</div>+    +                </td>+              </tr>+            +              <tr>+                <td+                   style="font-size:0px;word-break:break-word;"+                >+                  +      <div+         style="height:60px;line-height:60px;"+      >&#8202;</div>+    +                </td>+              </tr>+            +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      >Text</div>+    +                </td>+              </tr>+            +              <tr>+                <td+                   style="font-size:0px;padding:1px;padding-left:3px;word-break:break-word;"+                >+                  +      <div+         style="height:20px;line-height:20px;"+      >&#8202;</div>+    +                </td>+              </tr>+            +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      >Text</div>+    +                </td>+              </tr>+            +              <tr>+                <td+                   style="font-size:0px;word-break:break-word;"+                >+                  +      <div+         style="height:20px;line-height:20px;"+      >&#8202;</div>+    +                </td>+              </tr>+            +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      >Text</div>+    +                </td>+              </tr>+            +              <tr>+                <td+                   style="font-size:0px;word-break:break-word;"+                >+                  +      <div+         style="height:20px;line-height:20px;"+      >&#8202;</div>+    +                </td>+              </tr>+            +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      >Text</div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-spacer.mjml view
@@ -0,0 +1,23 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-text>Text</mj-text>+        <mj-spacer />+        <mj-text>Text</mj-text>+        <mj-spacer container-background-color="red" />+        <mj-text>Text</mj-text>+        <mj-spacer css-class="testing" />+        <mj-text>Text</mj-text>+        <mj-spacer height="60px" />+        <mj-text>Text</mj-text>+        <mj-spacer padding="1px" padding-left="3px" />+        <mj-text>Text</mj-text>+        <mj-spacer vertical-align="bottom" />+        <mj-text>Text</mj-text>+        <mj-spacer width="50px" />+        <mj-text>Text</mj-text>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-style.html view
@@ -0,0 +1,128 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +     +    <style type="text/css">+.red-text div {+        color: red !important;+        text-decoration: underline !important;+      }+    </style>+    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" class="red-text" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      >I'm red and underlined</div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-style.mjml view
@@ -0,0 +1,17 @@+<mjml>+  <mj-head>+    <mj-style>+      .red-text div {+        color: red !important;+        text-decoration: underline !important;+      }+    </mj-style>+  </mj-head>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-text css-class="red-text">I'm red and underlined</mj-text>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-table-other.html view
@@ -0,0 +1,133 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" class="testing" style="background:red;font-size:0px;padding:1px;padding-right:2px;word-break:break-word;"+                >+                  +      <table+         cellpadding="0" cellspacing="0" width="90%" border="0" style="color:#000000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:90%;border:none;"+      >+        <tr>+            <th style="padding: 0 15px 0 0;">Year</th>+            <th style="padding: 0 15px;">Language</th>+            <th style="padding: 0 0 0 15px;">Inspired from</th>+          </tr>+          <tr>+            <td style="padding: 0 15px 0 0;">1995</td>+            <td style="padding: 0 15px;">PHP</td>+            <td style="padding: 0 0 0 15px;">C, Shell Unix</td>+          </tr>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-table-other.mjml view
@@ -0,0 +1,20 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-table container-background-color="red" css-class="testing" padding="1px" padding-right="2px" width="90%">+          <tr>+            <th style="padding: 0 15px 0 0;">Year</th>+            <th style="padding: 0 15px;">Language</th>+            <th style="padding: 0 0 0 15px;">Inspired from</th>+          </tr>+          <tr>+            <td style="padding: 0 15px 0 0;">1995</td>+            <td style="padding: 0 15px;">PHP</td>+            <td style="padding: 0 0 0 15px;">C, Shell Unix</td>+          </tr>+        </mj-table>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-table-table.html view
@@ -0,0 +1,133 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         cellpadding="1" cellspacing="2" width="100%" border="0" style="color:#000000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:initial;width:100%;border:1px solid black;border-collapse:separate;"+      >+        <tr>+            <th style="padding: 0 15px 0 0;">Year</th>+            <th style="padding: 0 15px;">Language</th>+            <th style="padding: 0 0 0 15px;">Inspired from</th>+          </tr>+          <tr>+            <td style="padding: 0 15px 0 0;">1995</td>+            <td style="padding: 0 15px;">PHP</td>+            <td style="padding: 0 0 0 15px;">C, Shell Unix</td>+          </tr>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-table-table.mjml view
@@ -0,0 +1,20 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-table border="1px solid black" cellpadding="1" cellspacing="2" table-layout="initial">+          <tr>+            <th style="padding: 0 15px 0 0;">Year</th>+            <th style="padding: 0 15px;">Language</th>+            <th style="padding: 0 0 0 15px;">Inspired from</th>+          </tr>+          <tr>+            <td style="padding: 0 15px 0 0;">1995</td>+            <td style="padding: 0 15px;">PHP</td>+            <td style="padding: 0 0 0 15px;">C, Shell Unix</td>+          </tr>+        </mj-table>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-table-text.html view
@@ -0,0 +1,125 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="right" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         cellpadding="0" cellspacing="0" width="100%" border="0" style="color:red;font-family:Comic;font-size:11px;line-height:24px;table-layout:auto;width:100%;border:none;"+      >+        <tr>+            <th style="padding: 0 15px 0 0;">Year</th>+            <th style="padding: 0 15px;">Language</th>+            <th style="padding: 0 0 0 15px;">Inspired from</th>+          </tr>+          <tr>+            <td style="padding: 0 15px 0 0;">1995</td>+            <td style="padding: 0 15px;">PHP</td>+            <td style="padding: 0 0 0 15px;">C, Shell Unix</td>+          </tr>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-table-text.mjml view
@@ -0,0 +1,20 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-table align="right" color="red" font-family="Comic" font-size="11px" font-weight="bolder" line-height="24px">+          <tr>+            <th style="padding: 0 15px 0 0;">Year</th>+            <th style="padding: 0 15px;">Language</th>+            <th style="padding: 0 0 0 15px;">Inspired from</th>+          </tr>+          <tr>+            <td style="padding: 0 15px 0 0;">1995</td>+            <td style="padding: 0 15px;">PHP</td>+            <td style="padding: 0 0 0 15px;">C, Shell Unix</td>+          </tr>+        </mj-table>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-table.html view
@@ -0,0 +1,133 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <table+         cellpadding="0" cellspacing="0" width="100%" border="0" style="color:#000000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;border:none;"+      >+        <tr>+            <th style="padding: 0 15px 0 0;">Year</th>+            <th style="padding: 0 15px;">Language</th>+            <th style="padding: 0 0 0 15px;">Inspired from</th>+          </tr>+          <tr>+            <td style="padding: 0 15px 0 0;">1995</td>+            <td style="padding: 0 15px;">PHP</td>+            <td style="padding: 0 0 0 15px;">C, Shell Unix</td>+          </tr>+      </table>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-table.mjml view
@@ -0,0 +1,20 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-table>+          <tr>+            <th style="padding: 0 15px 0 0;">Year</th>+            <th style="padding: 0 15px;">Language</th>+            <th style="padding: 0 0 0 15px;">Inspired from</th>+          </tr>+          <tr>+            <td style="padding: 0 15px 0 0;">1995</td>+            <td style="padding: 0 15px;">PHP</td>+            <td style="padding: 0 0 0 15px;">C, Shell Unix</td>+          </tr>+        </mj-table>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-text-align.html view
@@ -0,0 +1,122 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="right" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:right;color:#000000;"+      >with align</div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-text-align.mjml view
@@ -0,0 +1,11 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-text align="right">+          with align+        </mj-text>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-text-class.html view
@@ -0,0 +1,122 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" class="testing" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      >with css class</div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-text-class.mjml view
@@ -0,0 +1,11 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-text css-class="testing">+          with css class+        </mj-text>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-text-color.html view
@@ -0,0 +1,122 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:red;"+      >coucou</div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-text-color.mjml view
@@ -0,0 +1,11 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-text color="red">+          coucou+        </mj-text>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-text-container-background-color.html view
@@ -0,0 +1,122 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="background:red;font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      >with container background color</div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-text-container-background-color.mjml view
@@ -0,0 +1,11 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-text container-background-color="red">+          with container background color+        </mj-text>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-text-decoration.html view
@@ -0,0 +1,122 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;text-decoration:underline;color:#000000;"+      >with text decoration</div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-text-decoration.mjml view
@@ -0,0 +1,11 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-text text-decoration="underline">+          with text decoration+        </mj-text>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-text-example.html view
@@ -0,0 +1,124 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      ><h1>+            Hey Title!+          </h1></div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-text-example.mjml view
@@ -0,0 +1,13 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-text>+          <h1>+            Hey Title!+          </h1>+        </mj-text>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-text-font-family.html view
@@ -0,0 +1,122 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Roboto, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      >with font family</div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-text-font-family.mjml view
@@ -0,0 +1,11 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-text font-family="Roboto, Helvetica, Arial, sans-serif">+          with font family+        </mj-text>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-text-font-size.html view
@@ -0,0 +1,122 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:12px;line-height:1;text-align:left;color:#000000;"+      >with font size</div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-text-font-size.mjml view
@@ -0,0 +1,11 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-text font-size="12px">+          with font size+        </mj-text>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-text-font-style.html view
@@ -0,0 +1,122 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;font-style:oblique;line-height:1;text-align:left;color:#000000;"+      >with font style</div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-text-font-style.mjml view
@@ -0,0 +1,11 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-text font-style="oblique">+          with font style+        </mj-text>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-text-font-weight.html view
@@ -0,0 +1,122 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;font-weight:bolder;line-height:1;text-align:left;color:#000000;"+      >with font weight</div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-text-font-weight.mjml view
@@ -0,0 +1,11 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-text font-weight="bolder">+          with font weight+        </mj-text>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-text-height.html view
@@ -0,0 +1,130 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +        +    <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="40px" style="vertical-align:top;height:40px;"><![endif]-->+  +        +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;height:40px;"+      >with height</div>+    +        +    <!--[if mso | IE]></td></tr></table><![endif]-->+  +      +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-text-height.mjml view
@@ -0,0 +1,11 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-text height="40px">+          with height+        </mj-text>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-text-letter-spacing.html view
@@ -0,0 +1,122 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;letter-spacing:3px;line-height:1;text-align:left;color:#000000;"+      >with letter spacing</div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-text-letter-spacing.mjml view
@@ -0,0 +1,11 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-text letter-spacing="3px">+          with letter spacing+        </mj-text>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-text-line-height.html view
@@ -0,0 +1,122 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:42;text-align:left;color:#000000;"+      >with line height</div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-text-line-height.mjml view
@@ -0,0 +1,11 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-text line-height="42">+          with line height+        </mj-text>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-text-padding.html view
@@ -0,0 +1,280 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+.mj-column-per-50 { width:50% !important; max-width: 50%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+.moz-text-html .mj-column-per-50 { width:50% !important; max-width: 50%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:1px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      >with padding</div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:300px;" ><![endif]-->+            +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;padding-top:2px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      >with padding-top</div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:300px;" ><![endif]-->+            +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;padding-bottom:3px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      >with padding-bottom</div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:300px;" ><![endif]-->+            +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;padding-left:4px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      >with padding-left</div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:300px;" ><![endif]-->+            +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;padding-right:5px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      >with padding-right</div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-text-padding.mjml view
@@ -0,0 +1,35 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-text padding="1px">+          with padding+        </mj-text>+      </mj-column>+    </mj-section>+    <mj-section>+      <mj-column>+        <mj-text padding-top="2px">+          with padding-top+        </mj-text>+      </mj-column>+      <mj-column>+        <mj-text padding-bottom="3px">+          with padding-bottom+        </mj-text>+      </mj-column>+    </mj-section>+    <mj-section>+      <mj-column>+        <mj-text padding-left="4px">+          with padding-left+        </mj-text>+      </mj-column>+      <mj-column>+        <mj-text padding-right="5px">+          with padding-right+        </mj-text>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-text-transform.html view
@@ -0,0 +1,122 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;text-transform:full-width;color:#000000;"+      >with text transform</div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-text-transform.mjml view
@@ -0,0 +1,11 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-text text-transform="full-width">+          with text transform+        </mj-text>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-text.html view
@@ -0,0 +1,150 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-50 { width:50% !important; max-width: 50%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-50 { width:50% !important; max-width: 50%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:300px;" ><![endif]-->+            +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      >First</div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:300px;" ><![endif]-->+            +      <div+         class="mj-column-per-50 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      >Second</div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-text.mjml view
@@ -0,0 +1,12 @@+<mjml>+  <mj-body>+    <mj-section>+      <mj-column>+        <mj-text>First</mj-text>+      </mj-column>+      <mj-column>+        <mj-text>Second</mj-text>+      </mj-column>+    </mj-section>+  </mj-body>+</mjml>
+ test/fixtures/mj-title.html view
@@ -0,0 +1,49 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title>Hello MJML</title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-label="Hello MJML" aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-title.mjml view
@@ -0,0 +1,7 @@+<mjml>+  <mj-head>+    <mj-title>Hello MJML</mj-title>+  </mj-head>+  <mj-body>+  </mj-body>+</mjml>
+ test/fixtures/mj-wrapper-background.html view
@@ -0,0 +1,95 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="red" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><v:rect style="width:600px;" xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"><v:fill origin="0, -0.5" position="0, -0.5" src="https://www.rust-lang.org/static/images/rust-logo-blk.svg" color="red" type="frame" size="1,1" aspect="atmost" /><v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"><![endif]-->+          +      <div  style="background:red url('https://www.rust-lang.org/static/images/rust-logo-blk.svg') center top / contain no-repeat;background-position:center top;background-repeat:no-repeat;background-size:contain;margin:0px auto;max-width:600px;">+        <div  style="line-height:0;font-size:0;">+        <table+           align="center" background="https://www.rust-lang.org/static/images/rust-logo-blk.svg" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:red url('https://www.rust-lang.org/static/images/rust-logo-blk.svg') center top / contain no-repeat;background-position:center top;background-repeat:no-repeat;background-size:contain;width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        </div>+      </div>+    +        <!--[if mso | IE]></v:textbox></v:rect></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-wrapper-background.mjml view
@@ -0,0 +1,7 @@+<mjml>+  <mj-body>+    <mj-wrapper background-color="red" background-repeat="no-repeat" background-size="contain" background-url="https://www.rust-lang.org/static/images/rust-logo-blk.svg">+      <mj-section></mj-section>+    </mj-wrapper>+  </mj-body>+</mjml>
+ test/fixtures/mj-wrapper-border.html view
@@ -0,0 +1,97 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;border-radius:3px;overflow:hidden;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;border-collapse:separate;"+        >+          <tbody>+            <tr>+              <td+                 style="border:1px;border-right:2px;border-radius:3px;direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:597px;" width="597" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:597px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-wrapper-border.mjml view
@@ -0,0 +1,7 @@+<mjml>+  <mj-body>+    <mj-wrapper border="1px" border-right="2px" border-radius="3px">+      <mj-section></mj-section>+    </mj-wrapper>+  </mj-body>+</mjml>
+ test/fixtures/mj-wrapper-full-width-section-background.html view
@@ -0,0 +1,210 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +      <!--[if !mso]><!-->+        <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">+        <style type="text/css">+          @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);+        </style>+      <!--<![endif]-->++    +    +    <style type="text/css">+      @media only screen and (min-width:480px) {+        .mj-column-per-100 { width:100% !important; max-width: 100%; }+      }+    </style>+    <style media="screen and (min-width:480px)">+      .moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }+    </style>+    +    +  +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" width="600px" ><![endif]-->+            +      <table+         align="center" background="https://example.com/image.jpg" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:url('https://example.com/image.jpg') center top / cover no-repeat;background-position:center top;background-repeat:no-repeat;background-size:cover;width:100%;"+      >+        <tbody>+          <tr>+            <td>+              +      <!--[if mso | IE]><v:rect style="mso-width-percent:1000;" xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"><v:fill origin="0, -0.5" position="0, -0.5" src="https://example.com/image.jpg" type="frame" size="1,1" aspect="atleast" /><v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +        +      <div  style="margin:0px auto;max-width:600px;">+        <div  style="line-height:0;font-size:0;">+        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      >Hero section</div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        </div>+      </div>+    +        +      <!--[if mso | IE]></td></tr></table></v:textbox></v:rect><![endif]-->+    +            </td>+          </tr>+        </tbody>+      </table>+    +          <!--[if mso | IE]></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->+            +      <div+         class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"+      >+        +      <table+         border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"+      >+        <tbody>+          +              <tr>+                <td+                   align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;"+                >+                  +      <div+         style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"+      >Regular section</div>+    +                </td>+              </tr>+            +        </tbody>+      </table>+    +      </div>+    +          <!--[if mso | IE]></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-wrapper-full-width-section-background.mjml view
@@ -0,0 +1,16 @@+<mjml>+  <mj-body>+    <mj-wrapper>+      <mj-section full-width="full-width" background-url="https://example.com/image.jpg" background-size="cover" background-repeat="no-repeat">+        <mj-column>+          <mj-text>Hero section</mj-text>+        </mj-column>+      </mj-section>+      <mj-section background-color="#ffffff">+        <mj-column>+          <mj-text>Regular section</mj-text>+        </mj-column>+      </mj-section>+    </mj-wrapper>+  </mj-body>+</mjml>
+ test/fixtures/mj-wrapper-other.html view
@@ -0,0 +1,109 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      <table+         align="center" class="testing" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+      >+        <tbody>+          <tr>+            <td>+              +        +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="testing-outlook" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +        +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:rtl;font-size:0px;padding:20px 0;text-align:right;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +        +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +      +            </td>+          </tr>+        </tbody>+      </table>+    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-wrapper-other.mjml view
@@ -0,0 +1,7 @@+<mjml>+  <mj-body>+    <mj-wrapper css-class="testing" direction="rtl" full-width="full-width" text-align="right">+      <mj-section></mj-section>+    </mj-wrapper>+  </mj-body>+</mjml>
+ test/fixtures/mj-wrapper-padding.html view
@@ -0,0 +1,97 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:1px;padding-right:2px;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:597px;" width="597" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:597px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-wrapper-padding.mjml view
@@ -0,0 +1,7 @@+<mjml>+  <mj-body>+    <mj-wrapper padding="1px" padding-right="2px">+      <mj-section></mj-section>+    </mj-wrapper>+  </mj-body>+</mjml>
+ test/fixtures/mj-wrapper.html view
@@ -0,0 +1,97 @@+<!doctype html>+<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">+  <head>+    <title></title>+    <!--[if !mso]><!-->+    <meta http-equiv="X-UA-Compatible" content="IE=edge">+    <!--<![endif]-->+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">+    <meta name="viewport" content="width=device-width, initial-scale=1">+    <style type="text/css">+      #outlook a { padding:0; }+      body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }+      table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }+      img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }+      p { display:block;margin:13px 0; }+    </style>+    <!--[if mso]>+    <noscript>+    <xml>+    <o:OfficeDocumentSettings>+      <o:AllowPNG/>+      <o:PixelsPerInch>96</o:PixelsPerInch>+    </o:OfficeDocumentSettings>+    </xml>+    </noscript>+    <![endif]-->+    <!--[if lte mso 11]>+    <style type="text/css">+      .mj-outlook-group-fix { width:100% !important; }+    </style>+    <![endif]-->+    +    +    +    +    +  </head>+  +      <body  style="word-spacing:normal;">+        +        <div+           aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;"+        >+        +      +      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->+    +      +      <div  style="margin:0px auto;max-width:600px;">+        +        <table+           align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"+        >+          <tbody>+            <tr>+              <td+                 style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;"+              >+                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table></td></tr></table><![endif]-->+              </td>+            </tr>+          </tbody>+        </table>+        +      </div>+    +      +      <!--[if mso | IE]></td></tr></table><![endif]-->+    +    +      </div>+      </body>+    +</html>+
+ test/fixtures/mj-wrapper.mjml view
@@ -0,0 +1,7 @@+<mjml>+  <mj-body>+    <mj-wrapper>+      <mj-section></mj-section>+    </mj-wrapper>+  </mj-body>+</mjml>