DEV Community

Cover image for Brand-new Style Guides on Bubble
Atomic Fusion
Atomic Fusion

Posted on

Brand-new Style Guides on Bubble

No-code has paved the way without coding for businesses and we're all aware of the shift it has brought to the new age developments.

As innovations occur, the way people perceive technology changes, and the power of using the right tools has gained the importance it has always deserved.

As Freeman Dyson quotes -
“There is great satisfaction in building good tools for other people to use."

Bubble is one of the most powerful no-code platforms for developing digital products, to ease and accelerate development Atomic Fusion will help bubble developers organize what they build. 🚀

What is Atomic Fusion

Atomic Fusion is a chrome extension and a solution that helps you to create, save and share styles, designs, and code snippets with other visual developers easily on Bubble. ⚡

If you develop your application with Bubble, this is one tool you must know about. Among it’s various other features, this article will focus on the newly added feature - ‘Style Guides’.

Let's take a close look at the advantages it brings to the table and how you can use it to accelerate your Bubble development process.

Exploring the Style Guides

Exactly as they sound, Style Guides are a collection of Styles and Components that help you set your Bubble App up according to the chosen Style Guideline. 🥳

It is now easy to bring a website's vision to life with Atomic Fusion. By taking care of the variety of aesthetics, Style Guides will have something for everyone.

Among many, the very first featured style guide is Monochrome. Let's explore further the guide and how you can use it on your website.

Monochrome

The first Style Guide in the Library is ‘Monochrome’ - A sleek black & white style to make your App look elegant and minimalist. 🤌

Here's a sneak peek of the look and feel of Monochrome ⬇️

Bubble nocode development

Also, in addition to Style guides, users have the Block Components section of the extension. You can find components that follow each Style Guide and copy/paste them into your own apps.

if you’re wondering how to use these components, we have a detailed guide ready for you.

Building Bubble Pages in minutes with Block Components

How to use Style Guides

You can use the Monochrome Style Guide in 2 simple steps. Make sure to have Atomic Fusion's extension before you start executing the steps:

  1. In the Chrome Extension, navigate to Library and click Style Guides. Now open a Style Guide and click 'Fork as Repository'. This will appear under the 'Repos' section in the My Forks section of your Extension. ✅
  2. The Style Guide preview page with all the elements set up can now be copied into your App from Repos in My Forks and can be used as needed. ✅

With that, you’ll have the chic Monochrome design in your toolset. 💃

Making your dream WebApp aesthetic a reality is now way easier with a style guide. 🤌

Enhance your Bubble development experience with the Atomic Fusion extension. 🚀 Here’s a video explaining this feature:

Introduction to Style Guides - Rapid Bubble App development

Accelerate your Bubble Development

Atomic Fusion is the Bubble Developer Hub to create, save and share styles, designs, and code snippets with other visual developers easily. Sign up to accelerate and enhance your Bubble development.

Count me in

Until next time, keep building! 👨‍💻

Top comments (0)