[New Plugin] HTML5 Elements

This plugin includes 18 HTML5 elements. All input elements come with a label element. So you don’t need to add an extra text element for labels. Elements such as Date Input have attributes like min and max value and come out of the box with native client side validation without JavaScript.
New elements: Video Hero, Textmask, Flipcard, Textticker, Typewriter, Image Filter, Backdrop Filter. More will follow.

Instructions

Just install the Plugin and add input elements with the prefix “HTML5” to your page.
Demo page: https://html5-elements.bubbleapps.io/version-test

Bubble editor: HTML5-Elements | Bubble Editor

I’ve added a new element to this plugin. A cutout text mask element. I’ll add more elements to this plugin in the next weeks. Same price.

I’ve added a Video Hero element to this plugin.
Video Hero: https://html5-elements.bubbleapps.io/version-test/hero/

Another element.
Flipcard element: https://html5-elements.bubbleapps.io/version-test/flipcard

New element: a headline typewriter text element.

New element: a textticker element.

New element: image filter
Try it

New element: Backdrop filter
Demo

Complete overhaul. Now all elements work fine.

Without the HTML5 picture tag a website is not fully responsive. Therefore I’ve added the picture tag to my HTML5 Elements plugin.

You don’t need to say this to bring users to your plugin. This is false.

What is false?

Saying that, using the HTML5 “Picture” element is required to make your images/website responsive. That is false.

If you think an image on mobile, in the same size as for desktops, is responsive -this is false.
And for your point “to bring users to your plugin.”
The agencies here do that over and over again.

But don’t let us battle here.

You’re basically saying, “not using your plugin will result in non-responsive images/websites”.

This is all I’m saying, mate. There are plenty of alternatives to making images/website responsive without HTML5. Even on mobile.

What is the alternative for images on mobile. What do you think is the picture element good for?

I’m not saying it’s not good! Just trying to inform users (and maybe even you) that CSS/HTML works just as well in some cases. There are definite perks whilst using the HTML5 Elements, sure.

Here is an example of a responsive image on all sizes without the “Picture” element and just pure CSS/ basic HTML.

You can easily do this within your application by using Classify and attaching the correct ID/Class to your image elements and containers.

What I did was wrap the image in a container, but that’s not necessary. Although, wrapping an image in a container is most ideal, Bubble does that for you already, so you can just modify the image and the container with a little CSS.

EDIT: You may want to actually go to the URL - the embedded doesn’t show the example very well.

Not trying to bash on your work, as I would highly recommend using it if people need to achieve better results in SEO.

The article/picture elements are my favorite when editing raw HTML. I use them in react all day.

You don’t get the point of the picture element.
With this you are able to deliver a smaller image (in KB) for smaller devices. That is not the same as in your example.

You’re right. I didn’t realize you meant that part specifically. That functionality cannot be replicated without additional work.

In my case, I do blur-hashing and optimize images with something similar to Cloudinary.

Bug fix for Input elements. If you bought or subscribes this plugin, pls upgrade to the latest version.