Permalink
Browse files

link to chrome extension

  • Loading branch information...
1 parent 2c72338 commit 0e02dfae4afe944e18ba3ed7ce32b821beec4e0b @cantino committed Aug 7, 2013
Showing with 50 additions and 31 deletions.
  1. BIN doc/128x128.png
  2. +50 −31 doc/index.html
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -2,54 +2,69 @@
<head>
<title>SelectorGadget: point and click CSS selectors</title>
<style>
- body{
- background-color:#888;
- padding:0;
- margin:0;
+ body {
+ background-color: #888;
+ padding: 0;
+ margin: 0;
}
- h1{
- padding:0;
- margin:0;
- margin-bottom: 10px;
+ h1 {
+ padding: 0;
+ margin: 10px 5px;
+ font-size: 36px;
}
- .container{
- background-color:#FFF;
- padding:15px;
- width:700px;
- margin:10px auto;
+
+ .container {
+ background-color: #FFF;
+ padding: 15px;
+ width: 700px;
+ margin: 10px auto;
}
- .block{
- margin-top:20px;
+
+ .block {
+ margin-top: 20px;
}
- .block ul{
- margin:0px;
- padding:5px 5px 5px 17px;
+
+ .block ul {
+ margin: 0px;
+ padding: 5px 5px 5px 17px;
list-style-type: square;
}
- .bookmarklet{
- margin-top:20px;
- font-size:1.5em;
+
+ .bookmarklet {
+ margin-top: 20px;
+ font-size: 1.5em;
}
- .bookmarklet_edge{
- margin-top:5px;
- font-size:1.1em;
+
+ .bookmarklet_edge {
+ margin-top: 5px;
+ font-size: 1.1em;
}
- .comments{
- margin-top:60px;
+
+ .comments {
+ margin-top: 60px;
+ }
+
+ .logo {
+ float: right;
+ padding: 0;
+ margin: 0px 0px;
+ position: relative;
+ top: -15px;
}
</style>
<link href="https://github.com/feeds/cantino/commits/selectorgadget/master" rel="alternate" title="Recent Commits to selectorgadget:master" type="application/atom+xml" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
</head>
<body>
<div class="container">
- <h1>SelectorGadget: point and click CSS selectors</h1>
+ <img src='128x128.png' class='logo' />
+ <h1>SelectorGadget:<br />point and click CSS selectors</h1>
<iframe src="http://player.vimeo.com/video/52055686?badge=0" width="700" height="637" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> <p><a href="http://vimeo.com/52055686">SelectorGadget Screencast</a> from <a href="http://vimeo.com/user14268258">Andrew Cantino</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
<div class='block'>
- SelectorGadget is an open source tool that makes <a href="http://www.w3.org/TR/CSS2/selector.html">CSS selector</a> generation and discovery on complicated sites a breeze. Just drag the bookmarklet to your bookmark bar, then go to any page and press it. A box will open in the bottom right of the website. Click on a page element that you would like your selector to match (it will turn green). SelectorGadget will then generate a minimal CSS selector for that element, and will highlight (yellow) everything that is matched by the selector. Now click on a highlighted element to remove it from the selector (red), or click on an unhighlighted element to add it to the selector. Through this process of selection and rejection, SelectorGadget helps you come up with the perfect CSS selector for your needs.
+ SelectorGadget is an open source tool that makes <a href="http://www.w3.org/TR/CSS2/selector.html">CSS selector</a> generation and discovery on complicated sites a breeze. Just install the <a href="https://chrome.google.com/webstore/detail/selectorgadget/mhjhnkcfbdhnjickkkdbjoemdmbfginb" target="_blank">Chrome Extension</a> or drag the bookmarklet to your bookmark bar, then go to any page and launch it. A box will open in the bottom right of the website. Click on a page element that you would like your selector to match (it will turn green). SelectorGadget will then generate a minimal CSS selector for that element, and will highlight (yellow) everything that is matched by the selector. Now click on a highlighted element to remove it from the selector (red), or click on an unhighlighted element to add it to the selector. Through this process of selection and rejection, SelectorGadget helps you come up with the perfect CSS selector for your needs.
</div>
<div class='block'>
@@ -59,20 +74,24 @@
<li>to generate <a href="http://jquery.com/">jQuery</a> selectors for dynamic sites</li>
<li>as a tool to examine JavaScript-generated DOM structures</li>
<li>as a tool to help you style only particular elements on the page with your stylesheets</li>
- <li>for selenium testing</li>
+ <li>for selenium or phantomjs testing</li>
</ul>
</div>
<div class='block created_by'>
Created by <a href="http://andrewcantino.com">Andrew Cantino</a> and <a href="http://kylemaxwell.com">Kyle Maxwell</a>. You can find the <a href="https://github.com/cantino/selectorgadget">current version on GitHub</a>, and please feel free to leave comments below.
</div>
+
+ <div class='bookmarklet'>
+ Try our new <a href="https://chrome.google.com/webstore/detail/selectorgadget/mhjhnkcfbdhnjickkkdbjoemdmbfginb">Chrome Extension</a>!
+ </div>
<div class='bookmarklet'>
- Drag this link to your bookmark bar: <a href="javascript:(function(){var%20s=document.createElement('div');s.innerHTML='Loading...';s.style.color='black';s.style.padding='20px';s.style.position='fixed';s.style.zIndex='9999';s.style.fontSize='3.0em';s.style.border='2px%20solid%20black';s.style.right='40px';s.style.top='40px';s.setAttribute('class','selector_gadget_loading');s.style.background='white';document.body.appendChild(s);s=document.createElement('script');s.setAttribute('type','text/javascript');s.setAttribute('src','https://dv0akt2986vzh.cloudfront.net/unstable/lib/selectorgadget.js');document.body.appendChild(s);})();">SelectorGadget</a> (<span style='color: red;'>updated June 2, 2013</span>)
+ Or drag this link to your bookmark bar: <a href="javascript:(function(){var%20s=document.createElement('div');s.innerHTML='Loading...';s.style.color='black';s.style.padding='20px';s.style.position='fixed';s.style.zIndex='9999';s.style.fontSize='3.0em';s.style.border='2px%20solid%20black';s.style.right='40px';s.style.top='40px';s.setAttribute('class','selector_gadget_loading');s.style.background='white';document.body.appendChild(s);s=document.createElement('script');s.setAttribute('type','text/javascript');s.setAttribute('src','https://dv0akt2986vzh.cloudfront.net/unstable/lib/selectorgadget.js');document.body.appendChild(s);})();">SelectorGadget</a> (<span style='color: red;'>updated August 7, 2013</span>)
</div>
<div class='bookmarklet_edge'>
- Or use the development version: <a href="javascript:(function(){var%20s=document.createElement('div');s.innerHTML='Loading...';s.style.color='black';s.style.padding='20px';s.style.position='fixed';s.style.zIndex='9999';s.style.fontSize='3.0em';s.style.border='2px%20solid%20black';s.style.right='40px';s.style.top='40px';s.setAttribute('class','selector_gadget_loading');s.style.background='white';document.body.appendChild(s);s=document.createElement('script');s.setAttribute('type','text/javascript');s.setAttribute('src','https://dv0akt2986vzh.cloudfront.net/unstable/lib/selectorgadget_edge.js');document.body.appendChild(s);})();">SelectorGadget Unstable</a> (<span style='color: red;'>updated June 15, 2013</span>)
+ Or use the development version: <a href="javascript:(function(){var%20s=document.createElement('div');s.innerHTML='Loading...';s.style.color='black';s.style.padding='20px';s.style.position='fixed';s.style.zIndex='9999';s.style.fontSize='3.0em';s.style.border='2px%20solid%20black';s.style.right='40px';s.style.top='40px';s.setAttribute('class','selector_gadget_loading');s.style.background='white';document.body.appendChild(s);s=document.createElement('script');s.setAttribute('type','text/javascript');s.setAttribute('src','https://dv0akt2986vzh.cloudfront.net/unstable/lib/selectorgadget_edge.js');document.body.appendChild(s);})();">SelectorGadget Unstable</a> (<span style='color: red;'>updated August 7, 2013</span>)
</div>
<div class='comments'>

0 comments on commit 0e02dfa

Please sign in to comment.