Skip to content

Instantly share code, notes, and snippets.

@apollwebservices

apollwebservices/breakpoint_variables.less

Last active August 29, 2016 19:42
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save apollwebservices/ee4cb9911b9d4ad2dd233d0e1481b921 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save apollwebservices/ee4cb9911b9d4ad2dd233d0e1481b921 to your computer and use it in GitHub Desktop.
Download ZIP
Easy Media Queries Shortcodes w/ Testing Tags
Raw
breakpoint_variables.less
// Breakpoint Variables
// ------------------------- 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)";
Raw
shortcode_usage.less
// Example Shortcode Usage
section {
margin: 3%;
@media @mobile {
display: block;
margin-top: 4em;
width: 85%;
}
@media @tablet {
width: 37%;
}
@media @desktop, @desktop-xl {
width: 40%;
}
}
Raw
tester_tags.less
// Testing Tags
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";
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment