All about the Blueprint CSS Framework

blueprintBlueprint is a project that has been alive and well since 2007, and as a current core contributor and community manager for the project, I am a big supporter of it. The framework provides a few building blocks that CSS gurus have been recommending for a long time; a detailed CSS reset, a clean set of styles for text, and a cross-browser compatible grid. When you use Blueprint in a project, you get a “head start” that will save you time and help you focus more on making your site attractive, rather than trying to fix common browser discrepancies. Even if you are a CSS expert, I can guarantee that you will find it helpful.

There are a couple of concerns that users commonly mention when looking into a framework like Blueprint. For one, there’s the need to add framework-specific classes to your markup, which is usually non-semantic. While these classes are, in fact, content-agnostic, they are usually applied to tags that have no semantic weight regardless (namely, DIV and SPAN), and with the right tools, you can create markup-specific grid rules to replace the defaults provided by Blueprint. For another, there’s the risk of having far more CSS than needed for a project; this is referred to as bloat. This is a typical concern with any framework, but in compressed form, Blueprint is very small, and because it encourages using repeatable methods for building sites, you will tend to find that the amount of custom CSS you have to write for a project is far less when using Blueprint.

If you are unsure about trusting your project to a CSS framework, you may as well investigate the code for yourself, which is open source and publicly available at Github. There are also a plethora of tools and resources created by the Blueprint community, which you can find on the wiki, that really show the potential offered by a framework like Blueprint. The best way to get to know Blueprint, however, is to drop it into your project and start tinkering. If you know CSS, then you are ready to get started!

About: Christian Montoya

Christian Montoya
Christian Montoya is a web & game developer, educator and entrepreneur from the USA. He recently launched his own company, Mappdev, dedicated to social games published primarily on Facebook. His current flagship product, Pop Answers, attracts over 200,000 players each month. He also serves as a core member and community manager for the Blueprint CSS framework.

3 Comments

  1. Johan Akesson

    Christian, I love Blueprint. As a non-professional web developer it saves me tons of time and headache dealing with cross-browser support. The main gripe with these frameworks is, as you bring up, the non-semantic markup required. IMHO it’s a reasonable compromise, especially considering css:s lack of aliasing and inheritance (like ‘class = otherclass’ or class inherits otherclass’).

    Thanks for your hard work!

    Reply
  2. Sandeep Prajapati

    how to used blueprint css, i had research many thing in about blueprint but i did not got good information and the way it used..could you please help to in about blueprint css with example …im very curious to learn about blueprint…

    Reply
  3. Mark

    I’ve used Blueprint for a few projects now, and I must say it’s awesome. Bloat really hasn’t been an issue as I usually write most of the styles anyway. I don’t use the grid for all projects, but the reset, fonts, and form styles are indispensable.

    Reply

Trackbacks/Pingbacks

  1. All about the Blueprint CSS Framework - Orkutadda.com - Orkut scraps, orkut graphics, orkut, scraps, html, graphics, glitter, codes, tools, layouts, profiles, scrapbook - [...] more here: All about the Blueprint CSS Framework Comments (0) La La’s New Haircut: The Cassie Haircut Is [...]
  2. All about the Blueprint CSS framework | The Montoya Herald - [...] I wrote a short article about the Blueprint CSS framework for UnmatchedStyle.com. You can read it here: All about…

Submit a Comment

Your email address will not be published. Required fields are marked *

More News & Articles

Looking Fast: The Art of Website Speed Perception

Looking Fast: The Art of Website Speed Perception

In the web world, technical speed and user perception matter. By improving design for a faster appearance, you boost conversions and stand out online. Speed isn’t just loading time; it’s perception.

Designing for Errors: Creating User-Friendly Contingency Plans

Designing for Errors: Creating User-Friendly Contingency Plans

Contingency Design hinges on empathy, understanding user frustration, and transforming errors into positive impressions. By embracing these principles, you enhance user experiences, retain customers, and boost revenue in the competitive digital landscap

EMAIL NEWSLETTER