Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.
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:
- eliminating cross-browser stylization differences by resetting styles
- providing useful typography defaults
- defining a typographic baseline
- providing a print-specific stylesheet
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.
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.
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.
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.
