Pinegrow is clearly a professional design environment with a very powerful UI. I do appreciate the utility of the package and (after a lot of experimentation) I like using it. But it has an exceptionally high learning curve. Some specific issues I had were:
- It is difficult to understand which of the multiple UI views (Properties, Visual Editor, and Code Editor) contains the controls that you need. Tutorials sometimes seem to dip straight into the use of a control without always making it clear which view they are in - I spent a lot of time trying to work this out. Tutorials also use PUG which is incomprehensible to a newbie. At least, give us a link to a PUG syntax explanation on the tutorial page!
- Pinegrow seems to make the process of inserting an image into a webpage unnecessarily complicated. Coming from Wordpress design, I was used to having a media library popup where I could add and/or select from images. The current Pinegrow approach of presenting only images in the template library then editing the image link to reflect your own image source location seems tortuous and really anti-intuitive. Is there a way of editing the template library settings to configure a media library? My searches revealed that this was a common problem that irritated the heck out of new users. I suggest that you have a “How-to …” page or WIKI that covers common issues like this one, for new users. The user community could add hints and tips, as they solve problems of their own!
- The text overlay on image technique in the Summer Nights CSS Grid Tutorial seems to stop working after a few changes to the grid (again, I found a LOT of user confusion about why). The only solution I found was to start over with a new template. Then I found a way of setting text and image overlap precedence using the z-index parameter. This is worth knowing about as text (and image) overlaps seem to disappear frequently when using Pinegrow!
The main issue that I had was not understanding the core web design frameworks well enough to understand the UI controls (which was why I wanted to use a WYSIWYG editor like Pinegrow). My last meaningful web design experience (prior to using Wordpress for a few years) was Dreamweaver. I knew CSS, but had little understanding of CSS Grid, Flexbox, or Bootstrap – all of which seemed intuitively useful after using Wordpress Gutenberg. Following a lot of trial and error, I realized that I needed to work through some explanations of concept before I could understand the different Pinegrow controls (for example, layout property controls vs. Flexbox controls).
Here are some great resources and explanations that I found, that may help other newbies:
- A Complete Guide to Flexbox by Chris Coyler - a graphical guide that provided a rapid intro.;
- The Material Design for Bootstrap explanations of Bootstrap Layout;
- An explanation of the difference between Bootstrap .container and .container-fluid classes;
- Examples of Horizontal Alignment and (Vertical) Alignment using Flexbox helped clear up some confusion between the different categories of alignment used in the Pinegrow interface;
- Grid By Example provides a great resource to explain CSS Grid layout examples and nuances – this is a site that I dipped in and out of, to provide a deeper understanding as I worked through the other pages here;
- The need for Breakpoints and their importance to responsive design;
- The Pinegrow tutorial on Customizing Bootstrap 5 themes – I was terminally confused about how to set sitewide colors and fonts until I found this explanation.
OK - I don’t want to sound too negative as I really appreciate the power of Pinegrow as a design environment, and I really do like the package. But it is not designed for those who are not up to date on current design frameworks. I hope the resources I posted might help other newbies who are struggling with what the controls do!