Thread

I was just doing some reason on frameworks for a project documentation and came across the term CSS Framework. Now I have heard of JS & PHP frameworks, but never CSS.

Can anyone explain? I tried to look at some test sites but failed to see the benefit of using one. Does anyone here use a CSS framework?

blueprint is a known one, YUI has one too but that is less presented as a tight bound framework. They include a browser reset, a grid for the layout and common used classes.

Because most of the sites have classes and ids that are always used they are bundled as a framework. It’s not like js or php frameworks that add another way of programming to the language.

I think it’s good to have one or a few css base files but using a framework seems a bit overkill to me.

Really everyone should have some sort of “framework” for CSS right?  After repeating similar work countless times you eventually get a “framework” going where you organize your work in a certain way and create a base to work from.  If we were not coding with CodeIgniter then we would have our own basic PHP framework to build from.  You borrow your own code from other projects and re-use. 

That is what BluePrint and YUI try to do.  I am using both of the above mentioned frameworks in a personal project (one for the admin and another for the public facing areas) to get a chance to evaluate both of them.  I’m not sure I can say one is better than the other right now.  BluePrint is limited in some ways (unable to create fluid layouts) and YUI has a bigger name behind it.  ExtJS is actually bundled with YUI so you might check that out.

I think it’s good to have one or a few css base files but using a framework seems a bit overkill to me.

I think you are just getting caught in the semantics.  A few CSS base files is essentially all that BluePrint and YUI are.  Each have extra items that you can add or remove.  You can also combine these items and “compress” them to decrease the size of the files.  There is a bit extra fluff but I think that is a small trade-off.

If nothing else, I have found these frameworks great for throwing together a fast layout to work from in my projects.  When I am trying to code I hate getting bogged down in CSS (which I am very rusty in.)

As others mentioned, YUI and Blueprint, are the two most popular.

YUI is actually a collection of much more than a CSS framework (it includes widgets, an AJAX library, and various other items). But the font, grid, reset package is a great start to any project. YUI is perfect for grid-based designs that have been designed with YUI in mind or that can be slightly altered to conform to the various width requirements. My only complaint with YUI is that it often mandates “div clutter” where you have quite a few more divs than you actually feel comfortable with - but all in all, it works well.

Blueprint is also grid based but offers many, many more columns allowing you to create a more “dynamically” layed out design and can be easier to conform existing designs to. I personally find the number of grids and various available classes within Blueprint to be confusing - it can take some time and dedication to wrap around.

I don’t know about calling them frameworks as such but I think a great starting point is to always using a CSS Reset Stylesheet - lets you start with a ‘clean slate’ in every browser regardless of tag 😊

another one is:
YAML

another one is:
YAML

Cool, have you used it?

I did look at the grid layout but for me that seems a silly idea. Ill have to look into the reset and font files. Thanks

YAML??? They totally stole the name of the YAML that I know and love. YUI is pretty brilliant - for a long time I didn’t understand it very well and I’ve been using MooTools since the beginning. But, with it’s (CSS)  reset, grids and font libraries it sure is making my cross-browser issues so much less of a nightmare.

I also used mootools together with the YUI CSS libraries for a couple times.
At least the CSS reset file is an absolutely MUST HAVE!

I also tried Blueprint and my first impression was that the grid layout is silly.
But in many cases you can use it very well and another big advantage is the print layout, which can save a lot of time, too.

CSS reset files are awesome, definitely a very useful tool.

I’m not too hot on CSS frameworks as they stand now; YUI tends to require hideous amounts of markup to complete relatively simple tasks. It’s also entirely nonsemantic. Looking around, I didn’t see any framework that really does the things that I’d want while adhering to a policy of minimal markup and maximum semantic value. So, rahter than frameworks, I tend to keep a bunch of markup design patterns in mind, and snippets of CSS that handle those microformat-esque patterns.

I use blueprint, when i’m done, i just delete anything I don’t use

Blueprint is great, started using it two sites back, it it really does save time and hassle. Good points include less browser quirks in IE and other non-standard browsers (which can save HOURS and thus $$$). Simple grid mechanism is also fantastic, takes a little bit to get your head around but VERY useful and makes multi-column layouts a breeze! I heartily recommend spending a spare evening trying it out, I honestly believe you’ll find it useful and productive.

I am a bit of a CSS expert, and I find Blueprint a huge time saver. It handles many of the things you should do whenever you style a site (browser resets, font size settings, etc.), and it allows for an easy adherence to a grid of your choosing (which is just a good graphic design/typography practice).

Here is a more thorough explanation => http://www.blueflavor.com/blog/design/blueprintcss_101.php

Download their latest release and check their sample pages in the test folder => http://blueprintcss.googlecode.com/files/Blueprint%200.6.zip

I personally am tired of having to repeat myself while doing the same mundane things over and over again. So I used to keep snippets I used all of the time, but Blueprint handles more cases better than what I had and allows for more options straight out of the box. I would think this would be appealing since we are all on the CI framework site site. 😛 Quite simply, Blueprint allows me to focus on better application/UI design, and less CSS hooey.

I would like to point out a -maybe silly- question: does anybody of you using YUI or Blueprint CSS struggled with PRINTING OUT your pages? I mean, everything looks ok on screen for any browser (including IE6) but, when it comes to printing… what a mess!

I personally found out that YAML is one of the frameworks that has a decent printing issues handling… for my point of view, of course! and I really find YUI and BP very oversized for small projects: the YUI menus are nice but you need some 1MB of code for making everything work!

I’d rather adopt either YAML or simple reset-and-fonts css stylesheets that you could find around the web (maybe Eric Meyer’s ones?)

Cheers!

Stefano