Do you use a CSS framework?

Question

If yes, which one? Why? If no, why? How do you fix cross browser CSS rendering?

I currently use blueprint css, and I wonder if it's a good choice. Thanks! :)

Answer 1

I use Blueprint along with the Compass framework. Coding CSS has become enjoyable again. :-)

Answer 2

I like the yui css tools. Those guys have definitely spent more time dealing with cross browser css than I would care to. I haven't tried others.

Answer 3

I use yahoo's yui-css framework. That's the first one I came across and it was easy to understand. I just saw the video and cheatsheet and got it working.Also, Yahoo uses it on some of their sites.

Answer 4

I have used Blueprint-css at some places and found it quite useful.

Answer 5

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

I prefer fluid version of 960.gs: Fluid 960 Grid System

Answer 6

No, I'm not using any framework, just a well thought out naming system that I reuse over and over and a basic css with a few resets and some base styles.

Why am I not using a css framework?

The use of a framework usually assumes that the designer is familiar with its conventions which is quite often not the case - you're not the one designing the page or the client has his own designer. And even if this is not the case, there will always be designs that won't fit into 960 pixels or simply have an even size so you can't use your magical .span-4 class.

Which leads me to the next point. The naming is not semantic. In theory you would expect a framework to ease maintaining a large site. However, suppose you have to make a slight design change. This basically means changing the html across all the template views involved. This is hard and risky even with a versioning system, because it's one thing having to rollback to a single css file, and another to 100 views. All because input.span-19 should have 5pixels less. CSS frameworks - the new inline css.

What about cross browser issues? Either you're using a framework or not this is not going to change. There are browsers or operating systems that have certain particularities. Bottom line - Internet Explorer will still suck as much.

CSS Frameworks stand out for discipline and I have to give them credit for that, but in the end it's all about the one writing the code.

Answer 7

The Compass/Sass combination is fantastic, and offers several plugins for using the framework of your choice without the non-semantic class names. Outside of Compass, I always found frameworks to be too restrictive and use too much markup.

I'm not a fan of the Blueprint, 960gs and YUI plugins for Compass either: they were originally built for use with extra markup and don't take full advantage of Compass/Sass for extra flexibility. So I built 'Susy' - a flexible framework built native to Compass/Sass.

Whatever plugin you use (or write your own), I highly recommend Compass/Sass as a better option than extra markup.

Answer 8

Just started a project using 960 grid. The designer bought into this early on, and let it guide his designs.

I must say, it's much much faster. Spend much less time measuring pixels on mockups, asking the designer the intent, and futzing with CSS to build "page templates". Spend much more time just implementing the designs.

Answer 9

I created my own subset of classes from which i found myself use very frequently, this makes me work faster and create html layouts much easier, without repeating same properties under a lot of classes.

For example for inline divs i have fl and fr classes to represent float right and left, for fluid widths i have 20 width classes. Here are some classes from my generic stylesheet i mentioned. It works out for me.

.fl { display:inline; float:left;}
.fll { display:inline!important; float:left!important;}
.fr { display:inline; float:right}
.frr { display:inline!important; float:right!important;}
.ib { display: -moz-inline-block; display:inline-block;}
.clear { clear: both}
.none {display:none;}
.noni {display: none!important;}
.block {display:block;}
.blocki {display: block!important;}
.pointer {cursor: pointer !important;}
...
.w10 { width: 10% !important; }
.w15 { width: 15% !important; }
.w20 { width: 20% !important; }
.w25 { width: 25% !important; }
...

So this technique can't be a framework replacement of course, but this works well enough if you don't want to have any other thing in between your styles and you:)

Sinan.

P.S. In IE6 and below multiple classes work buggy this is to use in modern browsers. see the table at Quirksmode