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.

Labels:

Comments

  1. degzhausMay 8, 2012 at 10:14 PM

    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. Jim LosiMay 9, 2012 at 8:01 AM

    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. Jani HartikainenMay 13, 2012 at 9:52 AM

    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. David ShireyMay 15, 2012 at 4:56 PM

    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

Writing a Minimal PSR-0 Autoloader

An excellent overview of autoloading in PHP and the PSR-0 standard was written by Hari K T over at PHPMaster.com , and it's definitely worth the read. But maybe you don't like some of the bloated, heavier autoloader offerings provided by various PHP frameworks, or maybe you just like to roll your own solutions. Is it possible to roll your own minimal loader and still be compliant? First, let's look at what PSR-0 mandates, taken directly from the standards document on GitHub : A fully-qualified namespace and class must have the following structure \<Vendor Name>\(<Namespace>\)*<Class Name> Each namespace must have a top-level namespace ("Vendor Name"). Each namespace can have as many sub-namespaces as it wishes. Each namespace separator is converted to a DIRECTORY_SEPARATOR when loading from the file system. Each "_" character in the CLASS NAME is converted to a DIRECTORY_SEPARATOR . The "_" character has no special ...
6 comments
Read more

Safely Identify Dependencies for Chrooting

The most difficult part of setting up a chroot environment is identifying dependencies for the programs you want to copy to the jail. For example, to make cp available, not only do you need to copy its binary from /bin and any shared libraries it depends on, but the dependencies can have their own dependencies too that need to be copied. The internet suggests using ldd to list a binary’s dependencies, but that has its own problems. The man page for ldd warns not to use the script for untrusted programs because it works by setting a special environment variable and then executes the program. What’s a security-conscious systems administrator to do? The ldd man page recommends objdump as a safe alternative. objdump outputs information about an object file, including what shared libraries it links against. It doesn’t identify the dependencies’ dependencies, but it’s still a good start because it doesn’t try to execute the target file. We can overcome the dependencies of depende...
Post a Comment
Read more

A Unicode fgetc() in PHP

In preparation for a presentation I’m giving at this month’s Syracuse PHP Users Group meeting, I found the need to read in Unicode characters in PHP one at a time. Unicode is still second-class in PHP; PHP6 failed and we have to fallback to extensions like the mbstring extension and/or libraries like Portable UTF-8 . And even with those, I didn’t see a unicode-capable fgetc() so I wrote my own. Years ago, I wrote a post describing how to read Unicode characters in C , so the logic was already familiar. As a refresher, UTF-8 is a multi-byte encoding scheme capable of representing over 2 million characters using 4 bytes or less. The first 128 characters are encoded the same as 7-bit ASCII with 0 as the most-significant bit. The other characters are encoded using multiple bytes, each byte with 1 as the most-significant bit. The bit pattern in the first byte of a multi-byte sequence tells us how many bytes are needed to represent the character. Here’s what the function looks like: f...
1 comment
Read more