Bootstrap 3x Organising column sizes inside media queries

Question

Ever since doing work on responsive sites, I've become very used to defining my column widths inside media querys...

Eg.

@media (min-width: @screen-sm-min) { 
    #main-header {
        .make-xs-column(12)
    }
} 

@media (min-width: @screen-md-min) {
    #main-header {
        .make-xs-column(6)
    }
}

But, now that we have xs/sm/md/lg column mixins inside Boostrap 3, this seems like the wrong way to do things. I'm almost inclined to make a separate LESS file for actual column widths, which would mean just mean extending my CSS classes with these mixins with no need to actually wrap column width declarations inside media queries.

I hope this makes sense? I'm coming into the framework from a strange angle most likely!

Hows everyone else tackle this, my main concern is keeping code clean.

Thanks Phil

Please add a sketch of what you want to achieve. As mentioned by @slawa-eremkin it is not right to wrap you mixins in mediaqueries. All grids ( xs/sm/md/lg ) have 12 columns. Media queries are use to determine a grid had to be horizontal or not. `.make-xs-column(6)` means 50% of a row always. Please also read: http://getbootstrap.com/css/#grid and http://stackoverflow.com/questions/20553469/how-can-i-create-multiple-rows-using-semantic-markup-in-bootstrap-3/20556902 — Bass Jobsen, Dec 26 '13 at 19:18
@BassJobsen It was more of a sanity check! I have - before "multi media query column" mixins became the norm do it in this way, so this way of working seemed normal at first... — Philip Elliott, Dec 27 '13 at 00:00

score 1 · Accepted Answer · answered Dec 26 '13 at 10:55

If you look inside Bootstrap: https://github.com/twbs/bootstrap/blob/master/less/mixins.less

you can find, that mixins like .make-*-column have media queries and use these mixins inside other media queries is very bad way.

.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

Thanks Slawa, I thought as much. – Philip Elliott Dec 26 '13 at 23:47 — Philip Elliott, Dec 26 '13 at 23:47

Bootstrap 3x Organising column sizes inside media queries

1 Answers1