OOCSS Grid Challenge

84 views
Skip to first unread message

Brian Moon

unread,
Oct 4, 2013, 9:22:30 AM10/4/13
to object-or...@googlegroups.com
Hi,

We are working on some layout options for a new part of our site and had
designers design layouts on a 4 column, 3-5 row grid where some grids
could expand and take up more than one cell. We discovered early in our
efforts to build a wysiwyg tool for creating grids that we were hitting
road blocks that some grids that could be thought up were not easily
built with OOCSS grids. Luckily, those layouts were quite ugly. So, we
asked designers to build some canned layouts our team could use and pick
from. We had one come back that is not ugly and I don't see how to build
it with OOCSS grids. Its attached. Can anyone see how to build this?

--

Brian.
--------
http://brian.moonspot.net/
4row_v2.gif

Brian Moon

unread,
Oct 4, 2013, 9:45:12 AM10/4/13
to object-or...@googlegroups.com
I should clarify, I can't build this where each rectangle is its own
unit. I could break a rectangle into two in a few places and build this.
The design calls for images and/or text to span the full size of all of
these rectangles however. And the layout will be updated many times per
day by non-developers. So, having it custom done each time so that a
pieced together unit made of two line up correct is not desirable.


Brian.
--------
http://brian.moonspot.net/

Parker Ault

unread,
Oct 4, 2013, 9:58:30 AM10/4/13
to object-or...@googlegroups.com
Hi Brian,

If you take into account the original purpose of CSS–to format lines of text–you'll see why this grid design is impossible without resorting to positioning hacks.  The element in the center that spans two rows makes it so.  A single modification in one of several place would make it possible using faux table elements or flexbox, but as designed I don't think you will have any luck.  I would love to be proven wrong though!


--
You received this message because you are subscribed to the Google Groups "Object Oriented CSS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to object-oriented-css+unsub...@googlegroups.com.
To post to this group, send email to object-oriented-css@googlegroups.com.
Visit this group at http://groups.google.com/group/object-oriented-css.
For more options, visit https://groups.google.com/groups/opt_out.

Matthew Browne

unread,
Oct 4, 2013, 10:05:43 AM10/4/13
to object-or...@googlegroups.com
Can the unit spanning two rows be assigned a specific height or does it need to have flexible height?

The whole point of OOCSS is to be extensible, so there's no reason that the .unit classes can only be given the percentage-based .sizeXofY classes and only one <div> per unit.

In this case, if a specific height is OK then you could just use an absolutely positioned element inside a relatively positioned .unit element. I'm not sure about flexible height but that's more of a general CSS question...of course as Nicole said recently, "we talk about anything style related here."



On 10/4/13 9:58 AM, Parker Ault wrote:
Hi Brian,

If you take into account the original purpose of CSS�to format lines of text�you'll see why this grid design is impossible without resorting to positioning hacks. �The element in the center that spans two rows makes it so. �A single modification in one of several place would make it possible using faux table elements or flexbox, but as designed I don't think you will have any luck. �I would love to be proven wrong though!


On Fri, Oct 4, 2013 at 7:45 AM, Brian Moon <br...@moonspot.net> wrote:
I should clarify, I can't build this where each rectangle is its own unit. I could break a rectangle into two in a few places and build this. The design calls for images and/or text to span the full size of all of these rectangles however. And the layout will be updated many times per day by non-developers. So, having it custom done each time so that a pieced together unit made of two line up correct is not desirable.


Brian.
--------
http://brian.moonspot.net/


On 10/4/13 8:22 , Brian Moon wrote:
Hi,

We are working on some layout options for a new part of our site and had
designers design layouts on a 4 column, 3-5 row grid where some grids
could expand and take up more than one cell. We discovered early in our
efforts to build a wysiwyg tool for creating grids that we were hitting
road blocks that some grids that could be thought up were not easily
built with OOCSS grids. Luckily, those layouts were quite ugly. So, we
asked designers to build some canned layouts our team could use and pick
from. We had one come back that is not ugly and I don't see how to build
it with OOCSS grids. Its attached. Can anyone see how to build this?


--
You received this message because you are subscribed to the Google Groups "Object Oriented CSS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to object-oriented...@googlegroups.com.
To post to this group, send email to object-or...@googlegroups.com.
--
You received this message because you are subscribed to the Google Groups "Object Oriented CSS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to object-oriented...@googlegroups.com.
To post to this group, send email to object-or...@googlegroups.com.

Parker Ault

unread,
Oct 4, 2013, 10:36:54 AM10/4/13
to object-or...@googlegroups.com
AFAICT, as designed, you will only be able to implement that grid with fixed heights.  I've attached two variations that would be possible using display: table-cell (or nested flex elements if you are only targeting mobile webkit), but not without a minefield of potential layout bugs.  Unless your initiative here is to design a layout that will be extremely difficult to support, I would suggest either using a fixed height (not friendly to content creators), using javascript hacks for positioning a la masonry (which comes with performance and resizing issues), or tweaking the grid.  If this is just an exercise to see how much you can torture a CSS grid, then have at it and keep us posted. :)




On Fri, Oct 4, 2013 at 8:05 AM, Matthew Browne <mbro...@gmail.com> wrote:
Can the unit spanning two rows be assigned a specific height or does it need to have flexible height?

