Thoughts on improving FSS

Johnny Taylor johnny at abledaccess.com
Sun Oct 16 18:47:20 UTC 2011


Hi,

I began to write this email just after Justin first sent the original email, in response to a Harry Roberts' article -- CSS for everyone I believe -- to address what his email contained plus something Colin asked me to contribute to, being FSS, a few month's back. Sorry this is so late. I'm constantly amazed with the speed at which this stuff seems to progress at.

The reason I mentioned continuing to write this now is only because what I started to write then isn't what I currently feel to be proper anymore. Keep in mind, this is written after a complete week of fiddling in FSS. What can I say? I've lived it. 

I was overly concerned with the issues surrounding padding of certain layout containers. And to a certain extent, I still am. But much less so now. Because of what HTML5 has brought to the table and I see what issues certain CSS3 properties raise. And I wouldn't dare not mention changes to FSS between 1.3 and 1.4 (specifically the varied container sizes, brilliant by the way) that make finer control possible.

When I first began to document my thoughts, I was arrogantly focused on CSS3. And the box-sizing property, especially. Don't get me wrong it's still neat to use in a pinch, but now I'm sure it's the wrong way to approach laying out an entire page. Just yet anyway.

I'll use my blog <http://abledaccess.com> (which doesn't yet reflect my week long interaction with FSS, I'm still experiencing reset issues) as reference. I recently decided to align the layout to a grid. A 12 column 960 pixel grid <http://960.gs>. (And Ethan Marcotte's absolutely fantastic book, Responsive Web Design, was <http://www.abookapart.com/products/responsive-web-design> instrumental in my success). Is aligning my blog to a grid overkill? It just might be. But even such a simple layout benefits from that amount of attention to detail. For FSSs sake alone! I was confronted with a problem using the framework, and with some thinking and tinkering, I'm absurdly content with what has resulted.

OK, this isn't by any means pure genius on my part. If anything I think it proves that FSS works. Hold on, I'll back that up a bit. Of course it works. I mean it's largely customizable. And it's somewhat forgiving too. It just  takes some finesse.

Before I was content just eyeballing a two column layout (one main container, 75% wide, beside a complementary sidebar column, 25% wide). Nice and simple. I like simple. But in order to have said two column layout adhere precisely to a grid, the 75/25 ratio wouldn't cut it. Turns out a 74/26 percent ratio gets me closer (again brilliant). But it's not perfect. 

This is where HTML5, and to a lesser extent WordPress, pick up the slack. Because of the added elements, article mainly, to the HTML spec (and most importantly the semantics it provides your page, meaning that "extra" mark-up serves more than styling benefit) I was able leave the main and complementary containers alone and move each columns edges enough to reflect the vertical lines I needed by adding padding  (percentage padding by the way, read Ethan's book, it has forever changed my approach) to the first elements within those containers. Therefore the padding I added didn't affect the actual width's of either the main and complementary containers. (As for the sidebar, WordPress makes use of unordered list's in it's dynamic sidebars. I just added the padding to the first list in the sidebar to reflect the gutter I wanted.) Thus they stay put, where I want 'em.

Nice and clean. No bloat. Again not exactly genius but worthy of mention?

This is much longer than it need be, plus what I intended it would be. I guess I'll wrap this up. Point being thank you all for the hard work. It makes my life, and being obsessive about detail, much easier...

Johnny

P.S. Justin, my views on reset's has changed too. They're so needed. When I figure out what's going on with my layout and your reset, and it's nothing I've done (what are the chances?), I'll be sure to comment.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20111016/a2f13bf8/attachment.html>


More information about the fluid-work mailing list