HTML5 Template Tag

HTML5 Template Tag.markdown

HTML5 Template Tag

Playing with it and build a simple template_fill function

A Pen by Wolf Wortmann on CodePen.

License.

index.html

<h1>HTML5 Template Tag</h1>
<h2>the browser did't render it but parses the HTML inside & preload resources</h2>
<div class="target_box"></div>

<template data-template="user">
	<div class="user">
		<img class="avatar" src="{img}" alt="{first_name}'s avatar">
		<div class="data">
			<h1>{first_name} {last_name}</h1>
			<h2>{title}</h2>
		</div>
	</div>
</template>

script.js

$(document).ready(function(){
	fill_template('user',{
		img: "http://files.elementcode.de/img/face.svg",
		first_name: "John",
		last_name: "Doe",
		title: "Ipsum Person"
	});
})

function fill_template(template, data){
	var set = {
		target_selector: '.target_box',
		template,
	}
	
	set.template = $('template[data-template="'+template+'"]').html();
	$.each(data, function(key, value){
		var regex = new RegExp('{'+key+'}', 'gi');
		set.template = set.template.replace(regex, value);
	});
	
	$(set.target_selector).append(set.template);
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
template{/* We need this only for browsers, that did't understand HTML5 :/ */
	display: none;
}
body{
	background-color: rgb(54,53,56);
	font-family: 'Roboto', sans-serif;
}
body>h1{
	font-weight: 300;
	color: rgb(255,255,255);
	text-align: center;
	margin: 60px 60px 30px 60px;
}
body>h2{
	font-weight: 300;
	text-align: center;
	color: rgb(255,255,255);
	max-width: 400px;
	margin: auto;
}
.target_box{
	width: 410px;
	height: 150px;
	
	position: absolute;
	left:0;top:0;right:0;bottom:0;
	margin: auto;
	box-shadow: 5px 5px 10px 1px rgba(0,0,0, .3);
	border-radius: 2px;
	overflow: hidden;
}
.user{
	background-color: rgb(78,144,226);
	color: rgb(54,53,56);
	width: 100%;
	height: 100%;
	padding: 20px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}
.user .avatar{
	border-radius: 50%;
	background-color: rgba(0,0,0, .1);
	height: 100px;
	width: 100px;
	padding: 10px;
}
.user .data{
	border-left: 1px solid rgba(0,0,0, .1);
	padding: 0 30px;
	margin-left: 20px;
}
.user h1{
	font-weight: 400;
	font-size: 2.4em;
}
.user h2{
	font-weight: 300;
}

styles

<link href="http://fonts.googleapis.com/css?family=Roboto:400,300" rel="stylesheet" />

Really liked this codepen snippet