Blueprint placeholder images

Blueprint placeholders is a collection of nearly 750 placeholder images, optimized for the Blueprint CSS grid, useful for quickly prototyping designs.

PNG

v.1.0.0

Zip (4.49 MB)

Zip (2.45 MB)

Zip (2.02 MB)

Features

Most of the images in this collection use the familiar Blueprint class names: span-1 to span-24 (e.g. span-4.gif) and are overlaid with the image's dimensions which makes them quick and easy to use. There are a number of ready-made sets:

Grid

Images to fit every combination of the grid down to 25 rows.

600 images
24 columns x 25 rows

Ratio

Images in both 4:3 (standard) and 16:9 (widescreen) ratios, spanning 1 to 24 columns.

All images are rounded up or down to the nearest pixel.

Ratio grid

Images in both 4:3 (standard) and 16:9 (widescreen) ratios, optimized for the grid.

All images are rounded up or down to the nearest line-height value to fit the grid.

Square

If rectangles aren't your thing then how about squares?

There are two sets: one fits the columns, the other fits the line-height (rows).

Extras

As well as the basic images above you also get images for specific purposes:

Adverts
Amazon banners
Badges
Google maps
Icons (including 12px, 16px, 24px, 32px, 64px, 128px, 256px, 512px)
Vimeo videos
YouTube videos

All images were created using the excellent http://placehold.it/ by Brent and Russell.

Grid

The grid option enables you to use any combination of column (1 to 24) and row (1 to 25) to keep your design true to the Blueprint grid.

The format for grid-based images is simple:

/grid/span-[number of columns]-rows-[number of rows].gif: Rows are measured by line-height (multiples of 18px).

The above are:

/grid/span-11-rows-15.gif
/grid/span-5-rows-4.gif
/grid/span-3-rows-10.gif
/grid/span-2-rows-3.gif
/grid/span-2-rows-6.gif

Ratio

The ratio set gives you either 4:3 (standard ratio) or 16:9 (widescreen ratio) images. These images are designed to perfectly fit the columns of the Blueprint grid. You will notice that the images do not fit the rows of the grid.

The format for ratio-based images is simple:

/ratio/span-[number of columns].gif: Standard (4:3) ratio image.
/ratio/span-[number of columns]-wide.gif: Widescreen (16:9) ratio image.

The above are:

/ratio/span-11.gif
/ratio/span-5-wide.gif
/ratio/span-3.gif
/ratio/span-2.gif
/ratio/span-2-wide.gif

Ratio grid

The ratiogrid set is exactly the same as the ratio set (offering either 4:3 (standard ratio) or 16:9 (widescreen ratio) images) except that these images are now either rounded-up or rounded-down (± 10px) to the nearest line-height value making them fit the grid exactly.

The format for ratio-based images is simple:

/ratiogrid/span-[number of columns].gif: Standard (4:3) ratio image.
/ratiogrid/span-[number of columns]-wide.gif: Widescreen (16:9) ratio image.

The above are:

/ratiogrid/span-11.gif
/ratiogrid/span-5-wide.gif
/ratiogrid/span-3.gif
/ratiogrid/span-2.gif
/ratiogrid/span-2-wide.gif

Square

There are two options for squares: you can fit them to the width of a column or to the height of a line-height row (in multiples of 18px).

The format for square images is simple:

/square/span-[number of columns].gif: Square determined by the width of the columns.
/square/rows-[number of rows].gif: Square determined by the height of the rows.

The above are:

/square/span-11.gif
/square/rows-10.gif
/square/span-3.gif
/square/span-2.gif
/square/rows-3.gif

Extras

There are also a number of extras:

Adverts
Amazon banners
Badges
Google maps
Icons (12px, 16px, 24px, 32px, 64px, 128px, 256px, 512px and iPhone (57px)
Vimeo videos
YouTube videos

Adverts

The Interactive Advertising Bureau (IAB) ad unit guidelines are intended for marketers, agencies and media companies for use in the creating, planning, buying and selling of interactive marketing and advertising. They regularly update agreed standard sizes.

Note: The example images below may not display if you have an ad-blocker extension installed.

This set contains both core and delisted standards. A few from the core set:

The above are:

/extras/adverts/core/microbar.gif
/extras/adverts/core/button2.gif
/extras/adverts/core/rectangle.gif
/extras/adverts/core/mediumrectangle.gif
/extras/adverts/core/halfpagead.gif

Amazon banners

The Amazon Affiliates programme enables you to make money advertising Amazon products (up to 10% in referral fees). Amazon provides a number of ready-made affiliate links and banners.

This set contains the most common, standard Amazon banner sizes, including:

The above are:

/extras/amazon/468x60.gif
/extras/amazon/88x31.gif
/extras/amazon/234x60.gif
/extras/amazon/120x600.gif
/extras/amazon/160x600.gif
/extras/amazon/120x60.gif
/extras/amazon/100x70.gif
/extras/amazon/120x90.gif

Badges

Web badges are often used to promote web standards, software used to create websites, content licenses, etc. This set contains 7 popular sizes: 36 x 13, 80 x 15, 88 x 31, 110 x 32, 120 x 60, 125 x 50 and 180 x 60 pixels.

Google maps

Available at the default embed size (425 x 350) as map (shown below), satellite, terrain or earth.

As I needed these example maps to be of somewhere real I chose St Andrews, which is where I went to university and where I currently work.

Icons

Available in the more common 12 x 12, 16 x 16, 24 x 24, 32 x 32, 48 x 48, 64 x 64, 128 x 128, 256 x 256, 512 x 512 as well as icons for Linux, Mac OS X, Android, iPad and iPhone.

Vimeo

Current default sizes offered by Vimeo: small (400 x 225), medium (640 x 360 pixels).

YouTube

Current default sizes offered by YouTube: 4:3 ratio (425 x 349, 480 x 390, 640 x 510, 960 x 750) and 16:9 ratio (560 x 349, 640 x 390, 853 x 510, 1280 x 750 pixels).

About Blueprint

Blueprint is a CSS framework which aims to cut down on your development time.

It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.

Creative Commons

This work is licenced under a Creative Commons Licence: Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0).

Author

Created by Gareth J M Saunders, Assistant Information Architect / Web Manager at the University of St Andrews, priest, husband, father of 3 boys (twins and a singleton).