Style Sheets
  Home arrow Style Sheets arrow The Blueprint CSS Framework
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Mobile Linux 
App Generation ROI 
IBM® developerWorks 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
STYLE SHEETS

The Blueprint CSS Framework
By: Alejandro Gervasio
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 5 stars5 stars5 stars5 stars5 stars / 2
    2009-05-07

    Table of Contents:
  • The Blueprint CSS Framework
  • Downloading and installing Blueprint CSS framework’s source files
  • Using Blueprint CSS for a simple web page design
  • Using a web page layout in a production environment

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    ADVERTISEMENT


    The Blueprint CSS Framework


    (Page 1 of 4 )

    If you're an experienced web site developer, you know how challenging it can be to build a truly professional-looking site. What if you could use a framework that takes care of the more difficult issues, such as client and server-side technologies and even general design theory? The Blueprint CSS framework does just that. This is the first part of a seven-part series that will show you its major features so you can start using it for your own applications.

    Introduction

    Building a web site is an easy task. Anyone who has a basic understanding of HTML and CSS can create web pages and link these documents with each other. They can even spice up these pages with some appealing images, crafted quickly using Photoshop. Sweet and simple.

    However, things get more complicated when it comes to developing a professional web site. This process not only requires a deep grounding in the  client and server-side technologies involved, but an appropriate knowledge of several theoretical concepts applied to general design, such as grid theory (used with the Golden Proportion and the Rule Of Thirds, for instance), balance, proportionality, content distribution, blank space, etc. And the list goes on and on.

    In addition, designing a professional web site demands creativity in most cases, which can be pretty challenging even for experienced designers. Fortunately, nowadays there’s a great arsenal of tools and resources available on the Internet that facilitates the creation of a good looking, carefully-crafted web site, without forcing the designer to be a guru in HTML/CSS or server-side programming.

    For example, popular blog engines like WordPress and Expression Engine permit users to build database-driven web sites without being a programmer, while Yahoo Grid CSS (which I reviewed on the Dev Shed network the last year) is a robust CSS framework that will let you create all sorts of clever web page layouts using clean markup and simple style sheets.

    However, when it come to creating web page layouts rapidly, in the last few months a new CSS framework has gained popularity with designers, due to its flat learning curve, solidness and flexibility. As you may have already guessed, in this case I’m speaking of Blueprint CSS, a CSS library created by Oval Frihagen Bjørkøy that lets you build different layouts using a intuitive grid-based approach.

    As with Yahoo Grid CSS, Blueprint permits newcomers to implement proven design techniques, such as the aforementioned Golden Ratio and the Rule Of Thirds very easily when constructing web page layouts, by utilizing only a few simple CSS classes and clean markup. Thus, assuming that you’re interested in learning how to put this framework to work for you, in this group of articles I’ll show you how to use its main features, so you can employ them for building your own designs.

    Now, it’s time to leave the preliminaries behind and begin discovering the real power behind the Blueprint CSS framework. Let’s get going!

    More Style Sheets Articles
    More By Alejandro Gervasio


       · Blueprint is one of the most popular CSS frameworks available nowadays. This first...
     

    STYLE SHEETS ARTICLES

    - Image Replacement CSS Techniques
    - Using BlueTrip`s Success, Notice and Error C...
    - More Uses for the Thin and Caps CSS Classes ...
    - Styling Definition Lists with the BlueTrip C...
    - Styling Unordered and Ordered HTML Lists wit...
    - Using the BlueTrip CSS Framework`s Thin and ...
    - Adding Borders to Web Page Columns with Blue...
    - Introducing the BlueTrip CSS Framework
    - Using a Background Grid to Assist Web Page L...
    - Extending the Rule Of Thirds for Web Page La...
    - A Two-Column Web Page Layout Based on the Ru...
    - Using the Rule Of Thirds for Web Page Layout
    - Swapping Columns Using the Divine Ratio for ...
    - Using the Golden Ratio in Liquid Web Page De...
    - Fundamental Design Principles for Web Page L...







    © 2003-2009 by Developer Shed. All rights reserved. DS Cluster 5 Hosted by Hostway
    For more Enterprise Application Development news, visit eWeek