Skip to main content

Doing a 180 on Grid 960

I've never been a fan of CSS frameworks; They just seem unnecessary to me. Every project can benefit from a reset.css file and maybe basic typography styles, but a whole framework? Meh.

Then I read an excellent argument in favor of grid-layout frameworks in some book which I've since forgotten the name of and changed my mind (a tremendous feat indeed). I decided I'd make use of a grid-layout framework in my next project.

I chose Grid 960 for the project since that was the one mentioned in the book, I had heard about it before, and it seemed to me the most mature and stable. My experiences with Grid 960 weren't bad per se... I mean, it didn't sour me back to my original mindset... but a few points will have me looking for another framework.

  1. The extra markup required is basically reminiscent of tables. Instead of <tr> or <td> though now you've got <div class="container_12"> and <div class="grid_3">.
  2. Borders, margins, and padding will throw your grids off. While it makes sense and is ultimately unavoidable, it highlights the fact grid-systems are not necessarily as intuitive as they claim to be.
  3. I found 960px still a bit wide. More screen-real estate is available than there was a few years ago, but people don't necessarily view sites full screen like they did back in the 800x600 days.
  4. Grid 960 isn't scalable. I'm not talking about "responsive web design" here, rather just using ems or rems instead of pxs so things can scale properly.

Researching beyond 960 I saw there are few fluid and responsive ones. And I saw a 1KB framework which was cool. It lacked push/pull functionality, but would be sufficient for most of my work I think.

So 960 wasn't my cup of tea, but I haven't given up on grid-frameworks yet. Maybe I'll find something more to my liking for my next project... or even roll my own.

Comments

  1. I really like sass. Really helpful for not having to remember all the browser specific rules for all the fun html5-ey stuff! Who needs to write 12 lines these days, really :) ?

    ReplyDelete
  2. reset script and most of the x-browser issues go away. Follow that up with the most awesome css-browser-selector: http://rafael.adm.br/css_browser_selector/

    The browser selector lets you write your classes ONCE in your markup and tweak many in your css files.

    I would write a class like this

    .foo{font-size:10px;}
    .ie .foo{font-size:9px;}

    the browser selector will implement the proper class for you based on the .[browserselector] prefix in your css class.

    It's not a preprocessor, obviously, but it does give you a great, finely detailed approach with maximum control on a browser to browser basis.

    Pro: you won't have to learn a preprocessor.
    YOU control the css for each browser

    Con: doesn't auto gen.
    YOU have to be in control.

    ReplyDelete
  3. I had sligthly similar feelings about grids but decided to give Twitter's Boostrap framework a try. It seems quite alright for doing quick UI prototypes at least - although the grids are just one part of it.

    It too has the "table-like" markup thing, but you can somewhat alleviate it by using custom classes, and then using the mixins provided in the Bootstrap LESS code to make your custom classes act as grid containers and such.

    ReplyDelete
  4. You have sort of confirmed my feelings about formal frameworks. They are not evil in themselves but it's a lot of extra 'stuff' that you may or may not use.

    ReplyDelete

Post a Comment

Popular posts from this blog

Geolocation Search

Services that allow users to identify nearby points of interest continue to grow in popularity. I'm sure we're all familiar with social websites that let you search for the profiles of people near a postal code, or mobile applications that use geolocation to identify Thai restaurants within walking distance. It's surprisingly simple to implement such functionality, and in this post I will discuss how to do so.

The first step is to obtain the latitude and longitude coordinates of any locations you want to make searchable. In the restaurant scenario, you'd want the latitude and longitude of each eatery. In the social website scenario, you'd want to obtain a list of postal codes with their centroid latitude and longitude.

In general, postal code-based geolocation is a bad idea; their boundaries rarely form simple polygons, the area they cover vary in size, and are subject to change based on the whims of the postal service. But many times we find ourselves stuck on a c…

Composing Music with PHP

I’m not an expert on probability theory, artificial intelligence, and machine learning. And even my Music 201 class from years ago has been long forgotten. But if you’ll indulge me for the next 10 minutes, I think you’ll find that even just a little knowledge can yield impressive results if creatively woven together. I’d like to share with you how to teach PHP to compose music. Here’s an example: You’re looking at a melody generated by PHP. It’s not the most memorable, but it’s not unpleasant either. And surprisingly, the code to generate such sequences is rather brief. So what’s going on? The script calculates a probability map of melodic intervals and applies a Markov process to generate a new sequence. In friendlier terms, musical data is analyzed by a script to learn which intervals make up pleasing melodies. It then creates a new composition by selecting pitches based on the possibilities it’s observed. . Standing on ShouldersComposition doesn’t happen in a vacuum. Bach was f…

Creepy JavaScript Tracking

I recently began allergy shots so my new Monday morning routine includes me sitting in a doctor's office for 30 minutes (I must wait after receiving the shots and be checked by a nurse to make sure there was no reaction). With nothing else better to do while I waited last week, I started playing around with some JavaScript. This is what I came up with:
<html> <head> <title>Test</title> <script type="text/javascript"> window.onload = function () { var mX = 0,  mY = 0, sX = 0,  sY = 0, queue = [], interval = 200, recIntv = null, playIntv = null, b = document.body, de = document.documentElement, cursor = document.getElementById("cursor"), record = document.getElementById("record"), play = document.getElementById("play"); window.onmousemove = function (e) { e = e || window.event; if (e.pageX || e.pageY) { …