How to add Custom CSS Classes & Styles in
Andero Avastu

Web Developer, CEO of Framify


How to add Custom CSS Classes & Styles in

Learn to enhance your projects with Framify Custom CSS Classes. This guide walks you through adding custom styles and leveraging AI for a sleek design. Perfect for Bubble developers of all skill levels.

    Introduction to Customizing Your Application with Framify Custom CSS Classes

    When you dive into the world of, 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 projects.

    Framify Custom CSS Classes provides a user-friendly interface that allows you to apply custom styles directly to elements within your 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 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.

    Showcasing the user interface of Framify Custom CSS Classes where users can add or modify their CSS classes.

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

    Utilizing AI In CSS

    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.


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

    Setting project as 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.

    Autosuggesting Class names

    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.

    Copying classes from the editor

    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.


    By utilizing Framify Custom CSS Classes in your 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! & Webflow components & UI Kit marketplace all in one.

    Frank Karro Zoe Sophia
    from 80+ reviews
    Framify view