http://www.developer.com/lang/css/getting-started-with-the-blueprint-css-framework.html

Back to article

Getting Started with the Blueprint CSS Framework


August 4, 2011

Members of the Web development community tend to fall into two distinct competency categories: programmers and designers. Rare is the individual who can claim membership to both. Despite continued attempts throughout the early years of my career to join this elusive group of dual citizenship, it eventually became clear my design skills were so lacking that I would forever remain a member of the former class. Even given this realization, it is simply not possible for a programmer to completely avoid the Web design process. Some level of design proficiency is going to be required whether you're building a prototype, modifying an existing blog or CMS template, or are working solo on a client project.

In light of such inevitability, I tend to spend a fair amount of time searching for tools which remove many of the design decisions I'd otherwise be forced to (poorly) make. Once such tool which has been of inestimable value over the past few years is Blueprint CSS, and open source CSS framework which performs several crucial tasks, among them:

Additionally, Blueprint CSS provides a very intuitive approach to building grid-based layouts, and a pluggable architecture, which developers are using to extend the framework in interesting and useful ways.

Installing Blueprint CSS

You can download the latest Blueprint CSS version from BlueprintCSS.org. Alternatively you can clone the repository from its GitHub repository. Once downloaded, place it within a Web-accessible location within your project, and link to the screen.css, print.css, and ie.css style sheets as demonstrated here:

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

The first two style sheets should be self-explanatory. The snippet's last three lines use a conditional comment to determine whether the user is browsing with a version of Internet Explorer older than 8. If so, a special style sheet is included which will help your site conform to the varied display problems that arise when serving Web pages to these older browser versions.

Creating a Grid with Blueprint CSS

Blueprint CSS divides the page into a centered 24-column grid comprising a total width of 950px. You'll define the page layout by assigning .span-x classes to your div elements, with the x representing the number of columns that div should consume. For instance if you wanted to create a typical two column layout, the left-most column which contains navigation links might consume four columns while the right-most column which contains the main content consumes the remaining 20 columns. All of the columns should be placed within another special div identified by the container class:

<div class="container">
  <div class="span-4">
  <a href="../../../">Home</a><br />
  <a href="../../../about">About Us</a><br />
  <a href="../../../blog">Blog</a><br />
  <a href="../../../contact">Contact Us</a></div>
  <div class="span-20 last">

  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer egestas 
  dolor eget mauris lacinia id rutrum ante lobortis. Donec ut enim eu justo 
  dignissim aliquet ac sed libero. Nam suscipit laoreet imperdiet. In facilisis 
  metus ac lacus facilisis ac imperdiet magna tempus. Aliquam erat volutpat.
  </p>

  <p>
  Mauris ac urna id metus rhoncus auctor nec sed leo. Cras dignissim 
  ultricies libero, sed mollis nibh adipiscing ac. Morbi purus velit, 
  rhoncus eget euismod at, interdum id odio. Class aptent taciti sociosqu ad 
  litora torquent per conubia nostra, per inceptos himenaeos. Curabitur 
  consequat, ante quis dignissim convallis, massa nibh mattis erat.
  </p>

  </div>
</div>

The .last class used in the right-hand column tells Blueprint CSS that this is the last column in the row and therefore the default right margin should be removed (which is otherwise used to offer some separation between columns). Rendering this layout in the browser produces the page found in Figure 1.


A Two-column Blueprint CSS Layout
Click here for larger image

Figure 1. A Two-column Blueprint CSS Layout

Of course, the typical Web page includes a header and footer, each of which might span the enter 24 column grid:

<div class="container">

<div id="header" class="span-24">
  <h1>LOGO</h1>
</div>

<div class="span-4">
<a href="../../../">Home</a><br />
<a href="../../../about">About Us</a><br />
<a href="../../../blog">Blog</a><br />
<a href="../../../contact">Contact Us</a></div>
<div class="span-20 last">

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer egestas 
dolor eget mauris lacinia id rutrum ante lobortis. Donec ut enim eu justo 
dignissim aliquet ac sed libero. Nam suscipit laoreet imperdiet. In facilisis 
metus ac lacus facilisis ac imperdiet magna tempus. Aliquam erat volutpat.
</p>

<p>
Mauris ac urna id metus rhoncus auctor nec sed leo. Cras dignissim 
ultricies libero, sed mollis nibh adipiscing ac. Morbi purus velit, 
rhoncus eget euismod at, interdum id odio. Class aptent taciti sociosqu ad 
litora torquent per conubia nostra, per inceptos himenaeos. Curabitur 
consequat, ante quis dignissim convallis, massa nibh mattis erat.
</p>

</div>

<div id="footer" class="span-24">
FOOTER
</div>
</div>

As you can see from the example, when the entire row is consumed by a 24 column grid there is no need to include the .last class. With some extra header- and footer-specific stylization added, you can see the results of the above example in Figure 2.


Headers and Footers Are Easy Using Blueprint CSS
Click here for larger image

Figure 2. Headers and Footers Are Easy Using Blueprint CSS

Using Blueprint CSS Plugins

Blueprint CSS is packaged with a few interesting plugins, among them the Buttons plugin, which makes it very easy to create eye-appealing buttons. To use the Buttons plugin, open the screen.css style sheet located in your project's blueprint directory, and add the following line to the top:

@import 'plugins/buttons/screen.css';

Next, open your file explorer and navigate to the buttons directory, found in your project's' blueprint/plugins directory. There you'll find a directory named icons which contains three sample icons, cross.png, key.png, and tick.png. You're free to add as many other icons as you please. We'll use the key.png icon to create a slick button using the a HTML element:

<a class="button" href="../../../account/">
  <img src="css/blueprint/plugins/buttons/icons/key.png" alt="" />Account Profile
</a>

The rendered button is presented in Figure 3.

Creating Buttons with the Blueprint CSS Buttons Plugin
Figure 3. Creating Buttons with the Blueprint CSS Buttons Plugin

Conclusion

The Blueprint CSS framework presents a fantastic solution not only for the design-challenged segment of the Web development population, but also for designers of all levels of capability. Are you doing anything interesting with Blueprint CSS or any of the other awesome CSS frameworks? Tell us about it in the comments!

About the Author

Jason Gilmore -- Contributing Editor, PHP -- is the founder of EasyPHPWebsites.com, and author of the popular book, "Easy PHP Websites with the Zend Framework". Jason is a cofounder and speaker chair of CodeMash, a nonprofit organization tasked with hosting an annual namesake developer's conference, and was a member of the 2008 MySQL Conference speaker selection board.

Sitemap | Contact Us