Skip to content

Instantly share code, notes, and snippets.

@hulkish

hulkish/media-queries.less

Forked from remainstheday/media-queries.less
Last active August 29, 2015 14:15
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save hulkish/002990ee152d857d407a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save hulkish/002990ee152d857d407a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. hulkish revised this gist Mar 12, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion media-queries.less
    View file
    Original file line number Diff line number Diff line change
    @@ -82,7 +82,7 @@
    }
    }

    .screens(@rules-xs, @rules-sm, @rules-md, @rules-lg, @rules-xl, @rules-xxl) {
    .screens(@rules-xs, @rules-sm, @rules-md, @rules-lg) {
    .screen-xs-min(@rules-xs);
    .screen-sm-min(@rules-sm);
    .screen-md-min(@rules-md);
  2. hulkish revised this gist Mar 12, 2015. 1 changed file with 90 additions and 134 deletions.
    224 changes: 90 additions & 134 deletions media-queries.less
    View file
    Original file line number Diff line number Diff line change
    @@ -1,134 +1,90 @@
    /* === Responsive Breakpoint Values === */
    // XL Breakpoint: 1025px - 1200px; (desktop and up)
    // L Breakpoint: 769px - 1024px; (tablet landscape)
    // M Breakpoint: 706px - 768px; (tablet portrait)
    // S Breakpoint: 481px - 705px; (mobile landscape)
    // XS Breakpoint: 320px - 480px; (mobile portrait)

    /* === LESS variables === */
    @mq-desktop : 1025px;
    @mq-tablet-landscape : 769px;
    @mq-tablet-portrait : 706px;
    @mq-mobile-landscape : 481px;
    @mq-mobile-portrait : 320px;


    /* mobile portrait and landscape */
    .mobile-only(@content) {
    @media (max-width : @mq-mobile-landscape) {
    @content();
    }
    }

    /* everything up to mobile mobile portrait only */
    .mobile-portrait-only(@content) {
    @media (max-width : @mq-mobile-portrait) {
    @content();
    }
    }

    /* everything up to and including the mobile portrait */
    .mobile-portrait-and-below(@content) {
    @media (max-width : @mq-mobile-portrait) {
    @content();
    }
    }

    /* the mobile portrait and everything above */
    .mobile-portrait-and-up(@content) {
    @media (min-width : @mq-mobile-portrait) {
    @content();
    }
    }

    /* anything larger than a mobile portrait up to mobile landscape */
    .mobile-landscape-only(@content) {
    @media only screen and (min-width : @mq-mobile-portrait + .001) and (max-width : @mq-mobile-landscape) {
    @content();
    }
    }

    /* anything including mobile landscape and everything below that */
    .mobile-landscape-and-below(@content) {
    @media only screen and (max-width : @mq-mobile-landscape) {
    @content();
    }
    }

    /* Everything above and including the mobile landscape width */
    .mobile-landscape-and-up(@content) {
    @media only screen and (min-width : @mq-mobile-portrait + .001) {
    @content();
    }
    }

    .tablet-only(@content) {
    @media only screen and (min-width : @mq-mobile-landscape + .001) and (max-width : @mq-tablet-landscape) {
    @content();
    }
    }

    .tablet-portrait-only(@content) {
    @media only screen and (min-width : @mq-mobile-landscape + .001) and (max-width : @mq-tablet-portrait) {
    @content();
    }
    }

    // Everything below and including the portrait width of the tablet
    .tablet-portrait-and-below(@content) {
    @media only screen and (max-width : @mq-tablet-portrait) {
    @content();
    }
    }

    // Everything above and including the portrait width of the tablet
    .tablet-portrait-and-up(@content) {
    // @media only screen and (min-width : $mq-mobile-landscape + 1) {
    @media only screen and (min-width : @mq-tablet-portrait + .001) {
    @content();
    }
    }

    /* Larger than portrait but less than or equal to the landscape width */
    .tablet-landscape-only(@content) {
    @media only screen and (min-width : @mq-tablet-portrait + .001) and (max-width : @mq-tablet-landscape) {
    @content();
    }
    }

    .tablet-landscape-and-below(@content) {
    @media only screen and (max-width : @mq-tablet-landscape) {
    @content();
    }
    }

    .tablet-landscape-and-up(@content) {
    @media only screen and (min-width : @mq-tablet-portrait + .001) {
    @content();
    }
    }

    .desktop-and-up(@content) {
    @media only screen and (min-width : @mq-tablet-landscape + .001) {
    @content();
    }
    }

    .desktop-and-below(@content) {
    @media only screen and (max-width : @mq-desktop) {
    @content();
    }
    }

    .desktop-only(@content) {
    @media only screen and (min-width : @mq-tablet-landscape + .001) and (max-width : @mq-desktop) {
    @content();
    }
    }

    .retina(@content) {
    @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi) {
    @content();
    }
    }

    @screen-xs: 480px;
    @screen-sm: 600px;
    @screen-md: 768px;
    @screen-lg: 960px;

    @screen-xs-min: @screen-xs;
    @screen-sm-min: @screen-sm;
    @screen-md-min: @screen-md;
    @screen-lg-min: @screen-lg;

    @screen-xs-max: (@screen-sm-min - 1);
    @screen-sm-max: (@screen-md-min - 1);
    @screen-md-max: (@screen-lg-min - 1);

    // Extra-small and up
    .screen-xs-min(@rules) {
    @media (min-width: @screen-xs-min) {
    @rules();
    }
    }

    // Extra-small and down
    .screen-xs-max(@rules) {
    @media (max-width: @screen-xs-max) {
    @rules();
    }
    }

    // Extra-small only
    .screen-xs(@rules) {
    @media (min-width: @screen-xs-min) and (max-width: @screen-xs-max) {
    @rules();
    }
    }

    // Small and up
    .screen-sm-min(@rules) {
    @media (min-width: @screen-sm-min) {
    @rules();
    }
    }

    // Small and down
    .screen-sm-max(@rules) {
    @media (max-width: @screen-sm-max) {
    @rules();
    }
    }

    // Small only
    .screen-sm(@rules) {
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    @rules();
    }
    }

    // Medium and up
    .screen-md-min(@rules) {
    @media (min-width: @screen-md-min) {
    @rules();
    }
    }

    // Medium and down
    .screen-md-max(@rules) {
    @media (max-width: @screen-md-max) {
    @rules();
    }
    }

    // Medium only
    .screen-md(@rules) {
    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
    @rules();
    }
    }

    // Large and up
    .screen-lg-min(@rules) {
    @media (min-width: @screen-lg-min) {
    @rules();
    }
    }

    .screens(@rules-xs, @rules-sm, @rules-md, @rules-lg, @rules-xl, @rules-xxl) {
    .screen-xs-min(@rules-xs);
    .screen-sm-min(@rules-sm);
    .screen-md-min(@rules-md);
    .screen-lg-min(@rules-lg);
    }
  3. @remainstheday remainstheday revised this gist Jun 22, 2014. 1 changed file with 0 additions and 123 deletions.
    123 changes: 0 additions & 123 deletions media-queries.sass
    View file
    Original file line number Diff line number Diff line change
    @@ -1,123 +0,0 @@
    /* === Responsive Breakpoint Values === */
    // XL Breakpoint: 1025px - 1200px; (desktop and up)
    // L Breakpoint: 769px - 1024px; (tablet landscape)
    // M Breakpoint: 706px - 768px; (tablet portrait)
    // S Breakpoint: 481px - 705px; (mobile landscape)
    // XS Breakpoint: 320px - 480px; (mobile portrait)
    /* === SASS variables === */
    $mq-desktop : 1025px;
    $mq-tablet-landscape : 769px;
    $mq-tablet-portrait : 706px;
    $mq-mobile-landscape : 481px;
    $mq-mobile-portrait : 320px;


    @mixin mobile-only {
    @media (max-width : $mq-mobile-landscape) {
    @content;
    }
    }

    @mixin mobile-portrait-only {
    @media (max-width : $mq-mobile-portrait) {
    @content;
    }
    }

    @mixin mobile-portrait-and-below {
    @media (max-width : $mq-mobile-portrait) {
    @content;
    }
    }

    @mixin mobile-portrait-and-up {
    @media (min-width : $mq-mobile-portrait) {
    @content;
    }
    }

    @mixin mobile-landscape-only {
    @media only screen and (min-width : $mq-mobile-portrait + .001) and (max-width : $mq-mobile-landscape) {
    @content;
    }
    }

    @mixin mobile-landscape-and-below {
    @media only screen and (max-width : $mq-mobile-landscape) {
    @content;
    }
    }

    @mixin mobile-landscape-and-up {
    @media only screen and (min-width : $mq-mobile-portrait + .001) {
    @content;
    }
    }

    @mixin tablet-only {
    @media only screen and (min-width : $mq-mobile-landscape + .001) and (max-width : $mq-tablet-landscape) {
    @content;
    }
    }

    @mixin tablet-portrait-only {
    @media only screen and (min-width : $mq-mobile-landscape + .001) and (max-width : $mq-tablet-portrait) {
    @content;
    }
    }

    @mixin tablet-portrait-and-below {
    @media only screen and (max-width : $mq-tablet-portrait) {
    @content;
    }
    }

    @mixin tablet-portrait-and-up {
    // @media only screen and (min-width : $mq-mobile-landscape + 1) {
    @media only screen and (min-width : $mq-tablet-portrait + .001) {
    @content;
    }
    }

    @mixin tablet-landscape-only {
    @media only screen and (min-width : $mq-tablet-portrait + .001) and (max-width : $mq-tablet-landscape) {
    @content;
    }
    }

    @mixin tablet-landscape-and-below {
    @media only screen and (max-width : $mq-tablet-landscape) {
    @content;
    }
    }

    @mixin tablet-landscape-and-up {
    @media only screen and (min-width : $mq-tablet-portrait + .001) {
    @content;
    }
    }

    @mixin desktop-and-up {
    @media only screen and (min-width : $mq-tablet-landscape + .001) {
    @content;
    }
    }

    @mixin desktop-and-below {
    @media only screen and (max-width : $mq-desktop) {
    @content;
    }
    }

    @mixin desktop-only {
    @media only screen and (min-width : $mq-tablet-landscape + .001) and (max-width : $mq-desktop) {
    @content;
    }
    }

    @mixin retina {
    @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi) {
    @content;
    }
    }
  4. @remainstheday remainstheday revised this gist Jun 5, 2014. 1 changed file with 0 additions and 8 deletions.
    8 changes: 0 additions & 8 deletions media-queries.less
    View file
    Original file line number Diff line number Diff line change
    @@ -62,15 +62,12 @@
    }
    }

    // Both the portrait and landscape width of the tablet
    // Larger than a landscape mobile but less than or equal to a landscape tablet
    .tablet-only(@content) {
    @media only screen and (min-width : @mq-mobile-landscape + .001) and (max-width : @mq-tablet-landscape) {
    @content();
    }
    }

    // Everything larger than mobile landscape up until the portrait width of the tablet
    .tablet-portrait-only(@content) {
    @media only screen and (min-width : @mq-mobile-landscape + .001) and (max-width : @mq-tablet-portrait) {
    @content();
    @@ -99,35 +96,30 @@
    }
    }

    // Up to and including the tablet landscape
    .tablet-landscape-and-below(@content) {
    @media only screen and (max-width : @mq-tablet-landscape) {
    @content();
    }
    }

    // Everything larger than portrait tablet
    .tablet-landscape-and-up(@content) {
    @media only screen and (min-width : @mq-tablet-portrait + .001) {
    @content();
    }
    }

    // Everything larger than a landscape tablet
    .desktop-and-up(@content) {
    @media only screen and (min-width : @mq-tablet-landscape + .001) {
    @content();
    }
    }

    // Everything below and including the desktop
    .desktop-and-below(@content) {
    @media only screen and (max-width : @mq-desktop) {
    @content();
    }
    }

    // Everything larger than a landscape tablet but less than or equal to the desktop
    .desktop-only(@content) {
    @media only screen and (min-width : @mq-tablet-landscape + .001) and (max-width : @mq-desktop) {
    @content();
  5. @remainstheday remainstheday revised this gist Jun 5, 2014. 1 changed file with 123 additions and 0 deletions.
    123 changes: 123 additions & 0 deletions media-queries.sass
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,123 @@
    /* === Responsive Breakpoint Values === */
    // XL Breakpoint: 1025px - 1200px; (desktop and up)
    // L Breakpoint: 769px - 1024px; (tablet landscape)
    // M Breakpoint: 706px - 768px; (tablet portrait)
    // S Breakpoint: 481px - 705px; (mobile landscape)
    // XS Breakpoint: 320px - 480px; (mobile portrait)
    /* === SASS variables === */
    $mq-desktop : 1025px;
    $mq-tablet-landscape : 769px;
    $mq-tablet-portrait : 706px;
    $mq-mobile-landscape : 481px;
    $mq-mobile-portrait : 320px;


    @mixin mobile-only {
    @media (max-width : $mq-mobile-landscape) {
    @content;
    }
    }

    @mixin mobile-portrait-only {
    @media (max-width : $mq-mobile-portrait) {
    @content;
    }
    }

    @mixin mobile-portrait-and-below {
    @media (max-width : $mq-mobile-portrait) {
    @content;
    }
    }

    @mixin mobile-portrait-and-up {
    @media (min-width : $mq-mobile-portrait) {
    @content;
    }
    }

    @mixin mobile-landscape-only {
    @media only screen and (min-width : $mq-mobile-portrait + .001) and (max-width : $mq-mobile-landscape) {
    @content;
    }
    }

    @mixin mobile-landscape-and-below {
    @media only screen and (max-width : $mq-mobile-landscape) {
    @content;
    }
    }

    @mixin mobile-landscape-and-up {
    @media only screen and (min-width : $mq-mobile-portrait + .001) {
    @content;
    }
    }

    @mixin tablet-only {
    @media only screen and (min-width : $mq-mobile-landscape + .001) and (max-width : $mq-tablet-landscape) {
    @content;
    }
    }

    @mixin tablet-portrait-only {
    @media only screen and (min-width : $mq-mobile-landscape + .001) and (max-width : $mq-tablet-portrait) {
    @content;
    }
    }

    @mixin tablet-portrait-and-below {
    @media only screen and (max-width : $mq-tablet-portrait) {
    @content;
    }
    }

    @mixin tablet-portrait-and-up {
    // @media only screen and (min-width : $mq-mobile-landscape + 1) {
    @media only screen and (min-width : $mq-tablet-portrait + .001) {
    @content;
    }
    }

    @mixin tablet-landscape-only {
    @media only screen and (min-width : $mq-tablet-portrait + .001) and (max-width : $mq-tablet-landscape) {
    @content;
    }
    }

    @mixin tablet-landscape-and-below {
    @media only screen and (max-width : $mq-tablet-landscape) {
    @content;
    }
    }

    @mixin tablet-landscape-and-up {
    @media only screen and (min-width : $mq-tablet-portrait + .001) {
    @content;
    }
    }

    @mixin desktop-and-up {
    @media only screen and (min-width : $mq-tablet-landscape + .001) {
    @content;
    }
    }

    @mixin desktop-and-below {
    @media only screen and (max-width : $mq-desktop) {
    @content;
    }
    }

    @mixin desktop-only {
    @media only screen and (min-width : $mq-tablet-landscape + .001) and (max-width : $mq-desktop) {
    @content;
    }
    }

    @mixin retina {
    @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi) {
    @content;
    }
    }
  6. @remainstheday remainstheday revised this gist Jun 5, 2014. 1 changed file with 18 additions and 20 deletions.
    38 changes: 18 additions & 20 deletions media-queries.less
    View file
    Original file line number Diff line number Diff line change
    @@ -1,63 +1,61 @@

    /* === Responsive Breakpoint Values === */
    // XL Breakpoint: 1025px - 1200px;
    // L Breakpoint: 769px - 1024px;
    // M Breakpoint: 706px - 768px;
    // S Breakpoint: 481px - 705px;
    // XS Breakpoint: 320px - 480px;

    /* === Breakpoint Values inside LESS variables === */
    @mq-desktop : 1025px;
    @mq-tablet-landscape : 769px;
    // XL Breakpoint: 1025px - 1200px; (desktop and up)
    // L Breakpoint: 769px - 1024px; (tablet landscape)
    // M Breakpoint: 706px - 768px; (tablet portrait)
    // S Breakpoint: 481px - 705px; (mobile landscape)
    // XS Breakpoint: 320px - 480px; (mobile portrait)

    /* === LESS variables === */
    @mq-desktop : 1025px;
    @mq-tablet-landscape : 769px;
    @mq-tablet-portrait : 706px;
    @mq-mobile-landscape : 481px;
    @mq-mobile-portrait : 320px;
    @mq-mobile-landscape : 481px;
    @mq-mobile-portrait : 320px;


    // Both portrait and landscape
    /* mobile portrait and landscape */
    .mobile-only(@content) {
    @media (max-width : @mq-mobile-landscape) {
    @content();
    }
    }

    // Everything up to and including the portrait width of the phone
    // Since it's the smallest query it doesn't need a min
    /* everything up to mobile mobile portrait only */
    .mobile-portrait-only(@content) {
    @media (max-width : @mq-mobile-portrait) {
    @content();
    }
    }

    // Everything up to and including the mobile portrait
    /* everything up to and including the mobile portrait */
    .mobile-portrait-and-below(@content) {
    @media (max-width : @mq-mobile-portrait) {
    @content();
    }
    }

    // Everything above and including the mobile portrait
    /* the mobile portrait and everything above */
    .mobile-portrait-and-up(@content) {
    @media (min-width : @mq-mobile-portrait) {
    @content();
    }
    }

    // Everthing larger than a portrait mobile up until mobile landscape
    /* anything larger than a mobile portrait up to mobile landscape */
    .mobile-landscape-only(@content) {
    @media only screen and (min-width : @mq-mobile-portrait + .001) and (max-width : @mq-mobile-landscape) {
    @content();
    }
    }

    // Everything up to and including the mobile landscape width
    /* anything including mobile landscape and everything below that */
    .mobile-landscape-and-below(@content) {
    @media only screen and (max-width : @mq-mobile-landscape) {
    @content();
    }
    }

    // Everything above and including the mobile landscape width
    /* Everything above and including the mobile landscape width */
    .mobile-landscape-and-up(@content) {
    @media only screen and (min-width : @mq-mobile-portrait + .001) {
    @content();
  7. @remainstheday remainstheday created this gist Jun 5, 2014.
    144 changes: 144 additions & 0 deletions media-queries.less
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,144 @@

    /* === Responsive Breakpoint Values === */
    // XL Breakpoint: 1025px - 1200px;
    // L Breakpoint: 769px - 1024px;
    // M Breakpoint: 706px - 768px;
    // S Breakpoint: 481px - 705px;
    // XS Breakpoint: 320px - 480px;

    /* === Breakpoint Values inside LESS variables === */
    @mq-desktop : 1025px;
    @mq-tablet-landscape : 769px;
    @mq-tablet-portrait : 706px;
    @mq-mobile-landscape : 481px;
    @mq-mobile-portrait : 320px;


    // Both portrait and landscape
    .mobile-only(@content) {
    @media (max-width : @mq-mobile-landscape) {
    @content();
    }
    }

    // Everything up to and including the portrait width of the phone
    // Since it's the smallest query it doesn't need a min
    .mobile-portrait-only(@content) {
    @media (max-width : @mq-mobile-portrait) {
    @content();
    }
    }

    // Everything up to and including the mobile portrait
    .mobile-portrait-and-below(@content) {
    @media (max-width : @mq-mobile-portrait) {
    @content();
    }
    }

    // Everything above and including the mobile portrait
    .mobile-portrait-and-up(@content) {
    @media (min-width : @mq-mobile-portrait) {
    @content();
    }
    }

    // Everthing larger than a portrait mobile up until mobile landscape
    .mobile-landscape-only(@content) {
    @media only screen and (min-width : @mq-mobile-portrait + .001) and (max-width : @mq-mobile-landscape) {
    @content();
    }
    }

    // Everything up to and including the mobile landscape width
    .mobile-landscape-and-below(@content) {
    @media only screen and (max-width : @mq-mobile-landscape) {
    @content();
    }
    }

    // Everything above and including the mobile landscape width
    .mobile-landscape-and-up(@content) {
    @media only screen and (min-width : @mq-mobile-portrait + .001) {
    @content();
    }
    }

    // Both the portrait and landscape width of the tablet
    // Larger than a landscape mobile but less than or equal to a landscape tablet
    .tablet-only(@content) {
    @media only screen and (min-width : @mq-mobile-landscape + .001) and (max-width : @mq-tablet-landscape) {
    @content();
    }
    }

    // Everything larger than mobile landscape up until the portrait width of the tablet
    .tablet-portrait-only(@content) {
    @media only screen and (min-width : @mq-mobile-landscape + .001) and (max-width : @mq-tablet-portrait) {
    @content();
    }
    }

    // Everything below and including the portrait width of the tablet
    .tablet-portrait-and-below(@content) {
    @media only screen and (max-width : @mq-tablet-portrait) {
    @content();
    }
    }

    // Everything above and including the portrait width of the tablet
    .tablet-portrait-and-up(@content) {
    // @media only screen and (min-width : $mq-mobile-landscape + 1) {
    @media only screen and (min-width : @mq-tablet-portrait + .001) {
    @content();
    }
    }

    /* Larger than portrait but less than or equal to the landscape width */
    .tablet-landscape-only(@content) {
    @media only screen and (min-width : @mq-tablet-portrait + .001) and (max-width : @mq-tablet-landscape) {
    @content();
    }
    }

    // Up to and including the tablet landscape
    .tablet-landscape-and-below(@content) {
    @media only screen and (max-width : @mq-tablet-landscape) {
    @content();
    }
    }

    // Everything larger than portrait tablet
    .tablet-landscape-and-up(@content) {
    @media only screen and (min-width : @mq-tablet-portrait + .001) {
    @content();
    }
    }

    // Everything larger than a landscape tablet
    .desktop-and-up(@content) {
    @media only screen and (min-width : @mq-tablet-landscape + .001) {
    @content();
    }
    }

    // Everything below and including the desktop
    .desktop-and-below(@content) {
    @media only screen and (max-width : @mq-desktop) {
    @content();
    }
    }

    // Everything larger than a landscape tablet but less than or equal to the desktop
    .desktop-only(@content) {
    @media only screen and (min-width : @mq-tablet-landscape + .001) and (max-width : @mq-desktop) {
    @content();
    }
    }

    .retina(@content) {
    @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi) {
    @content();
    }
    }