I got asked in my Facebook group about whether the lack of classes in GenerateBlocks is something that’s a missing link for me as compared to a tool like Bricks or Oxygen. The short answer to your question is no, I don’t miss having a class first builder.
In this video, I’ll explain why that is and give you practical examples of ways that my workflow has changed and gotten even faster than when I was using classes across my site.
Get my Generate course: https://jonathanjernigan.com/generate-made-easy/
Full Video Transcript:
The Foundation
Like everything in the world of Blocks, efficiency and simplicity is the name of the game. The whole approach with a block package like GenerateBlocks is that it’s extremely powerful without overwhelming you with options and features.
Combine that with GeneratePress as your theme for typography styles and colors and before you’ve even begun, the foundation is already set for lightning fast builds.
I don’t need to waste any time remembering class names or worrying about what custom class I need to make to give something a specific variable, for instance.
You’re now screaming at your monitor saying: But you lose global control without classes!
Not quite, and let me show you why that is.
Headings
Inside GenerateBlocks global styles, I can create as many global styles as I want and apply them to headings, containers, grids, buttons, etc.
In this case, I’m creating a few heading styles. I don’t need to worry about the standard h1-h6 sizes and settings because those have already been handled by GeneratePress for me.
So, what I’ll do is create as many heading styles as I need, give them a unique name, and style them in exactly the way I want.
Grids
Then, I’ll move to a grid.
Layouts like 3 wide cards are quite easy to achieve in general, but in my Oxygen days I found myself severely over complicating this sort of thing with classes.
I’d create a div, set a class, add 3 divs, create a class, set its width, add another class for my card styles, add another class for my grid gaps, etc etc. It took so many steps and so many classes.
Now, I can create as many grid and container global styles as I want and apply them anywhere I want. I can create different kinds of card styles or different kinds of grid gaps. I can change how the behavior of the container functions on mobile all at a global level.
Again, this is being handled with classes under the hood as well! It’s basically just a visual interface for class management.
Buttons
The exact same approach for buttons applies as well. I can create buttons that look like buttons, or I can create buttons that look and behave more like links.
Change colors, hover effects, and any other style you want and it’s all global for you.
Using the Global Styles
Now let’s use these styles. I’ll move over to a page or post anywhere across my site and I simply select the element I want a Global Style on, I toggle on the “Use Global Style” option, and there’s all of my styles.
Let’s say I have this style applied in dozens or hundreds of places across my site and I want to make a change – no problem at all. I simply return to the global styles section, make my adjustments, and it’s applied across my entire site.
What’s happening under the hood is exactly what classes do. In fact, it literally is applying a class with the styles I’ve chosen to a ll the elements I applied it to.
This is just simply a different take on classes.
Go Custom
And I still can add custom classes if I want. I can simply scroll to the advanced tab of any element and add a custom class.
Then I style it in WPCodeBox with the auto-refresh changes option enabled to make it nice and easy.
This is more than enough for me to cover the random bits and bobs you just need some CSS to tackle. I still had to toss in custom CSS quite often in Oxygen sites, too.
In real GB sites, I rarely ever need to add my own custom classes, but you absolutely have the power to do so.
Difference in Objective
For me, classes were always a bit of a headache. I adopted some class frameworks like OxyNinja and gave Automatic a fair few spins, but I felt like I was spending more time trying to study the cheatsheet and remember what classes to use than if I just slapped on some of my own classes.
That’s where it comes back to the efficiency comment for me. Most of the sites I build do not require an intense level of customization. They’re relatively normal sites with a variety of templates you’d come to expect such as blog, team, portfolio, etc.
Sometimes they have 50+ pages and even then I don’t fear some massive global change because it won’t be hard to overcome, even without classes.
There’s a workflow change in this approach, sure. But when I get a lead for a client site, it needs to tick quite a few boxes. If it doesn’t meet all of those, I pass and move on. The tools don’t dictate what types of projects I’m taking on.
The bigger picture for me is not so much the presence of or lack of classes, it’s more so that I’m moving my agency work in a very intentional direction.
This direction is 100% focused on speed, efficiency, and accessibility, both front end and back. Sites need to load lightning fast front and back and projects need to be super efficient and not drag on for months.
And the site needs to be accessible to clients in the backend and accessible on the front-end to those who need that.
So for me, do I miss having a class focused builder? Not at all.
Have I lost capability or efficiency without a class focused builder? Again, not at all.
I’ve said it before – not every tool is right for every person and that’s ok. I love my current workflow. It’s fast, easy, and efficient. That’s all I’m after and I imagine the same is true for you as well.
Closing
With all of this in mind, how reliant are you on classes? Do you feel like Global Styles bridge the gap for you? Let me know in the video comments.
If you have specific questions, be sure to let me know as well.