What is CSS Framework

 

Who is this for?

If you’ve been creating sites with CSS for a while you may be getting frustrated with having to recreate and retest basic layouts on a regular basis. In this article I’m trying to illustrate a simple way of skipping the tedious startup on your average project, letting you get to the interesting stuff as quickly and efficiently as possible. I’ve not attempted to explain the layouts included here so it may not be suitable if you’re a CSS beginner. Sorry about that… Feel free to dissect them yourself if you’re interested; I’ve kept them as simple as possible.

How many layouts are there?

Well, loads but the majority of them fall into rough groups. Any framework must account for the most common layouts, otherwise it’ll never get used.

  • Vertical navigation with one content column
  • Vertical navigation with two columns of content
  • Horizontal navigation with one content column
  • Horizontal navigation with 2 columns of content
  • Horizontal navigation with local navigation and one column of content
  • Horizontal navigation with local navigation and 2 columns of content

These 6 cover most of the blogs out there and most of the corporate sites as well. How can we structure a document so that it’ll be useful in all 6 of these scenarios?

What are the common elements?

Malarkey had a shot at pinning down websites’ common elements and giving them names a while back but I want something a little more general so that the building blocks can be retasked without slipping their labelling.

So… what are the common building blocks in the above 6 layouts?

  • Header
  • Footer
  • Main content
  • Sub content
  • Main nav
  • Local nav

These elements are used mix and match across most sites you visit so these are the constituent elements that any framework will have to cater for. No designs will use all of them but most will use header, footer, main content and main nav with optional sub content and sub nav.

The ideal structure

For me the most important single aspect of accessibility is the source code order: if it makes sense you’re well on your way to building an accessible site.

You can’t spent much time on the accessibility mailing lists or forums without someone being told that they should structure their HTML so that the content preceeds the navigation. This stops screenreader users from having to sit through the site’s navigation every time they travel to a new page. You can get around this with skip links but that’s an extra link to follow…

So, in an ideal world, how would we structure our websites?

  1. Header
  2. Main content
  3. Sub content
  4. Local nav
  5. Main nav
  6. Footer

This source order follows the exact structure people are expected to want: once they have read/listened to the content of your page they are most likely to want to navigate within the current section or to related pages. After they have worked their way through those they’ll probably want another section of your site so the main navigation follows.

The page structure

This page structure above looks something like this when turned into (X)HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<title></title>
    </head>
    <body>
        <div id="page">

            <div id="header" class="clearfix">
                <hr />
            </div><!-- end header -->

            <div id="content" class="clearfix">
                <div id="main">
                    <hr />
                </div>

                <div id="sub">
                    <hr />
                </div>

                <div id="local">
                    <hr />
                </div>

                <div id="nav">
                    <hr />
                </div>

            </div><!-- end content -->

            <div id="footer" class="clearfix">
            </div><!-- end footer -->

        </div><!-- end page -->

        <div id="extra1">&nbsp;</div>
        <div id="extra2">&nbsp;</div>

    </body>
</html>

You may also like...