Pinegrow Countdown: Day 1 – Pinegrow Plays Nice with Others

A lot of products in the WordPress space have grown in popularity, primarily because of their open and flexible ecosystem that allows 3^rd party developers to create add-ons, extensions, and libraries. Pinegrow also has a great plugin API. But I’m going to show you in this video, that in most cases, you don’t even need it.

If we take a look at the broad categories of tools that exist alongside other WordPress products such as Elementor, Oxygen, and Bricks you’ll see that they generally fall into four broad categories. Libraries, Components, Frameworks, and Functionality.  

And before I go too deep in this video, I want to acknowledge that Pinegrow is not JUST a product for building WordPress websites. Their WordPress plugin, of course, will be, but Pinegrow Desktop is a platform agnostic HTML and CSS editor that can be used for just about any type of web project you can think of. I’m pointing this out because those platform agnostic concepts are what drive a lot of the design and functionality decisions inside Pinegrow, for better or for worse. It’s also the reason why Pinegrow is able to play so nicely with other development tools on the market.

So, let’s jump in and see what a Pinegrow ecosystem can look like.

Design Libraries

Starting with libraries, and here I’m talking about design libraries of reusable sections or page templates, we have lots of options. For starters, there are the built-in libraries that Pinegrow provides when you are using the Bootstrap or Tailwind frameworks. Pinegrow desktop also gives you the ability to create and use your own libraries. And then, there are a ridiculous number of both free and paid design libraries available all over the internet. For Tailwind users, I suggest taking a look at TailwindUI, FlowBite, or TailwindUI Kit. Bootstrap users have library kits like Froala, Frontendor, Ayro UI, and plenty of others. Some of these are free, some are subscription, and some are a mixture of both.

In this example, I’m going to head over to Flowbite and use one of their Call to Action Sections. All I have to do to use this, is pick the section I want to use, copy the code, and use the Insert Code feature in Pinegrow to drop it onto the page. And now that it’s here, I can manipulate it however I want.

Components

Now, let’s take a look at some components. Most of those libraries I mentioned before have both design libraries and component libraries, so instead of going back to that well, I’m going to show you another cool component library called Alpine Components. You might already be familiar with Alpine.js. It’s a very lightweight and easy to use JavaScript Framework with just a handful of attributes, properties, and methods to learn. Or, if you don’t want to mess with any of that, you can just grab some ready-made components since lots of other component packages already use it.

We’ll start by grabbing the code that includes Alpine.js using a script tag, and we’ll drop it onto our page. Now, we’ll head over to the accordion component, grab its code, plop it into the insert code field, and drag it onto our page.

As you can see, those components come over as regular HTML that we can modify and style however we want. If we don’t like the way it behaves, we can just come in and change it through the attribute editor or the code editor.

Frameworks

Okay, so we could go down a days-long rabbit hole of design and component libraries. Instead of doing that, let’s take a look at a framework or two. In fact, we already just did that with Alpine.js when we added the script tag to the page. If we are running Pinegrow Desktop and we wanted to have full control over everything, we could have also used NPM to install it to our project directory.

I’m going to show you how we can quickly get up and running with the OpenProps framework, though. Again, we just grab the script code and drop it onto our page. Now, we are ready to start using the framework’s utilities.

OpenProps is a cool framework that includes a ton of css variables for just about anything you can imagine. To demonstrate, I’ll grab an empty div and drop it onto our page. In our style panel, I’ll give that div a class. I’ll just name him Frank. And we’ll save that class in our style.css file. In the interest of time, I’m not going to go through the visual controls to set all these values. Instead, I’ll click the code icon to open our editor and paste in the CSS properties with our OpenProps variables to give us a nice purple blob.

.frank {

    background: var(--violet-5);

    inline-size: var(--size-10);

    aspect-ratio: var(--ratio-square);

    border-radius: var(--radius-blob-5);

}

Again, this is all just regular HTML, CSS, and JavaScript and none of it requires anything special to run. We can reference these frameworks as external scripts, we can copy the files into our project directories and run them directly, or we can install them using Pinegrow Desktop and NPM.

Functionality

Now lastly, we come to functionality add-ons. And here, is where the opportunities really lie for 3^rd party developers who want to create a Pinegrow-specific add-on. I’ve seen some incredibly talented developers create some remarkable things for other platforms. And while Pinegrow’s interface is fast and flexible, there are infinite ways that it could be extended to fit different use cases and styles of working. Everything in Pinegrow is built on NWJS and they have a documented plugin API, so there shouldn’t be anything holding anyone back from taking this already powerful tool, and making it even more powerful.

Conclusion

You might have noticed in the beginning of this video that I only mentioned Pinegrow Desktop 7 being released tomorrow. It breaks my heart to say it, but we are going to have to wait until December 5^th for the WordPress plugin now. Some last-minute issues were discovered and Pinegrow made the right call to focus on getting the desktop product shipped, then giving the WordPress plugin their full attention. I hate delays as much as anyone, but sometimes the unpopular decision is the right one to make.

For anyone who is concerned about the sale ending before the plugin comes out, don’t worry about it. I’m told that they’ll extend the sale to make sure people have enough time to test the plugin before the sale goes away.

Okay. So that’s another countdown video in the bag. Tomorrow, we get our hands on Pinegrow Desktop 7 and the last video in this series.

I’ll see you then.