CSS frameworks are a Gods send. They speed up development, ensure usability, meet all W3C standards, compatabile across most browsers and a hell of a lot more. Sounds marvelous doesn’t it. Why doesn’t everybody use them? Well, for the novice developer, frameworks, may be a little bit tricky to get there head around? That is were this article comes in, to hopefully give everybody a better understanding of what a framework is and how to use it effectively.
We are going to focus on how to use the Blueprint Framework, a framework that is a little bit more mainstream and mature than the rest (I am not saying better). We have getting started guides, advanced tutorials, plugins, tools and apps and some insightful further reading articles.
Hopefully this article will give everyone a better insight into CSS frameworks and eventually love them.
The Blueprint CSS Framework Toolbox
“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.”
What does Blueprint offer?
- A CSS reset that eliminates the discrepancies across browsers.
- A solid grid that can support the most complex of layouts.
- Typography based on expert principles that predate the web.
- Form styles for great looking user interfaces.
- Print styles for making any webpage ready for paper.
- Plugins for buttons, tabs and sprites.
- Tools, editors, and templates for every step in your workflow.
Getting Started Resources
Blueprint: A CSS Framework Homepage »
Download the latest version of the Blueprint Framework »
blueprintcss – Project Hosting on Google Code »
Browser Compatibility List »
Blueprint Wiki »
Blueprint Live Demos »
The Blueprint CSS Framework Files
The framework has a few files you should check out. Every file in the ‘src’ directory contains lots of clarifying comments.
Compressed files (these go in the HTML):
- blueprint/src/reset.css: This file resets CSS values that browsers tend to set for you.
- blueprint/src/grid.css: This file sets up the grid (it’s true). It has a lot of classes you apply to divs to set up any sort of column-based grid.
- blueprint/src/typography.css: This file sets some default typography. It also has a few methods for some really fancy stuff to do with your text.
- blueprint/src/forms.css: Includes some minimal styling of forms.
- blueprint/src/print.css: This file sets some default print rules, so that printed versions of your site looks better than they usually would. It should be included on every page.
- blueprint/src/ie.css: Includes every hack for our beloved IE6 and 7.
- lib/compress.rb: A Ruby script for compressing and customizing your CSS. Set a custom namespace, column count, widths, output paths, multiple projects, and semantic class names. See commenting in compress.rb or run $ruby compress.rb -h for more information.
- lib/validate.rb: Validates the Blueprint core files with the W3C CSS validator.
- blueprint/plugins/: Contains additional functionality in the form of simple plugins for Blueprint. See individual readme files in the directory of each plugin for further instructions.
- tests/: Contains html files which tests most aspects of Blueprint. Open tests/index.html for further instructions.
This a quick tutorial on how you start using Blueprint from Joshua Clayton.
Blueprint should be put in your site’s CSS directory. After you’ve done that, add these three lines to the <head> of your web pages. Remember to make sure the href path is correct:
Now, you are good to go. You are ready to tackle Blueprint.
Further Getting Started Guides
from Divito Design
from Blue Flavour
Blueprint is a CSS framework that can save you time and headaches when working on any project that involves HTML and CSS, whether it be with Rails, PHP, or just laying out an HTML page. In this tutorial you will get a look at the inner workings of Blueprint and you'll take a look at a live demo application that uses Blueprint to give you a better insight into how the framework actually works.
Advanced Blueprint Tutorials
Customizing Typography Baselines with Blueprint CSS
BluePrint’s typography.css file sets up some very nice typography styles that create a beautiful baseline grid. By default, it sets the font-size to 12px and sets up the line-height and baseline of 18px based on that. While this is fine, I often prefer to have a larger font-size than 12px. So how is that calculated?
This small, but useful, tutorial, explains the equation for customizing Blueprints typography baselines.
One of the neat features of blueprint is a compressor script that not only renders all the various CSS bits that you want according to the given column numbers and sizes for each project into one neat (and compact) CSS file, but it also lets you define semantic classes and ids. And on top of that, the compressor script will also generate a PNG image that conforms to the column size and padding you've selected.
What if you wanted a less obtrusive way of switching the grid on and off? In this tutorial, with little help from jQuery, you will learn how to generate a toggle switch for each page.
This tutorial focuses on the process of applying a CSS grid (Bliueprint)and designing a prototype of a home page template. The layout design, in this tut, is based on the popular layout seen on many WordPress Magazine themes.
A typical design process for web pages is to start with a sketch on paper, followed by a graphic mockup in Photoshop or Fireworks, etc. Drop in all the design elements, positioned approximately where you want them. Later, in the CSS grid-based design phase, you'll determine exact measurements.)
View the Demo
The GIMP is a popular freeand open source image editing program and Blueprint CSS is a CSS framework, whichmakes web layouts easy and chooses sensible style details on your web page. It is compatible with almsost all moder browsers and makes designing a website easy and simple.
In this three part tutorial you will learn the process of setting up the files and folders and creating the image in the Gimp, the second part will contain how to slice up the image and save it, and the third part shows you how to write the code and finish up.
Straight out of the box, the WordPress Sandbox theme is an exercise in styling simplicity, lacking any graphics , boring white on black text, the theme is just waiting for a CSS wizard to craft a masterpiece. Introduce the Blueprint framework into the mix and you have a base with endless possibilties.
This tutorial shows you how to successfully merge the WP Sandbox with the Blueprint framework and simplify your work process.
This plugin adds a simple and flexible set of horizontal tabs to Blueprint, by simply uploading the screen.css file to a new directory on your server, including the plugin file in the <head/> of your webpage and then add the class "tabs" to your list. Simple.
By now, you will know that Blueprint has a fixed layout, with this plugin, you can change that into a fluid layout that will nicely fit with any browser window size.
View fixed layout »
View stretched fluid layout »
View the CSS »
Silk Set is a set of icons perfectly integrated with the CSS framework BluePrint. This plugin includes various stylesheets, and it is thought to increase performances and reduce development time.
Blueprint Tools and Apps
When viewing your web site that has been designed with a grid stystem, an easy way to toggle the positioning grid on and off is to use this bookmarklet, it takes away the unnecssary step of having to change the site's HTML templates.
Get the bookmarklet here: Blueprint CSS Background Grid Bookmarklet »
This tool will help you generate more flexible versions of Blueprint's grid.css and compressed.css and grid.png files. Whether you prefer 8, 10,16 or 24 columns in your design, this generator gives you a lot more flexibility when you are working with the Blueprint framework.
This tool helps you to calculate an individual grid layout for your Blueprint-based web site or web application. Being a static grid framework you usually start with defining the total width of your grid and then seperate your workspace into columns. By default Blueprint comes with a 950px grid, which is devided into 24 columns. However, often this configuration is not sufficient to create the kind of layout you have in mind.
Construct is a visual layout editor based on Blueprint & jQuery, and exists both as a useful tool for CSS designers and as proof that a visual layout editor is possible to acheive with clean CSS & semantic HTML.
The purpose of refactoring Blueprint’s compress.rb and other scripts was to make it much more extensible and useful for developers working on multiple projects. Developers using Blueprint on one or two single sites don’t care that the full Blueprint distribution is packaged with the site. However, developers working on multiple sites from a single computer are often left with the hassle of keeping all these copies up-to-date, with extra custom files floating around and very much a large mess.
The goal of rewriting the compression script was to allow for extreme customization of the output Blueprint CSS as well as ease of keeping projects up-to-date with the newest Blueprint source without much hassle.
Plumb is a clever a web layout composition tool for Blueprint framework. All you have to do is draw some 'stuff' on the pages stage and it will generate the HTML for you. Brilliant!
Blueprint comes with a background grid image, but it only works as a background, and it is not that useful when you are working with colors and final tweaks. This Adobe AIR app gets around this by showing a floating grid, sized at 18px and with Blueprint-sized columns.
It is semi-transparent, draggable and resizable. So you just start it up and align things as you please. It floats to the front, so you can even edit behind it while it is running.
Boks is an AIR application (so it works on Windows, Mac and Linux) that provides a User Interface for Blueprint CSS's framework. It's been designed for those who think the Grid System is good but never really took the time to give it love.
It handles grid configuration, baseline rhythm pimpin', CSS (with or without compression) and grid.png export, HTML layout and much more.
The purpose of this template is to allow you to create visual design comps that are designed to be implemented using a CSS layout framework. The Photoshop document features a 24 column grid for CSS frameworks such as Blueprint. It consists of guides that comply with Blueprint's grid of 24 columns of 30px, 10px wide gutters, and a horizontal width of 950px. Horizontal guides are provided at 18px or 1.5 em line-height for 12 px base font.
Blueprint Cheat Sheet
Of course, every framework or tool needs a good and indepth cheat sheet. Download it here in PDF format: Blueprint Cheat Sheet V.0.8
by Jeff Croft
The Framework Formally Known as Prints by Khoi Vinh
by George Lesica
by Raj Dash
Popular CSS Frameworks – Yahoo YUI, 960 CSS, Blueprint, Yaml, jQuery by Webdevelopertut
by Mark Boulton
- CSS Flexbox Toolbox – Learning Guides, Tools & Frameworks
- 50 Super-Useful Cheatsheets and References Guides for CSS
- 10 Essential Guides, Resources and Tools for Getting Started with HTML5
- Beginner’s Study Guide to HTML5 Microformats
- A Beginner’s Guide to Using WooCommerce
- 10 Inspiring Examples of UI Style Guide Design
- A Comprehensive Guide on the “Whys” of Site Optimization