Question

I’m working on a little html/css framework that I can use for most of my websites, at least to have a basis to build on. Here’s what I’ve been using so far:

CSS framework

• Reset.css – I use the one by Eric Meyer, http://www.meyerweb.com.
• Typography.css – All main typography styles for the site (from blueprintcss.org)
• Forms.css – basic form styles (from blueprintcss.org)
• Wireframe.css – Here I set up the wireframe for one, two and three columns plus a header and footer. I used the Holy Grail technique, and implemented it so that by setting a class of ‘onecolumn’, ‘twocolumns’ or ‘threecolumns’ to the container div I can switch between the three.

Basic techniques

Some techniques I have some pre-fab examples of for me to re-use in any website:

• Suckerfish dropdown menus – Horizontal and vertical in various versions
• Sliding Doors tabs – although I try to use CSS3 where possible

Scripting

• jQuery – I try to use it as little as possible (that is, if there’s css solutions at hand, like the Suckerfish dropdown menu vs. jQ menus)

Plugins

None, yet. I looked into css3pie yesterday and it looked real promising.

Yet to look into

What I haven’t used so far but might be interesting is css and js minifiers. Also, currently I include the 5 css files mentioned above in the main.css with @import, maybe I should have them merge automatically before I upload?

Also there’s CSS grid systems of course. I never got the hang of those, but maybe I should give it another try. I know the 960 grid is very popular, but I’m not sure if I want to use classes purely for markup (grid_4, column_5, etc.) To me it’s a bit like <span class="red"> to make a text red, that’s just as bad as using inline style.

Anyway, this is just a basic setup and there’s plenty of problems in websites that are not yet incorporated in this framework. So, what should I really check out to improve my framework? (HTML5 and CSS3 welcome, no flash please :P)

Suggestions

I’ll make a list here of suggestions made below that I’ll check out.

• HTML5 Boilerplate
• IE 7/8/9.js
• Modernizr

Answer 1

I highly recommend the HTML5 Boilerplate

HTML5 Boilerplate is the professional
badass’s base HTML/CSS/JS template for
a fast, robust and future-proof site.

After more than two years in iterative
development, you get the best of the
best practices baked in: cross-browser
normalization, performance
optimizations, even optional features
like cross-domain ajax and flash. A
starter apache .htaccess config file
hooks you the eff up with caching
rules and preps your site to serve
HTML5 video, use @font-face, and get
your gzip zipple on.

Boilerplate is not a framework, nor
does it prescribe any philosophy of
development, it’s just got some tricks
to get your project off the ground
quickly and right-footed.