A CodePen by Eric Rasch. Easy Media Queries Shortcodes (w/ LESS) + tester tag
<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 <section> 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>
// 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;
}
}
}