Speed up CSS prototyping

This article was first published on css-101.org (09-01-2011).

This is a simple trick to overlay a grid or a mock-up over a page you’re styling (in WebKit). It will also allow you to edit content directly in the browser to see how your layout behaves depending on various lines of text.

These are the rules to include in the styles sheet you work on:

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;
}
* {
  -webkit-user-modify: read-write;
  word-wrap: break-word;
  -webkit-nbsp-mode: space;
  -webkit-line-break: after-white-space;
}
a {
  -webkit-user-modify: initial;
}

The first rule will overlay your image 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 the demo page. You can also change the opacity value as you see fit.

The second rule will let you edit the content of the page (in the browser). This is why “pointer-events” is used in the first rule, to make sure the overlay does not interfere with mouse events.

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

Check the demo page

Using gradient in lieu of an image

As suggested by Christophe Benoliel Molina, we can replace the png file with gradients:

/**
 * with different color values than the ones suggested
 */
 background-color: rgba(34,102,153,0.5);
 background: -webkit-linear-gradient(skyblue 2px, transparent 2px),
             -webkit-linear-gradient(0, skyblue 2px, transparent 2px),
             -webkit-linear-gradient(skyblue 1px, transparent 1px),
             -webkit-linear-gradient(0, skyblue 1px, transparent 1px);
 background: -moz-linear-gradient(skyblue 1px, transparent 1px),
             -moz-linear-gradient(0pt 50% , skyblue 1px, transparent 1px),
             -moz-linear-gradient(skyblue 1px, transparent 1px),
             -moz-linear-gradient(0pt 50% , skyblue 1px, transparent 1px);
 background: linear-gradient(skyblue 2px, transparent 2px),
             linear-gradient(0, skyblue 2px, transparent 2px),
             linear-gradient(skyblue 1px, transparent 1px),
             linear-gradient(0, skyblue 1px, transparent 1px);
 background-size: 50px 50px,
                  50px 50px,
                  10px 10px,
                  10px 10px ;
 background-position: -2px -2px,
                      -2px -2px,
                      -1px -1px,
                      -1px -1px ;

Using data-uri

As suggested by @Pirhoo, we can replace the png file with a data-uri:

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABLAAAAOEAgMAAADMAyBpAAAAA3NCSVQICAjb4U/gAAAACVBMVEX///9mmcxmmcw+elmfAAAAA3RSTlMAd/+3CsRiAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFnRFWHRDcmVhdGlvbiBUaW1lADA5LzAyLzExT1Br7wAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAs2SURBVHic7duxrV1FGEZR44CAEoiIqcL1uAqXQAkEBOAqcXZe4OBMNHtJ3wRLVzIXbY3+uW+S+fTp0x+fPo+XBBIcAgkOgQSHQIJDIMEhkOAQSHAIJDB833q9Nlk7htusAIEEh0CCQyDBIZDgEEhwCCQw3L4VS2uTtWO4zQoQSHAIJDgEEhwCCQ6BBIdAAsPtW7G0Nlk7htusAIEEh0CCQyDBIZDgEEhwCCQw3L4VS2uTtWO4zQoQSHAIJDgEEhwCCQ7Px1/++/Avv//14b/5+uX5h1//ob7x9cvzDz/+o5//r15+4+Nmff7+4V/+/PtD1vdvzz/89i/1je/fnn/48R/9/H/18hu7wR+sTdbJZO036/039tfwiECCQyDBIZDgEEhwCCQ4BBIYbt+KpbXJ2jHcZgUIJDgEEhwCCQ6BBIdAgkMggeH2rVham6wdw21WgECCQyDBIZDgEEhwCCQ4BBIYbt+KpbXJ2jHcZgUIJDgEEhwCCQ6BBIdAgkMggeH2rVham6wdw21WgECCQyDBIZDgEEhweD4Cb7w6r8KA14N7ycqsTdbJZO036/039tfwiECCQyDBIZDgEEhwCCQ4BBIYbt+KpbXJ2jHcZgUIJDgEEhwCCQ6BBIdAgkMggeH2rVham6wdw21WgECCQyDBIZDgEEhwCCQ4BBIYbt+KpbXJ2jHcZgUIJDgEEhwCCQ6BBIdAgkMggeH2rVham6wdw21WgECCQyDBIZDgEEhweD4Cb7w6r8KA14N7ycqsTdbJZO036/039tfwiECCQyDBIZDgEEhwCCQ4BBIYbt+KpbXJ2jHcZgUIJDgEEhwCCQ6BBIdAgkMggeH2rVham6wdw21WgECCQyDBIZDgEEhwCCQ4BBIYbt+KpbXJ2jHcZgUIJDgEEhwCCQ6BBIdAgkMggeH2rVham6wdw21WgECCQyDBIZDgEEhweD4Cb7w6r8KA14N7ycqsTdbJZO036/039tfwiECCQyDBIZDgEEhwCCQ4BBIYbt+KpbXJ2jHcZgUIJDgEEhwCCQ6BBIdAgkMggeH2rVham6wdw21WgECCQyDBIZDgEEhwCCQ4BBIYbt+KpbXJ2jHcZgUIJDgEEhwCCQ6BBIdAgkMggeH2rVham6wdw21WgECCQyDBIZDgEEhweD4Cb7w6r8KA14N7ycqsTdbJZO036/039tfwiECCQyDBIZDgEEhwCCQ4BBIYbt+KpbXJ2jHcZgUIJDgEEhwCCQ6BBIdAgkMggeH2rVham6wdw21WgECCQyDBIZDgEEhwCCQ4BBIYbt+KpbXJ2jHcZgUIJDgEEhwCCQ6BBIdAgkMggeH2rVham6wdw21WgECCQyDBIZDgEEhweD4Cb7w6r8KA14N7ycqsTdbJZO036/039tfwiECCQyDBIZDgEEhwCCQ4BBIYbt+KpbXJ2jHcZgUIJDgEEhwCCQ6BBIdAgkMggeH2rVham6wdw21WgECCQyDBIZDgEEhwCCQ4BBIYbt+KpbXJ2jHcZgUIJDgEEhwCCQ6BBIdAgkMggeH2rVham6wdw21WgECCQyDBIZDgEEhweD4Cb7w6r8KA14N7ycqsTdbJZO036/039tfwiECCQyDBIZDgEEhwCCQ4BBIYbt+KpbXJ2jHcZgUIJDgEEhwCCQ6BBIdAgkMggeH2rVham6wdw21WgECCQyDBIZDgEEhwCCQ4BBIYbt+KpbXJ2jHcZgUIJDgEEhwCCQ6BBIdAgkMggeH2rVham6wdw21WgECCQyDBIZDgEEhweD4Cb7w6r8KA14N7ycqsTdbJZO036/039tfwiECCQyDBIZDgEEhwCCQ4BBIYbt+KpbXJ2jHcZgUIJDgEEhwCCQ6BBIdAgkMggeH2rVham6wdw21WgECCQyDBIZDgEEhwCCQ4BBIYbt+KpbXJ2jHcZgUIJDgEEhwCCQ6BBIdAgkMggeH2rVham6wdw21WgECCQyDBIZDgEEhweD4Cb7w6r8KA14N7ycqsTdbJZO036/039tfwiECCQyDBIZDgEEhwCCQ4BBIYbt+KpbXJ2jHcZgUIJDgEEhwCCQ6BBIdAgkMggeH2rVham6wdw21WgECCQyDBIZDgEEhwCCQ4BBIYbt+KpbXJ2jHcZgUIJDgEEhwCCQ6BBIdAgkMggeH2rVham6wdw21WgECCQyDBIZDgEEhweD4Cb7w6r8KA14N7ycqsTdbJZO036/039tfwiECCQyDBIZDgEEhwCCQ4BBIYbt+KpbXJ2jHcZgUIJDgEEhwCCQ6BBIdAgkMggeH2rVham6wdw21WgECCQyDBIZDgEEhwCCQ4BBIYbt+KpbXJ2jHcZgUIJDgEEhwCCQ6BBIdAgkMggeH2rVham6wdw21WgECCQyDBIZDgEEhweD4Cb7w6r8KA14N7ycqsTdbJZO036/039tfwiECCQyDBIZDgEEhwCCQ4BBIYbt+KpbXJ2jHcZgUIJDgEEhwCCQ6BBIdAgkMggeH2rVham6wdw21WgECCQyDBIZDgEEhwCCQ4BBIYbt+KpbXJ2jHcZgUIJDgEEhwCCQ6BBIdAgkMggeH2rVham6wdw21WgECCQyDBIZDgEEhweD4Cb7w6r8KA14N7ycqsTdbJZO036/039tfwiECCQyDBIZDgEEhwCCQ4BBIYbt+KpbXJ2jHcZgUIJDgEEhwCCQ6BBIdAgkMggeH2rVham6wdw21WgECCQyDBIZDgEEhwCCQ4BBIYbt+KpbXJ2jHcZgUIJDgEEhwCCQ6BBIdAgkMggeH2rVham6wdw21WgECCQyDBIZDgEEhweD4Cb7w6r8KA14N7ycqsTdbJZO036/039tfwiECCQyDBIZDgEEhwCCQ4BBIYbt+KpbXJ2jHcZgUIJDgEEhwCCQ6BBIdAgkMggeH2rVham6wdw21WgECCQyDBIZDgEEhwCCQ4BBIYbt+KpbXJ2jHcZgUIJDgEEhwCCQ6BBIdAgkMggeH2rVham6wdw21WgECCQyDBIZDgEEhweD4Cb7w6r8KA14N7ycqsTdbJZO036/039tfwiECCQyDBIZDgEEhwCCQ4BBIYbt+KpbXJ2jHcZgUIJDgEEhwCCQ6BBIdAgkMggeH2rVham6wdw21WgECCQyDBIZDgEEhwCCQ4BBIYbt+KpbXJ2jHcZgUIJDgEEhwCCQ6BBIdAgkMggeH2rVham6wdw21WgECCQyDBIZDgEEhweD4Cb7w6r8KA14N7ycqsTdbJZO036/039tfwiECCQyDBIZDgEEhwCCQ4BBIYbt+KpbXJ2jHcZgUIJDgEEhwCCQ6BBIdAgkMggeH2rVham6wdw21WgECCQyDBIZDgEEhwCCQ4BBIYbt+KpbXJ2jHcZgUIJDgEEhwCCQ6BBIdAgkMggeH2rVham6wdw21WgECCQyDBIZDgEEhweD4Cb7w6r8KA14N7ycqsTdbJZO036/039tfwiECCQyDBIZDgEEhwCCQ4BBIYbt+KpbXJ2jHcZgUIJDgEEhwCCQ6BBIdAgkMggeH2rVham6wdw21WgECCQyDBIZDgEEhwCCQ4BBIYbt+KpbXJ2jHcZgUIJDgEEhwCCQ6BBIdAgkMggeH2rVham6wdw21WgECCQyDBIZDgEEhweD4Cb7w6r8KA14N7ycqsTdbJZO036/039tfwiECCQyDBIZDgEEhwCCQ4BBIYbt+KpbXJ2jHcZgUIJDgEEhwCCQ6BBIdAgkMggeH2rVham6wdw21WgECCQyDBIZDgEEhwCCQ4BBIYbt+KpbXJ2jHcZgUIJDgEEhwCCQ6BBIdAgkMggeH2rVham6wdw21WgECCQyDBIZDgEEhweD4Cb7w6r8KA14N7ycqs/wGT4JQikEiMEwAAAABJRU5ErkJggg%3D%3D) 50% 0;

Bookmarklet/Add-on

@webxl has created a CSS prototyping bookmarklet.

@ianleckey has created CSS Protoyper

Feel free to download and use grid.png.

Share