edit 2021-01-30: added a few more things about design, but not exactly responsive design.
It’s been years that I build with Bubble but totally ignore responsiveness. This year I’ve been diving into it and I’ve compiled some of my learnings and sources.
Or so I thought.
I’ve completed a sort of “masterclass” recently and I needed to record a few learnings.
How To Do Responsive Design in Bubble with Gregory John
- Bubble.io doesn’t give you structure so you have to create structure yourself.
- Create a design system before you start dragging boxes inside the page. (Good advice that is hard to follow.)
- Build a styleguide.
- It’s all about margins and paddings.
- Page width 320px is 25% of 1280. Which just so happens to be the screen size one of the most iconic iPhones.
- For mobile input text size 16 means that the phone won’t zoom in.
- Instead of dragging and dropping, move the items inside the page with the absolute location.
- Sometimes it is worthwhile to design a whole new page for mobile.
- Your brain recognizes color before anything else.
- gridcalculator.dk to calculate grid sizes.
- Flex box is coming in 2021-Q1.
- New editor alpha is going on.
- Floating group on the left extending the full height of the page. That works as a static navigation bar.
Bubble Webinar 3 - Responsive Design
- Collapse margins can do wonders.
- add a group under the floating group (normally used in dashboard type of designs)
- left align the bumper group
- left align the content group
- in the responsive engine, apply a hiding rule so that it hides when at - for instance - tablet resolution.
Font awesome “hacks”
- it’s easier to create buttons with text fields.
- with text fields, you can use font awesome in-line
- simply add a font in between FA bbcode
- cheatsheet for icons (v4.7) link
- You can add a loading icon to any button, add a state to the text-button that, when activated, it displays
[fa] fa-circle-o-notch fa-spin [/fa]
- tweak the size of the icon with
Fake gradient text
[font="Comic Sans MS"][size="6"][color=#FF0000]H[/color][color=#E90015]e[/color][color=#D4002A]l[/color][color=#BF003F]l[/color][color=#AA0055]o[/color] [color=#7F007F]w[/color][color=#6A0094]o[/color][color=#5500AA]r[/color][color=#3F00BF]l[/color][color=#2A00D4]d[/color][color=#1500E9]![/color][/size][/font]