DEV Community

Cover image for HTML Node Templating System
johnaweiss
johnaweiss

Posted on • Originally published at github.com

HTML Node Templating System

Check out this lightweight, robust HTML node-layout templating system. It enables HTML programmer to more easily control the layout of an arbitrary number of identical HTML sibling nodes, each containing different data, pulled from a hidden table. Designed to minimize effort and reduce keystrokes for the HTML programmer, and protect live HTML from content admins.

https://github.com/johnaweiss/HTML-Micro-Templating

Image description

This system isn't for templating an entire website or webpage. It's for repeated HTML nodes within a page.

Benefits

  • There's just one copy of the HTML layout to edit.
  • Content admins never need to touch the HTML of the node-series. They just edit a plain-text list of records.
  • All dynamic assets can be contained within a single HTML file.
  • Supports any number of templates, datasets, and insertion-points on the same webpage.
  • Optionally, for safer content-management, data can be stored in a separate file from the webpage. (Requires PHP.)
  • No database needed.
  • Built using vanilla Javascript. No library or framework needed. Extremely lightweight Javascript.
  • HTML templates and data can be mixed and switched on the same webpage with the same ease as CSS styles, as long as the fields match up.
  • Variable data can be inserted anywhere in the template's HTML, including element metadata.
  • Clean, resilient code.

https://github.com/johnaweiss/HTML-Micro-Templating

Top comments (0)