The whole point of OOCSS is to be extensible, so there's no reason that the .unit classes can only be given the percentage-based .sizeXofY classes and only one <div> per unit.

In this case, if a specific height is OK then you could just use an absolutely positioned element inside a relatively positioned .unit element. I'm not sure about flexible height but that's more of a general CSS question...of course as Nicole said recently, "we talk about anything style related here."



On 10/4/13 9:58 AM, Parker Ault wrote:
Hi Brian,

If you take into account the original purpose of CSS–to format lines of text–you'll see why this grid design is impossible without resorting to positioning hacks.  The element in the center that spans two rows makes it so.  A single modification in one of several place would make it possible using faux table elements or flexbox, but as designed I don't think you will have any luck.  I would love to be proven wrong though!
l2.png
l1.png

Brian Moon

unread,
Oct 4, 2013, 10:58:52 AM10/4/13
to object-or...@googlegroups.com, Parker Ault
yes, since the layout will contain images picked for the units, the
heights will be explicit.

We had considered using absolute positioning for this. We do not plan to
make this layout responsive as we are doing RESS. So, it does not need
to flex. Absolute positioning for a whole section of a page always feels
hacky and nasty.

The good news is we don't *need* the layouts that are not possible. We
have lots to choose from that are possible. And I think the overlap (the
core issue with building this) is not as attractive as cleaner rows and
columns.


Brian.
--------
http://brian.moonspot.net/
>> <mailto:object-oriented-css%2Bunsu...@googlegroups.com>.
>> To post to this group, send email to
>> object-or...@googlegroups.com
>> <mailto:object-or...@googlegroups.com>.
>> Visit this group at
>> http://groups.google.com/group/object-oriented-css.
>> For more options, visit https://groups.google.com/groups/opt_out.
>>
>>
>> --
>> You received this message because you are subscribed to the Google
>> Groups "Object Oriented CSS" group.
>> To unsubscribe from this group and stop receiving emails from it,
>> send an email to object-oriented...@googlegroups.com
>> <mailto:object-oriented...@googlegroups.com>.
>> To post to this group, send email to
>> object-or...@googlegroups.com
>> <mailto:object-or...@googlegroups.com>.
>> Visit this group at
>> http://groups.google.com/group/object-oriented-css.
>> For more options, visit https://groups.google.com/groups/opt_out.
>
> --
> You received this message because you are subscribed to the Google
> Groups "Object Oriented CSS" group.
> To unsubscribe from this group and stop receiving emails from it,
> send an email to object-oriented...@googlegroups.com
> <mailto:object-oriented-css%2Bunsu...@googlegroups.com>.
> To post to this group, send email to
> object-or...@googlegroups.com
> <mailto:object-or...@googlegroups.com>.

Matthew Browne

unread,
Oct 4, 2013, 11:10:28 AM10/4/13
to object-or...@googlegroups.com
Just to be clear about what I suggested earlier, it would not require
"absolute positioning for a whole section of a page", only for that one
element.

But if this layout isn't even the clear winner aesthetically, then yes,
of course just go with one of the more practical ones.
>>> If you take into account the original purpose of CSS�to format
>>> lines of text�you'll see why this grid design is impossible

Parker Ault

unread,
Oct 4, 2013, 1:56:38 PM10/4/13
to object-or...@googlegroups.com
I wanted to see if I could get this to work without any fixed dimensions, and yes, as long as your images are all correctly proportioned it's fairly simple:  http://jsfiddle.net/V7ReQ/

I wasn't able to test IE8 since it is no longer supported by jsfiddle, but it seems to work everywhere else with the occasional off-by-1 pixel-rounding.


    Hi Brian,

    If you take into account the original purpose of CSS–to format
    lines of text–you'll see why this grid design is impossible

<mailto:object-oriented-css%2Bunsu...@googlegroups.com>.
        To post to this group, send email to

        Visit this group at
        http://groups.google.com/group/object-oriented-css.
        For more options, visit https://groups.google.com/groups/opt_out.


    --
    You received this message because you are subscribed to the Google
    Groups "Object Oriented CSS" group.
    To unsubscribe from this group and stop receiving emails from it,

    To post to this group, send email to

    Visit this group at
    http://groups.google.com/group/object-oriented-css.
    For more options, visit https://groups.google.com/groups/opt_out.

    --
    You received this message because you are subscribed to the Google
    Groups "Object Oriented CSS" group.
    To unsubscribe from this group and stop receiving emails from it,

<mailto:object-oriented-css%2Bunsu...@googlegroups.com>.
    To post to this group, send email to

    Visit this group at http://groups.google.com/group/object-oriented-css.
    For more options, visit https://groups.google.com/groups/opt_out.


--
You received this message because you are subscribed to the Google
Groups "Object Oriented CSS" group.
To unsubscribe from this group and stop receiving emails from it, send

--
You received this message because you are subscribed to the Google Groups "Object Oriented CSS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to object-oriented-css+unsub...@googlegroups.com.
To post to this group, send email to object-oriented-css@googlegroups.com.

John Slegers

unread,
Oct 8, 2013, 11:42:58 AM10/8/13
to object-or...@googlegroups.com
Interesting challenge. I'll be looking into this whenever I find the time for it :-)
Reply all
Reply to author
Forward
0 new messages