ttscoff/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This is an example command for Backtick. A Backtick command consists of some executable JavaScript and a bit of metadata in JSON.
Here are the required steps to create a command:


Create a new Gist with a command.js and command.json file, or simply fork this one.


Write your JavaScript in command.js. This will be injected into and executed on the page the user is currently on when they run it.


Add some metadata to the command.json file:


name: The name of the command.
description: A short description about what the command does.
icon (optional): A link to a 60x60 PNG icon.
link (optional): A link to a related home page.


Copy the ID of your Gist from the URL. (The ID of this example command is 6859173)


Paste the ID into the custom commands field in the Backtick settings. You can easily access the settings by clicking the Backtick icon on the command execution console.


You can suggest to add one of your own commands to the list of predefined commands that are included with Backtick, just contact me on Twitter (@JoelBesada) with a link to your command Gist.

  
## command.js
((function() {
	var d = document;
	d.write('<!DOCTYPE html><html><head><meta charset="UTF-8"><title>' + d.title + ' - Responsive test</title><link rel="stylesheet" href="http://responsive.victorcoulon.fr/assets/css/app.css"><script src="http://responsive.victorcoulon.fr/assets/js/app.min.js"></script></head><body><header><div class="close"><a href="#">×</a></div><div id="size"></div><div class="keyboard"><a href="#">I</a></div><div class="cssrefresh"><a href="#">I</a></div><div id="devices"><a href="#" class="tablet-portrait"><span>Tablet Portrait</span></a><a href="#" class="tablet-landscape"><span>Tablet Landscape</span></a><a href="#" class="smartphone-landscape"><span>iPhone Landscape</span></a><a href="#" class="smartphone-portrait"><span>iPhone Portrait</span></a><a href="#" class="auto active"><span>Auto</span></a></div></header><section><div id="wrapper"><iframe src="' + d.URL + '" onLoad="resbook.changeUrl(this.contentWindow.location,this.contentDocument.title);"></iframe><span class="keyboard-bg"></span></div></section></body></html>')
})());

## command.json
{
  "name": "RWD Bookmarklet",
  "description": "Responsive Web Design Bookmarklet by Victor Coulon.",
  "icon": "http://assets.brettterpstra.com/bt-icon.png",
  "link": "http://responsive.victorcoulon.fr/"
}
	((function() {
	var d = document;
	d.write('<!DOCTYPE html><html><head><meta charset="UTF-8"><title>' + d.title + ' - Responsive test</title><link rel="stylesheet" href="http://responsive.victorcoulon.fr/assets/css/app.css"><script src="http://responsive.victorcoulon.fr/assets/js/app.min.js"></script></head><body><header><div class="close"><a href="#">×</a></div><div id="size"></div><div class="keyboard"><a href="#">I</a></div><div class="cssrefresh"><a href="#">I</a></div><div id="devices"><a href="#" class="tablet-portrait"><span>Tablet Portrait</span></a><a href="#" class="tablet-landscape"><span>Tablet Landscape</span></a><a href="#" class="smartphone-landscape"><span>iPhone Landscape</span></a><a href="#" class="smartphone-portrait"><span>iPhone Portrait</span></a><a href="#" class="auto active"><span>Auto</span></a></div></header><section><div id="wrapper"><iframe src="' + d.URL + '" onLoad="resbook.changeUrl(this.contentWindow.location,this.contentDocument.title);"></iframe><span class="keyboard-bg"></span></div></section></body></html>')
	})());
	{
	"name": "RWD Bookmarklet",
	"description": "Responsive Web Design Bookmarklet by Victor Coulon.",
	"icon": "http://assets.brettterpstra.com/bt-icon.png",
	"link": "http://responsive.victorcoulon.fr/"
	}