sharps/common.blocks/row/row.post.css

Modular grid powered by Lost and BEM

@lost gutter $gutter;
@lost flexbox $flex;

@define-mixin row_align_classes $size {
    /* {s,m,l}al = {small, medium, large} align left */
    .row_$(size)al {
        justify-content: flex-start;
        text-align: start;
    }
    /* {s,m,l}ac = {small, medium, large} align center */
    .row_$(size)ac {
        justify-content: center;
        text-align: center;
    }
    /* {s,m,l}ar = {small, medium, large} align right */
    .row_$(size)ar {
        justify-content: flex-end;
        text-align: end;
    }
    /* {s,m,l}vat = {small, medium, large} vertical align top */
    .row_$(size)vat {
        align-items: flex-start;
    }
    /* {s,m,l}vam = {small, medium, large} vertical align medium */
    .row_$(size)vam {
        align-items: center;
    }
    /* {s,m,l}vab = {small, medium, large} vertical align bottom */
    .row_$(size)vab {
        align-items: flex-end;
    }
}

.row {
    lost-flex-container: row;
    lost-center: $maxWidth;
}

.row_order_reverse {
    flex-direction: row-reverse;
    flex-wrap: row-reverse;
}

@media (--small) {
    @mixin row_align_classes s;
}

@media (--medium) {
    @mixin row_align_classes m;
}

@media (--large) {
    @mixin row_align_classes l;
}

@media (--xlarge) {
    @mixin row_align_classes xl;
}

@media (--xxlarge) {
    @mixin row_align_classes xxl;
}