Semantic Columns

[steve-acet]

A suggestion for the future would be semantic column positions. What I mean by this is say a 2 column grid layout, with a sidebar on the left and content area on the right. Semantically the content area should come first in the code, so it would be good if we could have a class that does this for us and keeps gutters in the correct place.

At the moment I can float the main content to the right, but if I am using the gutters the margin is being applied to the wrong side of the sidebar as it is technically the second column, but visually is the first.

I hope this makes sense :)

Cheers,

Steve

[keenanpayne]

Steve,

That is actually a great idea, I never thought about that level of semantics in regards to the grid (having content before the sidebar, etc). Do you have any examples of this or perhaps example code that would help us implement such a feature?

I'll look around and see if there's something I can come up with, but I definitely see a need for this.

I'll post in here if I find anything, thanks again for the suggestion!

Best,
Keenan

[steve-acet]

I have previously done it by floating and adjusting the margins, but I don't really know how you would do it in a grid system. There does appear to be plenty of others that have semantic grids, so lots to look at.

http://www.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/

Another feature I would like to see is a grid, lets say for a gallery, nice and even like the guttered grid, but when the browser drops below a certain size the number of columns change. At the moment it goes from as many columns as you like, and then just one column for mobile. Not sure if I am explaining it well, and it might be outside the scope of the framework.

[steve-acet]

Take a look at Bootstaps Column Ordering, they use push and pull to order there columns: http://getbootstrap.com/css/

[steve-acet]

Here you go, this is my first attempt at responsive grid columns. It reduces a 4 column grid to a 2 column grid when you go below 60em. I am sure we can expand on this and have different levels of breakup and also breakup more columns, so reduce 8 to 4 and so on.

@media (max-width: 60em) {
.breakup .column-4 {
width: 50%;
}
.breakup.gutters .column-4 {
width: 49%;
}
.breakup .column-4:nth-child(2n+1),
.breakup.gutters .column-4:nth-child(2n+1) {
clear: both;
margin-left: 0;
}
}

[keenanpayne]

Referring to the ability to push and pull columns, that feature has been implemented into Concise, just check out the bottom part of our grid documentation: http://concisecss.com/documentation/layout/grid.php.

However, while the ability to push and pull columns solves some issues semantically, it makes you add extra classes to HTML markup in order to achieve the result.

Regarding that Smashing Magazine link you posted, I think there is a lot of merit to having a grid system where you can do the following:

section {
  .column(3);
}

As well as use traditional grid classes (i.e.: .column-12).

I will work on extending the mixins for both our SASS and LESS implementations of the Concise framework so that we can use a more semantic grid system, implementing proper widths and gutters to any CSS class or ID.

[keenanpayne]

As for breaking columns into different widths when the browser scales down (ex: 50% turns into 25%, etc), I think that is something that needs to be carefully evaluated.

I know it is something that is implemented in frameworks such as Bootstrap and Foundation, but using the code below (from Bootstrap) just seems way too inelegant.

<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

This is something we should think about for a v.2.0.0 release, I really do think it is an important feature.

[steve-acet]

Hi Keenan,
I agree about the Bootstrap method being inelegant. I think mine might be better, as you add a single class to the row to indicate that it can be reduced. My class name may not be semantic, but this is what I have done for the 12 column grid (currently supports 4 to 2 and 6 to 3):

@media (max-width: 60em) {
    /* four to two columns */
    .breakup-extra-small .column-3 {
        width: 50%;
    }
    .breakup-extra-small.gutters .column-3 {
        width:  49%;
    }
    .breakup-extra-small .column-3:nth-child(2n+1),
    .breakup-extra-small.gutters .column-3:nth-child(2n+1) {
        clear: both;
        margin-left: 0;
    }
    /* six to three columns */
    .breakup-extra-small .column-2 {
        width: 33.3333333333%;
    }
    .breakup-extra-small.gutters .column-2 {
        width:  32.0%;
    }
    .breakup-extra-small .column-2:nth-child(3n+1),
    .breakup-extra-small.gutters .column-2:nth-child(3n+1) {
        clear: both;
        margin-left: 0;
    }
}
@media (max-width: 70em) {
    /* four to two columns */
    .breakup-medium .column-3 {
        width: 50%;
    }
    .breakup-medium.gutters .column-3 {
        width:  49%;
    }
    .breakup-medium .column-3:nth-child(2n+1),
    .breakup-medium.gutters .column-3:nth-child(2n+1) {
        clear: both;
        margin-left: 0;
    }
    /* six to three columns */
    .breakup-medium .column-2 {
        width: 33.3333333333%;
    }
    .breakup-medium.gutters .column-2 {
        width:  32.0%;
    }
    .breakup-medium .column-2:nth-child(3n+1),
    .breakup-medium.gutters .column-2:nth-child(3n+1) {
        clear: both;
        margin-left: 0;
    }
}
@media (max-width: 80em) {
    /* four to two columns */
    .breakup-large .column-3 {
        width: 50%;
    }
    .breakup-large.gutters .column-3 {
        width:  49%;
    }
    .breakup-large .column-3:nth-child(2n+1),
    .breakup-large.gutters .column-3:nth-child(2n+1) {
        clear: both;
        margin-left: 0;
    }
    /* six to three columns */
    .breakup-large .column-2 {
        width: 33.3333333333%;%;
    }
    .breakup-large.gutters .column-2 {
        width:  32.0%;
    }
    .breakup-large .column-2:nth-child(3n+1),
    .breakup-large.gutters .column-2:nth-child(3n+1) {
        clear: both;
        margin-left: 0;
    }
}

[keenanpayne]

@steve-acet your code looks good. You're right, we might want to think of better class names that are more semantic and have a little more meaning, but I think it's a good idea.

I'll assign this to a v2.0.0 milestone so we can start working on the 12, 16 and 24-column layouts, as well as how to calculate this with the SASS and LESS mixin.