This is yet under development, so it will probably have some bugs. But it's a lot of fun already!
Some live preview
MagicHTML is a php class for html handling.You can set metas, title and w/e. The idea is you have an OO html.
require_once("MagicHTML.php");
$html = new MagicHTML;
$html->add_css_linked("preview.css");
$content = file_get_contents("elquery-test.html");
$html->set_content($content);
echo $html->create();
Check the fun part
It's boring and bad for us to write all our project css into one big file. But it's usual worse for the server to handle multiples requests of tiny little css.
MagicHTML fills this gap. It let you to write your modular css without causing troubles for your server.
Before MagicHTML displays your page it checks the css's added to the page, and checks for a cache file that includes that expecific combination of css's.
If it doesn't find the cache file, it will make one. It will run file by file and minify it. After, it will generate one big file with the content of the small css's you like to read.
It compares the creation date of the cache file with the modification date of each file, so it will re-interprete the css after you update it
Because we already interprete files from time to time, to minify them, we can add custom functions to css.
I'm talking about using all the Less syntax, without using a javascript library and with it saving client resources.
I'm talking about using condicionals like:
if $browser == 'IE' and $version <= 8:
#example {width: 400px;}
elif: $browser == 'IE' and $version > 8:
#example {width: 300px;}
else:
#example {width: 600px;}
end
And inspired by this post element querys like:
#teste@eq(min width 380){background: blue; border:3px solid black;}
#teste@eq(min width 380) p{font-size:16px;}
You can check css/preview.css so you can see the syntax we are working
It, by default, positionate javascripts at the bottom of the page, so you can economize client resources.
Puts all inline javascript into one single block
Originally i did this to use in a framework that i'm developing. It's incredbly easy to make it support templates and childrens, what i need, since i'm using mvc design pattern.
Even if you don't want to make it support templates in a OO way, you can always do something like this:
require_once("MagicHTML.php");
$html = new MagicHTML;
$html->add_css_linked("preview.css");
$header = file_get_contents("header.html");
$content = file_get_contents("content.html");
$footer = file_get_contents("footer.html");
$content = $header.$content.$footer
$html->set_content($content);
echo $html->create();
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent