Skip to content

Instantly share code, notes, and snippets.

@mikeeus

mikeeus/gist:7d8ac026009c67625b79db07c6a32130

Created June 13, 2018 11:01
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mikeeus/7d8ac026009c67625b79db07c6a32130 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mikeeus/7d8ac026009c67625b79db07c6a32130 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mikeeus created this gist Jun 13, 2018.
    123 changes: 123 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,123 @@
    /**
    * Media Query variables and mixins
    * Example:
    * p {
    * font-size: 16px;
    *
    * @include xs {
    * font-size: 18px;
    * }
    *
    * @include gt-xs {
    * font-size: 20px;
    * }
    * }
    */

    // Media Queries
    // xs | sm | md | lg | xl
    // 600px 960px 1280px 1920PX

    $xs: 599px;
    $sm_min: 600px; $sm_max: 959px;
    $md_min: 960px; $md_max: 1279px;
    $lg_min: 1280px; $lg_max: 1919px;
    $xl_min: 1920px; $xl_max: 5000px;

    // $lt-sm 'screen and (max-width: 599px)'
    // $lt-md 'screen and (max-width: 959px)'
    // $lt-lg 'screen and (max-width: 1279px)'
    // $lt-xl 'screen and (max-width: 1919px)'
    // $gt-xs 'screen and (min-width: 600px)'
    // $gt-sm 'screen and (min-width: 960px)'
    // $gt-md 'screen and (min-width: 1280px)'
    // $gt-lg 'screen and (min-width: 1920px)'

    @mixin xs {
    @media (max-width: $xs) {
    @content;
    }
    }

    @mixin sm {
    @media (min-width: $sm_min) and (max-width: $sm_max) {
    @content;
    }
    }

    @mixin md {
    @media (min-width: $md_min) and (max-width: $md_max) {
    @content;
    }
    }

    @mixin lg {
    @media (min-width: $lg_min) and (max-width: $lg_max) {
    @content;
    }
    }

    @mixin xl {
    @media (min-width: $xl_min) and (max-width: $xl_max) {
    @content;
    }
    }

    // LESS THAN queries
    @mixin lt-sm {
    @media (max-width: $sx_max) {
    @content;
    }
    }
    @mixin lt-md {
    @media (max-width: $sm_max) {
    @content;
    }
    }
    @mixin lt-lg {
    @media (max-width: $md_max) {
    @content;
    }
    }
    @mixin lt-xl {
    @media (max-width: $lg_max) {
    @content;
    }
    }

    // GREATER THAN queries
    @mixin gt-xs {
    @media (min-width: $sm_min) {
    @content;
    }
    }
    @mixin gt-sm {
    @media (min-width: $md_min) {
    @content;
    }
    }
    @mixin gt-md {
    @media (min-width: $lg_min) {
    @content;
    }
    }
    @mixin gt-lg {
    @media (min-width: $xl_min) {
    @content;
    }
    }

    // COLORS --------------------------------------------
    // $main-color: #ff0d72;

    // Greys
    $grey9: #212121;
    $grey8: #424242;
    $grey7: #616161;
    $grey6: #757575;
    $grey5: #9e9e9e;
    $grey4: #bdbdbd;
    $grey3: #e0e0e0;
    $grey2: #eeeeee;
    $grey1: #f5f5f5;
    $grey0: #fafafa;