The Next Generation of Parcel Components
Today, we are releasing our next iteration of Parcel Components. With this release we are bringing a lot more power to what you can do, and making it dead simple to get started.
As well as being able to build your own custom components, Mark Robbins has been hard at work creating a range of flexible standard components that anyone can use! They are built-in to every single workspace and can be leveraged by those on a Pro or Business plan.
These components are built using modern email coding techniques, following the Email Markup Consortium compliant standards. This means they are built with accessibility in mind, they are also very lightweight and will generate much less code than most other frameworks or building tools you may have used. Each component comes with a wide range of styling options but if that’s not enough, each one also has a style and class property so advanced users can add their own additional styles on top of what have provided.
These components will be maintained and updated regularly to ensure they are compatible with the latest email client quirks and bugs. Those updates will be applied automatically, so all you need to do is export the updated email.
Check out how we at Parcel leaned on standard components to build our newest email template.
Dynamic MSO comments - you can set the HTML inside of MSO comments completely dynamically making components a lot more flexible
Minimal edits - we make the smallest possible edits to your HTML when we build the components. We respect your quotes, spacing, comments, and “broken” tags
Conflicting syntax - sometimes there is no possible way to know that what you wrote is actually ESP syntax and not part of the component. So you can simply use the #is:raw directive.
Values in CSS - use your properties to create CSS classes Meta tags - add links to easily import remote css easier to set dynamic classes and styles - conditional classes are as simple as true and false
- No more complex objects mixed inside your markup
- Full conditionals, Variables, Loops, and more!
For example, you could create a function to convert px values into em values, like in the example below.
const styleObject = {
'font-size': pxToEm(props['font-size'], 16),
};
function pxToEm(pxValue, baseFontSize){
const emValue = pxValue / baseFontSize;
return emValue.toFixed(2) + 'em';
}We compiled all the components built in Parcel today - 99% worked right out of the box with this next generation. If you have any trouble let us know and we will help you upgrade!