How To Do Responsive Design in Bubble with Gregory John

Want to launch a business idea or app? Don’t learn to code or hire developers—build on your own, no coding required: https://www.makerpad.co/

- In this Makerpad workshop, we were joined by Bubble extraordinaire Gregory John to show us how to build responsiveness into our Bubble apps.

Bubble is one of the most potent no-code development platforms, and being able to layer on effective design techniques will take your apps to the next level.

Chapters:

00:00 Intro and hello's

04:20 Intro to Gregory

10:00 What this workshop will cover

13:35 Creating a new responsive page in Bubble

19:00 Design principles / Bubble editor

23:00 Style guide and color

35:45 Setting up a responsive page structure

59:30 Working with text

1:02:45 More on responsive page structure

1:06:56 Designing mobile first

1:08:40 Responsive groups, columns & elements

1:25:00 Bubble & Flexbox

1:31:20 Bubble & Figma/Sketch

1:35:00 Hack for calculating element sizes

1:38:10 Repeating groups

We hope you enjoy this workshop with Gregory. Follow him on Twitter for more Bubble education: https://twitter.com/_gregoryjohn.

Don't Let Your Idea Fizzle Out

Start building with NoCodeCollege for free.

Explore Tools List