Created by: dschenk
I often have the following use case when generating semantic columns:
.module {
.make-xs-column(12);
.make-sm-column(6);
.make-md-column(3);
}
Meaning I need a class that fills a variable amount of columns, depending on breakpoints. Before this patch, the code above would generate the following CSS:
.module {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
float: left;
width: 100%;
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
margin-bottom: 24px;
}
@media (min-width: 768px) {
.module {
float: left;
width: 50%;
}
}
[etc. for the other media-queries]
I propose to use the grid system in the following way to reduce this redundancy:
.module {
.make-column();
.make-xs-column(12);
.make-sm-column(6);
.make-md-column(3);
}
or:
.module {
.make-column();
.make-md-column(3);
}
This means using the make-column mixin whenever we want to define a semantic column class. In my opinion this disadvantage beats redundant output though.
Your thoughts?