[{"data":1,"prerenderedAt":686},["ShallowReactive",2],{"docs-side-nav":3,"docs-header-nav":197,"/docs/introduction":270,"docs-bottom-nav":613},{"id":4,"extension":5,"items":6,"meta":194,"stem":195,"__hash__":196},"navigation/data/navigation.json","json",[7,34,46,70,104,155,170],{"name":8,"items":9},"Getting Started",[10,13,16,19,22,25,28,31],{"title":11,"path":12},"What is Maizzle?","/docs/introduction",{"title":14,"path":15},"Installation","/docs/installation",{"title":17,"path":18},"Editor Setup","/docs/editor-setup",{"title":20,"path":21},"Compatibility","/docs/compatibility",{"title":23,"path":24},"Upgrade Guide","/docs/upgrade-guide",{"title":26,"path":27},"Resources","/resources",{"title":29,"path":30},"Glossary","/glossary",{"title":32,"path":33},"CLI","/docs/cli",{"name":35,"items":36},"Concepts",[37,40,43],{"title":38,"path":39},"Environments","/docs/environments",{"title":41,"path":42},"Tailwind CSS","/docs/tailwindcss",{"title":44,"path":45},"Build Process","/docs/build-process",{"name":47,"items":48},"Configuration",[49,52,55,58,61,64,67],{"title":50,"path":51},"CSS","/docs/configuration/css",{"title":53,"path":54},"Build","/docs/configuration/build",{"title":56,"path":57},"Server","/docs/configuration/server",{"title":59,"path":60},"Components","/docs/configuration/components",{"title":62,"path":63},"Expressions","/docs/configuration/expressions",{"title":65,"path":66},"PostHTML","/docs/configuration/posthtml",{"title":68,"path":69},"PostCSS","/docs/configuration/postcss",{"name":71,"items":72},"Development",[73,76,79,81,83,86,89,92,95,98,101],{"title":74,"path":75},"Layouts","/docs/layouts",{"title":77,"path":78},"Templates","/docs/templates",{"title":59,"path":80},"/docs/components",{"title":62,"path":82},"/docs/expressions",{"title":84,"path":85},"Tags","/docs/tags",{"title":87,"path":88},"Assets","/docs/assets",{"title":90,"path":91},"Events","/docs/events",{"title":93,"path":94},"Functions","/docs/functions",{"title":96,"path":97},"Markdown","/docs/markdown",{"title":99,"path":100},"Plaintext","/docs/plaintext",{"title":102,"path":103},"API","/docs/api",{"name":105,"items":106},"Transformers",[107,110,113,116,119,122,125,128,131,134,137,140,143,146,149,152],{"title":108,"path":109},"What are Transformers?","/docs/transformers",{"title":111,"path":112},"Filters","/docs/transformers/filters",{"title":114,"path":115},"Inline CSS","/docs/transformers/inline-css",{"title":117,"path":118},"Safe Selectors","/docs/transformers/safe-class-names",{"title":120,"path":121},"CSS Purging","/docs/transformers/purge-css",{"title":123,"path":124},"Shorthand CSS","/docs/transformers/shorthand-css",{"title":126,"path":127},"Attribute To Style","/docs/transformers/attribute-to-style",{"title":129,"path":130},"Remove Attributes","/docs/transformers/remove-attributes",{"title":132,"path":133},"Add Attributes","/docs/transformers/add-attributes",{"title":135,"path":136},"Replace Strings","/docs/transformers/replace-strings",{"title":138,"path":139},"Widow Words","/docs/transformers/widows",{"title":141,"path":142},"URL Parameters","/docs/transformers/url-parameters",{"title":144,"path":145},"Base URL","/docs/transformers/base-url",{"title":147,"path":148},"Six HEX","/docs/transformers/six-hex",{"title":150,"path":151},"Prettify","/docs/transformers/prettify",{"title":153,"path":154},"Minify","/docs/transformers/minify",{"name":156,"items":157},"Starter Components",[158,161,164,167],{"title":159,"path":160},"Spacer","/docs/components/spacer",{"title":162,"path":163},"Divider","/docs/components/divider",{"title":165,"path":166},"Button","/docs/components/button",{"title":168,"path":169},"VML","/docs/components/vml",{"name":171,"items":172},"Examples",[173,176,179,182,185,188,191],{"title":174,"path":175},"Spacers","/docs/examples/spacers",{"title":177,"path":178},"Dividers","/docs/examples/dividers",{"title":180,"path":181},"Buttons","/docs/examples/buttons",{"title":183,"path":184},"Cards","/docs/examples/cards",{"title":186,"path":187},"Grids","/docs/examples/grids",{"title":189,"path":190},"Google Fonts","/docs/examples/google-fonts",{"title":192,"path":193},"Reverse Stack","/docs/examples/reverse-stack",{},"data/navigation","lXnN10nQFMOp0U7LPKSlEiRFYPoRC0dC5rgvZn8-pes",{"id":4,"extension":5,"items":198,"meta":269,"stem":195,"__hash__":196},[199,209,214,223,236,254,260],{"name":8,"items":200},[201,202,203,204,205,206,207,208],{"title":11,"path":12},{"title":14,"path":15},{"title":17,"path":18},{"title":20,"path":21},{"title":23,"path":24},{"title":26,"path":27},{"title":29,"path":30},{"title":32,"path":33},{"name":35,"items":210},[211,212,213],{"title":38,"path":39},{"title":41,"path":42},{"title":44,"path":45},{"name":47,"items":215},[216,217,218,219,220,221,222],{"title":50,"path":51},{"title":53,"path":54},{"title":56,"path":57},{"title":59,"path":60},{"title":62,"path":63},{"title":65,"path":66},{"title":68,"path":69},{"name":71,"items":224},[225,226,227,228,229,230,231,232,233,234,235],{"title":74,"path":75},{"title":77,"path":78},{"title":59,"path":80},{"title":62,"path":82},{"title":84,"path":85},{"title":87,"path":88},{"title":90,"path":91},{"title":93,"path":94},{"title":96,"path":97},{"title":99,"path":100},{"title":102,"path":103},{"name":105,"items":237},[238,239,240,241,242,243,244,245,246,247,248,249,250,251,252,253],{"title":108,"path":109},{"title":111,"path":112},{"title":114,"path":115},{"title":117,"path":118},{"title":120,"path":121},{"title":123,"path":124},{"title":126,"path":127},{"title":129,"path":130},{"title":132,"path":133},{"title":135,"path":136},{"title":138,"path":139},{"title":141,"path":142},{"title":144,"path":145},{"title":147,"path":148},{"title":150,"path":151},{"title":153,"path":154},{"name":156,"items":255},[256,257,258,259],{"title":159,"path":160},{"title":162,"path":163},{"title":165,"path":166},{"title":168,"path":169},{"name":171,"items":261},[262,263,264,265,266,267,268],{"title":174,"path":175},{"title":177,"path":178},{"title":180,"path":181},{"title":183,"path":184},{"title":186,"path":187},{"title":189,"path":190},{"title":192,"path":193},{},{"id":271,"title":272,"body":273,"description":605,"extension":606,"meta":607,"navigation":608,"path":12,"seo":609,"sitemap":610,"stem":611,"__hash__":612},"docs/docs/introduction.md","Introduction",{"type":274,"value":275,"toc":598},"minimark",[276,280,284,294,307,310,314,317,320,323,342,345,349,355,358,365,378,382,396,399,402,405,415,419,428,445,452,461,559,563,566,577,583,594],[277,278,11],"h1",{"id":279},"what-is-maizzle",[281,282,283],"p",{},"Maizzle is a framework for HTML email development.",[281,285,286,287,293],{},"It's powered by ",[288,289,41],"a",{"href":290,"rel":291},"https://tailwindcss.com/",[292],"nofollow"," and comes with features such as components, expressions, and various automations that make coding HTML emails easier.",[281,295,296,297,301,302,306],{},"Maizzle doesn't rely on custom tags that expand into predefined, ",[298,299,300],"code",{},"\u003Ctable>","-based HTML markup. We do provide some abstractions for things like components or templating tags, but you don't ",[303,304,305],"em",{},"have"," to use them if you don't want to.",[281,308,309],{},"This means that you're in complete control over your email code: no need to worry about things like component markup being locked into the framework core or not having full control over styling or accessibility.",[311,312,41],"h2",{"id":313},"tailwind-css",[281,315,316],{},"Maizzle uses the Tailwind CSS framework, enabling you to quickly style HTML emails.",[281,318,319],{},"Using utility classes to style emails makes you more productive by eliminating the tiring context switching that is common in a traditional email coding approach, where you keep moving back and forward between your responsive CSS and your HTML markup.",[281,321,322],{},"And since you no longer need to come up with names for your CSS classes, you can focus on coding your emails at warp speed.",[281,324,325,326,333,334,337,338,341],{},"We use ",[288,327,330],{"href":328,"rel":329},"https://github.com/maizzle/tailwindcss-preset-email",[292],[298,331,332],{},"tailwindcss-preset-email",", a custom preset that configures Tailwind CSS for better email client support: ",[298,335,336],{},"rem"," values are replaced with ",[298,339,340],{},"px",", HEX values are preferred over CSS vars, there are custom screens and an extended spacing scale etc.",[281,343,344],{},"When you build the production-ready emails, Maizzle can automatically take care of CSS inlining, as well as many other HTML and CSS optimizations.",[311,346,348],{"id":347},"build-system","Build System",[281,350,351,352,354],{},"The build system in Maizzle is based on what we call ",[288,353,38],{"href":39},".",[281,356,357],{},"These allow you to define distinct build scenarios for your email workflow.",[281,359,360,361,364],{},"Each environment is customized through a JavaScript config file, so you can even ",[298,362,363],{},"import()"," packages or programmatically set options.",[281,366,367,371,372,377],{},[288,368,65],{"href":369,"rel":370},"https://posthtml.org/",[292]," plugins are used for the templating logic, and you can use components, loops, if statements - even fetch remote content. Markdown with ",[373,374,376],"abbr",{"title":375},"GitHub Flavored Markdown","GFM"," is supported, too.",[311,379,381],{"id":380},"byohtml","BYOHTML",[281,383,384,385,387,388,391,392,395],{},"Maizzle doesn't include markup abstractions that expand to ",[298,386,300],{},"-based structures, such as ",[298,389,390],{},"\u003Crow>"," or ",[298,393,394],{},"\u003Ccolumn>"," seen in other frameworks – you code your emails the way you want to, with HTML you already know.",[281,397,398],{},"Knowing that some email clients still require the use of tables in order to ensure proper layout rendering, this might sound terrifying to some.",[281,400,401],{},"However, through progressive enhancement, you can actually use modern HTML and CSS in many email clients while providing a fallback for the more archaic ones.",[281,403,404],{},"You're free to code your emails however you like 💪",[281,406,407,410,411],{},[303,408,409],{},"Bring Your Own HTML"," ",[412,413,414],"sup",{},"™",[311,416,418],{"id":417},"responsive","Responsive",[281,420,421,422,427],{},"Because of the lack of standards and the wildly varying ",[288,423,426],{"href":424,"rel":425},"https://www.caniemail.com/",[292],"CSS support in email clients",", there are many techniques that email developers use to code responsive emails.",[281,429,430,431,434,435,438,439,434,441,444],{},"Maizzle doesn't have an opinion on how you should code your emails: from ",[303,432,433],{},"spongy"," to ",[303,436,437],{},"fluid"," and ",[303,440,417],{},[303,442,443],{},"hybrid",", everything is supported, so you're free to use whatever technique you like (or need).",[281,446,447,448,451],{},"Tailwind CSS screens in Maizzle are configured for a ",[303,449,450],{},"desktop-first responsive"," approach by default, which is the opposite of what you might be used to in web development. We currently do this because of Outlook/Office 365 on Windows and a few other email clients that don't support media queries.",[281,453,454,455,460],{},"Utility classes will target desktop viewports by default, and the ",[288,456,459],{"href":457,"rel":458},"https://tailwindcss.com/docs/responsive-design",[292],"responsive variants"," will override them for small screen sizes:",[462,463,470],"pre",{"className":464,"code":465,"filename":466,"language":467,"meta":468,"style":469},"language-js shiki shiki-themes tailwind-css tailwind-css","module.exports = {\n  screens: {\n    sm: {max: '600px'},\n    xs: {max: '425px'},\n  },\n}\n","tailwind.config.js","js","no-copy","",[298,471,472,494,506,528,547,553],{"__ignoreMap":469},[473,474,477,481,484,487,491],"span",{"class":475,"line":476},"line",1,[473,478,480],{"class":479},"sizJ4","module",[473,482,354],{"class":483},"sprQ5",[473,485,486],{"class":479},"exports",[473,488,490],{"class":489},"sVevU"," =",[473,492,493],{"class":483}," {\n",[473,495,497,501,504],{"class":475,"line":496},2,[473,498,500],{"class":499},"sfCc6","  screens",[473,502,503],{"class":483},":",[473,505,493],{"class":483},[473,507,509,512,514,517,520,522,525],{"class":475,"line":508},3,[473,510,511],{"class":499},"    sm",[473,513,503],{"class":483},[473,515,516],{"class":483}," {",[473,518,519],{"class":499},"max",[473,521,503],{"class":483},[473,523,524],{"class":499}," '600px'",[473,526,527],{"class":483},"},\n",[473,529,531,534,536,538,540,542,545],{"class":475,"line":530},4,[473,532,533],{"class":499},"    xs",[473,535,503],{"class":483},[473,537,516],{"class":483},[473,539,519],{"class":499},[473,541,503],{"class":483},[473,543,544],{"class":499}," '425px'",[473,546,527],{"class":483},[473,548,550],{"class":475,"line":549},5,[473,551,552],{"class":483},"  },\n",[473,554,556],{"class":475,"line":555},6,[473,557,558],{"class":483},"}\n",[311,560,562],{"id":561},"configure-it-out","Configure It Out!",[281,564,565],{},"Maizzle is configured in JavaScript.",[281,567,568,569,572,573,576],{},"Besides things like \"",[303,570,571],{},"should inlining be enabled?","\" or \"",[303,574,575],{},"do we need to minify the HTML?","\", you can even pass options to the Markdown renderer or choose where on your machine the compiled HTML file should be saved.",[281,578,579,580,582],{},"You can do even more advanced things, like pulling data from an API to use in a template, or ",[298,581,363],{}," some NPM package to further transform your emails.",[281,584,585,586,589,590,593],{},"Each config file represents a distinct ",[288,587,588],{"href":39},"build Environment"," that can be triggered with its own ",[298,591,592],{},"maizzle build [environment]"," command, so you can create as many build scenarios as you need, each with their own settings!",[595,596,597],"style",{},"html pre.shiki code .sizJ4, html code.shiki .sizJ4{--shiki-light:#EC4899;--shiki-dark:#EC4899}html pre.shiki code .sprQ5, html code.shiki .sprQ5{--shiki-light:#44403C;--shiki-dark:#44403C}html pre.shiki code .sVevU, html code.shiki .sVevU{--shiki-light:#35393E;--shiki-dark:#35393E}html pre.shiki code .sfCc6, html code.shiki .sfCc6{--shiki-light:#1D4ED8;--shiki-dark:#1D4ED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":469,"searchDepth":496,"depth":496,"links":599},[600,601,602,603,604],{"id":313,"depth":496,"text":41},{"id":347,"depth":496,"text":348},{"id":380,"depth":496,"text":381},{"id":417,"depth":496,"text":418},{"id":561,"depth":496,"text":562},"Getting started with the Maizzle Email Framework.","md",{},true,{"title":272,"description":605},{"loc":12},"docs/introduction","usZ2pCBMvSS2kRV42oHO07LF-DEic8AVU94NzTdZbWo",{"id":4,"extension":5,"items":614,"meta":685,"stem":195,"__hash__":196},[615,625,630,639,652,670,676],{"name":8,"items":616},[617,618,619,620,621,622,623,624],{"title":11,"path":12},{"title":14,"path":15},{"title":17,"path":18},{"title":20,"path":21},{"title":23,"path":24},{"title":26,"path":27},{"title":29,"path":30},{"title":32,"path":33},{"name":35,"items":626},[627,628,629],{"title":38,"path":39},{"title":41,"path":42},{"title":44,"path":45},{"name":47,"items":631},[632,633,634,635,636,637,638],{"title":50,"path":51},{"title":53,"path":54},{"title":56,"path":57},{"title":59,"path":60},{"title":62,"path":63},{"title":65,"path":66},{"title":68,"path":69},{"name":71,"items":640},[641,642,643,644,645,646,647,648,649,650,651],{"title":74,"path":75},{"title":77,"path":78},{"title":59,"path":80},{"title":62,"path":82},{"title":84,"path":85},{"title":87,"path":88},{"title":90,"path":91},{"title":93,"path":94},{"title":96,"path":97},{"title":99,"path":100},{"title":102,"path":103},{"name":105,"items":653},[654,655,656,657,658,659,660,661,662,663,664,665,666,667,668,669],{"title":108,"path":109},{"title":111,"path":112},{"title":114,"path":115},{"title":117,"path":118},{"title":120,"path":121},{"title":123,"path":124},{"title":126,"path":127},{"title":129,"path":130},{"title":132,"path":133},{"title":135,"path":136},{"title":138,"path":139},{"title":141,"path":142},{"title":144,"path":145},{"title":147,"path":148},{"title":150,"path":151},{"title":153,"path":154},{"name":156,"items":671},[672,673,674,675],{"title":159,"path":160},{"title":162,"path":163},{"title":165,"path":166},{"title":168,"path":169},{"name":171,"items":677},[678,679,680,681,682,683,684],{"title":174,"path":175},{"title":177,"path":178},{"title":180,"path":181},{"title":183,"path":184},{"title":186,"path":187},{"title":189,"path":190},{"title":192,"path":193},{},1780318594488]