Use with any modeling IA: VUE, Liquid, Static (Webflow, Unity), CDN using Netlify/Git automation.
Retina Progressive Images can also be exported to Static CDN repositories, that can be named and customized for Globalization Versioned, and Scheduled publishing plans.
Set up Styled Schema with custom attributes. Use Mustache to call looping section, block, metafield, into tagged and styled UI/UX.
UI CSS patterns have been normalized across omni browsers. Testing and Responsiveness is greatly simplified.
BEM naming convention avoids conflict with legacy (Bootstrap 3/4) collisions. uk-grid and uk-flex, uk-ratio, can be nested in as is Vanilla CSS generated by Webflow Globals.
<div class="uk-height-medium uk-flex uk-flex-center uk-flex-middle uk-background-cover uk-light"
data-src="{{ section.settings.image_url }}?fit=crop&w=650&h=433&q=80"
data-srcset="{{ section.settings.image_url }}?fit=crop&w=650&h=433&q=80 650w,
{{ section.settings.image_url }}?fit=crop&w=1300&h=866&q=80 1300w"
data-sizes="(min-width: 650px) 650px, 100vw" alt="{{ section.settings.alt_text }}" uk-img>
<h1>Background Image</h1>
</div>
{% schema %}
{
"type": "text",
"id": "alt_text",
"label": "Alt Text",
"default": "French Translation"
},
{
"type": "url",
"id": "image_url",
"label": "Image URL"
},
{% endschema %}