Introducing Blueprint CSS Framework: A Guide to Streamlined Web Design

By Alex Carter on October 31, 2024

For web designers and front-end developers looking to build clean, responsive designs quickly, Blueprint CSS offers a versatile foundation. Unlike other popular frameworks such as Bootstrap and Foundation, Blueprint CSS focuses on pure CSS, providing a powerful grid system and refined typography without extra UI components. This approach appeals to designers who need flexibility and efficiency in their projects.

Blueprint CSS vs. Other Frameworks

Blueprint CSS distinguishes itself by not including UI elements like buttons or jQuery plugins, which are common in frameworks like Bootstrap and Foundation. This makes Blueprint more akin to the classic 960.gs, as it focuses solely on grid layouts, typography, and forms, giving designers more control and flexibility.

Setting Up Blueprint CSS

To get started with Blueprint CSS, download the latest version from blueprintcss.org. To implement it, include the following three CSS files in your HTML document:

1. screen.css – handles screen display;
2. print.css – manages printing style;
3. ie.css – corrects for Internet Explorer quirks.

Here’s how your HTML might look with these files included:

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

Blueprint CSS Grid System

The Blueprint CSS grid consists of 24 columns, each 30px wide, with a 10px margin between them. This grid system allows developers to quickly and efficiently create complex layouts without needing extensive CSS knowledge.

• Container Class: Wrap your entire layout in a <div> with the .container class to set the basic structure;
• Span Class: Use .span-x to allocate columns within your grid, where x represents the number of columns each element should span. For example, .span-8 spans 8 columns;
• Last Class: For elements that are the final item in a row, add .last to align them correctly.

Here’s a sample code structure using the grid:

<div class="container">
  <div class="span-24">Header</div>
  <div class="span-8">Left Sidebar</div>
  <div class="span-8">Center Content</div>
  <div class="span-8 last">Right Sidebar</div>
  <div class="span-24">Footer</div>
</div>

Building Layout Components with Blueprint CSS

The Blueprint CSS framework makes creating different layout sections easy by following a structured approach. Here’s a breakdown of creating each component in a typical web layout:

Header

The header spans the entire width, so use .span-24 to create a full-width container:

<div class="span-24">
  <h1>Blueprint CSS Framework</h1>
</div>

Sidebar

Sidebars can be created using .span-x where x is the number of columns. If the sidebar is the last element in a row, add .last:

<div class="span-5 last">
  <p>Sidebar Content Here</p>
</div>

Main Content

The main content typically occupies the majority of the grid. After accounting for sidebars, allocate the remaining columns to this section:

<div class="span-18 border">
  <p>Main Content Here</p>
</div>

Sub-Content

To add nested content areas, such as mini content boxes or sliders, create sub-divisions within the main content area. Here’s an example of three equally-sized boxes within the main content:

<div class="span-6 highlight">Box 1</div>
<div class="span-6 highlight">Box 2</div>
<div class="span-6 highlight last">Box 3</div>

Footer

The footer layout is identical to the header, typically spanning the full width:

<div class="span-24">
  <hr>
  <p>Footer Information Here</p>
</div>

Customizing with Styles

Blueprint CSS offers extensive flexibility for adding custom styles. To personalize your layout, include a custom CSS file:

<link rel="stylesheet" href="custom.css" type="text/css" media="screen, projection">

Conclusion

Blueprint CSS is an excellent choice for developers and designers who need a lightweight, CSS-only framework with a robust grid system. Although it may lack the comprehensive UI toolkit of Bootstrap or Foundation, its simplicity and adaptability make it ideal for creating unique and flexible layouts quickly. Whether building a new site from scratch or refining an existing design, Blueprint CSS provides the essential tools to get the job done efficiently.