New design to integrate into your app? We decided to speed up things with a tool.
From the beginning, I must warn the audience about this article. The content targets programming geeks and it's quite hacky. This parsing tool was born because we are lazy asses & dark geeks.
The goal of this article is to explain the need for building a tool that parses automatically an HTML theme. As a web designer, when a new project arrive, we need to do the same steps over and over:
1. Choose the design with the customer
2. Build pages by aggregating components from the HTML theme
3. Connect flat HTML to real action
To solve all these problems we've built a tool that automates a big part from the steps listed above. Please notice that this tool will be offered to the developers soon as we succeed to have a stable release. At this very moment [ 14.dec.2018 ] tool does the following:
Extract the components and basic containers (header/footer) using an interactive console. The developer can interact with each element (div, anchor, span) and change properties like href, text or even add new properties. Extract hardcoded text from the components and save it for later use into a JSON file. The reconstruction of the original it's quite easy because the tool injects a unique key into the component to replace the text and the same key is used to save data into JSON file.
Translates extracted components into production-ready components for CodeIgniter, Laravel (Blade), Jinja2 (Flask).
As a POC, thanks for checking this design (made by Creative-Tim) and coded by us ( sources published on Github.)
Argon Design System - Files:
Original Index.html file
Normalized Index.html file - where we can easily see that all assets are loaded from a new path: CSS files from /assets/css/ .. Images from /assets/img .. and so on
JSON metadata file: index_data.json
Laravel components, full list here
Because we are in the core development of this tool, please provide feedback and suggest something useful to add. Until then, thanks for your time.