4 ms·
Ask HN: Usefulness of CSS Framework agnostic html tags transpiler?
I was wondering how useful it would be to create a HTML tag transpiler to create a CSS framework agnostic HTML files.
So instead of writing code like this for say, a Panel
Boostrap:
<div class="panel panel-default">
<div class="panel-heading">Title</div>
<div class="panel-body">A Basic Panel</div>
</div>
Bulma:
<nav class="panel">
<p class="panel-heading">Title</p>
<div class="panel-block">A Basic Panel</div>
</div>
We can just write code like this
<panel>
<panel-heading>Title</panel-heading>
<panel-body>Body</panel-body>
</panel>
So now the transpiler can automatically create HTML files in the dist directory (via Webpack)?
This way you can switch CSS frameworks and you also don't need to learn classes, etc for each framework? Just an idea.. wondering what the pros and cons are?
- lioeters 9y agoI've been using variations of HTML traspilers for a couple of years now. First versions were in PHP with native DOMDocument parser; more recently implemented in Node.js. The core engine is really small. There's a registry of custom tags, and it walks the parsed tree of tags, runs callbacks, building the final HTML string. The rest of the functionality depends on registered tags. A tag can render HTML, CSS classes, styles (combined in head), generate JS (combined at end of document), fetch stuff from database.. In your submission history, I found the following gem. If this is possible, then I think your idea of a framework-agnostic style system based on HTML tags is not too crazy. ;) <database name="bookstore" defaultIdMethod="native"> <table name="book" description="Book Table"> <column name="id" type="integer" primaryKey="true" autoIncrement="true" /> <column name="title" type="varchar" required="true" primaryString="true" /> <column name="isbn" required="true" type="varchar" size="24" phpName="ISBN" /> <column name="author_id" type="integer" /> <foreign-key foreignTable="author" onDelete="setnull" onUpdate="cascade"> <reference local="author_id" foreign="id" /> </foreign-key> </table> <table name="author"> <column name="id" type="integer" primaryKey="true" autoIncrement="true" /> <column name="first_name" type="varchar" /> <column name="last_name" type="varchar" /> </table> </database> (From: https://cameronspear.com/blog/a-different-and-better-approach-to-database-migrations-in-php/ https://cameronspear.com/blog/a-different-and-better-approac...)
- superasn 9y agoThanks. I would be willing to try writing a webpack plugin to do the same for Html files om a weekend then :) although I'd only do it as proof of concept for now. It's crazy that something like this doesn't already exists.. Seems like such a simple idea that can save a ton of headache for all devs.
- lioeters 9y agoYes..I think it's a deep topic, the history of XML/HTML-like "languages" and its variants. That includes template syntaxes in Angular, Vue, React, and also Bootstrap/Bulma and other CSS frameworks with "atomic" classes like margin, padding.. Whole application frameworks can be based on this concept. Here's a small and smart parser for HTML <-> JSON that I've been using: https://github.com/andrejewski/himalaya https://github.com/andrejewski/himalaya