THE ISSUE: To be the coolest no-code platform on the block, Bubble had to make it dead simple for non-devs to create web apps. This means that the folks who made Bubble had to cut down on whatâs possible to achieve in web development in favor of a slick and well framed platform for «visual coding». Thanks to them, now my grandmaâs makin more Gs than her doc.
THE KLUDGE: Classify is a plugin that aims to gap that lost potential by easing the use of custom codes within your app (CSS/Javascript/HTML). Although it has more than one trick up its sleeve, its main feature lies in its capability to set CSS classes on elements (in addition to Bubbleâs native ID feature).
But Classifyâs about more than just CSS classes. It also allows you to run arbitrary JS codes in the context of an element. And starting with version 4, ⊠âŠ, you may access your Global Style Variables with your CSS, mess around with HTML attributes (yes that includes style) and more.
Have a look at the docs to know more.
WHEREâS THE DOCS? Glad you asked. For the sake of maintainability and more-enjoyableness, I moved the documentation out to an external website. You now have to put in the effort of an extra click to get to it. But trust me, itâs worth it. Plus, I worked my a*s off to produce it!
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âŠ
Iâm super happy to introduce version 2.0 of Classify!
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.
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?
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).
Glad you like it. I also keep using it all the time
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
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.
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()"}.
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.
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:
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.
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?
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.
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
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"} .
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.
THE ISSUE: To be the coolest no-code platform on the block, Bubble had to make it dead simple for non-devs to create web apps. This means that the folks who made Bubble had to cut down on whatâs possible to achieve in web development in favor of a slick and well framed platform for «visual coding». Thanks to them, now my grandmaâs makin more Gs than her doc. 
THE KLUDGE: Classify is a plugin that aims to gap that lost potential by easing the use of custom codes within your app (CSS/Javascript/HTML). Although it has more than one trick up its sleeve, its main feature lies in its capability to set CSS classes on elements (in addition to Bubbleâs native ID feature).
âŠ, you may access your Global Style Variables with your CSS, mess around with HTML attributes (yes that includes 
) and more.
WHEREâS THE DOCS? Glad you asked. For the sake of maintainability and more-enjoyableness, I moved the documentation out to an external website. You now have to put in the effort of an extra click to get to it. But trust me, itâs worth it. Plus, I worked my a*s off to produce it! 
