Is there a standard HTML layout with multiple CSS styles available?

Question

When it comes to web-design, I am horrible at producing anything remotely good looking. Thankfully there are a lot of free sources for design templates. However, a problem with these designs is that they just cover a single page, and not many use cases. If you take a look at CSS Zen Gardens, they have 1 single HTML file, and can radically style it differently by just changing the CSS file.

Now I am wondering if there is a standard HTML layout (tags and ids), that covers alot of use cases, and can be generically themed with different CSS files like Zen Garden. What I am imagining is a set of rules off how you write your html, and what boxes, lists, menus and styles you are supposed to use. A set of standard test pages covering the various uses can be created, and a new CSS file while have to support all the different pages in a nice view.

Is there any projects that covers anything similar to what I am describing?

Answer 1

Check out the Grids framework from YUI. Particularly awesome is the Grid Builder. Also, they have a set of reset, base, and font CSS files that will give you a good baseline to build on.

Answer 2

I generally just try to follow the guidelines set by the HTML standard itself.

• Headings go in "h" tags (so one H1 tag for the main heading, then one or more H2 tags under that etc).
• Free text gets grouped in paragraphs in P tags.
• Logically-grouped sections of information go in DIV tags.
• Any kind of list (even menus that you eventually might want horizontally laid out) belong in list tags like UL, OL or DL.
• Tables of information go in TABLE tags. DON'T use table tags for layout.
• Be smart with your ID and CLASS attributes. Keep IDs unique and assign them to elements that you know represent something unique on the page, like a navigation menu or a page footer. Assign the same class to elements that are repeated but similar (which you might want to render with a similar visual style).

I always start with a very plain, vertical page - just run everything I want down the page in black and white. Then I start adding CSS to make sure the bits are formatted and laid out the way I want.

Take a look at the source of my home page for an example of what I'm talking about.

Answer 3

I've used Bluprint CSS, it's easy and useful as you'll see. It also has some ruby scripts that allow you to change the number of columns and the distance between them. By default it's 950px for a span-24 element.

Answer 4

BluePrintCSS was, from what I know, the first CSS framework. As YUI CSS Framework, It's help you to handle layout.

That kind of framework will help you to build multiple CSS for your site.

BluePrintCSS is a quite mature project so I encourage you to check it out.