Попытка сделать фреймворк Kube css имеет больше точек останова

Question

Я использую фреймворк Kube CSS для сайта, но мне нужно добавить больше точек останова. Мне нужно перейти от 4 столбцов к двум столбцам на средних экранах и до одного на небольших устройствах (моя конечная цель, и не совсем то, что будет делать приведенный ниже код, но по одному шагу за раз). На данный момент я добавил следующий класс: .double-width-small-device

Это CSS для этого класса:

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

Коробки приобретают правильную ширину (50%), но уложены друг на друга, а не на два, а на два. Вытащил мой слух, пытаясь понять, как это исправить.

Здесь вы можете увидеть весь файл grid.less: https://github.com/imperavi/kube/blob/master/less/grid.less

Надеюсь, что кто-то может помочь, делая потрясающую CSS-среду еще более удобной в использовании. Я верю, что это было бы отличной чертой самой структуры...

Thanx!

Answer 1

В итоге я использовал вложенные строки, в которых меняю ширину столбцов и сгибаемое направление строки в зависимости от этого.

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

Я чувствую себя как шаг в правильном направлении, и довольно гибкий

Thanx