CSS table driven layout sections

[christianmagill]

I was asked to leave some ideas on table driven layouts.

Usually I resort to table driven layouts when I need columns of equal height, and/or need to center unknown items vertically across multiple columns.

Margins become useless when you are using table driven layouts and thus padding must be used for gutters.

I really like the idea of being able to switch sections of my layout to be table driven where necessary.

There seems to be some serious issues with tables and positioning in Firefox. For instance relative positioning is completely ignored in regards to positioning absolute descendants.

Thanks,

[tsi]

I can imagine some cool mixins using display: table for the stuff you mention - vertical aligning and equal heights columns. I hope you don't mean actual tables...

[mirisuzanne]

Awesome, thanks! @jina is already working on some planning around what (CSS) table features we would need to support, and this is a great place to keep that conversation going.

Yes, @tsi, this is about css table display.

[jina]

Yep. Started some work around what I think the Mixins would look like. If you have your own thoughts, suggestions, please share! :)

[tsi]

Just used display: table for vertical centering, it's very basic but I thought I'd better share.
http://codepen.io/tsi/pen/xDELf

[jina]

Thanks for sharing! I have one set up already for vertical centering. Mine has the mixins all separated, because sometimes you need to have an immediate child be a table-row or table-caption… but I suppose doing a short cut like you have for when you know all children will be table-cells is a good idea. :)

[mirisuzanne]

I plan to watch what you each come up with, and then abstract them all together.

Keep 'em coming! :)

In the meantime, I'm adjusting our internal API so that new modules will be easier to write.

[tsi]

Well, equal-heights columns won't require anything else - http://codepen.io/tsi/pen/BqEna
All I did was adding a few siblings and coloring them to visualize the effect.
What other display: table tricks do we have in mind?

[tsi]

Here they are, combined and improved - http://codepen.io/tsi/pen/xDELf

[christianmagill]

These mixins are great in general for dealing with display table-cell layouts, but I was hoping for something that would be more compatible with the grid possibly using with-layout.

The problem I seem to be having is that while I can use the span functions instead of mixins to get the widths, I have no way to get an accurate combination of width and gutter. I thought I could switch layout to inside, but then it expects padding on both sides of columns, which doesn't match up with the rest of my layout.

What would really be useful is a way to set gutter position to inside, but apply necessary padding to one side instead of split and adjust for box-model as necessary. But I forsee problems with width and the first and last mixins.

[mirisuzanne]

Use the gutter() function - or if you want the width of columns-and-gutter, use e.g. span(3 wide). "Wide" adds a gutter to the span. "Wider" adds two gutters.