🔥 Classify 4: A tiny plugin that brings CSS classes and +

:sob: 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. :moneybag:

:star_struck: 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, … :drum:…, you may access your Global Style Variables with your CSS, mess around with HTML attributes (yes that includes style :muscle:) and more.
Have a look at the docs to know more. :arrow_heading_down:

:face_with_monocle: 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! :arrow_heading_down:

Documentation here


Happy coding on the greatest no-code platform! :fire:

49 Likes

Will try to post examples in the neat future…

3 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:

8 Likes

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

(@Taiheta)

2 Likes

: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:

11 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).

6 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:

7 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:

9 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"} .

1 Like

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.