Vuetify: Feature Request: Add size-specific helper classes for padding, margin and elevation

[smares]

It would be nice to have size-specific helper classes for padding, margin and elevation, something like mx-xs-0 or elevation-lg-2, so that one can create a layout where a container has margins and elevation on desktop, but on mobile it's "full-screen" without margins.

[jacekkarczmarczyk]

After merging https://github.com/vuetifyjs/vuetify/issues/974 this should be possible to do using $breakpoint:

<v-xxx :class="{'elevation-0': $breakpoint.smAndDown, 'elevation-2': $breakpoint.mdAndUp}">

Same with grid offsets, margins etc. Quite lengthy code but should work

[johnleider]

I've brought up that solution @jacekkarczmarczyk on the current PR for adding those specific breakpoints. It's a slippery slope though, there are tons of helper classes that could benefit from having viewport based logic, it just adds so much to the css package size.

[johnleider]

@smares Would the above proposed be a solution?

[smares]

Sure 👍

[johnleider]

Awesome, I actually implemented that functionality in the new v-bottom-nav documentation !

[BorjaRafols]

I'm sorry but this does not work as expected with Nuxt or SSR.

The problem is that the calculation is made on the server which still has no clue about the window size.
So I think it would definetly still be usefull to implement classes like "pl-xs-0, pl-sm-0..."

[jacekkarczmarczyk]

We kindly ask users to not comment on closed/resolved issues. If you believe that this issue has not been correctly resolved, please create a new issue showing the regression or reach out to us in our Discord community.

Thank you for your contribution and interest in improving Vuetify.