Semantic columns do not have alternative gutter-widths per breakpoint. (twbs 3.x) #11873

Activity

1. mdo commented on Dec 14, 2013

   

   mdo

   on Dec 14, 2013

   Member

   More actions

   I can't see a reason this would be?

   Probably because it was an oversight :). I think we should probably include it with v3.1 provided it doesn't break backward compatibility.
2. mdo commented on Dec 15, 2013

   

   mdo

   on Dec 15, 2013

   Member

   More actions

   Works fine for me. Just ran it locally and had no problem. The mixins in v3.0.3 include everything you need, including the padding for the gutters.
3. mdo

   closed this as completedon Dec 15, 2013
4. duhseekoh commented on Dec 16, 2013

   

   duhseekoh

   on Dec 16, 2013

   Author

   More actions

   Right, it includes padding, but do you see that the 10px gutter I specified for sm overwrites the 0px gutter I specified for xs, even if I'm in an xs sized viewport?

   // Generate the small columns
   .make-sm-column(@columns; @gutter: @grid-gutter-width) {
     position: relative;
     // Prevent columns from collapsing when empty
     min-height: 1px;
     // Inner gutter via padding
     padding-left:  (@gutter / 2);
     padding-right: (@gutter / 2);
   
     // Calculate width based on number of columns available
     @media (min-width: @screen-sm-min) {
       float: left;
       width: percentage((@columns / @grid-columns));
     }
   }
   

   I would expect everything inside the mixin to be within the media query.
5. mdo commented on Dec 16, 2013

   

   mdo

   on Dec 16, 2013

   Member

   More actions

   Ah, I don't know that we'd be able to fix that until v4 when we can safely rewrite these mixins. Changing the behavior to make all properties responsive, or even just the padding, might not fly. Would have to experiment more.
6. mdo

   reopened this on Dec 16, 2013
7. duhseekoh commented on Dec 16, 2013

   

   duhseekoh

   on Dec 16, 2013

   Author

   More actions

   Got it, thanks. Just to reiterate for future discussion it does seem more "natural" that column sizing mixins like that would not create side effects for mixins defined at different viewport sizes.
8. mdo commented on Dec 16, 2013

   

   mdo

   on Dec 16, 2013

   Member

   More actions

   @dicicco2 Word, fur sure. It might be a distinction we make for mixins vs. predefined classes. For the classes, it makes a lot of sense so that things naturally scale up (on account of the mobile first approach). I'm torn though because I know folks want that behavior as well.

   I had thought LESS supported scoped variables within media queries, but perhaps not. That'd solve this problem entirely.

   Either way, not likely something to immediately change. Thanks for chiming in and reiterating <3.
9. mdo commented on Dec 18, 2013

   

   mdo

   on Dec 18, 2013

   Member

   More actions

   Punting to v4 to revisit if and when LESS properly supports scoping the variables for this. Right now I don't believe it does after some quick tests. Plus, rewriting those mixins as I mentioned before can't happen until then anyway.
10. mdo

    closed this as completedon Dec 18, 2013
11. duhseekoh commented on Dec 18, 2013

    

    duhseekoh

    on Dec 18, 2013

    Author

    More actions

    Sounds good. Thanks.
12. matplane commented on Aug 18, 2014

    

    matplane

    on Aug 18, 2014

    More actions

    Waiting for v4 this patch do the job as far as I tested.

    .make-sm-column(@columns; @gutter: @grid-gutter-width) {
      @media (min-width: @screen-sm-min) {
        padding-left:  (@gutter / 2);
        padding-right: (@gutter / 2);
      }
    }
    .make-md-column(@columns; @gutter: @grid-gutter-width) {
      @media (min-width: @screen-md-min) {
        padding-left:  (@gutter / 2);
        padding-right: (@gutter / 2);
      }
    }
    .make-lg-column(@columns; @gutter: @grid-gutter-width) {
      @media (min-width: @screen-lg-min) {
        padding-left:  (@gutter / 2);
        padding-right: (@gutter / 2);
      }
    }