I am looking to create a simple column based responsive framework, and would like to call my classes something like:
<div class="col col-4-2-1"></div>
where the div would display as 4 columns on a desktop browser, 2 columns on a tablet and one column on a phone (these breakpoints are hypothetical).
or
<div class="col col-8-4-2"></div>
where the div would display as 8 columns on a desktop browser, 4 columns on a tablet and 2 columns on a phone.
The easiest way would be to use attribute selectors, but I am not sure if this would be a huge performance hit. Is this a good idea, or should I write out all the permutations of the column structure (720 classes)? Or just do what Bootstrap does, with col-sm-12 col-md-6 col-lg-3
// columns
.col[class|="c-6"] { width: 16.666%; }
.col[class|="c-5"] { width: 20%; }
.col[class|="c-4"] { width: 25%; }
.col[class|="c-3"] { width: 33.333%; }
.col[class|="c-2"] { width: 50%; }
.col[class|="c-1"] { width: 100%; }
@media only screen and (max-width:800px) {
.col[class*="-6-"] { width: 16.666%; }
.col[class*="-5-"] { width: 20%; }
.col[class*="-4-"] { width: 25%; }
.col[class*="-3-"] { width: 33.333%; }
.col[class*="-2-"] { width: 50%; }
.col[class*="-1-"] { width: 100%; }
}
@media only screen and (max-width:600px) {
.col[class$="-6"] { width: 16.666%; }
.col[class$="-5"] { width: 20%; }
.col[class$="-4"] { width: 25%; }
.col[class$="-3"] { width: 33.333%; }
.col[class$="-2"] { width: 50%; }
.col[class$="-1"] { width: 100%; }
}