Forum Academy Marketplace Showcase Pricing Features

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

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

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

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

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

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

Hi

May I ask to upload here “Add css class name to an element and manipulate its properties via html element for beginners”? I spent hours in this issue without any success :frowning:

hey @pictarbut1
not really sure I understand your request. It is explained in the first post how to add class to an element.

Here’s a link to a super simple demo. In preview mode, the yellow shape turns red when hovering it. https://bubble.io/page?type=page&name=classify-simple&id=tempjulien&tab=tabs-1

Hi

Appreciate you quick reply :slight_smile:

I’ve tried to implement your plugin - it doesn’t worked for me, although I’ve red about the ease of use this plugin. It’s probably because I used old project file. I’ll try again.

2 min later:

I found the mistake - applied the {addClass…} to the appearance dialog box.

:call_me_hand: