![]() To see this in action, let's look at an example in which we have one paragraph that is show on desktop and, a completely different paragraph that is shown on mobile: And, dynamically shows and hides the wrapper elements based on media queries and max-width calculations. ![]() Under the hood, this is driven by the theme.width property exposed by the base tag. ![]() - shows child content on mobile devices only.- shows child content on desktop devices only.To do this, I've created two new ColdFusion custom tags in my project: ![]() What this means is that instead of trying to use the same content for both desktop and mobile devices, I'm going to start by allowing duplicated content to be rendered, with one copy per device. As such, I have to go about this dynamic rendering a bit more brute-force, at least for now. Meaning, my caveman brain doesn't model responsive layouts very well. Only, I'm not quite smart enough to know how to use it. The MJML framework has built-in support for completely responsive content using "ghost tables". Today's post only seeks to codify that approach in a set of ColdFusion custom tags. We actually already saw this functionality in my first post in which I dynamically changed the layout of an image-grid such that it was a 2-by-2 grid on desktop devices and then "magically reformatted" a vertical strip on mobile devices. View this code in my ColdFusion Custom Tag Emails project on GitHub. Today, as a quick follow-up, I wanted to add some dynamic rendering in which content can be targeted for Desktop devices vs. Over the last few weeks, I've been exploring the use of ColdFusion custom tags as a DSL for HTML emails, first laying the foundation of the concept, then adding themeing of HTML entities, and most recently, improving the performance by removing implicit variable access.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |