Description

This walkthrough shows the creation of a small wireframing framework which targets elements using attribute selectors and draws sketchy lines on one or more sides using the border-image property.

The border-image property uses a translucent cloud image which is possible to create in most graphic editing programs

If we decide to skip graphic editing programs and directly code wireframes, it opens up new possibilities for exploration such as:

Adding responsive capabilities right from the wireframing stage. Creating wireframes which don't have to be coded again as the HTML and a lot of the CSS regarding the layout is already done. Ability to experiment with CSS3 animations/transitions and user interaction right from the beginning. Massive reusability potential from creating a repository of repeatedly used elements, styles, effects, etc. JS integration from the wireframing stage. Imagine wireframing a parallax website in Photoshop. It just won't work that good. Wireframing in the browser(Just like designing in the browser).

With the web making a big leap towards transitional interfaces, use of CSS3 animations, aniamted SVG, detailed user interaction, etc code driven wireframes could be of great help.