First of all: this little toolset aims not be a framework - so don't expect a set of classes with cryptic names and streamlined prefixes. In contrary, it lets you decide how you build your wireframes. And since 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 do 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 emphasise individual 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)

Sometimes you have to emphasise elements even more. Use the following class to highlight a container (e.g. a logo):

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


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>


Since blueprint wireframes are heavily inspired by Stephen Hays content reference wireframes the toolkit's demo comes with numbered instead of labelled 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 be applied by using:

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


The idea of blueprint 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.


Contact me

Quirky idea? Has been done before? Found some bugs? Want to contribute? Contact me at twitter: @_marcusherrmann or via eMail: