grid-generator.less

.row::after {
    clear: both;
    content: "";
    display: block;
}

.columns,
[class*="col-"] {
    float: left;

    padding: 1rem;
}

.generate-columns(@prefix, @columns, @i: 1) when (@i =< @columns) {
    .@{prefix}-@{i} {
        width: (@i * 100% / @columns);
    }

    .generate-columns(@prefix, @columns, (@i + 1));
}

.generate-columns(col, 12);

/* Phone (landscape) columns */
@media only screen and (max-width: 767px) {
    .generate-columns(phone, 12);
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
    .generate-columns(phone-portrait, 12);
}