xmoonlight

SPA - includeHTML

Лучше всего - ни в какие.

Какие цели Вы преследуете при попытке получить фидбэк?
1. Контроль и правильность разметки - можно проверить сервисами самому.
2. Сходство макета со свёрстанной страницей - тоже можно отследить.
3. Адаптивность и JS - главное, чтобы правильно работало на разных устройствах.

Если все пункты выполнены - значит сверстали верно.

Визуализацию - можно и нужно сделать на CSS.
Функциональность (изменение счётчика по нажатию на кнопки) - только на JS.

Через ajax заменяете CSS-стиль по событию (например, по событию клика "мыши" на DOM-объекте).
Текущий стиль можно хранить как в куках браузера, так и в LocalStorage.

Советую АККУРАТНО перенести код сетки и стилей с одностраничника БЕЗ привязки к статьям (на месте контента - ставьте СВОИ теги для замены).
Затем - добавите в полученную вёрстку статьи Joomla!-ы через foreach (например, можно заменить части готового кода контента через preg_replace).

Размер основного текста (font-size) ЖЕЛАТЕЛЬНО делать кратным 2-м.
Конечные ("листовые") элементы (тени, окантовка и т.д.) - необходимо делать любыми ЦЕЛОЧИСЛЕННЫМИ (НО не дробными!).
Иначе - будет "лесенка".

SVG

Я долго думал, что как-бы делать правдоподобную анимацию и единственный ответ: использовать webm-ролик с минимальной площадью (только на анимируемую зону), который будет встроен в общую сцену дизайна.
Пример, с того же близарда можно увидеть на их логотипе к игре StarCraft II:

Т.е. предлагаю, заснять реальное пламя свечи с разными потоками воздуха и подменять эти ролики по нужным событиям.

1. www.responsivejqueryslider.com/charmingResponsive.html
2. www.jquerycarouselimagevideo.com/perspectiveType.html
--------
3. www.jquerycarouselimagevideo.com
4. rcsdesign.nl/ease/ease.html + к примеру формы представления (shapes): https://github.com/fredleblanc/roundabout-shapes

CSS производительнее JS.
Это отразится на производительности интерфейса в лучшую сторону.
На поддержке проекта - это никак не отразится.

1. Картинки: phpthumb.sourceforge.net
2. Видео: https://github.com/PHP-FFMpeg/PHP-FFMpeg

логика у Вас там нарушена: Вы пытаетесь переключать, когда нужно генерировать каждый раз новую фигуру и вешать на неё click-обработчик.
1. Сгенерили
2. Повесили обработчик
3. Запустили анимацию
4. GOTO 1
Переделывайте.

Сайты оф. документации и SO.

Хочу научится делать функциональные интернет-магазины.

Научитесь вначале понимать/создавать архитектуру приложения и клиент-серверное взаимодействие.
До магазинов - Вам как до Луны... Рановато ещё...