Я профессиональный веб-разработчик уже 12 лет, и с первых дней меня не покидает ощущение что в веб-разработке что-то не так. Вёрстка - в ней слишком много рутины.
Помню время когда-то верстали на чистом HTML - атрибутами. Представьте, для того чтобы сделать кнопку нужна была таблица 3х3, где в центре текст с атрибутом bgcolor, а вокруг 8 блоков с картинками)
Для этого надо было нарезать дизайн на кусочки, и это всё вечно расползалось на разных браузерах и разрешениях. После такого приход CSS с div'ами был счастьем, слава backgroung-image!
И в то же самое время, когда в вебе вёрстка была сущим адом, на десктопе, в Delphi интерфейсы строились Drug&Drop'ом! Естественно, когда пришёл в веб - хотелось того же, но визуальные редакторы HTML того времени создавали ужасный код который человеку поддерживать невозможно, и всё это дело регулярно расползалось и выглядело по разному в разных браузерах. Так что мысль о том что визуальная вёрстка это плохо надолго засела в головах, пришлось верстать руками постоянно ловя себя на мысли что делаешь бессмысленную работу...
Годы шли и появился Bootstrap, вместе с набором компонентов фреймворк принёс свод правил, так что теперь алгоритм вёрстки хорошо формализирован, а это значит можно переложить вёрстку на редактор кода без потери качества! Этим и занимается Pinegrow, позволяя мне заняться творчеством.
Чем хорош Pinegrow
В отличие от визуальных редакторов прошлого Pinegrow генерирует чистый код, который легко редактировать вручную, причём делать это можно в самом Pinegrow и даже удобней чем в обычных html-редакторах, т.к. тут есть дерево DOM-элементов, и можно сфокусироваться на там, что редактируешь, а не листать километры кода в поисках закрывающего div'a. Кроме того Pinegrow поддерживает Emmet (ZenCoding) - метод скоростного набора html. Есть и валидация HTML.
При этом Вы сразу видите результат своей работы даже если блоки модифицируются через JavaScript. Кстати о нём, Pinegrow умеет создавать красивые анимации и делает это как видео-редакторы.
Также есть поддержка предпроцессоров SASS и LESS и основных CSS-фреймворков: Bootstrap, Foundation, Materialize, 960 Grid System
Есть возможность создавать темы под WordPress и поддержка JS фреймворка AngularJS. Другие JS-фреймворки, к сожалению пока не поддерживаются. Лично мне бы хотелось поддержку VUE.js. Ещё есть интеграция с бесплатным фотостоком Unsplash и Google Fonts - таким образом можно прямо из программы находить нужные картинки и шрифты. Также есть широкие возможности для адаптивной вёрстки и кросплатформенность.
В общем Pinegrow - полноценная экосистема для прототипирования, проектирования интерфейсов и вёрстки, но всё вышеперечисленное есть и в других html-редакторах. В Pinegrow же уникален сам рабочий процесс.
Как Pinegrow ускоряет вёрстку
При помощи интерфейса в Pinegrow можно добавлять классы Bootstrap и других CSS-фреймворков и любые CSS правила. Отсюда и интерфейс космолёта с миллионом параметров, но если разобраться всё довольно удобно.
Вкладка калссы содержит все атрибуты и классы выбранного объекта. Ниже идут все классы Bootstrap сгрупированные по типам. Если в целом понимать как устроена вёрстка - всё понятно. Но даже не пытайтесь использовать Pinegrow если не умеете верстать вручную, потому-что просто запутаетесь в сотнях атрибутах.
Pinegrow не принимает решения сам, поэтому например нельзя увеличить размеры блока просто потянув за границу: что при этом должно произойти?! Измениться атриубут height, padding или margin?! Это нужно указать самостоятельно в свойствах объекта.
Вкладка стиль (CSS) отображает все применённые к выбранному объекту стили, при этом добавляя новые стили можно выбрать как конкретно обратиться к объекту: по классу, по id, или может по набору правил?!
В том числе есть всё необходимое для модной сейчас Flex вёрстки.
Ещё одним ускорителем явлется библиотека готовых компонентов. Там есть все стандартные компоненты Bootstrap или того CSS-фреймворка, который используете. Просто перетяните их Drug&Drop'ом в нужно место! Причём перетаскивать можно как визуально, так и в дерево элементов, тем самым соблюдая нужный порядок и вложенность.
Все компоненты Bootstrap'а могут изменяться до неузнаваемости за счёт тем, таким образом разделяя процесс проектирования и визуального дизайна интерфейса (UX\UI). Это не только ускоряет разработку, но и позволяет в дальнейшем малой кровью менять дизайн! И эта мощнейшая фишка Bootstrap'a реализована в Pinegrow! Чтобы подключить или создать тему зайдите в раздел:
Page => Customize & Update Bootstrap Theme.
Одна только эта фишка для меня стоит того чтобы выбрать Bootstrap из всех CSS-фреймворков!
А так-же в сети есть готовые библиотеки блоков для Pinegrow, из которых, например, можно за несколько минут собрать лендинг.
И конечно-же можно создавать свои библиотеки компонентов - один раз сделать и использовать во всём проекте. Этот функционал находится во вкладке Actions, раздел Components.
И последней kill-фичей на сегодня будет Master page - это базовый шаблон, который используется на нескольких страницах. Больше никаких Copy/Past'ов на 20 страниц, например, если вам надо поменять меню, всё меняется в общем базовом шаблоне, а Pinegrow сам позаботится о том, чтобы изменения появились на всех страницах, которые его используют. Тем самым мы соблюдаем принцип DRY - не дублируем код.
Опыт использования
Социальную сеть MyTeamCode я полностью проектировал и верстал на Pinegrow. На данный момент готово MVP состоящее из девяти шаблонов. На разработку каждого шаблона уходил в средней один день, при этом большую часть времени я занимался продумыванием пользовательского взаимодействия, вёрстка заняла минимум времени и по ощущениям прошла незаметно. Визуальным дизайном я не занимался, просто купил готовый UI-kit. Подробнее про разработку MyTeamCode рассказываю в своём курсе:
https://myteamcode.ru/courses/id4/
Там есть бесплатное видео по работе с Pinegrow.
Благодарю, что дочитали статью, надеюсь понравилось) Ставьте лайк, задавайте вопросы в комментариях. Много ценного я размещаю в группе ВК:
и на YouTube:
https://www.youtube.com/c/ZapiskiStartapera