This release adds a few more components to make it easier to create HTML emails.
To try it out, create a new Maizzle 6 project:
npx maizzle new
If you already have one set up, simply reinstall your dependencies.
Skeleton components
Added <Html>, <Head>, and <Body>
Layout components
We now have <Container>, <Row>, and <Column> components that you can use to quickly create email layouts without having to worry about markup or Outlook.
Columns are "spongy", they stack automatically when there isn't enough space so they don't look squashed in email clients that don't support media queries, such as when using Gmail to check your IMAP address.
Kudos to MJ Robbins for laying the foundation.
Image component
There's a new <Image> component that supports dark mode image swapping via the <picture> element:
<Image src="..." dark-src="..." />You can even use it to respect the user's prefers-reduced-motion preference:
<Image src="..." reduced-motion-src="..." />Overlap component
We've added an <Overlap> component that makes it easier to overlay an element over another:
<Overlap width="552px" height="160px">
<Image width="552px" src="..." />
<template #overlay>
<div>Overlayed content</div>
</template>
</Overlap>Updated Spacer component
The <Spacer> component can now do horizontal spacing, like between two words:
Hello<Spacer type="horizontal" width="150px" />world!- feat: html skeleton components 7be9336
- feat: layout components 4bdf905
- wip: overlap component 42141ec
- feat: image component 59ad5cc
- refactor: spacer component 5d19a28