My experience in pinegrow coming from webflow

Hi, I’m coming from webflow looking for a similar but offline program …

I wanted to share my experience (and maybe twist for some improvements) … maybe I have some item that exists but I can not figure out how, soo, let me now :wink:

(sorry

Things I really missed (a lot missing):

1.1 - Renaming classes
in webflow when a class is renamed it applies to all html and css, being very easy to rename something. So far I have used the sublime text to do this.

1.2 - Automatic Responsive
In webflow when you select a screen size, any changes you make will automatically add the @media needed to the code, it’s super simple and practical, 1 click for all changes in the chosen size. The same happens with hover, active, etc … you select the button state and already can edit the style it creates :hover sutomatic… In pinegrow it’s like creating a brand new class every time …

Things I missed but that’s okay:

2.1 - Viewing Class Style Not Highlighted
in webflow it shows (in another color) the style that is being affected but of a class that you are not selecting. For example: if I have a class with margin: 10px and I create one on top, the webflow shows me that it has margin being affected, in pinegrow I have to search what atribute is causing my button to be more to the side …

2.2 - Shift and Alt for Margin and Padding
In weblfow, holding Shift you change all the margins, and Alt changes the parallel margins, super practical …

2.3 - Color palette
I felt the lack of being able to save a color to use later in another place… I know it is possible to use Sass, but a panel helps to visualize all of them …

2.4 - Doom collected and expanded
In webflow has a button that collapse and expands the doom, it makes it much easier to make things clearer … I only found the shortcut ctrl + alt + click, but it only closes all items of the same level and not the sub -itens.

2.5 - Edit components
in webflow I can edit a component on any page.

Generally speaking I fell the webflow UI more compact, there is a lot more screen for the website design itself. The doom is also another thing that made me confused, a little crowded, it’s not very clear when a div starts and ends

We are animated to use pinegrow because it has many other advantages over webflow (it works locally, I can edit direct programmer code, all the possibilities that a css can offer, adding puglin, etc.)

But what I realize is that the webflow worked very well for the user who does not want to see the code, I can create a website without looking at 1 line of code. The pinegrow seems to me that it was not that way, it is good to be able to edit in the code, but there are many facilities in webflow because it tries to simulate everything you would do in the code. I know a lot of these things are subjective and personal, but I wanted to share…

I noticed that in the last years pinegrow has changed a lot, I hope it keeps improving … :smiley:

if I could put more images … (beginner user) :frowning:

5 Likes

I too have the same feeling about your point 1.2. about media queries and about having to create manually pseudo classes. We have buttons for the states but they only work after you have manually created the new pseudo class…feels weird to me. Would be nice to just select the element then press the state button and style. Pg should then create the new class. Same for @media.

2.3 - Color palette. Yes, we should totally have a “favourites” in the color palette.
2.4 - Agree.

About the code…Most of people using PG want to see and feel they control the code. I like it this way too otherwise would have go with another visual builder out there.

Any way, a few months back, PG author, talked about creating another “version” of PG, a sort of 100% visual builder no code app that will coexist with this current PG.
PG is a great software and it’s making huge steps forward… I have been playing with it for about 6 months now. Maybe developers some times leaves behind simple but important things…and yes… the interface could be more bold and compact… not smaller.
Hoping these things will come…
cheers!

It’s been almost a year of use now …

But so far it has not been possible for my company to migrate to pinegrow once and for all, sorry, but webflow is much faster to create websites, to create classes, subclasses, responsive (some of the reasons I explained above).

For some projects we are using pinegrow and for the other webflow. Pinegrow wins in terms of possibilities since you can edit the code directly, webflow wins in UI and UX, much easier and faster.

The launch of interactions will help our love for pinegrow…

Just resuming the subject and giving more feedback :wink:

2 Likes

agree with this list of suggested improvements, esp about the inefficient use of screen real estate and toggle options.

i hope that in the last 9mo your team was able to discover how in the visual editor you can use the up/dn arrow keys to change margins one increment at a time, or use the mouse to click and drag for large changes.

because PG will also automatically re-write the CSS to use the short hand notation when it can, you can also click in the CSS editor (put the cursor on the numbers) and use the up/dn arrows to change top&bottom or right&left values at the same time.

@droidgoo
We are always looking for improvements that make life easier for our users, and so, I’m curious here. Have you taken a look at the CSS code formatting settings since Pinegrow 5.8?

Regarding the screen estate, because of the floating panels since Pinegrow 5.1 so you can use 1, 2, 3 or more screens to display the UI panels, I guess that we offer a pretty (and unique so far) good way to maximize what’s on screen :slight_smile:

1 Like

hey, thanks for taking the time to reply (this is the best part of PG :wink:

i did look at the blurb in the release notes and this feature didn’t seem to be something i would need, so i left it on the default.

the CSS formatting tweek i would like to see is to keep grid area definitions aligned so they can serve as a visual map of the grid in your CSS (ascii art). Or at least fence off that bit CSS code from the auto format function, so i can arrange it myself and keep it that way.

i did buy a 2nd monitor just because of PG’s support for it, it’s quite handy to have the tree on a tall monitor next to everything else. I can also put up the code in VSC next to it and flip between html and css

But i still find myself manually collapsing things in the style tab to make room for the visual editor since they both occupy the same tab and there doesn’t seem to be a way to separate them. Having a “collapse all” toggle would be good.

my .00002 cents.

1 Like

Ha interesting. These are all things I’ve suggested to the team. Does anyone know if they’re being worked on?

we got more controls to collapse/expand the DOM tree, but CSS is still manual