Pinegrow Countdown: Day 3 – Frameworks in Pinegrow

Pinegrow has built some fantastic helpers for popular frameworks. In fact, when you start a new project in either Pinegrow Desktop or the Pinegrow WordPress plugin, you’ll be asked which framework you want to choose. If you are already used to using one of the built-in frameworks, the choice will be easy. If not, this little video will hopefully help you understand what the frameworks do and how you should answer those important initial questions.

We’ll start by looking at the WordPress plugin since it has the fewest choices. Once we’ve decided what project type we want, we are asked to choose between Custom CSS, Bootstrap, or Tailwind CSS.  

On My Soap Box

And here is where I hop on my soap box and lecture for a minute. Because, if you jump in and start playing with any of these frameworks without understanding them, you are only setting yourself up for trouble.

I see this way too often, where people try to make up for their lack of CSS skills or knowledge by trying to use a framework. The problem is, unless you understand what the framework is doing, you will have a hard time troubleshooting issues or making your design work in unique ways. 

In the non-WordPress world, where most frameworks are Open Source, we mostly have peer pressure and shiny object syndrome driving us to play with new frameworks. However, a crop of commercial framework products have popped up inside WordPress, and they all seem to be insisting that their product is the one that will let you build scalable, maintainable, or accessible websites. Well, I’m sorry to say that no product that I’m aware of will do any of those things for you. At best, they’ll help support your efforts in those areas. What I can guarantee, though, is that every single framework or tool that you add to your site creates yet another dependency that you’ll need to manage.

I’m saying all of this because, despite what anyone tries to tell you, using a framework is not a necessity. In fact, it probably won’t even speed up your workflow until you are proficient with it. Of course, being proficient with a framework alone will only get you so far without a firm understanding of how the underlying CSS works.

That’s my lecture for today. Now, let’s talk about Bootstrap and Tailwind.

Bootstrap

Both Pinegrow Desktop and the WordPress plugin come with built-in support for the latest version of Bootstrap 5. There is a running joke that all Bootstrap websites look the same, and that’s because Bootstrap comes with so many pre-defined components out of the box. Frankly, these pre-built components are one of the biggest reasons why you might want to use Bootstrap. You add a few classes to elements and let Boostrap do the rest. They even take care of the JavaScript for you!

Because of its huge component library, one of the biggest downsides to bootstrap is bloat. Compared to hand-crafted CSS or Tailwind’s JIT compiler, Bootstrap is pretty heavy. Another downside is that you’ll end up having to either compile the source SASS files or override a lot of default Bootstrap styles if you don’t want your site to look like every other Bootstrap site.

Tailwind

Now let’s talk about Tailwind, which calls itself a utility-first CSS framework. With Tailwind, there is almost a 1-to-1 mapping between their classes and CSS properties. And while it might look like you are just using inline CSS with Tailwind, in reality, you can do so much more than that because of how it handles media queries, pseudo-classes, pseudo-elements, and attribute selectors.

Another great thing about Tailwind is its JIT compiler that watches your code and only compiles in the classes you’ve used. All of this makes both developing with Tailwind and running Tailwind lightning fast.

The downside to Tailwind is its complexity. It takes a long time to learn both the Tailwind classes and how to use them correctly. Then, there is the fact that Tailwind doesn’t have any pre-built components like Bootstrap. And lastly, a common argument against Tailwind is that it makes your HTML hard to read.

One consideration that most people fail to mention is that Tailwind comes with a very hard CSS reset that they call pre-flight. This strips the styling off nearly every component so that you start with a blank slate. That’s fine when you are building a whole site or application with Tailwind, but with a CMS like WordPress, it can cause some issues. There are a few simple ways to work around it, either by disabling pre-flight completely or by using Tailwind’s prose and not-prose classes. I just wanted to point this out to avoid the inevitable frustration of anyone who suddenly sees their site look like an unstyled wall of text.

There is also a very popular article saying that Tailwind is bad for WordPress page builders. I’m not going to go into all the article’s arguments, but I will say that it is a bit misinformed and that the quotes the author included from Tailwind’s developer are taken somewhat out of context. It’s also worth mentioning that the author of this particular article has his own competing commercial framework, so it’s not exactly unbiased. It’s kind of like Pepsi writing a post saying that it’s better than Coke. Besides, Pinegrow isn’t a Page Builder, so you have nothing to worry about anyway!

Pinegrow Desktop

Coming over to Pinegrow desktop, you’ll see that you have a ton more frameworks to choose from. In addition to Bootstrap 5 you get access to versions 3 and 4. You also get to pick between Tailwind 2 or 3. And you have Foundation, AngularJS, or Materialize. With Pinegrow desktop, you can also add your own frameworks or any other 3^rd party framework, such as Open Props. It’s all just HTML, CSS, and JavaScript, so there is almost no limit to what you can do.

You’ll also see a few sections that say something like Bootstrap or Tailwind blocks. These are some pre-built page templates built with those frameworks. A special one to note is the TailwindUI page template. This is just a regular Tailwind page, but it lets you use the TailwindUI component kits directly from within the Pinegrow Library Panel.

Inside the Builder

Now, let’s take a look at what you’ll see once you select a framework and launch Pinegrow. There are three main places where we’ll see framework-specific features; in the Library panel, in the Design Panel, and in the Element properties.

With both Bootstrap and Tailwind, you’ll have access to a library of pre-built blocks from the library panel. These are pretty basic, but they give you a good starting point or a way to quickly throw together a mock-up. If you are using Bootstrap, you also get access to the entire Bootstrap component library that you can drag and drop right onto your page.

Moving on to the design panel, you’ll see that you can change your framework’s base colors, some typography options, and a few other select styles. This won’t give you as much control as modifying the framework’s configuration files directly, but it does take care of the most common use cases.

Then, you have the Properties Panel, which is where you’ll spend most of your time. Here, you can add the common framework-specific classes and edit any of your element’s attributes. Be careful, though, especially when using Tailwind, because the Element properties panel that assigns your Tailwind classes can easily be mistaken for the Style Panel’s Visual CSS property editor. I can’t tell you how many times I went to the wrong one before I built up the right muscle memory.

There is one more thing I want to point out about Tailwind since we are here already, and that’s the Class Styles panel. You see, one of the big complaints about Tailwind is that you end up creating long strings of classes over and over again. Tailwind lets you use a special @apply directive to create template partials for components, but to use them, you need to modify the Tailwind configuration files. Because Pinegrow’s default built-in JIT compiler doesn’t give you direct access to those files, they built this class styles feature that does a similar thing in a visual interface.

Wrap-Up

Before wrapping up this video, I want to circle back to how your framework choice should be influenced by your project type. If you are creating a WordPress block project, then most of the time, you’ll want to use regular HTML and CSS. Trying to shoehorn a framework into a block plugin that lives next to your theme’s styles is just asking for trouble. Sure, it might work, but if something goes wrong, you’ll have a heck of a time troubleshooting it.

If you are creating a WordPress theme, then the options are a little more open, and either Bootstrap or Tailwind should work fine. And, of course, the same is true if you are using Pinegrow Desktop for static HTML sites or other types of projects.

Okay, we are coming down to the wire now, and there are only a few days left before Pinegrow launches its WordPress plugin and Desktop version 7 on December 1^st.

Stay tuned to my channel and Pinegrow’s YouTube channel for more information, and I’ll see you in tomorrow’s video.