Content with Style

Web Technique

A CSS Framework

by Mike Stenhouse on May 22 2005, 16:20

In my Modular CSS article I documented the possibility of breaking down stylesheets into components that could be reused across projects. All well and good. The next logical step is to extend this to become a CSS framework, allowing rapid development of sites with pre-written and tested components. All that's really required to produce this is a set of naming conventions and a flexible base template...

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>

The magic of CSS

We're going to need some farily advanced CSS tricks to turn this source order into useful layouts. They all have to be flexible, to account for text resizing, which with the footer rules out absolute positioning...

The eureka moment for me was when Dunstan published his absolutely positioned menu technique as part of his Mozilla Europe work. Suddenly it became possible, using an incredibly sneaky trick, to pull the nav bar from the bottom of the source and use it horizontally in the header and still allow for text resizing. Now that's genius.

Then you've got the negative margin tricks for moving floats around. I first came across these when Ryan Brill posted about them on Mezzoblue... Dead handy.

If we're going to use floated layouts we're going to need some way of clearing the contents. I could put clearing divs into each of my elements but there is the black magic clearfix method by Tony Aslett that will do this for me, keeping the source clean.

A few other things that might come in handy:

See where I'm going with this?

We have a single, flexible source document that will take a variety of content and a load of CSS techniques to manipulate them... To make this framework useful I have to be able to get my single source document to display as any of the common layouts listed above. Once that's done I'll be able to drop any content into the HTML framework, plug in the appropriate layout stylesheet for the design, tweak it and the job will be done. No more rewriting XHTML and CSS for every project; every time I start I will begin work with a solid foundation that I can tweak to fit the specifics of the job. Startup time will be next to nothing.

Back to our five main layouts

Okay, so the source code is fixed. What we want is to be able to plug in tried and tested layout stylesheets for reuse on future projects. I'm going to stick with fixed width layouts for this because they're simpler but using negative margins we could get these fluid with a bit of extra work.

Achieved: Level 2!

That's it - all the common layouts done with pluggable stylesheets and ready to go. They're set up in a kind of Zen Allotment for you to have a flick through...

If you want to have a play with these yourself, all the source files are packaged up in quick-grow zip file.

30/11/2007 UPDATE: I've uploaded a slightly updated version of the framework. Very little has changed but a few people have voiced concerns over the lack of a formal license. Taking advice from Paul Jones (thanks!) I've added the new BSD terms, which are about as open as they come. I'm happy for people to use the framework for whatever they want. If you do, please drop me a line - I'd love to see what you come up with!

6/09/2010 UPDATE: This article is now available in Belorussian, apparently, translated by Amanda Lynn.

