How to add Custom CSS Classes & Styles in Bubble.io

Introduction to Customizing Your Bubble.io Application with Framify Custom CSS Classes

When you dive into the world of Bubble.io, you quickly learn that the true magic lies in customization. Tailoring your web application to fit your unique style and functionality needs is paramount, and that's where Framify Custom CSS Classes come into play. Through a simple yet powerful plugin, you can unleash the full potential of style customization within your Bubble.io projects.

Framify Custom CSS Classes provides a user-friendly interface that allows you to apply custom styles directly to elements within your Bubble.io editor. With this tool, the constraints of default styling options fade away, and a new world of design possibilities opens up. Let's explore how you can utilize this plugin to create a truly bespoke user experience.

Understanding the Basics of Framify Custom CSS Classes

Before you jump into adding custom classes, it's important to grasp what CSS classes are. In the simplest terms, CSS (Cascading Style Sheets) classes are used to apply styling rules to elements in your HTML. By using these classes, you ensure a consistent look and feel across your web application, all while keeping your code clean and organized.

Framify Custom CSS Classes extends the capabilities of Bubble.io by allowing you to add these classes directly within the editor via our extentsion. Our extentsion provides a space to manage & edit where you can write your custom CSS or import existing stylesheets. The plugin insures that all the classes are applied correctly to your components. This integration ensures a seamless design workflow without the need to touch raw HTML or leave the Bubble platform.

The Importance of Element IDs in Bubble for CSS Customization

Element IDs play a crucial role in CSS customization because they serve as unique identifiers for HTML elements. In Bubble.io, exposing element IDs is necessary to apply specific styles to a particular component. Think of it as giving a name tag to an element; once it has a name, you can tell your CSS exactly where to apply the styles. Since Bubble does not have custom Classes, we've made it really intuitive. Users can utilize the ID field for each component and paste their syntax in there, and our plugin will parse it and add the classes to the component.

Ensuring that element IDs are exposed in Bubble is a simple but crucial step in the customization process. It allows your CSS to precisely target elements, providing you with the control required to fine-tune the appearance and behavior of your application's interface. Let's delve into how you can start using Framify Custom CSS Classes by first exposing these essential element IDs.

Step-by-Step Guide to Using Framify Custom CSS Classes

Getting Started with Framify: Exposing Element IDs in Bubble

To begin using Framify Custom CSS Classes, you must first expose the element IDs within your Bubble.io editor. This step is straightforward. Navigate to the 'Settings' tab in your Bubble editor, and under 'General,' you will find the option to 'Expose the option to add an ID attribute to HTML elements.' Enable this setting, and you'll be able to assign unique IDs to your elements, paving the way for custom styling.

How to Add Custom Classes to Your Bubble Elements

Now that your element IDs are exposed, it's time to add custom CSS classes. In your Bubble editor, select the component you wish to style. At the bottom of the property editor, you'll see an option labeled "Custom Classes - Modify." Clicking on this will prompt you to head over to Framify, where you'll have the capability to create CSS files with the help of integrated AI.

Within Framify, you can start writing your CSS, or if you're not confident with your coding skills, use the AI to guide you through the process. Once you've defined your custom classes and styles, you can simply assign these classes to your Bubble elements through the property editor, giving each element the look and feel you desire.

How to apply Classes in Bubble

To apply classes in Bubble you have couple of options, but before that you need to add the Styles to your project, which can be done by copying the Project ID and pasting it into Framify Custom CSS Classes plugin. After that is done you have couple of ways to add the Classes.

Autosuggestion

To take advantage of autosuggestion you need to set your project to "Default"

Which will then give you Suggestions in Bubble, when you have selected a component. By just clicking on the class names you can either Add or remove them.

Copying from the Editor

To copy the classes from the editor you must first select the classes you want to copy, click on the down arrow and select whether you want to copy them as New classes or Temporary after which you can paste it in your component ID field.

Navigating the "Custom Classes - Modify" Feature in Bubble

The "Custom Classes - Modify" feature within Bubble is your gateway to connecting with Framify's CSS capabilities. Once you click this button, Framify's interface becomes your canvas for creativity. Here, you can experiment with various styles and refine your application's aesthetic to perfection.

Don't worry if you need to make changes later on; you can always come back to the "Custom Classes - Modify" section and adjust your styles as needed. This dynamic link between Bubble and Framify ensures a flexible and responsive design process, allowing your application to evolve alongside your creative vision.

Advanced Styling with Framify Custom CSS Classes

To add custom classes, use the syntax:
{ addClass: [] }

Inside the brackets [], add class names within quotes "", separated by a comma. For example:
{ addClass: ["margin", "animation"] }

To add temporary classes, use a similar syntax:
{ addTemp: [] } 

Again, inside the brackets, you'll list the class names within quotes, separated by commas, such as:
{ addTemp: ["margin", "animation"] }

To use multiple commands at once use syntax:
{ removeDefault: true, addClass: "margin" }

Since Bubble does not have custom Classes, we've made it really intuitive. Users can utilize the ID field for each component and paste their syntax in there, and our plugin will parse it and add the classes to the component.

Available commands:
addTemp - Adds temporary class(es) ( example: On Hover )
addClass - Adds class(es)
removeDefault - Removes all the default styling from the element
removeClass - Removes a mentioned class(es)
attribute - Creates custom attribute ("userAge=10")
style - Add a custom Style variable ("margin-top: -10px")

NB! addTemp works when there is a addClass applied by default.

Conclusion

By utilizing Framify Custom CSS Classes in your Bubble.io applications, you can achieve the perfect balance between customization and efficiency. Whether you're a seasoned developer or just starting, Framify offers the tools and support you need to make your visions a reality. Happy bubbling!