Forum Documentation Showcase Pricing Learn more

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

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.

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.

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.

Usage:

Classes are attributed to elements via the “ID Attribute” in the element editor. If you don’t see such input field, you have to enabled it in the “General” tab in the settings. You can either set an ID only, set classes only or both. Classes have to be written between curly brackets (like a javascript object). Here are a few examples:

myID{class: ["myClass"]} = The element will have an ID “myID” and a class “myClass”.

myID{class: ["myClass1", "myClass2", "myClass3"]} = The element will have an ID “myID” and 3 classes: “myClass1”, “myClass2” and “myClass3”.

{class: ["myClass"]} = The element will have no ID and a class “myClass”.

myID = The element will have an ID “myID” and no class.

{class: ["myClass"]}myID = The element will have an ID “myID” and a class “myClass”.

m{class: ["myClass"]}yID = The element will have an ID “myID” and a class “myClass”.

Behind the scene, when the app loads, Classify’s script searches for HTML tags with IDs containing “{class”. It extracts a substring starting from “{” to “}”; what’s left is used as the actual ID. The syntax is very important since the script will try to convert the extracted text into a javascript object. The square brackets represent a list (in this case of class names), the class names must be single or double quoted + separated by commas.

Dynamic classes (version 1.1.0+)
While any class names can be added, only those that begin with an underscore ( _myClass) can be removed. This becomes handy when you need to apply CSS rules only if a condition is true and remove them when false.

To define the classes of CSS rules, you can either write them in the app’s page header inside tags or in an HTML Bubble element (also inside tags).

**Classify uses pure javascript (no jQuery or other libraries).

11 Likes

Will try to post examples in the neat future…

2 Likes

This is great, reducing app stress with workflows for adding/removing classes, can add classes conditionally now. Thanks for building!

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:

1 Like

I was using boolean format to “remove”
image

So you wrote classes that contradict the first ones I guess?

The thing is that the script could only add classes and classes are applied/rendered in the order they are added so every time your condition becomes either true or false classes are added so you may end up with something like: class="opacity pointer opacity-none pointer-none opacity pointer".

With the underscore you don’t need to write “contradict classes” and you won’t end up with crazy long class declaration in the HTML.

Right awesome :fire::fire::fire: