Skip to content

sqro2/frigate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

#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*6

Output

		<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);
   })