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
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.
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
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
<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
So, in any application descended from
Solar_App_Base, you can set the
$_layout property to one of those layouts:
$this->_layout = 'navtop-3col';
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>section, which adds the title, scripts, styles, and so on.
<body>section, which is composed of the main content as well as ...
<div id="header">, with sub
<div>s for "branding" and "search".
<div id="local">, generally an authentication form (when Solar_Auth is turned on), and then a ul-list of local links.
<div id="nav">, generally a ul-list of site-wide links.
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.