Potash Valley

Last Thursday with some colleagues we participated in a small contest which runs a night long to deliver a functional Web application. We used this event to try some tools we were not used to putting it place four our customers.

Blueprint CSS (http://www.blueprintcss.org/) is one of them. It's a CSS framework which defines a set of predefined CSS classes and styles. The benefits are that it resets browsers defaults to start with a common set of attributes, and also defines helper classes to arrange the content easily.

However, we faced an issue with ASP.NET as it comes to arrange form's elements. We used a Master Page where the CSS links were defined, and in order to use some forms specific designs we had to set an inline class to the form tag. This broke the overall design of our pages as in standard ASP.NET every content in inside the main form object.

The solution was simply to remove the form specific declaration on the inline class, and add another div to set the form elements boundaries like this:

.inline {line-height:3;}
.inline p {margin-bottom:0;}

Instead of :

form.inline {line-height:3;} 
form.inline p {margin-bottom:0;} 

I had almost decided to remove this CSS when I saw the issue, so I think it's an important tip, all the more so I think it's a very useful framework. If you don't know it yet, take a look at this article. And if you like it, you will need this cheat sheet, invaluable.