Styles sheet for rapid prototyping (WebKit only)

prototype.css

/**
 * This is a simple trick to overlay a grid or a mock-up over a page you're styling. 
 * It will also allow you to edit content directly in the browser to see how your layout behaves depending on various lines of text.
 * To use data-uri or gradients in lieu of an image, check: http://www.css-101.org/articles/trick-for-rapid-prototyping/
 */

/**
 * This is to overlay your image (grid.png) over the page. You may want to change the position value (from fixed to absolute) if you use a mock-up rather than a grid like in this demo page: http://www.css-101.org/articles/trick-for-rapid-prototyping/demo.html
 * You can also change the opacity value as you see fit.
 */

body::before {
    content:"";
    position:fixed;
    background:url(grid.png) 50% 0;
    z-index:1;
    top:0;
    right:0;
    bottom:0;
    left:0;
    opacity:.3;
    pointer-events:none;
}

/**
 * This is to let you edit the content of the page (in the browser). 
 * This is why "pointer-events" is used in the rule above, to make sure the overlay does not interfere with mouse events.
 */

* {
    -webkit-user-modify: read-write;
    word-wrap: break-word;
    -webkit-nbsp-mode: space;
    -webkit-line-break: after-white-space;
}

/**
 * This rule will allow you to click on links (rather than editing the text), remove it if you wish.
 */

a {
    -webkit-user-modify: initial;
}