Choosing a CSS grid/framework

Question

There are many grids and framework to choose from. A Google search for CSS frameworks will return a dozen articles that themselves list a number of frameworks to choose from.

When it comes to choosing one, it's easy to be lost without having an intimate knowledge of all of them.

What are the main factors that go into choosing a CSS framework, and how will those choices map to certain frameworks?

More generally, how does one choose a CSS framework?

Note 1: I'm using "grid" and "framework" almost interchangeably here, but there is probably one I should use over the other. Corrections on this are welcome.

Note 2: I am well aware that some choices will depend on taste and accordingly, this question can turn into a "best of" contest/subjective topic. I'm trying to keep it as answerable as possible, as I'm pretty sure many have this problem/question of choosing a framework and an answer to that would benefit the community. As such, improvements to this question are welcome rather than just closing it.

Dereliction

For the curious, I ended up using Foundation. – Dereliction

You should consider some lightweight solution as well. Something where you can read and understand code in 5 minutes, like github.com/Dharmoslap/GRD. – Decrease

Answer 1

When choosing a framework, consider the following questions :

Language : Some frameworks are written in SASS. Others are written in LESS. Yet others are written in pure CSS. Pick a framework written in a language you're most comfortable working with.

Features : Some frameworks offer just a grid. Others add typography. Yet others add a whole bunch of custom UI elements. Pick a framework that corresponds best with the features you want. You don't want a framework with either too few features or one that's bloated and contains many features you never intend to use.

Modularity : You don't want to overwrite 50% of the framework's output with your own custom code. If you do pick a framework that has many more features than the features you need, make sure it's modular enough to easily get rid of much of the code bloat.

Responsiveness : Pick a responsive grid if you want your page to be responsive.

Cross-browser support : If your project needs to support older browsers, make sure you pick a framework that supports all browsers you need to support.

I built my own framework Cascade Framework because none of the frameworks out there answered those questions the way I wanted them to. Feel free to check it out.

Nauseate

Answer 2

The first thing to start with are the requirements and goals of your web project.

1. Do you target only a mobile audience?

If you want a Web-App, you'll need more than a CSS framework, a mobile framework that combines look and feel for specific target devices' UI with functional elements by means of Javascript. The next decision will be if the framework better supports smaller smartphone screens, tablet screens or both.

If you don't need the more functional Web-App approach the way to go are frameworks that are responsive. You will have to concentrate on how you want to arrange and order certain page elements on different screen resolutions and what page elements can be turned off on the smaller resolutions. (This sometimes leads to political debates with the stakeholders debating around what is (more) important and what not).

2. Do you target both mobile and desktop audience?

You want a framework that supports reponsive or fluid layouts for greatest support of your audiences clients. If the graphic design you have to produce is more static the responsive route suits better as it allows easier planning in the different stages within the breakpoints. Most designers currently follow flexible approaches, lightweight, elegant, presentational, not-so-portal-like that also allow fluid implementations (where certain or all page elements are allowed to stretch or grow according to the client/browser viewports).

3. Do you target only traditional audience?

Then simply choose the framework you're confident it allowes the easiest implementation. Did the designer use a grid? Then maybe the CSS framework fits it. Some CSS frameworks come with a nice variety of design templates for Gimp, Photoshop, Illustrator and others, so maybe the design can be based on the template upfront which allows for the best realization.

Two other considerations:

A. There is no graphic design

If you start without explicit design templates I would choose a framework that allows for easy integration of Typography, offers lots examples, use cases, pre-defined page elements or components (buttons, navigation, thumbs...).

B. Time constraints

No time? Some frameworks come with their own or third party customization scripts or wizards. Choose the elements or components you need, turn on or off certain JS libraries, reset stylesheets, things like that and download the final package. That's it.

Some frameworks are pretty mature and well tested so the absence of a vibrant community may not tell you that much. Depending on your skills a lot of support may not be necessary (and even be a bad sign: The grid/framework should be simple and stay out of your way. The questions that may come up should so be the usual CSS questions that are quite common and can be answered even without details of the underlying framework).

Two examples to illustrate two approaches (more grid <-> more responsive):

http://960.gs/

Definitely take a look. Follow the "view the slides" link to read nice background information. A true grid system. It also links to derivatives that support fluid and elastic looks.

http://twitter.github.com/bootstrap/

Modern, nice hype. Lots of components. Customizable. Responsive.

Web-Apps:

http://jquerymobile.com/ and http://www.sencha.com/products/touch

Anthracosis

Answer 3

Most grids are 95% the same: they define the width of columns + include a clearfix.

You can even make your own grid if you like. So therefore, if we understand that most grids are essentially the same, which one is the best to use?

1) Customize Twitter Bootstrap by only downloading the grid. It's a great choice because most people are familiar with the "span1, span2, span3" convention. Also, it's available as fixed width and fluid (ie. responsive).

2) 960.gs is probably the most commonly used fixed width grid. Unsemantic is the responsive sucessor to 960. Both were developed by Nathan Smith.

Adroit

Answer 4

One question you can ask right off the bat is:

Do I want the framework to be responsive?

The answer to the question will cross many options off your list.

Another main question I ask is what kind of community support is behind the project. From my experience it is a pain to get invested into a particular project and than have it die and get no support. It is nice to have something that has key backers and a large following.

Divulsion

Answer 5

Considering the UI designers from Twitter made Bootstrap I wouldn't just call it hype surrounding that framework. It's excellent code and the most complete framework. 960.gs is a grid system which boostrap has called scaffolding. Bootstrap is also smartphone friendly. So where someone would have to hack together jquerymobile, jquery, 960.gs, plus all the plugins they need. Bootsrap already comes bundled with plenty to get you started with and works on all browsers and phones/tables.

Erfert

Because Twitter is this wild roller-coaster ride of UI and layout complexity? – Clareclarence