xmoonlight

Закажите на фрилансе натянуть Вашу вёрстку на OpenCart.
www.javascript-coder.com/javascript-form/javascrip...

Близко, но не рандомно...

Картинку переводим в кривые и вуаля: SVG тут будет куда лучше, чем лестницы пикселей.

Юзаю www.getmdl.io потому, что поддерживается гуглом. Впечатления - достаточно удобно, если разобраться, но слишком "сырой": еще не все продумано и проработано... Пока слежу за развитием и постепенно изучаю...
Вот мой текущий шедевр

Посчитайте КПД от решения этой задачи с использованием Radio и БЕЗ...
ПАРАДОКС!

https://github.com/diy/jquery-emojiarea

По библиотеке или фреймворку:
1. Схема архитектуры и её понимание,
2. hello world (код) и разбор ("наложение") кода на архитектурную схему.
3. Понимание базового архитектурного "скелетона" приложения.
4. Беглый взгляд по функциям OOB (out-of-box/"из-коробки")
5. Просмотр возможности подключения плагинов и беглый взгляд по текущему списку и реализуемых ими функций.
------------
Постановка себе задачи и начало реализации на изучаемом инструменте.

В предоставленном сайте 16x4=64 фото упакованы в SWF (Adobe Flash-приложение)
Флэш поддерживается не везде.
Проще делать одним из этих способов.

3к - красная цена таким макетам, включая адаптивную.

max-width: 180px;

теперь клиент просит

просите еще денег и напишите сами

плагины модальных окон на чистом javascript без использования jQuery

Пардон! Плагины к ЧЕМУ?!

Я храню классы объектов в отдельных именованных по назначению (имя класса) файлах и подключаю их в разные проекты в зависимости от задачи.

CSS:

float:left;
display:inline-block;

Профилирование JS

CMS - не предназначена для выдерживания нагрузок!
Архитектура и технологии - предназначены.
Single HTML5 Application + AJAX (REST-JSON) = Ваш выбор!

тут (чистый CSS)

готовый шаблон
По ссылке (в теле документа) подправьте стиль:

html, body { margin: 0; padding: 0; width: 100%; height: 100%;}

Уберите, что нужно и тогда будет похоже.

Идеальное решение