Pinegrow

О программе

Pinegrow Web Editor – очень стильный и удобный конструктор сайтов для Mac, Windows и Linux, который позволяет быстро создавать адаптивные веб-сайты с помощью многостраничного редактирования в реальном времени, используя стили CSS и SASS, редактор CSS Grid при поддержке Bootstrap, Tailwind CSS, Foundation и WordPress. Есть шаблоны и возможность сверстать plain HTML с нуля. Параллельно можно работать в соседних окнах с чистым кодом и с его визуальным рендером.

Интерфейс

По центру расположена витрина вашего сайт – тот, вид, который будет в браузере, почти точь в точь. Сюда перетаскиваются компоненты с левой панели – это могут быть как стандартные HTML тэги, так и CSS или Javascript компоненты. При выделении компонента на витрине возникает меню для производства каких-то действий с этим компонентом. Также при выделении элемента, на правой панели открываются его свойства.

На левой панели по умолчанию открыта закладка библиотеки, но есть также закладка файлового браузера.

Правая панель многозакладочная. Кнопки перехода с закладки на закладку находятся вверху этой панели. Там есть и свойства CSS, и анимация, и настройки...

Так как витрина позволяет совершать правку компонента прямо на ней, надо как-то разруливать ситуацию с интерактивностью элементов. То есть, если на кнопку повешен переход на следующую страницу, то одиночный клик как в браузере не прокатит, в Pinegrow нужно совершать двойной клин. Первые пять минут это непривычно.

Вверху над витриной находится ряд полезных кнопок. Первая кнопка, которую я освоил, это </> – она открывает окно кода. Что удобно в таком параллельном представлении кода и конечного рендера, так это то, что, во-первых, изменив код я тут же вижу результат рендера, во-вторых, перемещаясь по большому окну и кликнув на какую-то строку я и в витрине перемещаюсь туда же, и наоборот, клик по компоненту на витрине перебрасывает меня в коде на нужное место.

Анимация

Программа поддерживает настройку CSS анимации без знания CSS. Но, конечно, надо знать, какие кнопочки жать, какой селект за что отвечает, и на что влияет то или иное значение селекта. Кому как, а по мне так несколько предпочтительней знать синтаксис CSS.

Можно вызвать таймлайн и создавать анимацию с ее помощью.

См. в конце статьи видеоролик на тему анимирования элемента "аккордеон" с помощью таймлан.

Скачать