Trying to make Kube css framework have more breakpoints

Question

I am using Kube css framework for a site, but I need to add more breakpoints. I need to go from 4 columns to two columns on medium screens, and down to one on small devices (my final goal, and not exactly what the code below would do, but one step at a time). I have added the following class at the moment: .double-width-small-device

This is the css for this class:

column[cols] {
    margin-right: 0;
    width: 100%;
    margin-bottom: @base-line;
    &.double-width-small-device {
        width: 50% !important;  
    }
}

The boxes are getting the right width (50%), but are stacked under each other, and not two and two. Pulling my hear out trying to figure out how to fix this.

Here you can see the whole grid.less file: https://github.com/imperavi/kube/blob/master/less/grid.less

Hope someone can help out, making the awesome css framework even greater to use. I do believe this would be a great feature of the framework itself...

Thanx!

score 0 · Answer 1 · answered Nov 14 '15 at 07:36

I ended up using nested rows, where I change the width of the columns and flex-direction of the row based on that.

mixin.less:

.row() {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-flex-basis: 100%;
    -ms-flex-basis: 100%;
    flex-basis: 100%;

    @media (max-width: @breakpoint-medium) {
        &.half-width-small-device {
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
        }
    }

    @media (max-width: @breakpoint-small) {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        &.double-width-small-device {
            -webkit-flex-direction: row;
            -ms-flex-direction: row;
            flex-direction: row;
        }
    }
    @media (max-width: @breakpoint-xsmall) {
        &.double-width-small-device {
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
        }
    }
}

grid.less

@media (max-width: @breakpoint-medium) {
    row > column[cols] {
        &[cols="1"],
        &[cols="2"],
        &[cols="3"],
        &[cols="4"],
        &[cols="5"],
        &[cols="6"],
        &[cols="7"],
        &[cols="8"],
        &[cols="9"],
        &[cols="10"],
        &[cols="11"],
        &[cols="12"] {
            .col(12);
        }
    }

    row {
        &.double-width-small-device {
            & column[cols] {
                margin-right: @grid-gutter !important;
                margin-bottom: @grid-gutter !important;
            }
            & column:last-child {
                margin-right: 0 !important;
                margin-bottom: @grid-gutter !important;
            }   
        }

    }
}

@media (max-width: @breakpoint-small) {
    row > column[cols] {
        .double-width-small-device {
            &[cols="1"],
            &[cols="2"],
            &[cols="3"],
            &[cols="4"],
            &[cols="5"],
            &[cols="6"],
            &[cols="7"],
            &[cols="8"],
            &[cols="9"],
            &[cols="10"],
            &[cols="11"],
            &[cols="12"] {
                .col(12);
            }
        }
    }

    row {

        margin-bottom: 0;

        & [offset] {
            margin-left: 0;
        }
        & column[cols] {
            margin-right: 0;
            width: 100%;
            margin-bottom: @base-line;
        }

        & row column:last-child {
            margin-bottom: 0;
        }
    }

    .width-1,
    .width-2,
    .width-3,
    .width-4,
    .width-5,
    .width-6,
    .width-7,
    .width-8,
    .width-9,
    .width-10,
    .width-11,
    .width-12 { width: 100%; }
}

@media (max-width: @breakpoint-xsmall) {

    row {
        &.double-width-small-device {
                margin-bottom: 0;
            & [offset] {
                margin-left: 0;
            }
            & column[cols] {
                margin-right: 0 !important;
                width: 100% !important;
                margin-bottom: @base-line !important;
            }

            & row column:last-child {
                margin-bottom: 0;
            }
        }
    }
}

I feels like a step in the right direction, and is quite flexible

Thanx

Trying to make Kube css framework have more breakpoints

1 Answers1