The Stenhouse CSS Framework and Solar
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:
-
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.
-
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.
-
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"> </div>
<div id="extra2"> </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.