The following is related to the grey boxes layout discussion we had earlier, but I think it's just a coincidence... unless the author is also lurking on the CSS-D list :)
---------- Forwarded message ---------- Date: Wed, Jul 6, 2011 at 5:47 AM Subject: [BP #4602] Blueprint placeholder images To: Blueprint CSS <[email protected]> I pushed this resource live today. It's something that I've been using and working on for the last couple of months. Blueprint placeholders is a collection of nearly 750 placeholder images, optimized for the Blueprint CSS grid, useful for quickly prototyping designs. http://www.garethjmsaunders.co.uk/blueprint/placeholders/ I created it for myself and my colleagues at the University of St Andrews (www.st-andrews.ac.uk)—which is using an adapted Blueprint CSS framework—as we now tend to sketch all our design ideas in code rather than in a graphics application, such as Photoshop or Fireworks. After all, nothing looks more like a web page than a web page! Trouble was when it came to dropping in images we obviously wanted them to fit the horizontal and vertical rhythm of the grid and I was fed up of having to look up the dimensions on my Blueprint cheatsheet and manually create a placeholder image only to have us change it 5 minutes later. So I used the excellent http://placehold.it/ to create a collection of images that fits every combination of the grid down to 25 rows, e.g. /grid/span-5-rows-3.gif /grid/span-12-rows-8.png You'll see that they even use the familiar Blueprint class names, and are available in both GIF and PNG formats. Each comes with a cheatsheet in both PDF and Excel (.xls ans .xlsx). As well as the grid-specific ones, I also created 4:3 and 16:9 images that fit the columns but not the line-height, e.g. /ratio/span-5.png (4:3 ratio) /ratio/span-5-wide.png (16:9 ratio) Then, because we've needed to use something similar I also have 'almost' 4:3 and 16:9 which have been rounded-up or rounded-down to fit the grid (+/- 10 pixels), e.g. /ratiogrid/span-5.png (almost 4:3 ratio) /ratiogrid/span-5-wide.png (almost 16:9 ratio) And squares, which fit both columns and rows, e.g. /squares/span-6.png (width and height are same as span-6 column) /squares/rows-6.png (width and height are same as 6 x line-height) Lastly, I've got a collection of extras: Interactive Advertising Bureau (IAB) adverts, Amazon banners, badges, Google maps, icons, Vimeo and YouTube video placeholders. Mostly just stuff that I've needed to use in the past for projects. (Note that if you have an ad-blocker extension installed you may not see the advert placeholders on my site! That had me puzzling for about 15 minutes why I could see them on my local dev environment but not live on my web server!) I've released it with a Creative Commons license (http:// creativecommons.org/licenses/by-sa/3.0/), so feel free to use it and adapt it as required. I've added a link to the Blueprint wiki tools and resources page, and you can find links to all my Blueprint-related extras here: http://www.garethjmsaunders.co.uk/blueprint/placeholders/ I hope someone finds this as useful as we have. Sincerely, Gareth ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
