Sometimes, creating the original layout for a new web design can be the most tedious and time-consuming part of the process. Defining columns and rows and tables, while necessary, lacks the creative fun that things like logo design and color selection have, and it’s not too surprising to see developers try to skip around the process by reusing old templates. Yet, templates sometimes lack the flexibility required, and then developers are forced to waste time reinventing the wheel, especially when you are trying to design without dependency on images.
Enter Blueprint CSS. From the project description:
Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.
Blueprint CSS isn’t really a framework in the sense that it’s not MVC (model-view-controller) like something like Ruby on Rails, and it doesn’t attempt to dictate the design process. Instead, it’s a superbly flexible template with sensible and sane defaults that conform to design standards. The typography is based on a scale and looks quite appealing by default, making it easier on the eyes to design.
A sample of a website designed with the CSS framework Blueprint.
Everything in Blueprint is based on a 24 column grid, where each column is 30px with 10px between columns. Therefore, you can define a simple two column page with the following code:
<div class="container">
<div class="span-8 colborder">
This is the left column
</div>
<div class="span-15 last">
This is the right column
</div>
</div>
This will create a two-column layout with a left-column of 320px and a right column of 600px, divided by 40px. The span-8 and span-15 classes create sections that span eight and 15 columns, respectively. The colborder class appends a 40px border to the right of the column, and the last class removes the right-most border, allowing the right column to fit perfectly into the grid.
You can easily push and pull columns with the push-x and pull-x, where x is the number of columns. Loud and quiet text can also be created in a snap. If you are interested in trying out Blueprint for a site design, you can download the source CSS and read the wiki for more usage information from the developer website.
One Comment
“Blueprint CSS isn’t really a framework in the sense that it’s not MVC (model-view-controller) like something like Ruby on Rails”
Ehh no, I mean… Framework != MVC
And let’s say that as general rule framework != any pattern in general.
Some framework will allow/force/help/encourage you to follow such pattern.
We saw a few framework emerge allowing you to re-enforce MVC pattern for php, java, ruby, python but still, a framework is just a set of tool whatever it does.
3 Trackbacks
[...] I Can Design Websites Faster Than You Can: Rapid Stylesheets with Blueprint CSS by Cherrysave The myth of content and presentation separation by Jeff Croft The Framework Formally Known as Prints by Khoi Vinh On Blueprint by George Lesica Which CSS Grid Framework Should You Use for Web Design? by Raj Dash Popular CSS Frameworks – Yahoo YUI, 960 CSS, Blueprint, Yaml, jQuery by Webdevelopertut Blueprint. A CSS Framework by Mark Boulton [...]
[...] Blueprint CSS Framework – Tutorials, How-to Guides and Tools [2] Blueprint. A CSS Framework. [3] I Design Websites Faster Than You: Rapid Stylesheets with Blueprint CSS [4] Top 12 CSS Frameworks and How to Understand Them [5] List of CSS Frameworks [6] 5 Popular CSS [...]
[...] Blueprint CSS Framework – Tutorials, How-to Guides and Tools [2] Blueprint. A CSS Framework. [3] I Design Websites Faster Than You: Rapid Stylesheets with Blueprint CSS [4] Top 12 CSS Frameworks and How to Understand Them [5] List of CSS Frameworks [6] 5 Popular CSS [...]