BLUEPRINTER
Blueprint CSS Generator

CREATE FILES

FILES

screen.css - CSS for screen
print.css - CSS for printing
ie.css - some corrections for IE

DOWNLOAD ALL IN A ZIP

CODE

<link rel="stylesheet" href="output/cw15gw20cc24/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="output/cw15gw20cc24/print.css" type="text/css" media="print" /> 
<!--[if lt IE 8]>
	<link rel="stylesheet" href="output/cw15gw20cc24/ie.css" type="text/css" media="screen, projection" />
<![endif]-->

PREVIEW | Show All

span-24 (820px)
 
span-23 (785px)
 
span-22 (750px)
 
span-21 (715px)
 
span-20 (680px)
 
span-19 (645px)
 
span-18 (610px)
 
span-17 (575px)
 
span-16 (540px)
 
span-15 (505px)
 
span-14 (470px)
 
span-13 (435px)
 
span-12 (400px)
 
 
span-11 (365px)
 
span-10 (330px)
 
span-9 (295px)
 
span-8 (260px)
 
 
 
span-7 (225px)
 
span-6 (190px)
 
 
 
 
span-5 (155px)
 
span-4 (120px)
 
 
 
 
 
 
span-3 (85px)
 
 
 
 
 
 
 
 
span-2 (50px)
 
 
 
 
 
 
 
 
 
 
 
 
span-1 (15px)
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

ABOUT

Blueprinter helps you generate Blueprint CSS 1.0 layouts. Thank you to the Blueprint CSS folks for creating an easy way to make CSS layouts. This is just an interface on top of their generator code.

Implemented in PHP, HTML, CSS, and Javascript. Used the jQuery Javascript library. The font for the logo and body is Avenir LT Std Heavy. The layout, of course, is built on top of Blueprint CSS.

© 2025 Ian Li. Licensed under the MIT license.

SHARE