My quick experiences with Pinegrow PRO

Pinegrow PRO
1

Hello,

I started using Pinegrow PRO(Windows 10.1 and Windows 7) only a few days ago, here is my quick opinions/tipps - it might also be useful to others and devs.

Things what I dislike - or missed

  • javascript editing - the manual suggesting use an external editor, but isn’t necessary. If you open a project, you can edit javascript files too, just select file and edit in code editor. (I prefer editing style like the collected css files in code editor. )
  • php editing is a joke, you can edit html in php files, that’s it and nothing else
  • UI is a mess - Section titles and elements same backgrounds, I really hate how sections allways opened by default (I suggest the right mouse click toggle event wich open/close all sections in crsa panels.) Another thing what I don’t like, how the property tab is a tabbed panel, I suggest will be a floating window option.
  • css panel have limited options, plus sections isn’t collapsible
  • full screen option - multiple monitor support - is missed
  • little expensive - compared others(like bootstrapstudio). But the fact is how the subsciption option maybe better and cheaper for some people.

Things what I like

  • Multiple library(Bootstrap, Foundation etc…)
  • Pinegrow/Atom integration - it could be better, but usefull
  • Blocks
  • Projects
  • Creating Components - little complicated, but is a nice thing
  • you can running javascript files while edit pages
  • Page can display multiple window with different sizes
  • Developer Tools - for customize Pinegrow :slight_smile:
  • desktop software
  • the extra 15% discount :slight_smile:

My tips

  • for full screen option - I use this autohotkey script (just install autotkey, download the script, run), and F12 toggle the borderless, full screen(work with code editor too).
  • you can change Pinegrow apperance easily! Just create a ccs file eg. myeditor.css, then add this stylesheet in these html files in Pinegrow root directory: edit.html, empy.html. Use Development tools to inspect an element in application, create rules, and save. Here is a before/after example:
    pinegrow.png1920×2160 2.71 MB

Do you want a simple light UI? (4 lines in a custom css)
Look at this

Stay tooned, more tips is coming soon

1 Like
2

You can change/customize Pinegrow UI functions too.

( Warning isn’t too proper method but working, like changing apperance with a custom css file. :slight_smile: )

In example, just create a .js file - like myscript.js - then add to edit.html as last line:

<script src="lib/myscript.js"></script>

(The path will be relative to edit.html.)

Now, just copy this in the javascript file:

$.event.special.rightclick = {
    bindType: "contextmenu",
    delegateType: "contextmenu"
};    

$(document).on("rightclick", "li.section", function() {
    $('div.tab-pane.active li.section > div').not('li.section-closed > div').trigger('click');
    return true;
});

Save, restart Pinegrow and tadaam if you made a right click on any section header you can close all with a single a click!

pinegrow_light_ui.png.jpg1920×1080 188 KB

1 Like
3

Creating Components - little complicated

I agree, I posted about it in the following link (with no response), with the simple ideal of using recursion by Pinegrow to be able to determine the needed resources when a component is defined. Seems doable.

Components / Blocks – Component Library Resources – Automation

light UI

That looks nice, different styles should be offered as default in app, like in most modern editors.

4

Nice idea! BTW currently creating a component with the ui, is more complicated as wrote from scratch.

Thanks, but is nothing more just play with webkit inverse fliter:

If anyone interested my extend ui, here is a pastebin link.
( If you prefer the dark style just delete the last rule definitions.)

5

@BATLABOR thanks for your detailed feedback and UI tweaks.

I agree with your list of shortcomings and addressing those is the focus of PG 3.0 release.

We’ll soon share more about what’s coming in PG 3.0.

1 Like
6

Will version 3.0 result in easier creation of smart components?

I currently use bootstrap studio to create smart components and basically once I have created the component using html/css/js, I simply have to right click the container, “add to library” and select the html/css/js files and my smart component is saved.

Is it possible for PInegrow to be as user friendly? as I’m considering purchasing the pro licence and I prefer working within Pinegrow.