Question

Does anyone know of a simple HTML5/CSS3 framework which applies a minimum of formatting with no need for custom class names? Ideally it would take only properly laid-out HTML5, and would position elements with a minimum of flexibility, using common rules for, say sidebar widths and the like.

With HTML5 there much less need for custom class names, with elements like header, nav or aside, but I haven’t yet seen a framwork taking full advantage of that. Any ideas?

Clarification: I’ve been through all the usual suspects (Bootstrap, HTML% Boilerplate, Shim and the like), and none of them scratches my itch. And that itch is a simple combo of plain HTML5 structure which assumes nothing about the design but defines everything semantically, with a simple CSS3 stylesheet which defines the actual layout. I can envision it using several stylesheets, with a base one defining the layout of elements and separate one(s) for actual design. It would be used as a simple starting point for various projects, which could be later customized individually.

Apparently, I might need to go the way proposed by Wesley and write one myself…

Answer 1

It sounds like what you want is not a CSS framework, but just a simple custom stylesheet.

Not to discourage your effort in looking for something that already exists, but you’re better off writing it yourself. Perhaps start off with one of the many existing reset.css. Default styles without the ability to hook in (or out) via class names are not very flexible.

You really shouldn’t avoid classes, you should take advantage of them. No framework is going to know where and how your HTML elements are nested or what they’re supposed to look like based on tag name alone, that’s one reason why we usually use classes.

If you pay close attention to the semantics of the new HTML5 elements, you’ll see that header doesn’t always mean “the top of your page with your logo”, footer is not just an element for the bottom of your whole page, and aside doesn’t always equate to “sidebar”.