index.html

<h1>Easy Media Queries Shortcodes (w/ LESS) + tester tag</h1>

<section>
    <h2>Media Queries Shortcodes <small>using LESS</small></h2>
    <p>I've been using this method for writing media queries on a couple of projects now and I'm growing very fond of it. It's pretty simple:</p>

    <p>Just set your breakpoints via LESS...</p>
    <pre>
// Breakpoints
// ------------------------- Source: http://blog.scur.pl/2012/06/variable-media-queries-less-css/
@highdensity: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
              ~"only screen and (min--moz-device-pixel-ratio: 1.5)",
              ~"only screen and (-o-min-device-pixel-ratio: 3/2)",
              ~"only screen and (min-device-pixel-ratio: 1.5)";
@mobile:      ~"only screen and (max-width: 529px)";
@tablet:      ~"only screen and (min-width: 530px) and (max-width: 949px)";
@desktop:     ~"only screen and (min-width: 950px) and (max-width: 1128px)";
@desktop-xl:  ~"only screen and (min-width: 1129px)";
    </pre>

    <p>Then use the variables you defined in your LESS files...</p>
    <pre>
section, div, span {
    @media @mobile {
      background: orange;
    }
    @media @tablet {
      background: purple;
    }
    @media @desktop {
      background: green;
    }
    @media @desktop-xl {
      background: blue;
    }
    @media @desktop, @desktop-xl {
      color: black;
    }
}
    </pre>
    <p>In the case of this demo, I adjusted the widths of the &lt;section&gt; tags.</p>

</section>

<section>
    <h2>Tester Tag <small>for Media Queries</small></h2>
    <p>Since I was testing out media queries, I wanted an easy way to tell what breakpoint I was currently viewing. Applying the following code to the body tag allowed me to visualize the breakpoints without getting in the way of my site design:</p>
    <pre>
  &:after { /*This adds a label in the top-left corner that displays the current media query state.*/
    background: red;
    color: @white;
    content: "undefined";
    left: 0;
    .opacity(80);
    padding: .5em 1em;
    position: absolute;
    text-align: center;
    top: 0;
    z-index: 99;
    @media @mobile {
      background: orange;
      content: "mobile";
    }
    @media @tablet {
      background: purple;
      content: "tablet";
    }
    @media @desktop {
      background: green;
      content: "desktop";
    }
    @media @desktop-xl {
      background: blue;
      content: "desktop-xl";
    }
  }
    </pre>
    <p>Using the media query shortcodes, this is a simple solution that's portable from site-to-site. This is a very similar method to the one I helped penned here: <a href="http://codepen.io/ericrasch/pen/ucxGF">http://codepen.io/ericrasch/pen/ucxGF</a>.</p>
</section>

style.less

// Breakpoints
// ------------------------- Source: http://blog.scur.pl/2012/06/variable-media-queries-less-css/
@highdensity: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
              ~"only screen and (min--moz-device-pixel-ratio: 1.5)",
              ~"only screen and (-o-min-device-pixel-ratio: 3/2)",
              ~"only screen and (min-device-pixel-ratio: 1.5)";
@mobile:      ~"only screen and (max-width: 529px)";
@tablet:      ~"only screen and (min-width: 530px) and (max-width: 949px)";
@desktop:     ~"only screen and (min-width: 950px) and (max-width: 1128px)";
@desktop-xl:  ~"only screen and (min-width: 1129px)";


body {
    &:after { /*This adds a label in the top-left corner that displays the current media query state.*/
    background: red;
    color: @white;
    content: "undefined";
    left: 0;
    .opacity(80);
    padding: .5em 1em;
    position: absolute;
    text-align: center;
    top: 0;
    z-index: 99;
    @media @mobile {
      background: orange;
      content: "mobile";
    }
    @media @tablet {
      background: purple;
      content: "tablet";
    }
    @media @desktop {
      background: green;
      content: "desktop";
    }
    @media @desktop-xl {
      background: blue;
      content: "desktop-xl";
    }
  }
}

section {
    margin: 3%;
    @media @mobile {
      display: block;
      margin-top: 4em;
      width: 85%;
    }

    @media @tablet {
      width: 37%;
    }

    @media @desktop, @desktop-xl {
      width: 40%;
    }

}

/* STOP HERE. The rest of this CSS is for style purposes only and is not needed for the demo to function.
              (but be sure to substitue out the LESS variables/mixins I used above)
   ---------------------------------------------------------------------------------------------------- */

/* =VARIABLES (LESS @variables do not get compiled into the final CSS file)
   ---------------------------------------------------------------------------------------------------- */
@base-background:      #fffaef; /*cream*/
@base-text:            #4f4351; /*purple/grey*/

@white:                #fff;
@black:                #000;

@color-subtitles:      #9a8864; /*mud*/
@color-highlight:      #e9e59b; /*lime*/
@color-dark:         #080c3c; /*midnight*/


/* =MIXINS (mostly from Twitter Bootstrap's mixins.less)
   ---------------------------------------------------------------------------------------------------- */
// Border Radius
.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

// Drop shadows
.box-shadow(@shadow) {
  -webkit-box-shadow: @shadow;
     -moz-box-shadow: @shadow;
          box-shadow: @shadow;
}

// Sizing shortcuts
// -------------------------
.size(@height, @width) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size, @size);
}

// Center-align a block level element
// ----------------------------------
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Opacity
.opacity(@opacity) {
  opacity: @opacity / 100;
  filter: ~"alpha(opacity=@{opacity})";
}


/* =BASE STYLES
   ---------------------------------------------------------------------------------------------------- */
body {
  background: @base-background;
  color: @base-text;
  font-family: Arial, Helvetica, sans-serif;
  margin: 5em 2em;
}

h1, h2 {
  color: @base-text;
  letter-spacing: -.05em;
  text-align: center;
  text-shadow: 0 1px 2px fade(lighten(@base-background, 50%), 50%);
}
h1 {
  background: fade(@base-text, 10%);
  border-bottom: 1px solid fade(@base-background, 90%);
  outline: 1px solid fade(@base-text, 20%);
  margin: 0 auto;
  padding: .5em;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

h3, h4, h5 { color: @base-text; }

p {
  line-height: 1.4;
}

small, hr {
  display: block;
  margin: 1em 0;
  .opacity(50);
}

pre {
  background: fade(@black, 5%);
  font-size: 10px;
}

section {
  background: fade(@color-highlight, 20%);
  border: 1px solid fade(@color-highlight, 50%);
  .border-radius(4px);
  .box-shadow(0 1px 2px fade(@color-subtitles, 50%));
  display: block;
  float: left;
  min-height: 300px;
  overflow: auto;
  padding: 1em;
  position: relative;
  h2 {
    line-height: 1;
    margin: 0 0 1em 0;
    min-height: 2.5em;
    padding: 0;
    small {
      font-size: 70%;
      line-height: 1;
      margin: 0;
      padding: 0;
    }
  }
}