Blueprint CSS Template for Expression Design

23 Jul 2008 by Carl Camera

In preparing for my own design work, I created an Expression Design template for myself based on the Blueprint CSS framework.

There are utilities to customize the Blueprint grid to any number of columns of any width, but I started with the default 24-column grid and created a starting template for my latest project.

Download the template

I thought I'd share the template for anyone who would like to use it. Enjoy!

download blueprint-css-template.zip (344k 352,719 byte zip file)

Show

Comments

Recently

About Carl

Hi, I'm Carl Camera. I'm a front-end web developer and designer.

I've been involved in web development since 1996 helping to launch some of the earliest web applications. Nowadays I oversee development of large websites that are viewed more than ten million times daily.

I think websites should be easy to understand and use. If a website is a source of frustration, it is both a user interface (UI) and user experience (UX) failure. This blog has been created to further the craft of web design and user interaction.

Exploration

As screen resolutions become denser, websites face the challenge of filling pixels without wasting bandwidth.

What you're seeing here are two images specifically tailored both to the size of the slot they are to fill, and the pixel density of the screen in front of you. The dimensions of the images delivered are shown in the second slot. You can alter the image dimensions by resizing your desktop browser or by turning your phone or tablet sideways and refreshing the page.

All images of the photograph are generated from single full-resolution 7712×4352 pixel image – Two megabytes in size. Read more...