jQuery & CSS Photoshop-like Rulers

Auto generated rulers, fully customizable and styleable with jQuery and CSS counter-increment.

HTML

<div class="window"></div>

CSS

body, html {
    width:100%;
    height:100%;
    font-family:sans-serif;
}
.window {
    width:100%;
    height:100%;
    background:#ccc;
    padding:20px 0 0 20px;
    box-sizing:border-box;
}
.ruler-corner {
    width:19px;
    height:19px;
    background:#44474d;
    position:absolute;
    top:0;
    left:0;
    border-right:1px solid #778098;
    border-bottom:1px solid #778098;
}
.rulerH {
    position:absolute;
    top:0;
    left:0px;
    height:20px;
    width:calc(100% - 20px);
    background:#44474d;
    overflow:hidden;
    counter-reset: hnumbers -100;
}
.minorUnitsH, .mediumUnitsH, .majorUnitsH {
    white-space:nowrap;
    position:absolute;
    width:100%;
    bottom:0;
    left:0;
    line-height: 0;
}
.minorUnitsH div {
    display:inline-block;
    border-right:1px solid #778098;
    height:3px;
}
.mediumUnitsH div {
    display:inline-block;
    border-right:1px solid #778098;
    height:6px;
}

.majorUnitsH div {
    display:inline-block;
    border-right:1px solid #778098;
    height:20px;
    position:relative;
}
.majorUnitsH div:before {
    counter-increment: hnumbers 100;               /* Increment the section counter*/
    content: counter(hnumbers);
    color:#778098;
    font-size:11px;
    font-weight:bold;
    line-height:1em;
    position:absolute;
    top:1px;
    left:1px;
}

.rulerV {
    position:absolute;
    top:20px;
    left:0;
    height:calc(100% - 20px);
    width:20px;
    background:#44474d;
    overflow:hidden;
    counter-reset: vnumbers -100;
}
.minorUnitsV, .mediumUnitsV, .majorUnitsV {
    position:absolute;
    width:100%;
    top:0;
    right:0;
    line-height: 0;
    text-align:right;
}
.minorUnitsV {width:3px;}
.minorUnitsV div {
    display:block;
    border-bottom:1px solid #778098;
    width:3px;
}
.mediumUnitsV {width:6px;}
.mediumUnitsV div {
    display:block;
    border-bottom:1px solid #778098;
    width:6px;
}
.majorUnitsV {width:20px;}
.majorUnitsV div {
    display:block;
    border-bottom:1px...

JavaScript

$('.window').append('<div class="rulerH"><div class="minorUnitsH"></div><div class="mediumUnitsH"></div><div class="majorUnitsH"></div></div><div class="rulerV"><div class="minorUnitsV"></div><div class="mediumUnitsV"></div><div class="majorUnitsV"></div></div><div class="ruler-corner"></div>');

function updateRulers(){
    var windowWidth = $('.window').width(),
        windowHeight = $('.window').height(),
        minorUnitsH = 5,
        mediumUnitsH = 10,
        majorUnitsH = 100,
        minorUnitsV = 5,
        mediumUnitsV = 10,
        majorUnitsV = 100;
    
    for(var i = 0; i < windowWidth/minorUnitsH; i++) {$('.minorUnitsH').append('<div></div');}
    for(var i = 0; i < windowWidth/mediumUnitsH; i++) {$('.mediumUnitsH').append('<div></div');}    
    for(var i = 0; i < windowWidth/majorUnitsH; i++) {$('.majorUnitsH').append('<div></div');}    
    for(var i = 0; i < windowHeight/minorUnitsV; i++) {$('.minorUnitsV').append('<div></div');}
    for(var i = 0; i < windowHeight/mediumUnitsV; i++) {$('.mediumUnitsV').append('<div></div');}    
    for(var i = 0; i < windowHeight/majorUnitsV; i++) {$('.majorUnitsV').append('<div></div');}
    $('.minorUnitsH div').css('width', (minorUnitsH - 1) + 'px');
    $('.mediumUnitsH div').css('width', (mediumUnitsH - 1) + 'px');
    $('.majorUnitsH div').css('width', (majorUnitsH - 1) + 'px');
    $('.minorUnitsV div').css('height', (minorUnitsV - 1) + 'px');
    $('.mediumUnitsV div').css('height', (mediumUnitsV - 1) + 'px');
    $('.majorUnitsV div').css('height', (majorUnitsV - 1) + 'px');
}

updateRulers();

(function($,sr){

  // debouncing function from John Hann
  // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
  var debounce = function (func, threshold, execAsap) {
      var timeout;

      return function debounced () {
          var obj = this, args = arguments;
          function delayed () {
              if (!execAsap)
                  func.apply(obj, args);
           ...