The wireframe stencils are now being maintained at Konigi. Please download them there.
Last updated: 12 March 2008
I created an Adobe Photoshop template for creating comps that work with Olav Bjorkoy's Blueprint CSS Framework.
The Photoshop template is simply a document with vertical guides based on the 24 units provided by Blueprint. A layer is provided to show unit numbers if you like, and 2 layers showing the grid dividing into thirds and quarters (thanks to Phil for that). Additionally there is a page wireframe included to demonstrate the template's use. Enjoy!
See also the Illustrator Template for Blueprint
Comments
09/14/07 @ 17:37
Thanks, I was going to make one of those this weekend, but now I'll do more work on my sites instead!
09/18/07 @ 16:58
Thanks, this is useful!
09/19/07 @ 07:21
Thx a lot!
09/19/07 @ 11:32
Cool. Thanks.
09/29/07 @ 07:26
Awesome! Thanks!
10/03/07 @ 23:22
Perfect!,
But how do i use this?
I mean the grid is smaller than a normal 1000x768 site.
and my site is generally always in the middle horizontal and middle vertical
so how do i use this grid?
Can anyone please tell me.
my email address: info@hairandbeautycareers.com.au
Ben
10/04/07 @ 14:10
Ben, this is made to work within the constraints of blueprint, so I would suggest first looking at the blueprint site to see if it suits your needs.
10/15/07 @ 11:09
Thanks for this! you really saved my day. I am starting my first design with blueprint css, lets see how it works for me in the real world!
Ben: I also often use centering sites but you can still use this. Just design your site as if it was not floating. Then when you are done with the html/css part center the whole site with an encapsulating div.
Also the css blueprint can be adjusted for the width you want to use but i suggest you save yourself the trouble and just ditch 50px
12/09/07 @ 06:03
Well, this was useful. Thanks! =)
12/12/07 @ 09:44
So generous of you.I'm about to start developing my first wordpress theme from scratch with the help of blueprint and this will definitely come in handy. Thanks a million.
03/13/08 @ 07:47
Thankyou, this will be useful, and save some time and are much appreciated.
04/11/08 @ 22:12
Thanks, is a great template. That help me very much.
04/19/08 @ 08:26
Thanks! - I was just about to make one of these in Photoshop, and now I don't have to!
I've only just started using Blueprint with Drupal - rather than the Zen base templates, and I don't care that it's not 100% semantic.
Now I just need something to automate converting the photoshop styles to CSS.
04/28/08 @ 05:01
Really good idea !
Thanks !
06/18/08 @ 21:57
Cheers, this is a big help :)
06/24/08 @ 01:08
Thanks. Very helpful!
07/01/08 @ 13:21
How do your remove the wireframe in photoshop?
Thanks,
- Kevin
07/02/08 @ 06:27
You need to view layers and then simply hide the layer labeled "comp exanmple." You can remove every layer, e.g. divisions, unit numbers and lines, and just turn on guides.
07/07/08 @ 17:43
Rad! Thanks!
Hey anyone know of recent blueprint tutorials available, it's the July 7th now?
08/25/08 @ 10:27
Thank you for sharing this template. This is going to be very helpful.
08/26/08 @ 05:35
Awesome!
09/14/08 @ 12:41
wow! This is gonna be super useful.
Thanks a lot for putting this together!
09/23/08 @ 16:02
thank you so much! super generous and will save me a lot of time.
09/24/08 @ 06:23
can you explain me how to use this grid in website designing.
09/24/08 @ 08:03
@comment 24: You would use this photoshop template to lay out your page, then head over to the blueprint site to get the CSS that corresponds to this grid.
http://code.google.com/p/blueprintcss/
10/03/08 @ 07:07
Well done - Congratulations!
10/21/08 @ 09:27
THANKS!!!!!!!!!!
01/03/09 @ 17:31
This is great, thanks a lot!
01/13/09 @ 19:49
Thank you!
02/18/09 @ 14:56
Thanks a lot! But why are the lines double - I mean horizontally there are always two lines laying on each other. Does this have a reason?
02/18/09 @ 15:16
@Nicole@Younic: The double lines are to mark gutters. This will be clear if you use Blueprint.
02/25/09 @ 13:20
Saved my ass a lot more than u can imagine
03/18/09 @ 11:15
Can there be an Adobe Fireworks template please?? I rather use that for mocking up sites. Cheers!
05/22/09 @ 10:22
Thanks alot! This will save me alot of time!
Thanks again!
Anton
Post new comment