AWIA LogoFacebookGoogle Plusicon-codingicon-computericon-designicon-drawicon-drupalicon-maintenanceicon-mapicon-wordpressLinked InTwitter

We’ve been using CSS frameworks for quite some time. The first one we used was Blueprint. It allowed us to design to a 960px grid.

Why 960? 960 is a nice useful number. You can divide it evenly by 2, 3, 4, 5, 6, 8, 10 & 12. This makes it very flexible and easy to create a website of almost any design without have to resort to a lot of arithmetic calculations. Blueprint enabled us to get a design done a lot more efficiently.

The problem with Blueprint was that it was a fixed width grid. That doesn’t translate well for a mobile phone.

We want responsive.

We stopped using Blueprint several years ago because we wanted to make responsive sites.

We wanted:

  • Works on Drupal
  • Responsive design
  • Lightweight
  • Adaptable

We looked at several options and narrowed it down. We were left with

  • Zen
  • Omega
  • Twitter Bootstrap
  • Zurb Foundation
  • Get Skeleton

Zen

We’ve made a few sites using Zen as our starter. It an excellent starter theme but I don’t find it to be that easy to make a responsive site with the CSS framework supplied.

Having said that, Zen is under heavy development and we will most likely come back to it for future projects.

Omega

Omega works really well as a responsive framework. It can be tweaked quite easily without coding by adjusting the theme settings. Omega is extremely powerful. There isn’t much you can’t do with it.

There is a lot of code in an Omega based site. Our preference is for less code.

Twitter Bootstrap

Twitter Bootstrap is a comprehensive framework. You can download components for almost anything you could want. Using Bootstrap as starter will give you an easy pathway to build a responsive site. It is one of the most popular frameworks out there.  It comes with a variety of features.

Zurb Foundation

Foundation is framework similar to Bootstrap. Like Bootstrap it comes with a variety of preconfigured items like grids, buttons and menu bars.

Get Skeleton

Get Skeleton is a responsive framework created by Dave Gamache.  It has none of the features of Bootstrap or Foundation.  There is no JavaScript, just html & css files. That is precisely the point. It is intended as a minimal boilerplate to get started.  The code is quite simple and elegant. That’s why I like it.

Get Skeleton contains the tools to build most common layouts.  There is a CSS reset. It handles typography is a nice clean way. The default Georgia/Helvetica combination works quite nicely together.  It is lacking in one area, push and pull classes. You can’t load a sidebar after the content and then make it display before the content. This may be a disadvantage, but it also makes you think about the structure of your web pages. That’s not a bad thing in my book.

 It has formed the base of quite a few of our projects. The revamp we did on the Melton South Community Centre was based on Skeleton. It allowed a prototype to be built quite quickly.

If you are looking for an easy fast way to make a responsive site and don’t need all the whistles and bells, then Get Skeleton is hard to beat.

It is made all the better now there is a SASS version available

Links

Categories

Posts

All posts