Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

first drop

  • Loading branch information...
commit 845dd191a858a134b2450a199a7fd0926cc897ec 1 parent 90b47c1
@ericf authored
Showing with 355 additions and 0 deletions.
  1. +43 −0 annotations.css
  2. +117 −0 base.css
  3. +61 −0 bookmarklet.js
  4. +134 −0 index.html
View
43 annotations.css
@@ -0,0 +1,43 @@
+.yui3-u,
+.yui3-u-1,
+.yui3-u-1-2,
+.yui3-u-1-3,
+.yui3-u-2-3,
+.yui3-u-1-4,
+.yui3-u-3-4,
+.yui3-u-1-5,
+.yui3-u-2-5,
+.yui3-u-3-5,
+.yui3-u-4-5,
+.yui3-u-1-6,
+.yui3-u-5-6,
+.yui3-u-1-8,
+.yui3-u-3-8,
+.yui3-u-5-8,
+.yui3-u-7-8,
+.yui3-u-1-12,
+.yui3-u-5-12,
+.yui3-u-7-12,
+.yui3-u-11-12,
+.yui3-u-1-24,
+.yui3-u-5-24,
+.yui3-u-7-24,
+.yui3-u-11-24,
+.yui3-u-13-24,
+.yui3-u-17-24,
+.yui3-u-19-24,
+.yui3-u-23-24 {
+ outline: 1px solid rgb(123, 0, 153);
+}
+
+.yui3-u-annotated {
+ background: rgba(123, 0, 153, 0.10);
+}
+
+.yui3-u-desc {
+ position: absolute;
+ background: rgba(123, 0, 153, 0.90);
+ color: #fff;
+ text-shadow: 0 -1px rgba(0,0,0,0.5);
+ padding: 0 10px;
+}
View
117 base.css
@@ -0,0 +1,117 @@
+/**
+ * Base Styles
+ */
+
+html { overflow-y: scroll; }
+body { font: 14px/1.5 sans-serif; } /* 14px / 21px */
+
+select, input, button, textarea { font: 99% sans-serif; }
+
+h1 { font-size: 200%; line-height: 1.250; margin: 21px 0; } /* 28px / 35px */
+h2 { font-size: 150%; line-height: 1.3334; margin: 14px 0; } /* 21px / 28px */
+h3 { font-size: 128.6%; line-height: 1.556; margin: 14px 0; } /* 18px / 28px */
+h4 { font-size: 114.3%; line-height: 1.313; margin: 7px 0; } /* 16px / 21px */
+h5 { font-size: 100%; line-height: 1.500; margin: 7px 0; } /* 14px / 21px */
+h6 { font-size: 85.7%; line-height: 1.167; margin: 7px 0; } /* 12px / 14px */
+
+h1, h2, h3, h4, h5, h6 { font-weight: bold; }
+
+fieldset, p, pre, table { margin: 0 0 21px 0; }
+
+blockquote, dl, ol, ul { margin: 21px 20px; }
+
+dl, ol, ul { margin-left: 40px; }
+
+dd { margin: 7px 0 7px 20px; }
+
+li { margin: 7px 0; }
+
+ol li { list-style: decimal outside; }
+ul li { list-style: disc outside; }
+
+small {
+ font-size: 85.7%;
+}
+
+strong { font-weight: bold; }
+
+em { font-style: italic; }
+
+abbr,
+acronym {
+ border-bottom: 1px dotted #000;
+ cursor: help;
+}
+
+th, td {
+ border: 1px solid #000;
+ padding: 5px;
+}
+td, td img { vertical-align: top; }
+th {
+ font-weight: bold;
+ text-align: center;
+}
+caption {
+ margin-bottom: 5px;
+ text-align: center;
+}
+
+sub { vertical-align: sub; font-size: smaller; }
+sup { vertical-align: super; font-size: smaller; }
+
+textarea { overflow: auto; }
+
+input[type="radio"] { vertical-align: text-bottom; }
+input[type="checkbox"] { vertical-align: bottom; }
+.ie7 input[type="checkbox"] { vertical-align: baseline; }
+.ie6 input { vertical-align: text-bottom; }
+
+label,
+input[type=button],
+input[type=submit],
+button {
+ cursor: pointer;
+}
+
+button {
+ width: auto;
+ overflow: visible;
+}
+
+.ie7 img { -ms-interpolation-mode: bicubic; }
+
+.hidden { display: none; visibility: hidden; }
+.visuallyhidden {
+ position: absolute !important;
+ clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+ clip: rect(1px, 1px, 1px, 1px);
+}
+.invisible { visibility: hidden; }
+.ir {
+ display: block;
+ text-indent: -999em;
+ overflow: hidden;
+ background-repeat: no-repeat;
+ text-align: left;
+ direction: ltr;
+}
+
+.clearfix:before, .clearfix:after {
+ content: "\0020"; display: block; height: 0; visibility: hidden;
+}
+.clearfix:after { clear: both; }
+.clearfix { zoom: 1; }
+
+@media print {
+ * { background: transparent !important; color: #000 !important; text-shadow: none !important; }
+ a, a:visited { color: #000 !important; text-decoration: underline; }
+ a:after { content: " (" attr(href) ")"; }
+ abbr:after { content: " (" attr(title) ")"; }
+ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
+ thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
+ tr, img { page-break-inside: avoid; }
+ @page { margin: 0.5cm; }
+ p, h2, h3 { orphans: 3; widows: 3; }
+ h2, h3{ page-break-after: avoid; }
+}
View
61 bookmarklet.js
@@ -0,0 +1,61 @@
+(function(window, document){
+
+/**
+ * LazyLoad — https://github.com/rgrove/lazyload/
+ *
+ * Copyright (c) 2010 Ryan Grove <ryan@wonko.com>
+ * All rights reserved.
+ */
+LazyLoad=function(){function r(c,b){var a=h.createElement(c),e;for(e in b)b.hasOwnProperty(e)&&a.setAttribute(e,b[e]);return a}function k(c){var b=i[c],a,e;if(b){a=b.callback;e=b.urls;e.shift();l=0;if(!e.length){a&&a.call(b.context,b.obj);i[c]=null;j[c].length&&m(c)}}}function w(){if(!d){var c=navigator.userAgent,b=parseFloat,a;d={async:h.createElement("script").async===true,gecko:0,ie:0,opera:0,webkit:0};if((a=c.match(/AppleWebKit\/(\S*)/))&&a[1])d.webkit=b(a[1]);else if((a=c.match(/MSIE\s([^;]*)/))&&
+a[1])d.ie=b(a[1]);else if(/Gecko\/(\S*)/.test(c)){d.gecko=1;if((a=c.match(/rv:([^\s\)]*)/))&&a[1])d.gecko=b(a[1])}else if(a=c.match(/Opera\/(\S*)/))d.opera=b(a[1])}}function m(c,b,a,e,s){var n=function(){k(c)},o=c==="css",f,g,p;w();if(b){b=Object.prototype.toString.call(b)==="[object Array]"?b:[b];if(o||d.gecko&&(d.async||d.gecko<2)||d.opera)j[c].push({urls:[].concat(b),callback:a,obj:e,context:s});else{f=0;for(g=b.length;f<g;++f)j[c].push({urls:[b[f]],callback:f===g-1?a:null,obj:e,context:s})}}if(!(i[c]||
+!(p=i[c]=j[c].shift()))){q=q||h.head||h.getElementsByTagName("head")[0];b=p.urls;f=0;for(g=b.length;f<g;++f){a=b[f];if(o)a=r("link",{charset:"utf-8","class":"lazyload",href:a,rel:"stylesheet",type:"text/css"});else{a=r("script",{charset:"utf-8","class":"lazyload",src:a});if(d.async)a.async=false}if(d.ie)a.onreadystatechange=function(){var t=this.readyState;if(t==="loaded"||t==="complete"){this.onreadystatechange=null;n()}};else if(o&&(d.gecko||d.webkit))if(d.webkit){p.urls[f]=a.href;u()}else setTimeout(n,
+50*g);else a.onload=a.onerror=n;q.appendChild(a)}}}function u(){var c=i.css,b;if(c){for(b=v.length;b&&--b;)if(v[b].href===c.urls[0]){k("css");break}l+=1;if(c)l<200?setTimeout(u,50):k("css")}}var h=document,d,q,i={},l=0,j={css:[],js:[]},v=h.styleSheets;return{css:function(c,b,a,e){m("css",c,b,a,e)},js:function(c,b,a,e){m("js",c,b,a,e)}}}();
+
+LazyLoad.css('http://oddnut.com/yui3-grids-annotations/annotations.css', function(){
+ LazyLoad.js('http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js', init);
+});
+
+function init () {
+ YUI().use('node', 'align-plugin', 'event-hover', 'collection', function(Y){
+
+ var gridUnitClasses = ['yui3-u', 'yui3-u-1', 'yui3-u-1-2', 'yui3-u-1-3', 'yui3-u-2-3', 'yui3-u-1-4', 'yui3-u-3-4', 'yui3-u-1-5', 'yui3-u-2-5', 'yui3-u-3-5', 'yui3-u-4-5', 'yui3-u-1-6', 'yui3-u-5-6', 'yui3-u-1-8', 'yui3-u-3-8', 'yui3-u-5-8', 'yui3-u-7-8', 'yui3-u-1-12', 'yui3-u-5-12', 'yui3-u-7-12', 'yui3-u-11-12', 'yui3-u-1-24', 'yui3-u-5-24', 'yui3-u-7-24', 'yui3-u-11-24', 'yui3-u-13-24', 'yui3-u-17-24', 'yui3-u-19-24', 'yui3-u-23-24'],
+ gridUnitSelector = '.' + gridUnitClasses.join(',.');
+ gridUnitDescNode = Y.Node.create('<div class="yui3-u-desc"></div>');
+
+ gridUnitDescNode.plug(Y.Plugin.Align).hide().appendTo('body');
+
+ Y.one('body').delegate('hover', function(e){
+
+ var gridUnit = e.currentTarget.addClass('yui3-u-annotated'),
+ gridClassName;
+
+ gridClassName = Y.Array.find(gridUnit.get('className').split(' '), function(c){
+ if (Y.Array.indexOf(gridUnitClasses, c) >= 0) {
+ return c;
+ }
+ });
+
+ gridUnitDescNode.set('text', '.' + gridClassName);
+ gridUnitDescNode.show().align.to(gridUnit, 'tr', 'tr', true);
+
+ }, function(e){
+
+ var gridUnit = e.currentTarget;
+
+ function removeAnnotation () {
+ gridUnitDescNode.hide();
+ gridUnit.removeClass('yui3-u-annotated');
+ }
+
+ if (e.relatedTarget === gridUnitDescNode) {
+ gridUnitDescNode.once('mouseleave', removeAnnotation);
+ } else {
+ removeAnnotation();
+ }
+
+ }, gridUnitSelector);
+
+ });
+}
+
+}(window, document));
View
134 index.html
@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+
+<html>
+ <head>
+ <title>YUI 3 CSS Grids Annotations</title>
+ <link rel="stylesheet" href="http://yui.yahooapis.com/combo?3.2.0/build/cssreset/reset-min.css&amp;3.2.0/build/cssfonts/fonts-min.css&amp;3.2.0/build/cssgrids/grids-min.css" />
+ <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Allerta" />
+ <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Just+Another+Hand" />
+ <link rel="stylesheet" href="base.css" />
+ <style>
+
+ /* Elements */
+
+ html { background: #f7f7f7; }
+ body {
+ min-width: 960px;
+ padding: 28px 0;
+ color: #222;
+ text-shadow: 0 1px 1px #fff;
+ font: 18px/1.55556 "Lucida Grande", Helvetica, Arial, sans-serif;
+ }
+
+ h1, h2, h3, h4, h5, h6 {
+ font-family: Allerta, "Helvetica Neue", Helvetica, Arial, sans-serif;
+ color: #222; /* no RGBA */
+ color: rgba(0,0,0, 0.50);
+ text-shadow: 0 1px 1px rgba(255,255,255, 0.15);
+ font-weight: normal;
+ }
+ h3, h4 {
+ color: #222; /* no RGBA */
+ color: rgba(0,0,0, 0.75);
+ text-shadow: 0 1px 1px rgba(255,255,255, 0.25);
+ }
+ h5, h6 {
+ color: #222;
+ text-shadow: 0 1px 1px rgba(255,255,255, 0.50);
+ font-weight: bold;
+ }
+
+ a:link,
+ a:visited,
+ a:hover,
+ a:focus,
+ a:active {
+ color: #7B0099;
+ text-decoration: none;
+ }
+ a:hover,
+ a:focus {
+ text-decoration: underline;
+ }
+
+ /* Classes */
+
+ .container {
+ width: 960px;
+ margin: 0 auto;
+ }
+
+ .section { margin: 0 20px; }
+
+ /* Content */
+
+ #header {}
+ #header h1 em {
+ font: 125%/1.4 normal "Just Another Hand", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ letter-spacing: 2px;
+ }
+
+ #content {
+ padding: 42px 0;
+ }
+
+ #bookmarklet {
+ display: block;
+ width: 280px;
+ margin: 0 auto;
+ padding: 0 10px;
+ -webkit-box-shadow: 0 0 7px rgba(0,0,0,0.4);
+ -moz-box-shadow: 0 0 7px rgba(0,0,0,0.4);
+ box-shadow: 0 0 7px rgba(0,0,0,0.4);
+ background: #7B0099;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ color: #fff;
+ text-shadow: 0 -1px 1px rgba(0,0,0, 0.75);
+ font: 150%/2.0 normal Allerta, "Helvetica Neue", Helvetica, Arial, sans-serif;
+ text-align: center;
+ }
+ #bookmarklet em {
+ font: 125%/1.4 normal "Just Another Hand", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ letter-spacing: 2px;
+ }
+ #bookmarklet:hover {
+
+ text-decoration: none;
+
+ </style>
+ </head>
+
+ <body>
+ <div class="container">
+
+ <div id="header" class="section">
+ <h1><a href="http://developer.yahoo.com/yui/3/cssgrids/">YUI 3 CSS Grids</a> <em>Annotations</em></h1>
+ <p>
+ A <a href="http://en.wikipedia.org/wiki/Bookmarklet">bookmarklet</a> that annotates the grid structure
+ of a web page using <a href="http://developer.yahoo.com/yui/3/cssgrids/">YUI 3 CSS Grids</a>.
+ </p>
+ </div>
+
+ <div id="content" class="section">
+ <a id="bookmarklet" href="javascript:(function(){var d=document,h=d.getElementsByTagName('head')[0]||d.documentElement,s=d.createElement('script');s.setAttribute('src','http://oddnut.com/yui3-grids-annotations/bookmarklet.js');h.appendChild(s);}());" title="Drag to bookmarks bar">
+ <em>Annotate</em> YUI 3 Grids
+ </a>
+ </div>
+
+ </div>
+
+ <script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>
+ <script>
+ YUI().use('node-base', function(Y){
+
+ Y.on('click', function(e){
+ e.preventDefault();
+ alert(this.get('title'));
+ }, '#bookmarklet');
+
+ });
+ </script>
+ </body>
+</html>
Please sign in to comment.
Something went wrong with that request. Please try again.