Feature Request: Spacers based on breakpoints

It would be nice to have spacers based on breakpoints. E.g.

.pa-xs-1 (apply padding all x1 on xs and above)
.mt-md-2 (apply a margin top x2 only on md and above)

• What will it allow you to do that you can’t do today? Apply margins and padding based on breakpoints.

• How will it make current work-arounds straightforward? Standard way of implementing spacers across applications.

• What potential bugs and edge cases does it help to avoid? Would prevent custom classes in applications. Backwards compatibility with pa-1, mt-2, etc. might be an issue?

[jacekkarczmarczyk]

Personally i’m not completely against it, especially after @KaelWD mentioned recently that

The main reason against it is that covering all cases (text alignment, spacing 0-5/top/bottom/left/right/all/x/y, elevations and many more, each for 5 different breakpoints) would result in increasing the css size by quite a big amount. Maybe the solution would be to create a separate css (one with all features or 1 css per feature) that could be imported on demand, so for example elevations wouldn’t be responsive until you import responsive-elevations.css when you really need it.

Having said that this issue has been closed not because we don’t like the feature but because it’s a duplicate, so please comment in the original issue

[bmnds]

I think this issue shouldn’t have been closed. Here is why:

• The proposed solution would allow us to use classes directly, this way:

<v-flex xs12 sm6 text-xs-center text-sm-right px-sm-3>
  <v-btn large to="/meetups" class="secondary">Explore Meetups</v-btn>
</v-flex>

• Whereas #1434 imposes a solution using the breakpoint object programmatically, like this:

<v-flex xs12 sm6
    :class="{
      'text-left px-3' : this.$vuetify.breakpoint.smAndUp,
      'text-center': this.$vuetify.breakpoint.xsOnly
    }">
  <v-btn large to="/meetup/new" class="secondary">Organize Meetup</v-btn>
</v-flex>