Comments

  • wow, thanks for this write up, I have been in the process of building a css toolbox library and this is exactly what the doctor ordered….

    by clint on May 22 2005, 00:27 #

  • I’m a bit late discovering this article, but nice going Mike. It’s in the same vein as something I tried to flesh out last year that I called the CSS Sandwich, although my focus was more on a best practice for managing CSS hacks. I wonder whether it might be worth expanding to include sidebars on the left and right hand side too. Combined with Malarkey’s semantic naming conventions, it would be great if every site that fell into these categories followed this structure. Can you imagine how easy that would be for maintaining someone else’s code!

    by mattymcg on May 22 2005, 07:07 #

  • Matty:

    Allright, but never forget that you want to keep your job!
    Therefore write unmaintainable code !

    by Pascal Opitz on May 22 2005, 10:01 #

  • Excellent… I’ve been thinking about this exact thing recently! I’ve been wanting to gather tried and true code to create this very thing. You’ve gone ahead and simplified this for me. Problem was I wasn’t aware of these great solutions that you mentioned above. How do the layouts hold up against the array of broswers out there (directed at the problematic IE)?

    A CSS Framework… Brilliant!

    by Joshua Heyer on May 23 2005, 17:59 #

  • Only 3 comments over one month? Why? This is huge! Isn’t it?

    by Tinus on May 23 2005, 18:05 #

  • sureley everyone created their own when they started learning, i know i did…

    by mark on May 23 2005, 19:33 #

  • Thanks Tinus! We wrote the articles right back at the beginning of the year but real life got in the way of actually getting CwS live until Thursday last week. That’s why the articles look quiet…

    by Mike Stenhouse on May 23 2005, 20:43 #

  • can you make each style sheet easily downloadable?
    a set of links will do

    by chris on May 23 2005, 23:40 #

  • Nice job :-)
    And quite usefull!!
    I just noticed that on “my” firefox (ubuntu) the navigation seems to be longer than header so the “Contact” link is on the 2nd line. Anyway, I already had to tackle that problem once. I just used a container for the horizontal navigation bar – with a fixed size (100% or in px I do not remember) for that container.

    <div id="navContainer" style="width=xxx">
    <div id="nav">links…</div>
    </div>

    link to page

    by Gabriel on May 23 2005, 23:57 #

  • Very nice! The modular approach is quite powerful.

    I don’t see any usage terms with these stylesheets. Is the intention for readers to be able to use these stylesheets directly to build from, or are you just sharing the techniques?

    (In the US, at least, you really can’t assume anything is available for any particular use unless it’s spelled out in front of you…)

    by Kevin Dangoor on May 24 2005, 03:54 #

  • Now all you need to do is automate the process with a scripting language and you have a tool to instanly build web sites. Like this;

    content -> html framework -> CSS applied -> Go live

    Users could interface with a form on the web, upload their content, the HTML framework would get populated, the CSS sheet applied, and their web host would display the finished file. Automatic! Then the designer would just create new cool stylesheets, or be put out of work.

    by jeremiah on May 24 2005, 15:44 #

  • How can I download the used css files?

    by Dutch Nomad on May 24 2005, 15:49 #

  • Try this technique

    To sort out your css problems:

    Error: The stylesheet http://www.contentwithstyle.co.uk/css/sifr-screen.css was not loaded because its MIME type, "text/html", is not "text/css".

    by George Smith on May 24 2005, 16:35 #

  • Chris and Dutch: I’ll sort out a zip for the whole lot later on today.

    Kevin: As for terms of use, you can pretty much do what you like. I’d appreciate a credit somewhere (a reference in the source is enough) and I’d be very interested to see what you manage to do with them so drop me a mail.

    Jeremiah: That sort of thing would work really well for hosted blogging or the like, I reckon… Top idea!

    I’ve been using a similar workflow for my small freelance projects. For these I get given the design and I just pick the right layout sheet and start tweaking.

    Josh Heyer has suggested putting this framework up with a layout repository that people can contribute to. I’ve registered a domain, now I just need the time to sort out a site… Watch this space.

    by Mike Stenhouse on May 24 2005, 16:44 #

  • George: Where did you find that error? I thought I’d unplugged the sIFR stuff… We launched in a hurry though so it might still be lurking in there somewhere.

    by Mike Stenhouse on May 24 2005, 16:46 #

  • Goerge:
    Thanks for flagging it up. We start with edges and corners, but we get it running smooth soon …

    by Pascal Opitz on May 24 2005, 17:43 #

  • Now that’s good stuff.

    This is something I’ve wanted to look into for a long time now. I’m one of those people who always manages to have to recreate basic layouts before continuing on to a more customized one, so this type of thinking should save me some work.

    Hopefully you’ll be posting more on this train of thought in the future. Thanks for the start though!

    by Patrick Haney on May 24 2005, 21:20 #

  • Thanks for a most thoughtful and practical article on CSS for real world work.

    As browser support becomes more frequent it’s easier to wean myself from tables-based formats.

    I’ve just spent a day exploring its features and learnt a lot.

    My only stumbling point is that I’m not sure how to recreate it locally without having the PHP server side scripting language.

    Is it possible to get the horizontal navigation and masthead to work without the PHP?

    Thanks

    by John Hilvert on May 25 2005, 01:35 #

  • Wonderful article!
    I want to play around with the files on my own. however… I think there is some mistake in the link of the zip file. It just goes to the same place as the other demo link, Could you provide a link to the zip file?
    Thanks again for a great article

    by etan rozin on May 25 2005, 02:32 #

  • Nice write up. A very useful library of layouts.

    by Craig Beck on May 25 2005, 09:31 #

  • The link to the zip file should be working now…

    by Mike Stenhouse on May 25 2005, 12:16 #

  • A great idea, well thought through. Everyone works differently, of course, but even so this is an excellent starting point for the majority of layouts.

    by Dave Child on May 25 2005, 14:13 #

  • Great work Mike!
    Only one question: in
    link to page
    I see that the Header is larger then the navigation menu. Isn’t it nicer if both are the same length? Or u did this way to have buttons on the navigation menu all the same length to look nicer?

    Sorry, maybe this is a newbie question
    Cesidio

    by Cesidio on May 25 2005, 16:17 #

  • Cesidio: The nav bar is the same width as the content area – it’s just the way I decided to do it! It could be the same width as the header bar if you wanted…

    by Mike Stenhouse on May 25 2005, 17:11 #

  • Cesidio again: Actually, it’s just occurred to me what you mean. The demo pages aren’t intended as ‘designs’ – they’re just examples of the concept highlighted in the article. The point is that if you keep your HTML source consistent you can write and reuse modular layout sheets for the components of your websites. For example, if you write a horizontal nav bar then you can reuse it next time you need one, instead of starting from scratch. Hope that explains things a little better.

    by Mike Stenhouse on May 25 2005, 17:42 #

  • This is such a great article—thanks so much for putting it out there.

    I’m about to start another side project and the thought of beginning from scratch with the code is always daunting. I am definitely going to build my own library of page layouts and components. You have completely inspired me.

    This is a software engineer’s approach to CSS design. Modular, reusable code based on common patterns. You never have to reinvent the wheel, and all your energy can be used towards innovation. Brilliant!

    Thanks again!

    by Lynne on May 25 2005, 23:21 #

  • I’m gettin a pesky horizontal scrollbar in every layout…
    what up with that?
    (using both Firefox & Exploder6, BTW).

    Other than that, this is an excellent idea…

    by Steve on May 26 2005, 04:59 #

  • This is the first example of swapping multiple layouts whilst making CSS only modifications that I have seen. So after all it is possible in practice also …

    by Dee Zsombor on May 26 2005, 11:29 #

  • Steve: What platform/resolution? All’s fine on SP2…

    by Mike Stenhouse on May 26 2005, 12:58 #

  • This is Great!!! I’ve been thinking of this for a while… men this is amazing…. I was very busy to do this for at least 2 or 3 months.. thanks.

    Brilliant work.

    by f0vela on May 26 2005, 17:20 #

  • Mike,

    Re: The pesky horizontal scrollbar…
    My screen res is 800×600.

    To eliminate the horiz scroller,
    I actually have to grab a corner of the
    web browser and drag it right…

    With anything LESS than 780 pixels for the
    INSIDE window width, the horiz scroller appears.

    Here are some screenshots:

    1) Firefox – No horiz scrollbar – inside width >= 780 pixels
    http://img131.echo.cx/my.php?image=firefoxnoscroll4hv.jpg

    2) Firefox – fugly horiz scrollbar – inside width < 780 pixels
    http://img131.echo.cx/my.php?image=firefoxscroll2wo.jpg

    3) IE6 – No horiz scrollbar – inside width >= 780 pixels
    http://img131.echo.cx/my.php?image=ie6noscroll3fw.jpg

    4) IE6 – fugly horiz scrollbar – inside width < 780 pixels
    http://img131.echo.cx/my.php?image=ie6withscroll1iu.jpg

    Hope this helps….

    by Steve on May 27 2005, 00:19 #

  • You can buy books about CSS, learn about stuff you’ll never use & it’s gonna cost you $.
    Or, you can browse the internet and find Gems like this for FREE.
    Thanks, this I am gonna use!

    by Magicien on May 27 2005, 02:49 #

  • Thanks Steve – it’s my bad. Those layouts are all fixed-width and on anything less than 800×600 maximised you’ll get the fugly bars. I ought to add a fluid or flexed layout really. Luckily for me, Jeremy doesn’t seem to reading or I’d have had hate mail by now for not including any! I only did those layouts to illustrate the article’s concepts and I figured a few would be enough to give everyone a good idea of what I was on about. When I have time I’m going to revisit this and put together some ‘proper’ layouts, hopefully with some help from you guys…

    by Mike Stenhouse on May 27 2005, 15:41 #

  • Excellent work, Mike. This is just what I was looking for. One question from a CSS/HTML newbie: How does one get a “sub navigation” bar working? I see the ul.subnav class (?) in layout.css. How can I implement this?

    Thanks again for the great resource!

    by Paul on May 28 2005, 00:44 #

  • are these pages for layouts available in ENGLISH.. all i ever get when i look is pages in Danish.. HELP

    by Pat on May 28 2005, 18:44 #

  • Um, the pages contain dummy lorem ipsum text, which is Latin. Is that what you mean? The page content isn’t important; it’s the concept of separating your layout from your presentation into reusable modules that counts…

    by Mike Stenhouse on May 29 2005, 14:36 #

  • javascript error in Firefox with
    display: inline-block;

    I think you can use display: table-cell;

    But it’s an excellent work!! Congratulations!!

    by Ploufy on May 30 2005, 16:48 #

  • Javascript error in Firefox for a CSS property?! That’s a little crazy… Exactly which page are you seeing that on?

    by Mike Stenhouse on May 31 2005, 02:28 #

  • Great Article, I think it was said best when clint said “it’s just what the doctor ordered”. I too was looking for a way to structure templates so that they can easily change with the swapping of stylesheets.

    I would like to point out thought that there is a mispelled word in The Ideal Structure section of the page second paragraph. The word “having” is mispelled to read “ahving”.

    by Ron on May 31 2005, 06:09 #

  • this page http://www.contentwithstyle.co.uk/Articles/17/a-css-framework

    I have this message in the javascript console
    Error: Error in parsing value for property ‘display’. Declaration dropped.
    Source File: http://www.contentwithstyle.co.uk/css/tools.css
    Line: 19

    by Ploufy on May 31 2005, 08:58 #

  • Another problem with Internet Explorer :

    With the layout-navtop-1col.css :

    When you move the cursor over the last item of the menu (at the bottom of the page), a blank line appears. The footer seems to move. It’s only under IE, there isn’t this problem with Firefox.

    Don’t worry I haven’t noticed another problem. :-)

    by Ploufy on May 31 2005, 09:04 #

  • Ploufy: Hmmmmm. I can’t replicate your ‘display’ problem… What version of FF are you on? I can’t think why the javascript console would care what CSS properties I use…

    That IE bug is a classic. I’ll sort it out later. Ron: Thanks for the correction too – one of these days I’ll learn to type properly!

    by Mike Stenhouse on May 31 2005, 13:52 #

  • I see a tiny problem with what’s posted on this page. The XHTML inside the grey box is missing a closing DIV for div#content. The linked pages, though, are absolute gold. This is a big help.

    by Jordan on May 31 2005, 16:50 #

  • I love these frameworks. Thank you. Quick question: is anyone else having a render problem when they open the files in dreamweaver MX 2004? I get all black on the display page.

    Thanks again.

    by guest on June 1 2005, 22:27 #

  • It’s ok for FF Mike. I upgraded it and I don’t have the ‘display’ problem.
    My last version was 1.0+, and today I use FF 1.0.4

    by Ploufy on June 1 2005, 10:34 #

  • Dreamweaver does some pretty weird stuff with CSS rendering generally. As part of a contract I was on a couple of years ago I had to research what it supported… I found that it had serious trouble with nested floats and paid no attention to properties that hide elements, like list-style: none and display: none. I wouldn’t recommend using DW for CSS development – by all means use it as an editor but use a proper browser for previewing your work…

    by Mike Stenhouse on June 4 2005, 16:54 #

  • I get errors in konqueror 3.1.4. #footer gets positioned over the content on about all the styles. I would make some screenshots, but I think you are better off checking as you debug. Great though, I’m doing the same right now with PHP includes. I’m thinking about maybe generate the fundation CSS in PHP(mentioned in , then keep the static CSS and make changes to it, that way it won’t need to genereate the CSS each time.

    by taare on June 6 2005, 20:54 #

  • Hey guys,

    on this page:
    http://www.contentwithstyle.co.uk/resources/css-framework/index.php?css=layout-navleft-1col.css

    There is a blank space at the bottom of the page, below the bottom navigation…I’m just wondering, how do I get rid of that?

    I’m still getting used to the spread of files and having trouble correcting that

    thanks for any advice.

    PS: This is a great collection of cross-browser CSS templates, very much appreciated

    by Ash on June 12 2005, 10:50 #

  • Ash: You probably want to take the 20px margin-bottom off div#content in layout-navleft-1col.css.

    div#content {
    position: relative;
    width: 780px;

    margin: 0 auto [HERE ->] 20px auto;
    padding: 0;

    text-align: left;
    }

    Otherwise, got a URL?

    by Mike Stenhouse on June 12 2005, 18:18 #

  • Hey Mike

    thanks for the reply.

    It turns out that didnt fix it. I’ve tried a few things here and there…none worked obviously.

    Site is live because less than 1% use firefox to access it.

    btw, i forgot to mention that the extra space below the footer only appears in mozilla [mac and pc] and safari

    here’s a link: www.sajlawyers.com/areas_of_practice.php

    scroll to the bottom

    thanks for your help btw.

    also, have you ever thought of integrating a footer than sits at the bottom of the page, regardless of pagelength?

    you know, the
    css: #ieclear {clear:both}
    stuff like that.

    just a thought :)

    by Ash on June 13 2005, 20:46 #

  • typing it again..since the browser messed it up:

    you know, the div id=”clear-ie”
    css: #ieclear {clear:both}
    stuff like that.

    by Ash on June 13 2005, 20:48 #

  • The footer does sit at the bottom of the page, regardless of content length. It’s working fine on your site, for example… I’m using Tony Aslett’s clearfix method to avoid structural clearing elements because I’m a bit of a semantic purist. Comes from my accessibility roots.

    Incidentally, you will want to avoid using an id for your clearing elements since you’re likely to want to reuse them. Ids can only occur once on a page but classes can turn up as many times as you want.

    by Mike Stenhouse on June 14 2005, 02:42 #

  • actually, I meant having the footer sit at the bottom of the page, not content.

    see this page:

    http://www.sajlawyers.com/template.php

    by Ash on June 15 2005, 00:09 #

  • Oh, I see what you mean. No I generally don’t go for that… Positioning elements to the bottom of other things is tough.

    To sort your background problem I’d put the repeating faux-column gif on div#page instead of body. To get the shadow to show through you’ll probably need to put about 5px right padding on #page too. Then use one of the extra divs to put a bottom shadow under your page to tie it all together.

    Your site’s looking nice, by the way.

    by Mike Stenhouse on June 15 2005, 01:43 #

  • Thanks for the suggestions and comments. Very appreciated.

    Once again, great job on the css compilation. You’ve got yourself another regular visitor to your website now :)

    by Ash on June 17 2005, 01:16 #

  • Really like the css framework.

    I have one question.

    How do I get the right column’s background colour to extend all the way down the page? The colour of the main section and sub section are different. I want them to have the same height.

    I have tried the Faux Columns solution, I seam to be going wrong somewhere.

    thanks for any advice

    by Oystein on June 21 2005, 15:28 #

  • You’re putting your faux columns background on div#content? If you’re not in a hurry post a URL but if you need a quick response I HIGHLY recommend the CSS-D mailing list.

    by Mike Stenhouse on June 21 2005, 18:58 #

  • There may be some issues with the order of the markup on these ‘templates’ in terms of practical usability. I completely agree that in an ideal world and with one eye on SEO, it makes perfect sense to place content as high up the markup as possible.

    However, when an organisation with vast experience in user testing looked at this type of markup order, they felt that, precisely because it not an order practiced on most sites, it could cause significant confusion amongst some users – especially screen reader users who may navigate a page not only in a very different manner to a sighted user but far faster.

    They suggested that a markup order that deliberately placed Main Navigation as the first major element in markup might well have the benefit of being ‘familiar’ and thus increase overall usability.

    I’m not arguing against the markup order suggested above. I’m not convinced that there is a Right or Wrong here. I’m merely pointing out that what works in theory may not always translate well into practice – especially when trying to accomodate the learnt behaviours of site users.

    by Mel Pedley on July 1 2005, 15:37 #

  • And this is the joy of using floats with negative margins for vertical layouts – i.e. with the three column vertical layout, the markup for the left column (navigation) could be placed before the main content without needing to change a single line of CSS, keeping both camps happy :)

    Similarly, the right and left columns could also be switched in the markup. The only constraint being the right column cannot preceede the central column (using a negative left margin on the central column).

    Incidentally Mike, I have used a similar technique based on a negative right margin for quite a while. Provides the flexibility described above flipped the other way – constraints on left column :

    #main {
    float: left;
    width: 340px;
    margin-right: -560px;
    margin-left: 220px;
    }

    / * / * html #main {display:inline;} /* */

    div#sub {
    float: right;
    width: 200px;
    }

    div#nav {
    float: left;
    width: 200px;
    }

    Generally I use this with either liquid or elastic layouts and works a charm on all modern browsers/platforms. Negative margins is a great technique with considerable flexibility and minimal constraints on markup that can help extend usability and accessibility [IMO].

    Plus the user can choose the order of the prinicple content and navigation without needing to touch the CSS – very nice :)))

    [PS. always late to the debate me!!!]

    by Tom on July 2 2005, 22:35 #

  • Mel: Very interesting comment!

    Content organised in the order I’ve suggested here is, in my opinion, the most sensible. It’s only potentially confusing because few sites have the option of considering source order – it requires quite a large mental shift for the developers to both CSS and semantic coding, but I don’t think that should count against it. Coupled with a proper heading structure (that’ll allow JAWS to construct a document outline) it ought to be ‘better’ for all non-visual users. I include PDAs in that as well as search engine robots…

    That said, when testing with screen readers, the most annoying thing for me is having to continually skip through massive navigations to get to the meat of the page because I always end up over-shooting. I tend to skip to the end of the page and then work backwards… That behaviour would be interrupted by my front-loading approach.

    Hmmmm, it might be worth passing this one on to Bob Easton for discussion…

    by Mike Stenhouse on July 11 2005, 18:02 #

  • Tom: Thanks for that! When I get time I’m planning on setting up a mini site for layouts based on this framework and your CSS’d be a healthy addition, especially for people sharing Mel’s concerns.

    by Mike Stenhouse on July 11 2005, 18:05 #

  • You are welcome Mike, good to finally be able to share and discuss the code and ideas behind these techniques. My first blog on negative margins last summer has a few liquid/elastic examples – (although the rounding unit discussed in article is no longer required on the main crop of browsers – was predominantly for a bug in older Mozilla’s that is now fixed).
    The elastic fantastic is a good demo also making use of unobtrusive javascript for the visuals rather than faux or other techniques. Feel free to share any of these techniques in your framework / forthcoming site :)

    by Tom on August 1 2005, 21:17 #

  • With blogs there is the single column layout like Garret Dimon has his blog.

    And what is meant with sub content? Things like blog roll, ads, news ?

    by beza1e1 on August 16 2005, 14:26 #

  • A great resource, but I’m curious as to why you didn’t separate color styles into a separate “skin” stylesheet as outlined in your “Modular CSS” article?

    by Andrew on August 16 2005, 19:22 #

  • My bad. On closer inspection I see that all the colors are black, white, or gray. I didn’t see a “skin.css” file so I thought you had decided on a different approach.

    by Andrew on August 16 2005, 23:24 #

  • beza1e1: By ‘sub’ I mean sub content. Anything that falls outside of the main focus of the site. That could be a blogroll, ads or news, as you correctly suggest. That Garret Dimon site is one of my favourites, actually. Beautifully simple. If I were laying out his site I’d wrap his ‘recently’ section in ‘nav’ and use a variation of the one content column layout but rewrite the navigation sheet…

    Andrew: If these were proper designs I’d have skin.css in there but they’re all dead simple so I didn’t bother. With hindsight I probably should have put one in for consistency!

    by Mike Stenhouse on August 23 2005, 10:32 #

  • Hi Mike

    All I can say is to echo what others have said, “wow”! This is the sort of thing I might dream of undertaking but never seem to have the time, energy or skill. This is brilliant.

    Thank you so much for all you have done. The thing I find even more amazing is the simple black and white design you’ve done them all in. Even that is brilliant.

    Thanks once again.

    Rich

    by Richard Brown on August 25 2005, 09:41 #

  • Oh, thanks! [blush].

    by Mike Stenhouse on August 25 2005, 12:16 #

  • Great work, Mike!

    I got 2 questions regarding classes in tools.css:

    1) What do you use replace class for in final work?

    2) Can you explain further the way you used the clearfix method? You used display:inline-block; property which is to stop IE/Mac to widen widthless floats to full width. But then you add width:100%; property. What is that selector * html>body .clearfix Looks like a combo of StarHtmlHack with BeNiceToOpera5?

    Your code differs from original method, you linked to. What’s the point?

    by Greg on August 26 2005, 09:45 #

  • 1) tools.css is assorted rules that I reuse on every project. replace is for image replacement, but isn’t relevent here. Replace it with your own favourite IR CSS, if you like. In case you’re interested, what’s there would be used in the HTML like this:

    <h2 class="replace" id="some-heading">Some heading</h2>

    2) * html>body .clearfix will feed the rule to IE/Mac only, since it obeys descendent selectors (way ahead of its time) but also follows the StarHtml filter, being the IE engine. It looks like the PIE article has been refined since I first grabbed the clearfix code but here’s the reasoning…

    IE/Mac can’t be forced to clear with the Holly Hack – it obeys height, unlike it’s PC counterparts, so it requires a different hack. Inline-blocks apparently expand vertically to contain their floats (like table cells, if I remember rightly), but we don’t want to shrink-wrap the block or it’ll cause the contained floats to stack vertically, hence the 100% width.

    Am I making sense?!

    by Mike Stenhouse on August 30 2005, 08:38 #

  • 1) That’s what I was guessing :). However I’m using another IR CSS.

    2) I tested this selector with Win/IE and it didn’t work. That made me think of it being a Mac/IE hack. However I haven’t seen it before and I don’t have Mac to test it myslef, thus the question. Is this selector (being in fact Mac/IE hack) described somwhere in detail?

    Your explanation of inline-block property seems to make sense. Again, no chance for me to test it.

    Thanks for reply. Your article sped up my workflow. I was already thinking about something of that kind on my own but why not to use a proven one.

    by Greg on September 1 2005, 08:31 #

  • My usual sources don’t seem to have any documentation on * html>body filter. You can piece it together yourself from this list of browser shortcomings though: http://www.dithered.com/css_filters/css_only/index.php

    I don’t have to worry too much about IE5/Mac these days but every now and again it comes in handy. I am a bit worried that a future version of IE/PC will start supporting descendant selectors but retain the * html bug so just be aware…

    Glad to hear the article has been of use to you!

    by Mike Stenhouse on September 5 2005, 12:06 #

  • Coming back to the clearfix method:

    * html .clearfix {
    /* Hides from IE-mac */
    height: 1%;
    /* End hide from IE-mac */
    }
    
    This can cause serious problems, since the page might be very high, so in IE you might suddenly have 30px gaps in there. I recommend to replace that with 1px

    by Pascal Opitz on September 20 2005, 10:40 #

  • I like the base idea,

    but i think, it can not work for all Project’s like that. When i remember how long i was trying to tell IE how to center something, when the Content is dynamic. uuuu awfull…

    Ever tried to generate a dynamic CSS File ?

    I’am just working on something like that, where you have a Database and choose which parts you would like to re-use for a particular page.

    Still, i like that Article very much!

    Cheers,

    Tom

    by Tom on September 22 2005, 03:50 #

  • Pascal: Yep, I’ve come across that as well. Bit of a bugger. For anyone who doesn’t know, it’s a shortcoming of the otherwise wonderful Holly Hack. If the page is very long then 1% can cause the element to which you’ve applied the Holly Hack to stretch. I’ve seen this manifest in a horizontal nav bar…

    by Mike Stenhouse on September 22 2005, 07:40 #

  • cool

    by Martin on September 23 2005, 13:09 #

  • Hi Mike,
    Modular css and your css framework are great! But can someone help me in understanding the benefits of placing your navigation last in the mark-up?

    It seams to me that being able to navigate a website is more important than eliminating the ‘skip navigation’ link. When the main nav is in the bottom of the markup, it seems to me that finding the content that one wants to read becomes really difficult. Maybe not for a blog I guess. But even in a blog there should be a good means of navigating the archived information. I feel that finding the information one looks for is the hard part about using the internet.

    So I have always assumed that placing navigation items at the top of the page is the only logical way to structure ones markup. How many selections do people make before reaching a content item they want to read or hear? More than enough to make up for a “skip navigation” link IMHO.

    But I would love to hear that I am wrong. Because if I am wrong, I will use your css framework and make my life easy. :-)

    thanks again,
    bill

    by bill on October 9 2005, 14:33 #

  • Actually, the core point of the article was to highlight the advantages of establishing a source template from which you can generate the majority of site designs. If you disagree with my source order then just switch it around! The only parts of the framework you’d have to change are the layout sheets, which are only a couple of dozen lines each…

    I think that your rationale for souce code order holds very well for a landing page – where people are likely to need navigation first and foremost, but once in browsing mode a nav-at-the-top order forces either repetitive reading of the navigation or reliance on skip links. People come to websites for their content and I want to make access to that as easy as possible.

    Have a read of ‘The Ideal Structure’ section of the article and this reply to Mel further up in the comments.

    I’d be interested to hear what you decide to do about your source order – I’m open to suggestions too!

    by Mike Stenhouse on October 10 2005, 08:19 #

  • Hi Mike,
    Thanks for your reply!
    I have read your article many times (along with it’s growing list of comments). And Mel’s comment suggests that the navigation might be better at the top because of ‘familiarness’. But I just wonder how much time is spent navigating one website and how much time is spent navigating the vast internet for meaningful content. Will users without sight find content on a web site that they want to read/hear if the navigation follows the content (even in a ‘perfect world’)? I just don’t know myself and that is the only reason I asked.

    Maybe it depends on the nature of the site. Sites with a broad range of topics may benefit from a navigation-first approach. And smaller sites with a more focused subject matter might be better off with the content first.

    At any rate, in the framework that I’ve made to speed up my own work (which has nothing to do with css apart from being able to slap new css files into it and linking to them in the db) I print the navigation first. Your wonderful article has made me think about turning my framework into a little tableless-layout CMS by including css files that cover the layouts you’ve mentioned in your article.

    Any way it was inspiring to read and I thank you!
    And you hit an important nail on the head. Clear as a bell. And I hope Im not off-topic in my questioning your markup.

    I think, though, that I will probably keep the navigation at the top of the markup.

    I can see. But I also don’t have a scroll-wheel on my mouse. And I would surely be put off by a site that could fit all its content on my screen in order to save me having to ever scroll down the page constantly to read it, by putting the navigation at the bottom of the page.

    Hope that wasn’t too long a comment.

    Have a good one,
    bill

    by bill on October 10 2005, 12:50 #

  • ‘But I just wonder how much time is spent navigating one website and how much time is spent navigating the vast internet for meaningful content.’

    That’s a fair point actually, although I use the same argument to justify placing my navigation at the bottom… If someone’s on my site they probably came through Google or from an inbound link so they are likely to be after my content, not my navigation. Thinking about it, I suppose that what I’m advocating is a kind of Embrace Your Bottom for screenreaders!

    I think you’re right about the nature of the site mattering though, and I like your no-mouse-wheel analogy – it’s a really interesting way of thinking of it. Anyway, it sounds like you’ve put plenty of thought into how you’re structuring your HTML and, for me anyway, that’s the most important thing.

    Thanks very much for your reply – it was really interesting!

    by Mike Stenhouse on October 17 2005, 10:10 #

  • Hi

    The power of CSS is amazing. I’ve seen a few sites like this one where i’ve been blown away by what you can do. Alot of DHTML and other funkiness can be avoided if your clever with your stylesheet.

    I want to manage a stick up footer on the website for IE 5.0 +. with CSS As you can see 1 on bmw.co.uk

    thanks

    Imran

    by imran on November 2 2005, 15:16 #

  • Imran:

    I did something similar to that for a recent site using a mixture of CSS and DOM scripting: Guildhall School of Music and Drama.

    The bar at the bottom is pinned there regardless of content height.

    by Mike Stenhouse on November 3 2005, 06:04 #

  • Nice!

    I think you could cut down on a few “display:inline” and “text-align” declarations though ;-)

    I’d say that links inside containers in these examples as well as some script to allow a switch of column length would be helpful. They could demonstrate real life behavior or bug. For example, the negative margin 3 column layout demo on ALA fails to show issues with NN6 and Opera 6.

    I’ve done something a bit similar, but with fluid layouts:
    Liquid Layouts

    And I’ve used the negative margin technique the “other way around”:
    3 column Fluid Layout

    FWIW, all these solutions are hack free.

    by Thierry on November 8 2005, 10:42 #

  • Thierry, this hack free issue comes along with the price of extra markup, i.e. clearing divs. We actually have the same discussion in the other comments.

    by Pascal Opitz on November 10 2005, 07:18 #

  • Very good stuff. A small problem, I’ve tried adding the suckerfish dropdowns to the layout-navtop-localleft layout without any success. The dropdowns seem to get jammed up and go sideways under the mainmenu instead of down. Anybody implemented this? Links would be greatly appreciated.

    Thanks. DRE

    by Andre on November 16 2005, 10:34 #

  • Pascal,
    When I say hack free, I mean CSS filters and structural hack.
    The 8 layouts are based on the exact same markup; check them out, you won’t find any clearing DIV in there :-)

    by Thierry on November 16 2005, 23:12 #

  • Thierry: Well done!
    On a sidenote: Your solution comes along with negative margins… personally I rate that as kind of a a hack. And again, what is so bad about overwriting rules with html>body? And what is the benefit of a hack-free (validating) CSS file?

    by Pascal Opitz on November 21 2005, 01:34 #

  • Pascal,
    Not all these solutions rely on negative margins, but I must say they are very handy when the content comes first in the markup. I don’t know why you consider them as a hack though…

    Your question regarding the “be nice to Opera hack” contains my answer. I don’t like to “fork” inside a stylesheet to overwrite values.
    Make it red, no make it yellow, no make is red again… That does not make sense to me (without mentioning that most CSS filters rely on parsing bugs).

    IMHO, many more people would use CSS layouts today if – instead of wasting time “talking hacks” – discussions were about how elements flow and how to construct the box to avoid box model issues…
    ;-)

    by Thierry on November 22 2005, 00:18 #

  • Thanks Thierry, let me try to find an answer to that:

    Negative margins are as much a hack as using selectors for overwriting values. They’re not really invalid, but they’re not intended to be used for this kindo stuff if U ask me. Especially if you consider that reading “margin-left: -200px” is as confusing as ’”red, ehrm… no, green … no red”, to me at least.

    And sure, I don’t LIKE to apply hacks like StarHtml or html>body, but then again if it saves me the clearing divs you’re using in your 3-col layout I’ll do it, sinde it’ll keep presentational stuff where it belongs: inside of the CSS.
    Same goes for hacks in favour of Mac IE compatibility or any backwards compatible rendering.

    You might argue that IF everything worked fine everyone would … but that is not much more but bla bla since:
    a) various browsers have bugs that need to be dealt with
    b) you have to deal with designers that have their own ideas about how the site should look like, so you cannot design the layout around the markup
    c) you need as much research to get a good layout going hack-free and browser compatible as you would need to apply clearfix and such things. and they don’t make your html any better.

    I acknowledge what you’re trying to say, fo the the reasons above I tend to dismiss the last point you were trying to argue.

    by Pascal Opitz on November 23 2005, 08:44 #

  • Except it, I think same!

    by eric on November 28 2005, 16:25 #

  • Pascal,
    You mentionned structural hacks in a previous comment, and you use it again here as an “excuse” for using CSS filters, but my layouts [1] [2] do not use presentational hacks.
    And IMHO, browsers bugs should not be an excuse either [3].
    ;-)

    [1] no hacks
    [2] still no hacks
    [3] still good browsers support

    by Thierry on November 29 2005, 21:59 #

  • Thierry … Just to summarize: Given that you don’t want to add structural markup you have two ways open which are CSS filters or negative margin based layouts … both in my eyes are hacks, in your eyes the filters are worse than the negative margins. I think we call that a day now since we’ve been going on about it for a while.
    Thanks for your input.

    by Pascal Opitz on November 30 2005, 06:38 #

  • Good article, thanks.

    by Brian on December 1 2005, 11:29 #

  • I had bookmarked this page a while ago to come back to, and I’m glad I did. Nice work. I’ll be playing around with this idea on my next project. Thanks.

    by Lance Fisher on January 20 2006, 13:42 #

  • Thanks Mike, your framework is great. It helps me not to reinvent the wheel each time I develop a new web site.

    By the way, I’m trying unsuccessfuly to make the design fluid. Right now I work on the 3col with horizontal nav design.

    Do you have any ideas?

    Thanks!

    Drew

    by Drew on January 11 2006, 08:25 #

  • I have been using the framework idea (seperating css files) for a while and have notices that occasionally when a page loads it skips a few css files randomly so you end up with an undesirable page.

    Ive noticed this in FF and IE it rarely happens and all you have to do is reload the page and the rest will get there but it does happen – so on that rare occasion someone will end up with a shocker page.

    Is this a problem with @import? or the browser skipping over files to speedup loading?

    Has anyone else come across this problem? Id rather not have to resort to putting all the css styles in 1 file.

    by Rhys on January 22 2006, 18:05 #

  • Nope, never seen that myself. I’ve been splitting my files up in some form or another for about 3 years and I don’t remember even Netscape 4 doing that!

    Do you have a URL? I’d be interested to see it happen…

    by Mike Stenhouse on January 23 2006, 07:57 #

  • It’s time consuming to find the ‘right’ CSS, just too many good layouts out there on the net. Doing a CSS contest is, but why not doing a browser contest first!

    by Boda on March 4 2006, 16:59 #

  • I’m doing a theme design contest for this framework – more details at the following URL:

    http://raibledesigns.com/page/rd?entry=css_framework_design_contest

    by Matt Raible on March 3 2006, 19:26 #

  • Nice ideas, re-writing my website this way now :)

    by foddski on April 11 2006, 06:49 #

  • Hi!
    Great work! Just a question, I’m playing with “Horizontal navigation with local navigation and one column of content” and I saw that the sub content is not displayed, but it’s in the html file and css (display: none;). If I delete it (or simply I leave it empty) I experience many problems, expecially with IE, for example the horizontal navigation disappear, or passing the mouse over one of the link in the left menu reduces the page, moving the footer to the top. Anyway with firefox and opera there are no problem, any idea how to solve it?

    Best regards,
    ogivio

    by ogivio on April 14 2006, 04:53 #

  • Always a good resource article to come back to. But do you guys think we can have the Year now as part of the comment’s details? =)

    Anyways, I’m trying to revisit oldies-but-goodies-links in terms of CSS templates/framework. Seems that most of the ones I’ve bookmarked are about a year old, like this one. So, I’m just wondering if there has been any major changes etc. to the current findings in Web Design/Development and current new technology?

    PS. I wonder if anyone has tried the framework w/ “current” offerings such as OTL’s?

    by Sherwin Techico on April 13 2006, 04:20 #

  • A quick answer to Shewin: I’ve just been playing retrofitting a site for IE7 and I suspect that someone needs to come up with a nice way of handling these conditionally included files. One for each of these layouts, for example, would quickly get out of control. That’s the big change for me…

    Ogivio: Not seen that problem and I’ve been using this framework on projects for a year and a half now… Do you have a url I can look at?

    by Mike Stenhouse on April 18 2006, 12:36 #

  • Mike, thanks for your answer. I uploaded two pages, one with the sub part left in the source (no problem with IE6) http://www.soundsurgeons.it/hide/new/nuovo.html
    and another page with the sub part removed from the source http://www.soundsurgeons.it/hide/new/nuovo_sub.html with IE6 I can see no horizontal bar, but as I said before there are no problems with firefox or opera.

    Thank you again Mike!

    Ogivio

    by ogivio on April 19 2006, 05:59 #

  • I have come to a similar approach and I have build my own CSS framework, which I have decided to make free.

    The project is young and needs work to correct remaining inconsistencies accross browsers, so I won’t recommend to use it for serious projects, but feel to test it, and use it if you want. Please drop me a line if you have comments or suggestions.

    here is the url:
    http://www.wymstyle.org

    by Daniel R on April 21 2006, 03:41 #

  • Negative margins for floats?

    Have a play with this:

    http://positioniseverything.net/articles/jello.html

    Still has a bit of my original negative margins trick in there from way back in 2002 :-)

    Douglas

    by Douglas Livingstone on April 19 2006, 21:16 #

  • This is a good stuff. I’m thinking of integrating these templates into my open source templating framework: Templation

    I’ll definitely drop you a note before redistributing anything…

    by Gabe da Silveira on April 25 2006, 15:24 #

  • Thanks for css-framework.

    I was struggling with a similar idea to have a servlet-based code to populate pages as required.

    I like the idea of using the single column with the local-list and switch as required to 2-column and/or a single page as needed by the application.

    I have problems with IE6; fireFox is fine.

    The problems seem related to the div id=”sub”, unused in the layout-navtop-localleft.css that I am using to start the application.

    I have tried div id=”sub” class=”clearfix” and div class=”wrapper” without luck.

    Have a look at the referenced url.

    IE6 mangles or does not show the nav-row as well as repeting -entries in

    IE 6.0.2900.2180
    fireFox: 1.5.0.3

    http://142.46.207.217/~zarama

    by zarama on May 9 2006, 13:42 #

  • This is really great! Nice work.

    I too am having problems with IE6 not showing the nav row. Firefox is fine. I am using layout-navtop-subright.css

    http://peteandtari.petegeniella.com

    by pete g on May 11 2006, 13:54 #

  • Thank you Douglas! It was a margin problem, now it’s ok! I didn’t think about that, I’m very new at css… Thanks again! :)

    by ogivio on April 20 2006, 11:53 #

  • I’m trying to get my head around merging the splendid Y!UI Grids and this fabulous Framework (while leveraging the terrific Modular CSS) . With the Framework, the HTML order remains untouched though layouts require style sheet switching; with the Grids, the HTML requires parsing, but a single CSS file handles the layout. The Framework integrates semantics, the Grids offer more layouts. Maybe the Framework’s semantic goodness could be stitched to the Grids by adding a PHP function to the mix?

    I’m no programmer, so I apologize for this lame speculation. Each $page_layout could be associated with a multi-dimensional array, the outer array being the stacking order of named $yui_rows (of which there seem to be 10 flavours), and the inner array being the content file to include in each row’s divs.

    So the pseudocode arrays look like:

    default = (
    1/1 row => (banner),
    1/1 row => (header),
    1/4 3/4 row => (nav, content),
    1/1 row => (footer)
    );
    home = (
    1/1 row => (banner),
    1/1 row => (header),
    1/4 1/2 1/4 row => (nav, content, adverts),
    1/1 row => (footer)
    );
    etc.

    So all HTML structure is contained within ten PHP files, one for each flavour of YUI row, and each row’s divs include a call to the function. You just assemble them like lego.

    by jeffo on May 21 2006, 15:47 #

  • Great idea Mike,

    I hope this can make it to some CMS engines soon.

    I bloged about it here

    by Wiktor Schmidt on June 27 2006, 06:05 #

  • Gr8 job, but how to make it work with Nifty Corners ?

    by laryk on September 12 2006, 08:25 #

  • I’ve just went through these styles and found that on your horizontal nav ones the ‘contact’ gets pushed under ‘home’.
    The interesting thing, it only happens in Firefox, I’m using 1.5.0.4.
    This is a great idea, I use CMS made simple and these could be put up as a way to start their designs for those that are new to HTML/CSS

    by mark on July 21 2006, 13:08 #

  • It’s fine for me Mark, using Firefox 1.5.0.4 too. That’ll happen if you turn the text size up though…

    by Mike Stenhouse on July 21 2006, 13:34 #

  • I liked the idea, I had thought about it before, but never got around to it. Good job. I made a design template called flexible with the framework, you can find it at graystatic.net/projects/flexible .

    by graystatic on March 31 2007, 21:20 #

  • Was just testing out your css framework in a variety of browsers and versions and the only rendering bug I saw shows up only in one specific layout (navtop-localleft) in IE5.5 . The navbar just doesnt show up! Granted 5.5 is archaeic these days, do you have any idea of a css tweak to fix this.

    great work on this “holy grail” of a css framework!

    by james wilson on March 29 2007, 15:42 #

  • Nice job and good idea.

    If you want another similar examples, get it:
    http://www.manuelrecena.com/docs/estandaresweb_0609_ejemplos.zip

    Regards.

    by Manuel J. Recena Soto on October 17 2006, 08:58 #

  • Hi Mike,
    That’s really good of you to publish the framework for us newbies, is there any licensing issues for re-working your framework…is there any license at all?
    Thanks again,
    Bert

    by Bert on October 23 2006, 14:31 #

  • @Bert: No, just help yourself. Attribution is always nice but you can do whatever you want with it… When I use it I tend to leave the ‘A CSS Framework…’ comment line in the top so it can be traced back to here.

    by Mike Stenhouse on October 23 2006, 14:35 #

  • why need to have extra DIVs at the end? seems they are useless for all you layout.

    e.g.

    <div id=”extra1”> </div>
    <div id=”extra2”> </div>

    by keith on January 4 2007, 13:04 #

  • Strictly speaking they’re not necessary but I got into the habit of including them after doing my Zen Garden design way back when. They often come in handy for little decorative bits and bobs…

    by Mike Stenhouse on January 4 2007, 13:25 #

  • Thanks for the tips, very handy advice – interisting stuff about the ordering of content in source as well as page. We are busy re-building our site around a CSS layout.

    by 2Dmedia Web Design (Sam) on November 29 2006, 13:50 #

  • it simply works. for developers is a true, solid point of start to develop layouts.
    the time to create a layout is now reduced to minutes :)

    Best,
    Alex

    by Alex on July 3 2007, 12:05 #

  • A very good illustration of using <div> for accessibility. I’m a big fan of website accessibility, and have used this hierarchical approach to content before (having first seen it described on Dave Fisher’s website).

    Must confess, however, that I do sometimes hack the accessibility issue by using structured tables (with summary tags) and then just using <div> to float content to the top in the code, so that screen readers get content before navigation.

    If anyone fancies berating me for this workaround, please feel free, as I know I should be sticking to the more user-friendly and accessible website design methodology demonstrated here.

    I also have to confess that, although I keep templates handy, I do like coding on the fly. Handcoding is a really rewarding way of designing webpages, if only Dreamweaver and Photoshop junkies would give it a chance. It provides so much more control over important issues such as search engine friendly design, web accessibility and so forth.

    by Chris Boswell (Leeds UK) on August 13 2007, 12:42 #

  • I am still getting errors extracting your zip. Any fix or different location?
    Thx

    by Ami Porat on December 16 2007, 10:51 #

  • It seems to be working just fine for me, Ami. Care to be more specific?

    by Mike Stenhouse on December 16 2007, 13:06 #

  • Mike,
    After the extract command I get an error message: “the file exists already, choose another name” [there are no such files at the same location] I get the same error no matter what other file name or location I specify. After this process, I get two empty folders CSS and I. What gives?
    Thanks

    by Ami Porat on December 17 2007, 01:46 #

  • Great! I am trying to gather information on the various CSS frameworks around. I love WymEditor, so I am leaning towards wymstyle but I try yours to. I am gonna do a redesign of my big balloon webshop and I wonder if this framework would work for a webshop

    by Large balloon guy on January 17 2008, 16:51 #

  • Great article I was thing of doing the same thing at one point but made just trying out yours will inspire me to use a pre-built CSS code library. Either yours or one of my own creation.

    Thanks,
    My Design Buddy – Katy, Texas

    by Buddy on July 30 2007, 10:07 #

  • A great resource, but I’m curious as to why you didn’t separate color styles into a separate skin stylesheet as outlined in your “Modular CSS” article??

    by Tercüme bürosu on January 16 2008, 04:08 #

  • I cant tell you how much this helps. I kept running into problems trying to position site elements using relative or absolute positioning. Now everything snaps together. Now only if I could figure out how to keep the header text from jumping out of the div block…

    by Edward V on June 19 2008, 13:34 #

  • Nice ideas, re-writing my website this way now :)

    by Magicien on November 11 2008, 18:12 #

  • Absolutely the best framework around! I love it, great job! Just wanted to say how much I like your website redesign!

    by Jess on October 29 2008, 20:49 #

  • This looks pretty compatible with the Unobtrusive CSS Framework too - http://unobtrusivecss.com/

    by Gary on December 28 2008, 06:49 #