The Stenhouse CSS Framework and Solar

By | July 19, 2007

Solar comes with a reference application, Solar_App_Bookmarks. As I outlined in an earlier post about views and layouts in Solar, the bookmarks application is extended from Solar_App_Base. The Base package holds all the layouts, and those layouts are what I want to talk about in this entry.

The Stenhouse CSS Framework

Solar_App_Base comes packaged with the Stenhouse CSS Framework. You should read the whole thing; it’s great stuff. (Many thanks to Clay Loveless for introducing me to, and then encouraging me to use, the Stenhouse work.) Here’s a short summary of the Stenhouse article:

  1. Stenhouse says there are 6 basic building blocks of most sites: header, footer, main content, sub content, main (site-wide) navigation, and local (section or sub-site) navigation.

  2. Taking accessibilty needs into account, these building blocks needs to set up so that the content pieces are stacked up before the navigation pieces. Stenhouse then works out a single XHTML structure with that in mind.

  3. Finally, Stenhouse provides a series of stylesheet sets that present the elements from that one structure in different ways: 1 or 2 columns of content, mixed with horizonal or vertical main navigation, with or without local navigation. No matter which CSS presentation you use, you don’t need to change the XHTML structure at all.

XHTML Scaffold

The basic XHTML structure for the Stenhouse CSS Framework looks like this:

<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>

Main Layout Files

In Solar_App_Base, we’ve split that up into several separate layout template partials, so that your application can override any particular piece of the layout. First, we have the "main" layout templates for the various presentations; each of these corresponds with a Stenhouse CSS stylesheet set:

Solar/
    App/
        Base/
            Layout/
                # main content only
                1col.php

                # main content, with main nav on the left
                navleft-1col.php

                # main content, sub content on the right,
                # and main nav on the left
                navleft-2col.php

                # main content, with main nav at the top
                navtop-1col.php

                # main content, sub content on the right,
                # local nav at the left, and main nav on the top
                navtop-3col.php

                # main content, local nav at the left
                navtop-localleft.php

                # main content, local nav at the right
                navtop-localright.php

                # main content, sub content on the right
                navtop-subright.php

Each of those calls the proper CSS files from the Stenhouse framework to position the <div>s from the XHTML scaffold properly. (After you browse through the related CSS files, you’ll see how to build your own CSS presentation groupings.)

So, in any application descended from Solar_App_Base, you can set the $_layout property to one of those layouts:

$this->_layout = 'navtop-3col';

Layout Partials

Each of those main templates is composed of the same partials; the only difference between each layout is the CSS file set. Each partial represents a section of the XHTML structure built by Stenhouse, and each of the elements in the partials can be independently targeted by CSS styling.

_head.php
The <head> section, which adds the title, scripts, styles, and so on.
_body.php

The <body> section, which is composed of the main content as well as …

_header.php
Contents of <div id="header">, with sub <div>s for "branding" and "search".
_sub.php
Contents of <div id="sub">.
_local.php
Contents of <div id="local">, generally an authentication form (when Solar_Auth is turned on), and then a ul-list of local links.
_nav.php
Contents of <div id="nav">, generally a ul-list of site-wide links.
_footer.php
Contents of <div id="footer">.
_extra1.php
Contents of <div id="extra1">.
_extra2.php
Contents of <div id="extra2">.

I know that looks like a ton of files — and it is. So why not have all that in just one layout template?

The benefit of having separate files like this is that any particular application can override individual sections of the layout by defining just those files in its own layout directory. The Bookmarks app, for example, overrides just the "_local" layout template to provide a list of links for tags and ordering options.

Solar/
    App/
        Bookmarks/
            Layout/
                _local.php

You can see that layout file here.

Because the Bookmarks app inherits all the other layout templates and partials from Solar_App_Base, it uses those when a custom template is not found. This lets us customize in a relatively fine-grained way.

Now, the Stenhouse CSS Framework may not be for everyone. Developers who want complex grid-based layouts will probably not be happy with the Stenhouse system. One nice thing about Solar is that you can define your own base application, say "Vendor_App_Base", and put your own layout system there. Then all classes extending from Vendor_App_Base will use those layouts instead.

But for the applications I want to distribute with Solar, the Stenhouse CSS Framework has been an excellent fit. My many thanks to Mike Stenhouse for his great work in developing this well-designed and very flexible CSS framework — even non-designers like me can grasp it relatively quickly, and that is no small achievement.

Update (13:25) – See also this review of the Stenhouse CSS Framework.

3 thoughts on “The Stenhouse CSS Framework and Solar

  1. Pingback: PHPDeveloper.org

  2. Pingback: developercast.com » Paul Jones’ Blog: The Stenhouse CSS Framework and Solar

Leave a Reply

Your email address will not be published. Required fields are marked *