Hi folks,
I’m an experienced bubble user but very new to CSS manipulations. I just installed the CSS Tools plugin and, after a few hours of trial and error, got it to work for some simple tasks. I didn’t find much documentation on basic setup and usage, so thought I’d post what I learned here to help future users of the plugin. Not to sound ungrateful – thanks to zeroqode for the free CSS Toolkit! – I’m sure you’re busy but in time you might add more documentation to your plugin for newer users like myself, as it’s a great addition to the bubble.io toolset.
On to my use case. I have an app landing page that I wanted to automatically resize to fill the user’s page height. Here’s how I did it:
- Installed CSS Tools Plugin
- On my bubble editor’s Settings tab, checked “Expose the option to add an ID attribute to HTML elements”
- Dropped a CSSTools element onto my landing page and renamed it “CSSTools” – the renaming is not necessary, just me being obsessive
- Added a tag to my landing page, unimaginatively named “lpage” (no #!)
- Added a workflow “When page is loaded”, and to that workflow added a step “Get Browser Info CSSTools”
- Then added to the same workflow the step “Change Element Size Over Time a CSS Tools”:
In my actual page I have a few other things in the workflow unrelated to the resize. Also, in the image I have renamed the default action from “Change Element Size…” to “Resize landing page”.
That’s it! On page load, the landing page automatically resizes to fill the available window height, which lets the background image fill the entire screen with no guesswork, no annoying vertical scrollbar, and no unfilled background space.
Of course, there will be orientations that my setup won’t fill – I have the background image set to always fill the available width (“Make image wide as parent element” is checked) and if the user’s screen is tall enough, the image will run out. But I can presize my images to work for a wide variety of orientations and simply center the image so that it always looks good.
Feel free to post additional tips on this topic.
Definitely the other users will benefit from this. You are able not only to test the plugin itself, even to see its workflow and set up with its opportunities in the