Awesome stuff. Thanks again, John- XRAY kicks some major butt.

John and WestCIV’s latest venture is XRAY- a small JS bookmarklet you can use to quickly introspect the box model for any element on a page. Whereas Firebug is the ten-ton-monster of site introspection, XRAY is light and easy to use (and just as handy)- just click the bookmarklet on any given page, and you’re shown the entire CSS inheritance hierarchy for the clicked element, it’s dimensions, etc. Beauty and simplicity in a small bookmarklet.

Right now XRAY is only supported in Safari 2/3 on OS X (with some caveats for Windows Safari), and all Mozilla-variant browsers on OS X and Windows (Firefox, Flock, Camino, etc). Howver, reportedly an IE version is also in the works. Any way you slice it, XRAY is a must-have utility for anyone doing serious browser-based work, and you should install it right now. Seriously. And make sure to give John some props/feedback while you’re at it.

Still reading? What are you waiting for?

That singular word alone can stir up heated, pseudo-religious debates in web dev circles, some finding coding frameworks a boon for rapid development, others decrying them far too bulky and overengineered in relation to hand-coded, specific solutions. I’m somewhat neutral- most of my exposure to frameworks has been straight-up coding frameworks like CakePHP, Fusebox, Spry, Prototype among others, and although I love a good hand-coded solution, when time’s short a good framework like Spry or Cake can really save time. Howver, I was really intrigued to see that some enterprising design types have pulled together a framework for CSS – “Blueprint” – to better enable grid-based layouts in standards-compliant markup. Lead developer Olav Bjorkoy cites inspiration from many leading CSS and design gurus- Eric Meyer, Jeff Croft and Khoi Vinh amongst them (although they are not ‘officially’ part of the project).

Interesting. Although some ‘designers’ condemn Dreamweaver for it’s visual design surface masking the code beneath and allowing less technical users to create flexible designs at the expense of optimized code, it’s validating to see more design-centric coders acknowledge that standards-compliant designs could benefit from framework code. As the entire Blueprint framework – options and all – weighs in at ~40kb, it’s not too draining on bandwidth as it could be, which is nice. Let’s take a look at what Blueprint provides.

At the code level, Blueprint provides a screen stylesheet with three included files – reset.css (for ‘resetting’ browser defaults to provide a consistent starting point), typography.css (for type styles and effects), and the main brains behind the framework- grid.css (containing the rules and selectors for specifying grid-based layouts in CSS). There’s also a print.css file to override certain styles for better print output, which is a nice touch.

Implementing Blueprint grid designs is reasonably simple, and should be very familiar to table-based webmonkeys who’ve been leaning on the old colspan/rowspan crutch for grid-based designs since Netscape 1.2 introduced ‘em (you know who you are!). Just wrap your page in a container div, and then mark up the divs within to specify rows and columns appropriately. By default, the Blueprint grid is 960px wide (suitable for 1024×768 monitors, a good baseline), containing 14 columns of 50px apiece, with 20px margins between.

The ‘first’ and ‘last’ classes appear to control row content, marking the first and last columns in a given row. For example, this is a basic 3-column with header layout plucked from the Blueprint tutorial:

<div class=”container”>

  <div class=”column span-14″>

    Header

  </div>

  <div class=”column span-3 first”>

    Left sidebar

  </div>

  <div class=”column span-8″>

    Main content

  </div>

  <div class=”column span-3 last”>

    Right sidebar

  </div>

</div>

In the example above (see here for the original), the header DIV stretches the entire 14 columns, and the ‘main content’ row (containing three columns) uses span-X classes to define the widths of each column in the row (with the ‘first’ and ‘last’ classes determining the actual beginning and ending of the row).

Pretty simple- and the framework renders as you’d expect in Dreamweaver CS3 so you can get the best of both worlds- quick markup in code with nice integrity in design view should you want to work that way. On the best practices side of things, less technical designers looking to really deconstruct CSS to learn from it may have some problems wading through the framework’s abstractions to get to the core techniques, but as the layouts I’ve tried so far validate well as XHTML/Transitional (my doctype of choice for most things) that’s more a minor – and obvious – gripe than anything else.

All things told I’ll probably stick with hand-coding my CSS layouts in my preferred Dreamweaver/BBEdit editing combo, but can’t deny that for quick mockups and one-off projects Blueprint may be very handy for me indeed. Definitely worth checking out, regardless. Let me know what you think?

Eric’s sage advice for ‘evening the scales’ was to first globally reset a baseline of elements to a consistent and known quantity (without resorting to using the universal selector, then build up your own project-specific styles upon this baseline. This greatly helps account for varying differences in box-model rendering, line height, fonts, etc. which are often interpreted in minutely-different ways by the various browsers’ rendering engines. He even kindly offered to share his own version of such a ‘reset’ stylesheet.

What I did not know – and Eric made me aware of via his ‘blog posting earlier today – is that the YUI team at Yahoo! has already published their own version of a reset.css file to do exactly this.

You can get more information at the Yahoo! UI Library site, along with extensive documentation, ‘quick-start’ notes, and community resources to discuss it’s usage. Very handy, and definitely worth a peek if you’re having issues getting pixel-perfect alignment across your test browser suite.