Grids without .lastCol (inspired by Cascade Framework)

50 views
Skip to first unread message

Matthew Browne

unread,
Aug 29, 2013, 11:31:47 PM8/29/13
to object-or...@googlegroups.com
Hi all,
John has previously spoken here about his framework, the Cascade Framework, which has a grids implementation very similar to the OOCSS framework.

I have completed a standalone implementation of Cascade Framework grids that can be used where using the full distro of the Cascade Framework (or Cascade Framework Light) might be problematic for compatibility reasons when integrating with CSS on an existing site (read on).

First of all, I think the OOCSS framework's grids implementation is great, and is one of the things that drew me to it, but two things I like about the Cascade Framework grids over OOCSS grids are:
  1. There's no need for a containing <div> that wraps each row (i.e. the .line divs in OOCSS) - you can skip right to the columns (.col in the Cascade Framework)
  2. There's no need to put a .lastCol class on the last column for compatibility with IE<=7

(I also like that the class names are hyphen-separated rather than camelCase, but that's a separate discussion ;)

Advantage #1 above is accomplished with a global clearfix of many elements, including <div>s (by default). For many sites, and certainly new sites, this is fine, but I was working on a site where Cascade Framework's global clearfix broke some of the existing CSS, so I wanted a standalone implementation.

The standalone implementation was relatively easy to implement; it simply requires wrapping each row with a class I added called "grid-row" (which is equivalent to OOCSS's "line" class). Example:

    <div class="grid-row">
        <div class="col width-1of2"><p>left column</p></div>
        <div class="col width-1of2"><p>right column</p></div>
    </div>

The good news is that the clearfix still works (thanks to the .grid-row class) so it's compatible with IE<=7 without needing to put a .lastCol class on the last column.

A similar implementation would of course be possible using the OOCSS class names (.line, .unit, etc.) instead.

Here's the link again to my standalone implementation of Cascade Framework grids, in case you missed it:
https://gist.github.com/mbrowne/6385935

I believe the grids should work just the same as with the full Cascade Framework as long as you include the .grid-row divs, but I haven't tested it all that thoroughly yet so let me know if you find a bug.

BTW, John has begun work on a SASS version of Cascade Framework. I noticed that the current OOCSS grids implementation provides an "ooGrid" SASS mixin. If anyone is interested I could possibly work on a similar mixin for this standalone grids implementation.

John Slegers

unread,
Oct 1, 2013, 1:36:58 PM10/1/13
to object-or...@googlegroups.com
Interesting :-)

Could you elaborate on the problem you experienced with the global clearfix? Maybe I can fix the problem in Cascade Framework and Cascade Framework Light.
Reply all
Reply to author
Forward
0 new messages