Forum Academy Marketplace Showcase Pricing Features

🔥 Classify: A tiny plugin that brings CSS power to Bubble

icon

This is a very simple plugin that allows the attribution of custom CSS classes to elements in the editor. Despite Bubble’s good built-in design options, about 75% of what CSS can do isn’t accessible. Classify brings back the full power of CSS for those who need more flexibility. :tada: :confetti_ball: :tada:

With classes you can have complete control on the appearance of your app (text, shapes, animations, responsive design, inputs…). This plugin doesn’t add elements or workflow actions. Just install and its ready to use! Classes are attributed through the “ID Attribute” in the element editor (see pictures below).

With great power comes great responsibilities; you can easily break your app with CSS rules that interfere with the ones from Bubble. Test your app before going live!

This plugin is freely distributed, but comes with no warranty. I have tested it the best I can and seems to work perfectly :sparkles:.


USAGE

Enable ID input first

First thing after installing the plugin, you need to enable the option "Expose the option to add an ID attribute to HTML elements" in under the General tab in the settings. This will allow you to add a custom ID to any element in the property editor:

Enable%20ID

The basics: { … }

Natively, Bubble’s engine takes the whole content of the ID input and sets it as the id of the element in the HTML page. Classify comes after; it searches for any elements which id contains an opening and closing curly bracket { } and extract the text between them. So everything within the brackets is removed from the id attribute to be treated as data for classify and content that is outside them remains as the id.

Normal ID attribution without invoking Classify:

basics%200

These examples all have the same effect; set ID "myElementID" + send commands to Classify

basics%201

basics%202

basics%203

Send commands to Classify without setting an ID:

basics%204

As you can see above, the syntax is very simple, but needs to be respected. It’s good to know that invalid commands will NOT crash your site; Classify’s code simply skips commands it can’t understand. In consequence, desired classes won’t be added/removed and the id will remain untouched.

Adding and removing classes

Classify has 2 commands: addClass and removeClass. A space-separated list of classes between double quotes follow the command. A colon “:” character must separate the command and the list. If you add and remove classes at the same time, a comma is needed to split the two sets (command + list).

Some examples:

ar%201

ar%202

ar%203

ar%204

The ability to add and remove classes comes very handy with Bubble’s option to dynamically change the ID attributes upon custom conditions.

It’s worth noting that classes aren’t added twice; so if a condition tries to add a class that already exists, it will be skipped The same principle applies when trying to remove a class that doesn’t exist: it won’t throw an error or crash anything.

Deprecated command "class"

Prior to version 2.0 (and thus, the support for “addClass” and “removeClass”) the only command recognized by Classify was “class”. While it is still 100% functional, I recommend to not use it since the 2 new commands are much more reliable, easier to to read and it won’t be updated. It remains only to maintain compatibility with apps that already rely on it.

As you can see on the following screenshots, the syntax is different and a bit more complex than the above commands. And the key character here is the underscore ( _ ). When the “class” command is called, Classify begins by removing every classes that begin with an underscore. Than it adds every classes from it’s list. So if the element has the class “_hey” and it needs to remain, the list should contain “_hey”. Classify will remove it and add it back (so quick you can’t notice). If you simply want to remove classes without adding any, you can pass an empty list.

Also, you can use this older command along the 2 new in the same ID input.

Some examples:

old%201

old%202

old%203

old%204

28 Likes

Will try to post examples in the neat future…

2 Likes

Just released a cool update!

Until now, classes could only be added to an element; not removed. Now, every class that begins with an underscore ( _myClass) can be removed. So you could have CSS properties applied to an element, say, only when hovered.

For example, let say you have a button to which you want to add a permanent class and a class only when hovered:
-In the ID field of the element you would write: {class ["myPermanentClass"]}
-In the condition tab you’d add a condition “When this Element is hovered”
-The property to change would be the ID Attribute and the value would be
{class: ["_myHoverClass"]}

Since _myHoverClass is underscored and written only under the condition, it would be removed as soon as the element wouldn’t be hovered. If the class was not underscored, it would still be added on hover, but never removed…

Enjoy :wink:

6 Likes

Just released a minor update (1.1.1) that fix a bug where Classify was not working with group focus content.

(@Taiheta)

1 Like

:fire::fire: I’m super happy to introduce version 2.0 of Classify! :fire::fire:

While using the plugin for an app I’ve been building since the summer, I realized that it is very handy to be able to apply classes conditionally and not only when elements are loaded.

In consequence, this version introduces two new commands to add and remove classes easily and clearly. They do a better job than the previous solution. Don’t worry for backward compatibility, you can update the plugin without the fear of breaking what you just build!

I invite you to have a look to the first post of this topic as I have reworked completely the instructions. They are more clear and complete now.

Happy Bubbling! :partying_face: :smile:

8 Likes

Hello @julienallard1

Thank you for such a great idea. I always comeback to this plugin now. May i make a request please. Can we have syntax to target parent, grandparent and great grandparent with classes?

Hi @julienallard1,

Thank you for the plugin! I know that this is not related to what the plugin does, but could you please tell where the actual CSS classes need to be declared?

While there are a few places where you can write your classes, on my project I like to put them in an HTML element between <style>...</style> tags. I set the size to 1px by 1px and the position to (x=0, y=-1), (x=0, y=-2)…
Depending on the size of your project, you may end up with lots of classes; putting them all in the same HTML element then becomes hard to maintain and edit. So I create multiple elements and give them names that describe the purpose of the CSS rules (“CSS Custom Dropdown”, “CSS Round Button”, “CSS General”, and so on).

3 Likes

