Semantic Columns about concise.css HOT 13 CLOSED

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

from concise.css.

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.

from concise.css.

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

from concise.css.

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;
}
}

from concise.css.

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.

from concise.css.

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.

from concise.css.

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;
    }
}

from concise.css.

@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.

from concise.css.

I know this one is closed, but I have figured out how to do semantic columns. Its pretty easy when you have 2 columns, you just float the first column right, and the second column left. This swaps there position.

If you are using gutters the margin is on the wrong side, but this can be fixed with this css:

.gutters [class*='column-'].float-left {
    margin-left: 0;
    margin-right: 2%;   
}

Still got testing to do on nested columns, but for semantic layout this should be ok.

Steve

from concise.css.

Is this not solved by the column() and row() mixins that were released in v2.0.0?

Ref: http://concisecss.com/documentation/sass/mixins/

from concise.css.

HI Keenan,
I wasn't aware this was included, do you have an example of how it works?

Cheers,

Steve

from concise.css.

Just been reading up on mixins, I think I get it now. I am playing with it now so will let you know how I get on.

Cheers,

Steve

from concise.css.

Hi,
I am an absolute Sass-Newbie.

How do I get 2 (or 3) columns at a resolution of <768px side by side?

A CSS Example would be very helpful!

from concise.css.