https://github.com/krasimir/prototyper

Helpful tool for building responsive design html prototypes
https://github.com/krasimir/prototyper

Last synced: 3 days ago
JSON representation

Helpful tool for building responsive design html prototypes

• Host: GitHub
• URL: https://github.com/krasimir/prototyper
• Owner: krasimir
• Created: 2013-04-29T15:56:55.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2013-05-21T09:33:52.000Z (over 11 years ago)
• Last Synced: 2024-04-11T07:12:26.649Z (7 months ago)
• Size: 158 KB
• Stars: 2
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Prototyper

Helpful tool for building responsive design html prototypes. It looks like a template engine, but it's not. The main idea behind it was to be much simpler. Most of the similar libraries uses a little bit complex solutions. Also they add a lot of unnecessary markup. In *prototyper* the instructions are set in HTML comments. So even if you remove *prototyper* from your page the markup will look ok.

## Usage

  1. Import *prototyper.js* in your page

  2. Attach event listeners to *prototyper* (if you need  to)

  2. In your bootstrap script call *prototyper.run(DOMElement, data)*

* check the example in */test* directory for better illustration

## Commands

### Including another template

Feel free to use nested templates.

	

		

	

### Adding external data to the template

*Prototyper* uses [mustache](http://mustache.github.io/)'s similar syntax, so you can convert the html templates easily later.

	prototyper.run(

		document.querySelectorAll("body"),

		{

			title: "Prototyper is really simple",

			menu: [

				{ label: "Home", description: "That's the home page"},

				{ label: "About", description: "More inforomation about us"},

				{ label: "Contacts", description: "Click here to find us"}

			]

		}

	)

then in your html

	

		
{{title}}

	


or 

	

		


			
{{menu.label}}

			
{{menu.label}}

			
{{menu.label}}

		

	


### Events

Currently there is only one event to add listener to - *done*.

	Prototyper.on("done", function() {

		// prototyper finishes its job

	});

## Used resources

  [http://www.w3schools.com/dom/dom_nodetype.asp](http://www.w3schools.com/dom/dom_nodetype.asp)

  [https://github.com/padolsey/commentData/blob/master/commentdata.js](https://github.com/padolsey/commentData/blob/master/commentdata.js)

  [http://james.padolsey.com/javascript/metadata-within-html-comments/](http://james.padolsey.com/javascript/metadata-within-html-comments/)