What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

Code-Free Templating

johnywhy

New member
I'm just sharing a tool i developed that might be helpful to others.

It's a code-free, client-side templating tool, that will enable an HTML dev to display a collection of repeated items on a webpage with identical HTML, but different content.

GUmOYoyFM3np.png


"Template" meaning there's only one copy of the HTML, shared by all the items in the collection. To change the layout of all the items, you only have to edit the template.

Code-free meaning, you don't need to write or know Javascript. Everything is done in HTML, including the template, container, and data.

The content is separate from the HTML, so you can update the data without touching the HTML.

It's best for small projects with few items that don't change too often, where you can't or don't want to do server-side programming.

Feel free to ask questions here or on github.

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

Here's a simple example.
  • The container puts the collection on the webpage.
  • The template contains double-bracketed placeholders, which get loaded with data.
  • The data is stored in a hidden area of the webpage
Code:
<body>
     <!-- CONTAINER -->
     <span mt-records="EEs" mt-template="engineer" class="engineers"></span>
</body>


     <!-- TEMPLATE -->
<template id="engineer">
    <span>
        <a target="_blank" href="http://[[LINK]]">
            <img src="[[IMAGE]]" alt="">
            <div class="caption">[[NAME]]</div>
        </a>
    </span>
</template> 


        <!-- DATA -->
    <mt-records hidden id="EEs">
        NAME
        LINK
        IMAGE

        Benervive Guper
        https://www.Guper.com
        Guper.jpg

        Phoey Ramstung
        https://Ramstung.com
        Ramstung.jpg

        Sam Smith
        https://samsmith.com
        sam.jpg
    </mt-records>
 
Back
Top