[Free Plugin] .Intelli Class: An Easy Breezy Way to Add CSS Classes! (by Bubble Style, Element's Name, Element's Type, and more 😮)

Showcase Plugins
1

Intelli Class (2)

.Intelli Class

Simplify Adding Custom CSS Classes :rocket:

Hello Bubble Community! :wave:t2:

We’re bursting with excitement to unveil .Intelli Class, our revolutionary plugin that’s going to change how you add custom CSS classes to your Bubble apps, and the best part?
It’s absolutely FREE! :bulb:

Bubble is superb at managing classes, but we've created Intelli Class for those moments when you wish to explore beyond and add a personal touch with your own CSS classes.

Here’s what .Intelli Class brings to the table:

:mag: Flexible Element Selection:
You have the power to choose the elements to which you want to assign your CSS classes. Use our intuitive dropdown menu or a dynamic value, even focus on specific layouts or clickable elements. The power is in your hands!

image

:art: Seamless Integration with Bubble’s Styles:
Intelli Class breathes new life into your predefined Bubble styles. Simply input the style name and Intelli Class will automatically attach your custom class to those elements.

:label: Element Selection by Name:
Name your elements in the Bubble editor and Intelli Class will associate your custom classes with those named elements. Personalization at its finest!

image

:jigsaw: Enhancing Repeating Group Cells:
Intelli Class allows you to apply your custom CSS classes to individual cells within repeating groups, adding that extra layer of uniqueness to your interfaces.

image

:zap: Dynamic Class Assignment:
Keep your Bubble app responsive and interactive by adding or swapping classes even during runtime.

:busts_in_silhouette: User-Friendly Interface:
We’ve tailored Intelli Class to fit seamlessly into your Bubble workflow. The steps are simple: add the Intelli Class element, define the properties, enter the class name, and watch the magic happen!

image
image1242×789 26 KB

Install .Intelli Class, and let’s make Bubble development as easy breezy as it should be, together! :tada:

We eagerly await your feedback and are always here to answer any questions.

5 Likes
2

Hi!

Your work looks great.

For the style name targeting, do we use the exact name in bubbles styles?

I’ve been struggling to use it for groups and for buttons.

1 Like
3

Hey @camcamca1

Thank you for your kind words! I’m here to help you with your question about .Intelli Class.

When targeting styles, you use the exact name of the style.

To better assist you, could you please provide more information about your situation?

Feel free to share any specific issues or features you need. With more details, I’ll be able to provide you with a more accurate solution.

Looking forward to hearing from you!

4

Hi @NoCodeDataArtisan

Never mind. I was making a mistake with my css.

The fact you can pull from bubbles inbuilt style variables is actually pretty amazing.

Is it possible to apply multiple classes within the same Intelli Class element? Maybe that could be a feature?

1 Like
5

Hi @Cameron,

I’m glad to hear you found a solution to your CSS problem.

In regards to your question about Intelli Class elements, this is a valuable suggestion and certainly has potential for greater flexibility in styling.

Just for clarification, are you looking to apply multiple classes to a single element or do you want to apply a single class to different types of elements? Your input will be valuable to help us consider this feature for future development.

6

Hi @NoCodeDataArtisan

I was thinking of multiple classes to selected elements. So multiple classes in the input below.

image

1 Like
7

This is great.
Can you tell me if you prefer to insert them as a list of text or insert them non-dynamically (plain text separated by commas)?

8

Introducing the New and Improved Version of .Intelli Class

We’re absolutely thrilled to announce the release of our newly enhanced .Intelli Class plugin. We’ve listened to your feedback and added a range of new features that will elevate your experience and give you even more control and versatility.

The latest version of the .Intelli Class plugin now lets you:

  1. Remove Classes: Need to discard a certain class? Now you can, with just a few clicks.

  2. Enhanced Filtering: Our improved filters now allow you to filter elements carrying specific classes.

  3. Observer Feature: Our new observer feature watches parent elements for any changes in their child elements. This is particularly useful for hidden elements and Single Page Apps. You can specify one of the parent elements by its ID.

  4. Add CSS Rules: You now have the freedom to add CSS rules directly to the added classes, giving you more customization options.

These updates were meticulously designed with your needs in mind, and we are confident that these enhancements will make your Bubble experience even better.

We also want to take a moment to express our heartfelt thanks to @Julienallard1. His invaluable input, brilliant ideas, and advice have been instrumental in these improvements. As the author of the :fire:Classify plugin and an experienced developer, his expertise and guidance have been essential in bringing you this updated version of the .Intelli Class plugin.

Thank you all for your continued support. We encourage you to install the new version of the .Intelli Class, and as always, we look forward to your feedback.

Your .Intelli Class Team

2 Likes
9

Sorry i didn’t see your last message, but you’ve done what I wanted and more.

Great work with the awesome new features.

Will let you know if I have any ideas or feedback.

1 Like
10

I’m glad to hear that you’re satisfied with the updates and new features.

Thank you so much for taking the time to leave a review - we really appreciate it.

Please do not hesitate to share any ideas or feedback in the future. We’re always looking to improve.

Thanks again!

11

Hi @NoCodeDataArtisan

If possible, rather than select elements by exact name. Can it select based on if a segment of element name string matches the string name of the intelliclass element name.

Example:
I tagged my element name with [Group Column]
image

I want to select only these elements
image

That way I can easily find the elements in my editor which have been selected by intelliclass

Just a small suggestion that would help my type of bubble development. Not sure if it would help others :slight_smile:

1 Like
14

Hey @camcamca1
I hope you are fine. I apologize for not informing you, we added this feature for you last month.

With this feature, the plugin also selects the elements that start with what you specified.

If you haven’t used this feature yet, be sure to try it and let me know your experience.

Best,
Mehrdad