Bubble.io Tutorial - Frames Chrome Extension for Responsive Design

In this video we show you the free Chrome extension Frames: https://madewithframes.com

With this Chrome Extension from Buildcamp (Gregory John and James More) responsive web design in Bubble is much easier.

Video transcript:

Hello, my name is Chris Strobl and I'm really excited to show you Frames today. Frames is a brand new framework developed by Gregory John and James Moore from Bird Camp and it simplifies Responsive Designs in the Bubble. Frames is a modular design system and I want to show you roughly how to use it. If you click on Getting Started in the manual, you will see that the first thing we have to do is install a Chrome extension and then we have to log into Frames.

If I click on Download here, you will see that I have already installed this Chrome Extension. This is Frames up here and if you are not in the bubble but on another page, the whole thing is grey. But when you go into the Bubble Editor, you see that suddenly Frames is yellow. And secondly, you see this yellow dot in the bottom right-hand corner. You register, or I'm already registered, you log in. And now you see how Frames works. A small example I have built a complete page in frames, in about one and a half, two hours. But what we are doing now is a new page testing frames.

If we go back to the menu, you will see that we have different ways of using frames here and it is all relatively well documented. But I want to show you an example here with the different sections that we have here. That is, we go back in the bubble. We have the page. First thing is important We do 960 width height. Let's do 6000 once, just to have more space. And this is important. This page is not fixed quickbook, it's responsive. We now go to the Chrome Extension and now it says the different sections start with a header and you can see here that we have different designs for the header. For example, I take five logos on the left, a button on the right and I click on this copy icon. As soon as I have copied this, I can now make the right mouse button Package View and here again frames. And now I have this element directly on my page etc. This is called Header 5. This is called Header 5, and we have various groups, including an image, for example.

This is a keys holder image, so to speak, where we can upload one for our logo. For example, we can do a search for free images here. And now we have a logo here and a button on the right. If we go to a responsive editor, we see that the design works perfectly responsive. If you want to change the colour, for example, you go to header 5 and see that the background colour has a 0 percent transparency. For example, we can say we want to have the whole thing in black and with an 80 transparency. At the same time, you can also edit the buttons themselves.

You can see here that we can set different styles and also for example change the run mode or something like that. But what is exciting now, to show a second element, is when we go back into frames, we now see the different elements, such as the Hero elements. We can now say we want to copy this Hero 3, this one again. We are View and now we see that everything jumps a little bit. That's where I like to go all at once the header. Let's see that this has a height of 100 to be 0 at 0 and the Hero 3 has to start at 100 y axis. So the whole thing is not overlapping. Again, we can change the image. But the whole thing a little bit groups. And we have the possibility, for example, to change the background colour or simply to change the text.

You see that frames also have conditional, that the size changes again and the font size becomes smaller as soon as the whole thing is also a smaller format. If we go back to responsive, then you see that everything fits wonderfully with the spacing and we have really excellent design in the bubble, which can be changed modularly at any time and also styles or other things can be changed at the same time.

I'm going into Preview now to show the whole thing and we can see here, for example, that the page stops at 150 and does not go through completely. But here we also have the possibility to change everything at any time, such as not inserting a deploy matrix. Then when we do refresh. Look at the header going all the way through, for example. What I find really exciting with frames is actually the possibility to finally have very good design quasi out of the box in the bubble and especially to currently display landing pages much better.

You can see that we can use almost all different content formats, whether it's pricing tabs or the feed from a page. And in the future I can very well imagine that there will be even more features in frames, such as profile page or market places. So just try it out, the whole tool is free. Congratulations again to Triggered John and James Moore from Bild Camp. Really an excellent tool for the Bubble community and also really visible as the big building sites in the Bubble.

Whether that's design or payments are being tackled step by step by the community. If you liked this video, feel free to click on the Like button and script our channel. I wish you continued success and see you soon.