Чеклист розробника

Чеклист розробника

Перевір кожен пункт перед публікацією шаблону до Community Library.

Структура файлів

• ☐ meta.json (корінь) + landing.json + img/ + templates/
• ☐ Кожна секція має: meta.json + template.html + style.css
• ☐ script.js додано тільки для секцій з реальною інтерактивністю

meta.json секції

• ☐ Файл існує для КОЖНОЇ секції (без нього панель "Кольори та розміри" порожня)
• ☐ vars[] містить всі {{VAR_NAME}} з template.html
• ☐ vars[] містить кольорові CSS custom properties (тип color)
• ☐ vars[] НЕ містить image CSS vars з url() — PRODUCT_BG, SALE_BADGE_IMG
• ☐ Поле name у кожному var збігається з ключем у data.vars та {{VAR}} в шаблоні

template.html

• ☐ Кореневий елемент: <div class="{original-class} {template-id}"> (НЕ <section>)
• ☐ Немає inline <style> тегів
• ☐ Немає inline <script> тегів
• ☐ Немає <script src="https://..."> (зовнішні CDN)
• ☐ Всі змінні: {{VAR_NAME}} ВЕЛИКИМИ ЛІТЕРАМИ з підкресленням
• ☐ Для raw HTML — використано префікс HTML_: {{HTML_EXTRA_FIELDS}}
• ☐ Секції order-form мають {{HTML_EXTRA_FIELDS}} між полями і submit кнопкою

style.css

• ☐ Всі правила скоуповані під .cms-section-{type}
• ☐ @keyframes мають унікальний префікс template-id (не просто "pulse", а "sy2-hero-pulse")
• ☐ Кольори використовують var(--VAR_NAME, fallback)
• ☐ CSS image vars через var(--PRODUCT_BG) — значення "url(...)" задається в data.vars
• ☐ Немає padding на .cms-section-{type} — тільки margin на внутрішніх елементах
• ☐ Немає зовнішніх @import url(https://...)

script.js

• ☐ IIFE обгортка (function(){ ... })()
• ☐ Guard: if (el.dataset.init) return; el.dataset.init = '1';
• ☐ Відносна навігація: el.querySelector(), не document.getElementById()
• ☐ Без jQuery, Swiper, будь-яких зовнішніх бібліотек

landing.json

• ☐ html/css/js = "" у кожній секції (reference mode)
• ☐ Всі image paths: img/filename.jpg (НЕ абсолютні URL)
• ☐ CSS image vars: "PRODUCT_BG": "url(img/product.jpg)"
• ☐ Всі UUID секцій унікальні
• ☐ data.vars містить ВСІ змінні з template.html та CSS custom properties

img/

• ☐ Всі зображення що використовуються — присутні в папці
• ☐ Стиснені до розумного розміру (< 300KB кожне)
• ☐ Формати: .jpg, .png, .webp