Ultra tiny ad-hoc scss library to be used in conjunction with vuetify.

_breakpoints.scss

// Small tablets and large smartphones
$screen-xs: 600px;
// Small tablets
$screen-sm: 960px;
// Tablets and small desktops
$screen-md: 1264px;
// Large tablets and desktops
$screen-lg: 1904px;

// True if viewport < 600px
@mixin xs {
    @media (max-width: #{$screen-xs}) {
        @content;
    }
}
// True if viewport < 960px
@mixin sm {
    @media (max-width: #{$screen-sm}) {
        @content;
    }
 }
 // True if viewport < 1264px
 @mixin md {
    @media (max-width: #{$screen-md}) {
        @content;
    }
 }
 // True if viewport < 1904px
 @mixin lg {
    @media (max-width: #{$screen-lg}) {
        @content;
    }
 }
 // True if viewport > 1904px
 @mixin xl {
    @media (min-width: #{$screen-xl}) {
        @content;
    }
}

Yellow Card Break Points

Installation

Import _breakpoints.scss by either importing it directly in the script tag

@import "~/assets/style/_breakpoints.scss";

Or more usefully import it globally with a loader like style-resources.

Usage

Once imported use breakpoints like this

.box {
  background: yellow;
  //this will be active if the viewport size is less than 600px wide.
  @include xs {
    background: blue;
  }
  //this will be active if the viewport size is less than 960px wide.
  @include sm {
    background: red;
  }
  //this will be active if the viewport size is less than 1264px wide.
  @include md {
    background: green;
  }
  //this will be active if the viewport size is less than 1904px wide.
  @include lg {
    background: orange;
  }
}

If you would like to change properties of multiple classes with a single mixin, you may use this schema.

@include sm {
  .box {
    height: 200px;
  }
  .circle {
    width: 300px;
  }
}

Supplimental Information

This library is built to work with the breakpoints built into vuetify.

For example

  @include xs {
    background: blue;
  }

will change .box's background color to blue at the same viewport size as

<v-flex xs12 class="box"></v-flex>

will change .box to a full width element.