How do you choose a CSS framework? [closed]

Question

I'm working on a company website and I figure that I should start using a CSS framework. There's quite a number of CSS frameworks around, what's the most commonly used one and why would people choose to use it instead of the other frameworks?

Clammy

See #203569 – Sparse

Answer 1

First, don't just automatically assume a CSS framework is necessary, or even desirable. Depending on what you're doing and how good you are at markup + CSS, it may not be worth it. The Wikipedia article barely scratches the surface of the debate I've seen online, e.g., this criticism of the YUI Grids framework.

If you've decided that a CSS framework is for you, then you need to decide what problems it will be solving for you. Once you have that list, you can start comparing different ones to see how well they address your problems.

Finally, there are any number of minor factors that may shift the balance for your particular application. Already using YUI on the site? Then the Reset, Base, Fonts, and Grids combo may get a bump, etc.

The two I've seen reference most often are YUI's and BluePrintCSS (here's a comparison).

UPDATE: One thing I haven't seen explicitly addressed by a CSS framework is Setting Type on the Web to a Baseline Grid (see this article on composing to a vertical rhythm for more details).

Arabian

Answer 2

You ideally don't.

It's much handier to build up your own ready to go CSS rather than learn the intricacies of a framework. YMMV, but i've found them a waste of time.

Unsophisticated

True, but if you find yourself constantly using a similar design structure it can be helpful (and quicker) to either learn a framework, or better yet construct your own. – Streamlined

I have some basic layout files, basic typography, basic utility, etc. and just @include what I need.......but it's all done myself. MUCH less bloat. – Unsophisticated

Answer 3

Afaik, two of the most populars are blueprint and 960 grid system.
Both have their strengths. I like 960gs.

There's another SO question debating the two here

Reader

Answer 4

If you need to build complex grid with no default width limitation, fluid and fixed columns, lightweight, baseline grid, optional semanic, % and positioned based grid my advice is use my CSS Framework Emastic.

If you need something extra simple you can use Malo or something similar to Blueprint or 960.gs but only 1kb weight The Golden Grid. Be careful not always CSS Framework is good idea. I also wrote one post about When to use CSS framework?

Resistencia

Answer 5

Compass is an interesting looking CSS framework. It can run using blueprint, 960.gs, YUI and probably others as a basis, but just pulls in what is needed for your project.

Synesthesia

Answer 6

Forget about frameworks, use XCSS. You will love to write stylesheets again.

Koester

Answer 7

I've used YUI, BlueprintCSS.

In the future I would consider using 960gs, but most likely would use twitter bootstrap https://github.com/twitter/bootstrap/

Larianna

Bootstrap is nice for quickly building a website from scratch. Once you get to the point of customizing the style you should probably pick something less 'bloated'. – Contemporary

Answer 8

I still need to diversify my experience with CSS frameworks but the one I've worked with the most is the YUI CSS library.

It's a four part setup - consisting of a reset, grids package, fonts setup (not entirely sure what the pros of using that are) and a base stylesheet which applies some basic formatting. You can choose which parts you want to use and they're available to use from a CDN on Yahoo! and Google.

I like the YUI library because it provides an easily switchable layout (just by changing one class or id of the container wrapper) - for example yui-t4 provides a 180px column on the right, yui-t3 provides a 300px column on the left - these templates also take ad-block sizes as well which is useful.

The base markup isn't too bad either:

<div id="doc"><!—-overall document wrapper-->
    <div id="hd"><!--header / masthead--></div>
    <div id="bd">
        <div id="yui-main">
            <div class="yui-b"><!--primary block--></div>
        </div>
        <div class="yui-b"><!--secondary block--></div>
    </div>
    <div id="ft"><!--footer--></div>
</div>

Streamlined