Thursday, August 6, 2009

Using timepickr plugin with 960 grid system

960.gs is a good and very simple web framework I'm using to build prototypes of my web experiments. It has many "default" css styles that can interfire with your web desired behavior.
First serious problem I've found was using jQuery original "timepickr" plugin. The plugin lets the user choose a time in form very quickly. When I tried to apply it, the cell elements appeared too separated from themselves.
Using firebug to debug the CSS classes, I found a very simple solution: declare a new class for that.

.ui-timepickr li {
margin-left:0px;
}

For each element
  • with class 'ui-timepickr', remove left margin. This declaration preserves the custom elements style, while showing page grid layout correctly.
  •