Usage

First of all: this little toolset aims not be a framework - so don't expect a set classes with cryptic names and streamlined prefixes. In contrary, it keeps your wireframe's logic to you. And since the wireframe phase is just one step in a greater concept and will never meet the public's eye, there's no need to make it complicated. Unless you really want to.

Include blueprint wireframe css

				
<link rel="stylesheet" href="css/blueprint-wireframes/blueprint-wireframes.css">
				
			

Outline your containers

In the sense of simplicity, blueprint wireframes does not force you to use any naming convention, layout system or doctype. If you want to outline a container, just add the class "has-border". For example:

				
<div class="teaser-1 has-border"> ... </div>
				
			

Apply container modifiers

Although sketching your design in a very abstract way, you sometimes have to put an emphasis on certain elements, such as logos, navigations or hero images. Out of the box, blueprint wireframes offers these styles:

.is-shaded (e.g. for images)

In the demo, this container modifier style is used for the big header image. If prefered, you can use the shaded style as a generic style for images. Code example:

				
<header class="header-main has-border is-shaded"> ... </header>
				
			

.is-highlighted (e.g. for logos)

But sometimes you have to emphasize elements even more. Use the following class to make a container (e.g. a logo) really stand out of your design:

				
<div class="logo is-highlighted"> ... </div>
				
			

.is-text-simulation

This question happens more often than you might expect - "Why is there latin text in this wireframe?". To prevent that, set you dummy text in a real abstract typeface, for example Christian Naths' awesome Redacted Font by applying:

				
<p class="is-text-simulation">Lorem ipsum dolor sit amet,... </p>
				
			

References

Since blueprint wireframes are heavily inspired by Stephen Hays content reference wireframes the toolkit's demo comes with numbered instead of labeled containers (and of course a legend explaining these). You don't have to follow that route, but if you do, feel free to use .reference-no:

				
<span class="reference-no">5</span>
				
			

Welcome messages

Sometimes it happens that you write a mail to your customer, explaining the necessary bits of your approach and add a link to a blueprint wireframe. But then this the customer only clicks on the link and skips your explaining text. For this case, you can start with a welcome modal window, which can by applied by

				
<body onload="$('.hint-welcome').trigger('openModal');">
				
			

Idea

The idea of bluprint wireframes is based on Stephen Hays' concept of content reference wireframes (from Responsive Design Workflow") and some sightings on Dribbble. Also, you can use modern layout techniques such as CSS flexbox to accelerate wireframe creation even more, following the philosophy of Sean Fioritto's Sketching with CSS.

KISS: coding style

Keep in mind that this is non-production, throwaway code. That's why this toolkit avoids on purpose:

…and almost any other best practice action I usually take when coding a website. Blueprint wireframes are meant to transport an idea or concept, not to pass every code review there is. Use some common sense, though.

Credits

Contact me

Quirky idea? Has been done before? Found some bugs? Want to contribute? Contact me at twitter: @_marcusherrmann or via eMail: mail@marcus-herrmann.com.