# My quick experiences with Pinegrow PRO

**URL:** <https://forum.pinegrow.com/t/my-quick-experiences-with-pinegrow-pro/136>\
**Category:** Pinegrow PRO\
**Created:** [August 27, 2016, 3:07pm UTC](https://forum.pinegrow.com/t/my-quick-experiences-with-pinegrow-pro/136 "2016-08-27T15:07:58Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![BATLABOR](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/batlabor/32/64_2.png) [@BATLABOR](https://forum.pinegrow.com/u/BATLABOR)\
**Post date:** [August 27, 2016, 3:07pm UTC](https://forum.pinegrow.com/t/my-quick-experiences-with-pinegrow-pro/136/1 "2016-08-27T15:07:58Z")

</div>

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 🙂
- desktop software
- the extra 15% discount 🙂

## **My tips**

- for full screen option - I use [this autohotkey script](https://autohotkey.com/board/topic/114598-borderless-windowed-mode-forced-fullscreen-script-toggle/) (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:  
 ![](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/238984d7577b84995b5cb7c5ba2db8811fbfb047.png)

Do you want a simple light UI? (4 lines in a custom css)  
[Look at this](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/6fe9c02b308c5b7e20ad562adced24cf832790dc.jpg)

Stay tooned, more tips is coming soon

---

<div class="post-metadata">

**Author:** ![BATLABOR](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/batlabor/32/64_2.png) [@BATLABOR](https://forum.pinegrow.com/u/BATLABOR)\
**Post date:** [August 28, 2016, 11:42am UTC](https://forum.pinegrow.com/t/my-quick-experiences-with-pinegrow-pro/136/2 "2016-08-28T11:42:03Z")

</div>

**You can change/customize Pinegrow UI functions too.**

( _Warning isn’t too proper method but working, like changing apperance with a custom css file._ 🙂 )

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!

 ![](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/6fe9c02b308c5b7e20ad562adced24cf832790dc.jpg)

---

<div class="post-metadata">

**Author:** ![Pinegrow\_User](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/pinegrow_user/32/4919_2.png) [@Pinegrow\_User](https://forum.pinegrow.com/u/Pinegrow_User)\
**Post date:** [August 29, 2016, 3:02pm UTC](https://forum.pinegrow.com/t/my-quick-experiences-with-pinegrow-pro/136/3 "2016-08-29T15:02:08Z")

</div>

> 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](http://forum.pinegrow.com/t/components-blocks-component-library-resources-automation/128)

> light UI

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

---

<div class="post-metadata">

**Author:** ![BATLABOR](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/batlabor/32/64_2.png) [@BATLABOR](https://forum.pinegrow.com/u/BATLABOR)\
**Post date:** [August 29, 2016, 7:23pm UTC](https://forum.pinegrow.com/t/my-quick-experiences-with-pinegrow-pro/136/4 "2016-08-29T19:23:21Z")

</div>

> [@Pinegrow\_User](#):
>
> Components / Blocks – Component Library Resources – Automation

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

> [@Pinegrow\_User](#):
>
> That looks nice, different styles should be offered as default in app

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

If anyone interested my extend ui, here is a [pastebin link.](http://pastebin.com/Qxagh2rv)  
_( If you prefer the dark style just delete the last rule definitions.)_

---

<div class="post-metadata">

**Author:** ![matjaz](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/matjaz/32/5_2.png) [@matjaz](https://forum.pinegrow.com/u/matjaz)\
**Post date:** [August 30, 2016, 7:44am UTC](https://forum.pinegrow.com/t/my-quick-experiences-with-pinegrow-pro/136/5 "2016-08-30T07:44:05Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![Jaffy](https://avatars.discourse-cdn.com/v4/letter/j/96bed5/32.png) [@Jaffy](https://forum.pinegrow.com/u/Jaffy)\
**Post date:** [October 3, 2016, 7:05pm UTC](https://forum.pinegrow.com/t/my-quick-experiences-with-pinegrow-pro/136/6 "2016-10-03T19:05:51Z")

</div>

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.