Make 'columness' more tightly tied to column width definition

[wheresrhys]

I'm trying to implement a design where 3 columns turn into 2 (with the 3rd column spreading beneath the other two) when going from L to M. To achieve this I'm hampered by the fact that 'columness'

{
  float:left;
  box-sizing:border-box;
  padding-left:5px;
  padding-right:5px;
}

is added independently of actual column width

    @extend %o-grid-col; // adds columness
    @extend %o-grid-colspan-M6; // defines a width for the column at medium layout

I think it makes more sense to have each colspan declaration add the 'columness' itself, both for silent mode and non-silent (i.e. the [data-o-grid-colspan] selector should be removed and instead each e.g. [data-o-grid-colspan~="M6"] should add columness)

There are use cases for having columness added separate to column width (see responsiveness of menu in o-footer) but they feel like they're an abuse of what a grid should do, and the same effect could be achieved by hand-coding the wide-screen floated list styles.

[wheresrhys]

nudge @kaelig

[kaelig]

To do that in v3, you could use something like:

.col1,
.col2,
.col3 {
  @include oGridColumn;
   width: percentage(1/3); // Easier to read than oGridColumnWidth(4);
}
@include oGridRespondTo(M) {
  .col1, .col2 { width: 50%; }
  .col3 { float: none; clear: both; }
}

[wheresrhys]

I like it. A possible variant - though perhaps making things too magical - would be

oGridColumnWidth(x) 
   -> converts x to percent if x < 1
   -> divides x by number of columns and converts to percent if x > 1

Also a shorthand for the most common use case - equivalent to data-o-colspan's flexibility - would be nice:

Perhaps

@mixin oGridResponsiveColumn(( default: 100%, M: 1/2, L :1/3, XL: 1/4));

which does the same as

{
    @include oGridColumn;
    width: 100%;
    @include oGridRespondTo(M) {
        width: oGridColumnWidth(1/2);
    }
    @include oGridRespondTo(L) {
        width: oGridColumnWidth(1/3);
    }
    @include oGridRespondTo(XL) {
        width: oGridColumnWidth(1/4);
    }
}

[kaelig]

Oooh, this is a nice API. And great idea for oGridColumnWidth, too.

[wheresrhys]

thanks. One final idea related to this is to have an oGridUnColumnify mixin, which sets all properties set by oGridColumn back to their defaults (or sensible choices such as 0). This would probably do little more than remove padding, but gives the user a bit more confidence that they haven't missed anything.

I've just been doing some layouts which involve things changing from being a column to not a column depending on the viewport size. o-grid is definitely flexible enough to do some nice things

[kaelig]

In v3 beta 5, the same mixin does the 3 things you're talking about:

.columnnify {
  @include oGridColumn; // That's your oGridColumnify
}
.columns-3 {
  @include oGridColumn(3);
}
.columns-one-third {
  @include oGridColumn(one-third);
}
.full-width {
  @include oGridColumn(full-width);
}
.hide {
  @include oGridColumn(hide);
}
.responsive {
  // Thanks for the API suggestion!
  @include oGridColumn((default: hide, S: 8, M: 4, XL: full-width));
}

[kaelig]

I believe we're good to close this, it is available in v3.