Платформа онлайн веб-програмиирования

https://jsfiddle.net

JSFiddle

Подключаемые JavaScript библиотеки, MooTools и JQuery и DoJo.
Отладка под мобильный.

https://draeton.github.io/stitches/

CSS Sprite Generator

Как это работает

1. Собираем требуемые картинки в папку (ну так лично мне удобнее).
2. Жмем на сайте синенький пункт меню CLEAR, чтобы убрать существующие там иконки для примера.
3. Настраиваем:
   • Вы задаете расстояние между картинок, и до края. Они предложили сразу 50, но это много. Ноль не прошел, потом мы выставили 1, что вполне достаточно.
   • Можно задать цвет фона или сделать прозрачным.
   • Имена переменным будут присвоены по именам картинок в архиве. В форме вы можете добавить ко всем именам префикс или суффикс, ну или оставить поле пустым.
   • Можно сделать картинку компактной, вертикальной или горизонтальной.
   • Картинку можно встроить конвертируя в Base64 в CSS файл.
4. Перетаскиваем файлы из нашей папки в это поле.
5. Как только ваши иконки стали четкими, а не бледными и мерцающими, как вначале, спрайт готов.
6. Жмем зеленую кнопку Download, а затем появившиеся зеленые кнопки Spritesheet и Stylesheet.
7. Полученный текст корректируем под наш сайт.

Офлайн

Вывод, станица не требует перезагрузки, значит используется Javascript, то есть обработка процесса происходит в браузере, интернет не требуется. Важно, чтобы была загружена страница.

https://htmltowordpress.io

HTML to WordPress

Как это работает

1. Создаем сайт в HTML (если его еще нет),
2. сжимаем сайт в .ZIP архив,
3. перетаскиваем поле на сайт или загружаем через кнопку,
4. через 15 секунд сайт готов.

http://pivot.mediumra.re/chooser.html

Pivot

https://tilda.cc

Tilda Publishing

https://codepen.io

Codepen

4 окна, редактируем и видим результат в режиме реального времени.

https://getgrav.org

Grav

https://www.toptal.com/developers/css/sprite-generat...

CSS Sprites Generator

https://carrd.co

Carrd

https://cssdeck.com/labs/wall-clock-in-pure-css3...

Wall Clock in Pure CSS3

https://www.webydo.com

Webydo 2.0