db1996
11/6/2017 - 10:15 AM

Breakpoints scss mixins

Mixins to include screen sizes for portrait, landscape, tablet, laptop, desktop and custom

readme.md
content_copyfile_download
  • Rendered
  • Source

Breakpoints

  • Portrait

Generally works with Phones in portrait mode (0px min, 479px max)

  • Landscape

For phones in landscape mode (480px min, 767px max)

  • landscape-down

From landscape and everything down

  • landscape-up

From landscape and everything up

  • tablet

works for most tablets (768px min, 991px max)

  • **tablet-down **

from tablet to everything down

  • tablet-up

From tablet to everything above

  • laptop

For laptops (992px min, 1199px max )

  • laptop-down

From laptop to everything below

  • laptop-up

From laptop to everything above

  • desktop

everything bigger than 1200px

  • custom()

You can create a custom media query with 2 parameters: * min-width * max-width

  • custom-down()

You can create a custom media query with 1 parameter: Everything bigger than the given parameter * max-width

  • custom-up()

You can create a custom media query with 1 parameter: everything smaller than given parameter * min-width

  • customy()

the same as custom() but with with the height parameters * min-height * max-height

  • customy-down()

The same as custom-down() but width height parameter * max-height

  • customy-up()

The same as custom-up() but width height parameter * min-height

breakpoint.scss
content_copyfile_download
$portrait-max: 480px;
$landscape-max: 768px;
$tablet-max: 992px;
$laptop-max: 1200px;
@mixin portrait {
    @media (max-width: #{$portrait-max - 1}) {
        @content;
    }
}
@mixin landscape {
    @media (min-width: #{$portrait-max}) and (max-width: #{$landscape-max - 1px}) {
        @content;
    }
}
@mixin landscape-down {
    @media (max-width: #{$landscape-max - 1px}) {
        @content;
    }
}
@mixin landscape-up {
    @media (min-width: #{$portrait-max}) {
        @content;
    }
}
@mixin tablet {
    @media (min-width: #{$landscape-max}) and (max-width: #{$tablet-max - 1px}) {
        @content;
    }
}
@mixin tablet-down {
    @media (max-width: #{$tablet-max - 1px}) {
        @content;
    }
}
@mixin tablet-up {
    @media (min-width: #{$landscape-max}) {
        @content;
    }
}
@mixin laptop {
    @media (min-width: #{$tablet-max}) and (max-width: #{$laptop-max - 1px}) {
        @content;
    }
}
@mixin laptop-down {
    @media (max-width: #{$laptop-max - 1px}) {
        @content;
    }
}
@mixin laptop-up {
    @media (min-width: #{$tablet-max}) {
        @content;
    }
}
@mixin desktop {
    @media (min-width: #{$laptop-max}) {
        @content;
    }
}
@mixin custom($custommin, $custommax) {
    @media (min-width: #{$custommin}) and (max-width: #{$custommax}) {
        @content;
    }
}
@mixin custom-up($custommin) {
    @media (min-width: #{$custommin}) {
        @content;
    }
}
@mixin custom-down($custommax) {
    @media (max-width: #{$custommax}) {
        @content;
    }
}
@mixin customy($custommin, $custommax) {
    @media (min-height: #{$custommin}) and (max-height: #{$custommax}) {
        @content;
    }
}
@mixin customy-up($custommin) {
    @media (min-height: #{$custommin}) {
        @content;
    }
}
@mixin customy-down($custommax) {
    @media (max-height: #{$custommax}) {
        @content;
    }
}