HTML files - the right way

According to Wikipedia, normalization refers to a process that makes something more normal or regular. We apply this concept to HTML themes to ease the next step in our tooling process: component extraction. For us, normalization means that all page assets (images, CSS files, js files) are loaded/copied into standard directories.

AppSeed - HTML Normalization process

Allow me please, to provide a real-life example:
Imagine that you've bought a nice HTML theme from ThemeForest or ColorLib. So .. that's cool. Now you need to use it in your next project. The original index.html use CSS files, js, and images from random directories, as below:

 <link href="css/style.css" rel="stylesheet"> 
 <link href="responsive.css" rel="stylesheet"> 
 <script src="assets/app.js"></script> 
 <script src="js/forms.min.js"></script> 
 <img src="assets/img1.jpg" alt="Some image"> 
 <img src="img2.jpg" alt="Some other image"> 

Normalization, in this case, aim to update the HTML tree to load all assets from standard directories. Like this is much easier to process and manipulate the HTML files. A normalized HTML will load assets from standard directories:

 <link href="/assets/css/style.css" rel="stylesheet"> 
 <link href="/assets/css/responsive.css" rel="stylesheet"> 
 <script src="/assets/js/app.js"></script> 
 <script src="/assets/js/forms.min.js"></script> 
 <img src="/assets/img/img1.jpg" alt="Some image"> 
 <img src="/assets/img/img1.jpg" alt="Some other image"> 

Normalized HTML themes advantages:
- easier to deploy and use
- easier integration in tools like Grunt, Webpack
- ease the components extraction phase (the next step in our tooling process)

Extracted components are used in two ways:
- users can build landing pages in our free builder
- components are "translated" into production-ready components for Laravel, CodeIgniter, Flask, Vue and React.
Samples (on @Github) for Laravel, Flask, Core Php and plain HTML.

Thank you!

home Home