О проекте

От автора

Меня зовут Артем Горловецкий (Unbywyd) (opens new window), уже более десяти лет занимаюсь профессиональной веб разработкой с упором на front-end. На протяжении всего времени, для выполнения работ связанных с версткой веб страниц, я использовал различные grunt, gulp, webpack сборки, но время шло, опыт нарабатывался, технологии менялись, появилось определенное видение своей собственной сборки заточенную для подготовки веб шаблонов и она перед вами.

Данная сборка сделана на nodejs (opens new window) и содержит в себе все необходимые npm (opens new window) пакеты.

Основные особенности данной сборки:

• быстрое развертывание настроенной рабочей среды
• наличие всех необходимых инструментов
• встроенный многофункциональный Dart Sass framework

Об Ungic

Ungic - это среда разработки для веб верстальщика, созданная на nodejs в виде npm пакета (opens new window). Использование данной сборки необходимо для того, чтобы

• подготовить структуру будущего проекта,
• предоставить среду разработки и необходимые инструменты веб-верстальщику,
• предоставить локальный сервер с live reload функцией,
• предоставить инструменты для быстрого написания CSS стилей,
• предоставить инструменты для быстрого написания HTML разметки,
• предоставить инструменты для генерации веб иконок любого формата.

Особенности и возможности

Основная особенность данного инструмента заключается в быстром развертывании проекта, что позволяет существенно экономить время и не отвлекаться на подготовку структуры будущего проекта и различных конфигураций сборщиков, плагинов, препроцессоров, постпроцессоров и тд.

Состоит данная сборка из трех связанных между собой плагинов html, scss, icons, что позволяет использовать их как совместно, так и по отдельности.

Особенности и возможности SCSS плагина:

Задача данного плагина обрабатывать встроенный Dart SASS framework, который в свою очередь имеет следующие возможности:

• Базируется на Dart SASS (opens new window)
• Концепция модульности и компонентов
• Темизация
  • темизация проекта и компонентов
  • генерация неограниченного количества тем
  • автоматическая инверсия тем
• RTL поддержка.
• Постобработка (autoprefixer, clean-css и тд).
• Экспорт scss сущностей в JSON формате.
• Интеграция с icons плагином
• Интеграция с html плагином
• Совместимость с посторонними scss фреймворками, например с bootstrap
• Функционал по созданию релиза

Возможности HTML плагина:

• Разделение документа на части с последующим включением
• Возможность включения markdown файлов с автоматической генерацией в html
• Шаблонизация с помощью Handlebars (opens new window) шаблонизатора
  • Включение шаблонов с динамическими данными (JSON, YAML, QueryString, данные из SCSS плагина).
• API для добавления обработчиков для пользовательского типа файла
• Проверка на валидность HTML5 и AMP документов
• Минификация и оптимизация html документов.
• Интеграция с icons плагином
• Интеграция с scss плагином
• Функционал по созданию релиза

Возможности ICONS плагина:

• Оптимизация SVG иконок
• Генерация SVG иконок в web fonts.
• Генерация SVG иконок в svg sprites.
• Генерация спрайтов из набора растровых иконок (изображений).
• Генерация демо страницы со всеми иконками проекта.
• Экспорт / Импорт иконок в JSON формате.
• Интеграция с html плагином
• Интеграция с scss плагином
• Функционал по созданию релиза