Vuetify: Spacing with breakpoints

[aaronjpitts]

Is there any way/plans to use spacing with the breakpoints? For example mb-4-md to apply a margin bottom on medium breakpoints?

[johnleider]

It _is_ something that we can do, but I would honestly hold off until I get the ability for devs to better control what is in their package. The CSS file is already larger than I'd like it to be, this would not help things.

[johnleider]

After some careful thought, this is something I'd accept a PR for, but will not focus on development for.

[AlexanderZon]

You may use this

@import 'PATH_TO_NODE_MODULES/vuetify/src/stylus/main.styl'

for $size, $media_query in $display-breakpoints
    @media $media_query  
        $i = 0
        for $level, $spacer in $spacers
            .mt-{$i}-{$size}
                margin-top: $spacer.y !important
            .mr-{$i}-{$size}
                margin-right: $spacer.x !important
            .mb-{$i}-{$size}
                margin-bottom: $spacer.y !important
            .ml-{$i}-{$size}
                margin-left: $spacer.x !important
            .mx-{$i}-{$size}
                margin-left: $spacer.x !important
                margin-right: $spacer.x !important
            .my-{$i}-{$size}
                margin-top: $spacer.y !important
                margin-bottom: $spacer.y !important
            .ma-{$i}-{$size}
                margin: $spacer.y $spacer.x !important
            .pt-{$i}-{$size}
                padding-top: $spacer.y !important
            .pr-{$i}-{$size}
                padding-right: $spacer.x !important
            .pb-{$i}-{$size}
                padding-bottom: $spacer.y !important
            .pl-{$i}-{$size}
                padding-left: $spacer.x !important
            .px-{$i}-{$size}
                padding-left: $spacer.x !important
                padding-right: $spacer.x !important
            .py-{$i}-{$size}
                padding-top: $spacer.y !important
                padding-bottom: $spacer.y !important
            .pa-{$i}-{$size}
                padding: $spacer.y $spacer.x !important
            $i = $i + 1

<h1 class="py-2 px-2-sm-and-up px-0-xs-only">Hola Mundo</h1>