I realize this question has most likely been beaten to death, and that it’s more a matter of personal preference than anything, but I was curious to see if anyone had any suggestions.
I have a terrible habit of not reusing code. (most likely due to the fact that I somehow always seem to end up losing any snippets I collect in the continuously growing labyrinth that is my “Development” folder) That being said, I decided a couple of months back to start trying to find an existing CSS framework that I could use to make my life easier as I take on new projects. I’ve tried a number of them now, and while I’ve found some great ones, none of quite fit what I’m looking for.
In order of importance, here’s what I’m hoping to find:
-
Flexibility – I’m way too erratic to ever conform to a single design/development pattern for long. That being said, I’d prefer it if I didn’t have to spend most of my time overriding various rules from the framework I’m using. I understand, of course, that I’ll need to occasionally do this, regardless of what framework I use, but the less I need to, the better.
-
Lightweight – I’m not really looking for a framework to base my entire project around. I’m looking for more of a collection of helper classes, and possibly some utility rules for bringing sanity to things like Internet Explorer, etc. Basically, I’m looking for something that’ll make my life easier.
-
Cross-Browser Compatible – I could care less if the framework doesn’t conform to the current standards, so long as it looks relatively the same in any browser I go into. Unfortunately, I have clients still using Internet Explorer 7 who I have to accommodate. At this point, though, I could care less about whether it remains compatible with Internet Explorer 6.
-
Modular – While it’s not a deal breaker, I was hoping to find a framework that while lightweight, still managed a modular approach to the design. By this I mean, numerous stylesheets, all based on “purpose”. For instance, it’d collect all commonly used classes for dealing with forms (.error, .info, .alert, .text, .required, etc) in a folder/stylesheet called forms/forms.css, while keeping rules for tasks such as layout in another file/folder. I really actually liked the way that YAML did this – Unfortunately, YAML just has a bit too much extra stuff that I’m not using, and probably won’t need to for some time. (Though to be honest, if I cant find any other framework, I may just see what I can do about just trimming down what I’m not using in YAML, and building a base from there)
As far as content goes, I’m really just looking for some barebones, common-use stuff. Things like:
.text-center { text-align: left; }
.text-right { text-align: right; }
.centered { margin-left: auto; margin-right: auto; }
.left { float: left; display: block; }
.right { float: right; display: block; }
And of course, the usual clearfix stuff. Classes for dealing with rounded corners, shadows, etc would be nice, too.
I don’t really care too much about accessibility, rtl support, microformats, etc at the moment, since I’d be using this framework mostly for work dealing with my clients, and I’ve yet to run into the need so far.
Lastly, I’m a developer first and foremost, (I just happen to be getting a lot of things lately that require me to do more design work than I’m comfortable with) so I’ll often run into the need to build the markup dynamically on either the client or server side, so the simpler the markup for the framework, the better.
Try 960 Grid system. It’s my favorite 🙂
If you need to do your research, here’s a good guide.