Glad you like it. I also keep using it all the time :yum:
Your request makes very much sense since CSS does not have a parent selector. While it would be possible to achieve, it would be a challenge. The way the page is rendered is more complex than how the element tree looks in the editor:

  • Every Bubble element is rendered inside a container parent
  • All these container parent are grouped into another parent according to their vertical position (Y) on the page. So pages are made of “lines” of elements
  • If you use repeating groups, then there are some additional parents (cells)
  • Some elements have a dynamic structure according to the option you choose in the editor (text elements for example)

We must also think about the syntax in the ID field (which is small). For example, how should we write a rule to:

  • add 2 classes to actual element
  • remove 1 class from actual element
  • add 1 class to parent
  • add 2 classes to grandparent

I’m open to suggestions, but as I see it, it would look like:
myElementID{addClass: "cls1 cls2", removeClass: "cls3", parent(addClass: "cls1"), grandparent(addClass: "cls1 cls3")}
I could make sense out of this in javascript, but it’s a long statement, thus maybe hard to edit/maintain.


I’ve been thinking, what if instead of implementing new functions like these I could implement a new command to run a javascript function?? Something like:
myElementID{addClass: "cls1", run: "myFunction(this)}"
That would be crazy powerful

  1. Much more complex code could be written in Bubble HTML elements. The keyword “this” in the example would passed to “myFunction” as a parameter representing the Bubble element. This means it could be use with jQuery. jQuery unlocks limitless possibilities of transformation on the page elements. jQuery also have very well implemented ways to refer to parents, grandparents and up. You can also refer to siblings and children.

  2. If you could call javascript functions, you could run “Javascript to Bubble” elements from the plugin Toolbox. Since these elements can trigger workflows, that means that we could trigger workflows directly from the condition tab!!
    Like: When this button is hovered, change ID attribute with: myElementID{run: "bubble_fn_myFunction()"}.

A lot to think about… :sweat_smile:

4 Likes

Hey Julien!

I am trying to add css to an element and have installed your plugin!

However, I am having trouble following this thread and its instructions…

  1. Do we just simply write {exampleClass} in an element’s ID attribute to assign that ID?

  2. Do we define what the class is in the page HTML header?

  3. What is the format for defining a style for a class? Example:

exampleClass{
box-shadow: 12px 12px 12px #000000;
}

ps. it won’t let me write < style >, just in case I do open and close with it.
pps. I am trying to add two box-shadows to a group, if that helps

Cheers!!

  1. Everything you write outside the curly braces ("{ }") will be set as the ID. What’s inside is for adding or removing classes. So if you want your group to have the id “myGroup” and add the class “exampleClass” you’d write: myGroup{addClass: "exampleClass"} in the ID Attribute field.

  2. Yes you can define classes in the page header. You can also draw an HTML element on you page and write the classes in it. In both case, since classes are CSS and you’re writing them in an HTML space, they need to be in <style> tags:

<style>
.exampleClass {
box-shadow: 12px 12px 12px #000000;
}
</style>

  1. See above example. Don’t forget the dot before your class name otherwise your browser will think “exampleClass” is a tag name instead of a class name.

:call_me_hand:

4 Likes

Hey Julien!

I seem to the only one who can’t crack this haha!

Do you have any pages available for us to have a look at?
Just so we have a template to go from to use your plugin!

Cheers

1 Like

Hey @josh15, I currently don’t have a demo page…

Can you share (here or in private message) a link to your app editor and provide me some explanations on what you’re trying to achieve? Perhaps I could take a look and see if I can point out the problem?

Seems like the css solution for my major problem: If I have a horizontal menu which has less menu items in logged in modus for example, can I css the menu items to move to the left? So when a menu item is hidden, it will make room for all items on the right? Is this duable with your plugin and the right css?

Would be great!

CSS definitely have solutions to explore. If nothing suits your needs, then using Javascript (and jQuery) you could for sure achieve the desired goal. Classify allows the attribution of classes, thus, opening doors for custom styling.

That being said, elements you place on your page are managed by Bubble’s responsive engine which uses absolute positioning (CSS: position:absolute;). So you’ll need to somewhat override this positioning method to implement something dynamic (Flexbox perhaps?).

I had started to build a plugin to do just that, but time lacked and it was a bit more complicated then I first thought. But it’s definitely possible.

A more “Bubble/non-coding” solution, but in my opinion less elegant, would be to use a repeating group with one row and multiple columns. Each cell is a space for a menu option. You could create an option set that list all possible options for you menu and use it as your data source for the repeating group.
You could then rely on the :filtered feature to make options appearing dynamically.

Interesting approach with the RG and option set. I will try that since I have no time at the moment to sort the css out. Thanks!

Hi @julienallard1 Apologies, perhaps my question is stupid, but how do I append the class to the page? I want to use Classify to control overflow of the page (to create my own popups), but when I append the class to the page , it is actually appended to the first div and not the body itself. And by the way, it seems like it doesn’t work on that div either :frowning:

Hey @ryparken, the page in Bubble editor is not actually the body on the rendered page. As you can see in your screenshot, the div to which you’re trying to apply the class to has class “main-page”. This div is the root for all the elements you add (except for popups, focus groups and reusable elements).
So this “div.main-page” is in some way the body of your page. But if you really want to alter the body, no need to use Classify. Simply write in the HTML header:
<style>
body { background-color: red; }
</style>

And for the class not being applied, I can see in your screenshot that the colon is missing right after addClass. It should read {addClass: "freeze"} .

Thanks @julienallard1 for the helpful and fast response. Indeed, I could see that the div was not the body.

But how do I control it? The point was to use your wonderful plugin to control the style based on conditions.

Ok I understand. Then some javascript would be required if you really need to apply rules to the body. Other wise I’d recommend using the main-page div.