Webflow / Udesly
Prototype with Dynamic API Modeling
Prototype using API friendly Responsive tools. Vanilla CSS/JS exports can be folded into any component based Atomic Design strategy/system.
Webflow and API let’s you Prototype, and generate Atomic Design Patterns that can be used with anywhere.
Easy to use CLEAN JS/CSS can be base 64 into Enterprise managed secure head configuration.
Tools like Udesly can 1 click convert code to WordPress, Shopify, 11ty, Ghost/Ruby, Native Shopify Liquid/Spree – Ruby IA. Continuous integration tools (Netlify/AWS Lamdas) can auto update code from a centralized secure repository that is client managed CDN. Static Webflow export can compile to Ruby workflow: Liquid/Jekyll. Snippets/Blocks in React infrastructure of WordPress and Shopify can be built into the core themes for both.
This CDN is not vulnerable to Cloudflare / Shopify / Salesforce fees or system outages. It can be globally distributed and monitored, real time.
Shopify Theme Helpers
//SLIDE WITH DYNAMIC BACKGROUND IMAGE / ALT TAG
<div class="container-list">
<div class="div-block-179">
{% for image in product.images %}
<img src="{{ image.src | product_img_url: 'large' }}"
alt="{{ product.title }}" class="image-38"
data-product-image-id="{{ forloop.index }}"
>
{% endfor %}
</div>
</div>
//sale button
<div class="single-product-info">
{% if product.compare_at_price > product.price %}
<div class="on-sale-badge">
<div class="on-sale-label">
{{ 'product.DIV_9' | t }}
</div>
</div>
{% endif %}
</div>
//Product Title
<h1 class="wrapper--text__title">{{ product.title }}</h1>
//Price
<div class="link__text-2 blog">
{% if product.price_varies %}
{{ product.price_min | money }} - {{ product.price_max | money }}
{% else %}
{{ product.price | money }}{% endif %}
</div>
//Description
<p class="_00product">{{ product.description }}</p>
Slide Show
Dynamic slide show
Use slider/slide show components to load dynamic / tagged images.
Statically load, or Fetch from Dynamic/GraphQL API/image management.
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider>
<ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m">
//Use static components or dynamic load from API/PIM
<li>
<img src="https://www.yslbeta.com/article/wp-content/uploads/2020/09/Free-People-Well-Traveled-241906ce.jpeg" alt="This is your searchable tag">
<div class="uk-position-center uk-panel"><h1>1</h1></div>
</li>
<li>
<img src="https://www.yslbeta.com/article/wp-content/uploads/2020/09/tshirt.jpg" alt="Searchable Tag 2">
<div class="uk-position-center uk-panel"><h1>2</h1></div>
</li>
<li>
<img src="https://www.yslbeta.com/article/wp-content/uploads/2020/09/cropjeanshorts.jpg" alt="Searchable Tag 3">
<div class="uk-position-center uk-panel"><h1>3</h1></div>
</li>
<li>
<img src="https://www.yslbeta.com/article/wp-content/uploads/2020/09/lonestarjacket.jpg" alt="Searchable Tag 4">
<div class="uk-position-center uk-panel"><h1>4</h1></div>
</li>
<li>
<img src="https://www.yslbeta.com/article/wp-content/uploads/2020/09/Free-People-Well-Traveled-241906ce.jpeg" alt="Searchable Tag 5">
<div class="uk-position-center uk-panel"><h1>5</h1></div>
</li>
<li>
<img src="https://www.yslbeta.com/article/wp-content/uploads/2020/09/cropjeanshorts.jpg" alt="Searchable Tag 6">
<div class="uk-position-center uk-panel"><h1>6</h1></div>
</li>
<li>
<img src="https://www.yslbeta.com/article/wp-content/uploads/2020/09/lonestarjacket.jpg" alt="Searchable Tag 7">
<div class="uk-position-center uk-panel"><h1>7</h1></div>
</li>
<li>
<img src="https://www.yslbeta.com/article/wp-content/uploads/2020/09/Free-People-Well-Traveled-241906ce.jpeg" alt="Searchable Tag 8">
<div class="uk-position-center uk-panel"><h1>8</h1></div>
</li>
<li>
<img src="https://www.yslbeta.com/article/wp-content/uploads/2020/09/cropjeanshorts.jpg" alt="Searchable Tag 9">
<div class="uk-position-center uk-panel"><h1>9</h1></div>
</li>
<li>
<img src="https://www.yslbeta.com/article/wp-content/uploads/2020/09/tshirt.jpg" alt="Searchable Tag 10">
<div class="uk-position-center uk-panel"><h1>10</h1></div>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>
WITH PARRALLAX
<div class="uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-4@l uk-text-center" uk-grid="parallax: 150">
<div>
<div class="uk-card uk-card-default uk-card-body">Item</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">Item</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">Item</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">Item</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">Item</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">Item</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">Item</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">Item</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">Item</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">Item</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">Item</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">Item</div>
</div>
</div>
Modules &
Components
Drag and Drop Components to prototype “wireframe” live Dynamic Data.
Components and Modules can be duplicated in Native Vue/Nuxt/API Collections IA.
This tool can be accessed by non technical designer, marketing team.
Images
SOURCE SET
Source Set Image directive, resizes frame and crop of image, to adjust for media break of browser or device. Themeing can be made dynamic, with 3 size dynamic image loading. Desktop, Tablet, Mobile optimization can also dynamically upload position / cropping restrictions.
<img data-src="https://www.yslbeta.com/article/wp-content/uploads/2020/09/Free-People-Well-Traveled-241906ce.jpeg?fit=crop&w=650&h=433&q=80"
data-srcset="https://www.yslbeta.com/article/wp-content/uploads/2020/09/Free-People-Well-Traveled-241906ce.jpeg?fit=crop&w=650&h=433&q=80 650w,
https://www.yslbeta.com/article/wp-content/uploads/2020/09/Free-People-Well-Traveled-241906ce.jpeg?fit=crop&w=1300&h=866&q=80 1300w"
sizes="(min-width: 650px) 650px, 100vw" width="650" height="433" alt="" uk-img>
DYNAMIC BACKGROUND IMAGE WITH ACCESSIBILITY
<div>
<div class="uk-height-viewport uk-flex uk-flex-center uk-flex-middle uk-background-cover uk-light"
data-src="https://www.yslbeta.com/article/wp-content/uploads/2020/09/Free-People-Well-Traveled-241906ce.jpeg?fit=crop&w=650&h=650&q=80"
data-srcset="https://www.yslbeta.com/article/wp-content/uploads/2020/09/Free-People-Well-Traveled-241906ce.jpeg?fit=crop&w=650&h=650&q=80 650w,
https://www.yslbeta.com/article/wp-content/uploads/2020/09/Free-People-Well-Traveled-241906ce.jpeg?fit=crop&w=1300&h=866&q=80 1300w"
data-sizes="(min-width: 650px) 650px, 100vw" uk-img alt="This is your 140 char search" >
<h1>Background Image</h1>
</div>
</div>
Shopify Liquid
Use UI Kit in Standard Shopify Slate Theme.
Use UI Kit Background Image with dynamic Shopify Liquid Tags.
UI Kit and VUE can be used in and out of Slate Based Theme and plugin system.
<div>
<div class="uk-height-viewport uk-flex uk-flex-center uk-flex-middle uk-background-cover uk-light"
data-src="{{ image.src | product_img_url: 'large' }}?fit=crop&w=650&h=650&q=80"
data-srcset="{{ image.src | product_img_url: 'large' }}?fit=crop&w=650&h=650&q=80 650w,
{{ image.src | product_img_url: 'large' }}?fit=crop&w=1300&h=866&q=80 1300w"
data-sizes="(min-width: 650px) 650px, 100vw" uk-img alt="{{ product.title }}" >
<h1>{{ product.title }}</h1>
</div>
</div>
Schema
Customer Editable Fields
Shopify
Shopify
Client editable regions
Shopify has a schema markup that let’s the client update images, tags, text in styled template setup.
Client Stakeholder does not need to know how to edit Slate Code or inject any custom JS, to update publish.
<img src="{{ section.settings.top_hero | img_url: '2500x800' }}" width="2500" height="800" alt="{{ section.settings.top_hero.alt }}" class="image-43">
<div class="uk-grid">
<div class="uk-container">
<div>
<div>
<h1 class="uk-heading-small">{{ section.settings.heading_text }}</h1>
</div>
</div>
</div>
</div>
{% schema %}
{
"name": "Maintop",
"class": "maintop",
"tag": "div",
"settings": [
{
"type": "text",
"id": "heading_text",
"label": "Heading Text",
"default": "Heading"
},
{
"type": "image_picker",
"id": "top_hero",
"label": "Top Hero"
}
]
}
{% endschema %}