Skip to content

Instantly share code, notes, and snippets.

@davidgilbertson

davidgilbertson/css-breakpoint-mixins.scss

Last active December 7, 2024 12:26
Show Gist options
  • Save davidgilbertson/ad24b42b0eddde2dc6b1b51f9460af11 to your computer and use it in GitHub Desktop.
Save davidgilbertson/ad24b42b0eddde2dc6b1b51f9460af11 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. davidgilbertson revised this gist Nov 28, 2016. 1 changed file with 0 additions and 9 deletions.
    9 changes: 0 additions & 9 deletions css-breakpoint-mixins.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -4,21 +4,12 @@
    @mixin for-tablet-portrait-up {
    @media (min-width: 600px) { @content; }
    }
    @mixin for-tablet-portrait-only {
    @media (min-width: 600px) and (max-width: 899px) { @content; }
    }
    @mixin for-tablet-landscape-up {
    @media (min-width: 900px) { @content; }
    }
    @mixin for-tablet-landscape-only {
    @media (min-width: 900px) and (max-width: 1199px) { @content; }
    }
    @mixin for-desktop-up {
    @media (min-width: 1200px) { @content; }
    }
    @mixin for-desktop-only {
    @media (min-width: 1200px) and (max-width: 1799px) { @content; }
    }
    @mixin for-big-desktop-up {
    @media (min-width: 1800px) { @content; }
    }
  2. davidgilbertson revised this gist Nov 28, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion css-breakpoint-mixins.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,7 @@
    @mixin for-tablet-portrait-up {
    @media (min-width: 600px) { @content; }
    }
    @mixin for-tablet-portait-only {
    @mixin for-tablet-portrait-only {
    @media (min-width: 600px) and (max-width: 899px) { @content; }
    }
    @mixin for-tablet-landscape-up {
  3. davidgilbertson revised this gist Nov 19, 2016. 1 changed file with 9 additions and 0 deletions.
    9 changes: 9 additions & 0 deletions css-breakpoint-mixins.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -22,3 +22,12 @@
    @mixin for-big-desktop-up {
    @media (min-width: 1800px) { @content; }
    }

    // usage
    .my-box {
    padding: 10px;

    @include for-desktop-up {
    padding: 20px;
    }
    }
  4. davidgilbertson revised this gist Nov 19, 2016. 2 changed files with 24 additions and 30 deletions.
    30 changes: 0 additions & 30 deletions css-breakpoint-mixin.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,30 +0,0 @@
    @mixin breakpoint($range) {
    // Note that there is no "phone up" which is the same as no media query
    // and no "big-desktop-only" which is the same as "big desktop up"
    @if $range == phone-only {
    @media (max-width: 599px) { @content; }
    } @else if $range == tablet-portrait-up {
    @media (min-width: 600px) { @content; }
    } @else if $range == tablet-portait-only {
    @media (min-width: 600px) and (max-width: 899px) { @content; }
    } @else if $range == tablet-landscape-up {
    @media (min-width: 900px) { @content; }
    } @else if $range == tablet-landscape-only {
    @media (min-width: 900px) and (max-width: 1199px) { @content; }
    } @else if $range == desktop-up {
    @media (min-width: 1200px) { @content; }
    } @else if $range == desktop-only {
    @media (min-width: 1200px) and (max-width: 1799px) { @content; }
    } @else if $range == big-desktop-up {
    @media (min-width: 1800px) { @content; }
    }
    }

    // example usage
    .some-big-header {
    display: none;

    @include breakpoint(tablet-landscape-up) {
    display: block;
    }
    }
    24 changes: 24 additions & 0 deletions css-breakpoint-mixins.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,24 @@
    @mixin for-phone-only {
    @media (max-width: 599px) { @content; }
    }
    @mixin for-tablet-portrait-up {
    @media (min-width: 600px) { @content; }
    }
    @mixin for-tablet-portait-only {
    @media (min-width: 600px) and (max-width: 899px) { @content; }
    }
    @mixin for-tablet-landscape-up {
    @media (min-width: 900px) { @content; }
    }
    @mixin for-tablet-landscape-only {
    @media (min-width: 900px) and (max-width: 1199px) { @content; }
    }
    @mixin for-desktop-up {
    @media (min-width: 1200px) { @content; }
    }
    @mixin for-desktop-only {
    @media (min-width: 1200px) and (max-width: 1799px) { @content; }
    }
    @mixin for-big-desktop-up {
    @media (min-width: 1800px) { @content; }
    }
  5. davidgilbertson revised this gist Nov 19, 2016. 1 changed file with 9 additions and 0 deletions.
    9 changes: 9 additions & 0 deletions css-breakpoint-mixin.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -18,4 +18,13 @@
    } @else if $range == big-desktop-up {
    @media (min-width: 1800px) { @content; }
    }
    }

    // example usage
    .some-big-header {
    display: none;

    @include breakpoint(tablet-landscape-up) {
    display: block;
    }
    }
  6. davidgilbertson created this gist Nov 19, 2016.
    21 changes: 21 additions & 0 deletions css-breakpoint-mixin.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    @mixin breakpoint($range) {
    // Note that there is no "phone up" which is the same as no media query
    // and no "big-desktop-only" which is the same as "big desktop up"
    @if $range == phone-only {
    @media (max-width: 599px) { @content; }
    } @else if $range == tablet-portrait-up {
    @media (min-width: 600px) { @content; }
    } @else if $range == tablet-portait-only {
    @media (min-width: 600px) and (max-width: 899px) { @content; }
    } @else if $range == tablet-landscape-up {
    @media (min-width: 900px) { @content; }
    } @else if $range == tablet-landscape-only {
    @media (min-width: 900px) and (max-width: 1199px) { @content; }
    } @else if $range == desktop-up {
    @media (min-width: 1200px) { @content; }
    } @else if $range == desktop-only {
    @media (min-width: 1200px) and (max-width: 1799px) { @content; }
    } @else if $range == big-desktop-up {
    @media (min-width: 1800px) { @content; }
    }
    }