How to transform HTML to production-ready components using the BeautifulSoup library
Thanks for reading, let's go. Designers from GrayGrids released another cool HTML theme, named Engage. After a quick scan, we decide to process it with our tools and make it available in the builder. The whole process took 30minutes.
The first step is .. of course, to download the HTML theme. We choose the lite version because it's free.
The second step, the theme was loaded into our parsing tool and the components were extracted (from index.html file) and prepared to be used in the builder.
Themes from GrayGrids are always easy to parse, the HTML code is well written, clean and our parser loves it.
A note for geeks: we are parsing HTML files using Python Beautiful soup as the base technology. On top of that amazing library, we have an interactive console that helps us to process any HTML file: normalize it, extract components, translate components from plain HTML to Laravel, Flask or Vue. related to this subject, thanks to read more here.
After component extraction, another step into our process is to generate thumbnails for each component. The builder uses those thumbnails to ease the component manipulation and page build for the user. BTW, our builder is free and you don't need an account to build and download the page.
The last phase of our process is to encapsulate the HTML theme (assets, components, thumbnails) into a format "usable" by the builder. This step is also automatized and is not time-consuming.
After publishing the theme into the builder, of course, we've played a little bit. We choose this design because is looking good, is well coded.
You can read more here about this product.
Because we want to stay close to our audience, feel free to suggest a #cool HTML design to include it into our builder. It takes only 30min :)