A comparison of CSS frameworks

Here is a quick comparative analysis of a lot of CSS frameworks. Some of them are quite minimal and only offer a way to layout your components in a grid (unsemantic, fluidable). Others give it to you whole and offer a grid layout, a CSS reset, icons and styles for all the components you’ll want to display (Bootstrap, Foundation, UIkit).

I have used or would be happy to use any of the five frameworks I linked to above. My notes on these and other frameworks are below.

If you would like to quickly try it out for yourself, feel free to clone this git repository and fiddle with the file index.html for each framework.

Also, see this cool chart for a quick overview of all the frameworks.

Twitter Bootstrap

Pros:

  • Simple to use
  • Images and icons and widgets
  • Large user base
  • Good documentation
  • Usable

Cons:

  • A lot of extra html needed

Foundation

Pros:

  • Good doc
  • Lots of widgets
  • Icons, though separate from the main release
  • Advanced layout options
  • SCSS

Cons:

  • Default styling not so usable
  • Layouts can get complex

UIKit

Pros:

  • Advanced layouts
  • Icons
  • Javascript stuff
  • Minimal looks
  • Good doc

Cons:

  • Lots of classes to add

Knacss

Pros:

  • Simple and small
  • Some icons
  • Responsive layout
  • Fairly good documentation

Cons:

  • No stylings for things like headers and action buttons
  • Strange class names

RöCSSti

Similar to Knacss. Documentation lacking.

Jaidee

Pros:

  • Simple to use
  • Some widgets like insets and blockquotes and buttons and lightboxes

Cons:

  • Documentation looks weak
  • No images
  • Not lots of widgets

YAML

Pros:

  • Advanced layouts with simpler alternatives if the 12-column layout is not needed
  • Lots of widgets
  • Sass
  • Some icons

Cons:

  • A lot of classes required + unclear conventions for class names
  • Not lots of icons
  • Lots of files to include to get started

Blueprint

Pros:

  • Minimal
  • Styles a lot of things by default
  • Very simple to use

Cons:

  • No widgets
  • No icons

Unsemantic

Pros:

  • Minimal
  • Easy to use

Cons:

  • Nothing but a grid layout (could be a pro too)

Gumby

Pros:

  • Has widgets and icons and stuff
  • Good documentation
  • Easy to use and customize

Cons:

  • Weird classes for buttons
  • Strange UX choices (default style hard to read or icons in the wrong place)

Fluidable

A minimal grid-only framework.

About these ads

3 thoughts on “A comparison of CSS frameworks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s