#What is frigate ? Frigate is a jquery based html preprocessor which helps write html faster with much less code,time,effort.
#What problem it solves? Writing pure HTML markup is tedious and kills a lot of development time. Frigate was created to simply make this process faster.
#Two quick example :
Input :
div*6Output
<div id="null" class="null"> </div> <div id="null" class="null"> </div> <div id="null" class="null"> </div> <div id="null" class="null"> </div> <div id="null" class="null"> </div> <div id="null" class="null"> </div>
Input :
header(.header-class #header-id){
nav(.nav-class #nav-id){
ul(.ul-class #ul-id){
li(.li-class #li-id){
a
}*5
}*2
}
}
Output
<header id="header-id" class="header-class"> <nav id="nav-id" class="nav-class"> <ul id="ul-id" class="ul-class"> <li id="li-id" class="li-class"> <a id="null" class="null"> </a> </li> <li id="li-id" class="li-class"> <a id="null" class="null"> </a> </li> <li id="li-id" class="li-class"> <a id="null" class="null"> </a> </li> <li id="li-id" class="li-class"> <a id="null" class="null"> </a> </li> <li id="li-id" class="li-class"> <a id="null" class="null"> </a> </li> </ul> <ul id="ul-id" class="ul-class"> <li id="li-id" class="li-class"> <a id="null" class="null"> </a> </li> <li id="li-id" class="li-class"> <a id="null" class="null"> </a> </li> <li id="li-id" class="li-class"> <a id="null" class="null"> </a> </li> <li id="li-id" class="li-class"> <a id="null" class="null"> </a> </li> <li id="li-id" class="li-class"> <a id="null" class="null"> </a> </li> </ul> </nav> </header>
#installation To install with bower :
Run this command - bower install frigate
For manual installation :Include jquery to your project(latest dist recommended ).
Include the file 'frigate.min.js'.
#Usage
Before using this preprocessor It's neccessary to get familiar with it's syntax.Please visit This page for documentation.
How to implement
Html :
<textarea rows='6' cols='12' id='input-data'></textarea> <input type ='button' id='button-process'>Process</button> <div id='output-data'></div>
Jquery :
$('#input-data').toHtml(function(result){ $('#output-data').html(result); })