Using The Inspector vs custom Class

What are your thoughts about using The Inspector vs custom Classes?

I’m assuming a custom class has priority over Inspector settings?

With a single class applied I get the feeling that changing a setting in the Inspector is carried over into the class applied too. But what about when multiple classes are applied?

If no class is applied, where to Inspector settings land?

What are some good strategies for when to apply what?

I think it depends on the sidebar (assume that’s what you’re talking about) options you use. For example the spacing options apply bootstrap classes to the element, the bloc padding uses bloc classes.

To avoid confusion I use classes as much as possible, it also makes adjusting common design elements easier and quicker.

I will use blocs padding often and the spacing tools. I use to add those classes prior to that feature anyway.

Multiple classes the standard CSS rules apply, cascading and specificity rule the day.

If uncertain, use the browser inspector and see what’s going on.

Thanks. Yes, the right panel… I think the documentation refers to it as the Inspector.

So if I understand you correctly some changes go into pre-included underlying classes from Bootstrap and Blocs?

I haven’t really opened an empty project to see how everything is held together, but I of course know that Blocs is built on Bootstrap. It’s been a point of uncertainty how much of Bootstrap is ‘active’ in Blocs though. And what—if any—the Blocs overrides are.

I tend to just use “right panel” because it’s descriptive for most users. But yes you could be right.

The full Bootstrap is under the hood. But the markup of the HTML is Blocs. Eg bloc sections which has bloc specific classes. We can add tags now, but we can’t nest those tags inside a bloc for example. I hope in the future we can convert any div into a tag.

The built in brics often have blocs specific structures. Like the accordion, which is not a standard BS markup from memory.

The subclasses in the CSS manager for example show how other structures are blocs specific.

Spaces for example and now themes is how we are seeing more direct bootstrap things introduced. Which for someone like me is great.

Blocs uses certain names for attributes, which if you want to use the same will cause conflict with the blocs JavaScript. I found that one out the hard way :joy:. So namespace if you go that direction.

All this has continuously developed through 5 major versions and several major versions of bootstrap. So yeah, inspecting is your best bet and becoming familiar with the structure and the way it works.

Of course this all depends on how far you want to go :joy:

1 Like

Thanks for the summary—great!

I have no issues with code at all, or going under the hood. I’m doing a project this fall and will spend more time with Blocs, so I might as well dig in and try to learn as much as possible.

1 Like

I’ve used blocs for small single page projects to larger more complex ones with custom features and hundreds of lines of extra JavaScript and CSS etc. Built many custom solutions for Blocs users, from landing heroes to education sector multi-step ordering forms. So Blocs is rather flexible in that regard.

Like any software you learn the quirks and best built techniques for what you want to achieve as you go. Features like url paths which we finally got go a long way in helping that.

Previously what led me to Blocs was being able to create themes for OctoberCMS really fast. A feature that’s since been removed :sob:

Blocs has a lot of good use cases. It’s using the right tool for the job though right.