HTML is powerful on its own and there is no need to change its syntax. HTML+ simply adds and allows you to add extra capabilities while still enjoying the HTML syntax.
License: MIT
In short, it is familiar, fast, simple and allows you to write less and powerfully. Here is more:
The syntax is of HTML so you already know this language.
<h2>{title}</h2>
<ul #if="$data.list">
<li #repeat="$data.list">item {$item}</li>
</ul>
<p #attr="id, desc, $data.visible">
{description}
</p>There are only few new tags and attributes with amazing capabilities to learn about.
// Attributes
#if, #repeat, #fragment,
#attr, #ignore
// Tags
include, variable, inject,
fragment, log, ignoreSimply link your SASS, LESS, STYLUS and Typescript files.
#CSS preprocessor files
<link href="style1.scss" rel="stylesheet">
<link href="style2.less" rel="stylesheet">
<link href="style3.styl" rel="stylesheet">
#typescript files
<script src="app.ts"></script>HTML+ engine allows you to write modern CSS that works in any browser.
@import "normalizer.css";
@custom-selector :--heading h1, h2, h3, h4, h5, h6;
:--heading {
--color: #900;
&:hover {
color: var(--color);
}
}It allows you to reference data in separate files and create data context for specific parts of the page.
<variable name="total" value="$data.list.reduce((acc, n) => acc + n.price)">
</variable>
<h2>{title}</h2>
<p>Total: {total}</p>You can create custom tags and attributes to handle a specific situation of your project.
class MyTag {
render() {
return '<p>My Tag</p>'
}
}<my-tag></my-tag>Create faster website by rendering on the Server with static or dynamic pages.
HTML+ builder takes care of exporting production ready site files to be hosted anywhere.
You can creat your website router by simply using the pages file structure. The rest is taken care by the engine.
The site builder will only export optimal and needed CSS, Javascript and HTML for production.
The following code creates an Express server with template, page routes, CSS(pre and post processors) and Typescript files setup ready to go.
const express = require('express');
const http = require('http');
const path = require('path');
const {engine} = require('@beforesemicolon/html-plus');
const app = express();
(async () => {
// wait for engine to finish setting upt the routes
// and all files
await engine(app, path.resolve(__dirname, './pages'));
const server = http.createServer(app);
server.listen(3000, () => {
console.log('server live on port 3000')
})
})()